HTML5 a Wordpress Template de Wordpress

Hola, después de un largo tiempo sin poder retomar la serie de tutoriales, regreso para empezar la conversión de la plantilla HTML5 a wordpress. También puedes ver los tutoriales anteriores si te los perdiste.

• Parte 1: Diseñar template de Wordpress en Photoshop
• Parte 2: Template de Wordpress: pasar de PSD a HTML5

Dejaré para descargar los archivos correspondiente a esta parte del tutorial, estos archivos son los correspondientes a lo que tendrás cuando termine esta parte del tutorial, recomiendo descargar por si no entienden algún paso del tutorial, aquí tienen la posibilidad de ver el código en los archivos que dejo.

Descargar Archivos

Contenidos del Tutorial

Primera parte:

• Estructura básica de una plantilla para wordpress
• Hacer que wordpress reconozca nuestra plantilla HTML en el panel de temas
• Configurar el head con las funciones de wordpress.
• Cargar script de forma selectiva en el head de wordpress
• Funcionamiento básico y avanzado del loop de wordpress
• Consultas personalizadas a la base de datos con la función WP_Query
• Registrar y Crear menús personalizados en wordpress y desplegarlos en tu plantilla
• Crear un slider que pueda desplegar información de forma dinámica
• Como utilizar imágenes en miniaturas en wordpress

Próximamente publicaré las partes 2 y 3.

Archivos de un template de Wordpress

En la parte anterior del tutorial maquetamos la plantilla con html y css, ahora utilizaremos esa plantilla html para crear los archivos básicos de una plantillawordpress.

En nuestro caso no crearemos todos los archivos que tiene la plantilla por defecto de wordpress, ya que para su funcionamiento básico no es necesario, Nuestra plantilla estará constituida por los siguientes archivos:

• index.php: Mostrará todas las entradas del blog en la página principal, estará compuesto por el header, content, sidebar y el footer.
  
• header.php: Es el archivo donde agregaremos todos los meta datos de la web e incluiremos las hojas de estilos y los script necesarios.
  
• Footer.php:Este archivo contiene la información del copyright de la web, un menú y alguna otra información opcional, se suele agregar zonas para widget en este archivo, en nuestro caso no será necesario.
  
• sidebar.php: Este archivo contiene todo el contenido de la barra lateral, se puede agregar directamente esta información sin la necesidad de crear este archivo, pero tenerlo en un archivo independiente da la facilidad de editar la información en un solo lugar y que se refleje allí donde se incluya el archivo.
  
• single.php: Es el archivo que se muestra cuando se accede a una entrada concreta. Este archivo incluye la plantilla de comentarios, en nuestro caso incluirá la plantilla de comentarios, el sidebar con un widget que muestre los artículos relacionados por categoría y la navegación de los artículos
  
• page.php: WordPress tiene una funcionalidad que permite crear páginas que se comporten en gran medida como una página HTML estática, se utilizan generalmente para mostrar contenido estático en nuestro wordpress, la página por defecto muestra el contenido agregado en el panel de administración ala página y el sidebar, también tiene opción de activar o desactivar los comentarios.
  
• functions.php: Es uno de los archivos más importantes de un theme wordpress, en este archivo se definen una serie de funciones y se hacen llamadas a funciones propias de la Api de WordPress.
  
• style.css: Este es otro archivo muy importante, en el se definen los datos propios del tema en cuestión, Author, descripción, y otras informaciones que se visualizan en el gestor de themes en el panel de administración dewordpress.
  
• 404.php: Cuando wordpress no puede encontrar los datos que busca, presenta este archivo. Por defecto no hay nada en esta página más que un breve comentario que indica al usuario el error (Error 404 – Not Found).
  
• search.php: Este archivo muestra los resultados de búsqueda en el blog.
  
• searchform.php: Aunque wordpress tiene una función personalizada que te devuelve el formulario de búsqueda, utilizaremos este archivo para sobre escribir la salida html de esa función, de esta forma podemos maquetar el formulario de búsqueda a nuestro gusto o necesidad.

Estos son los archivos que utilizaremos para nuestra plantilla. WordPress funciona perfectamente con los archivos index.php, single.php, function.php y style.css, sólo que de esa forma te brinda una funcionalidad muy limitada.

Si vas a seguir este tutorial deberías de instalar wordpress en local, para que vayas creando la plantilla por partes según pasa el tutorial.

Estructura de archivos básicos para nuestro template de Wordpress

Para la estructura de los archivos utilizaremos la creada en el tutorial anterior y lo copiaremos dentro de la carpeta wp_content/themes, de esta forma ya tenemos los archivos base de nuestra plantilla.

Para empezar la creación de nuestra plantilla wordpress, renombrar el archivoindex.html a index.php, dentro de esa misma carpeta crea otro archivo llamadofunctions.php, con esto ya estamos preparados para empezar a dinamizar nuestro archivo index.php.

Para que Wordpress reconozca nuestros archivos como una plantilla en el panel de administración debemos editar el archivo style.css para agregar algunos datos requeridos por el sistema de wordpress para reconocer nuestra plantilla. Abre el archivo style.css y agrega los siguientes datos.

Código :

/*
Theme Name: Miusic Theme
Theme URI: http://web-desings.com/miusicTheme
Description: Miusic Theme es una plantilla gratuita para wordpress, utilizando los archivos mínimos para que funcione.
Author: Jordano Polanco
Version: 1.0
License: GNU General Public License
License URI: Puede utilizarlo tanto en lo personal como comercialmente, es libre de editarlo a su gusto sin necesidad de referenciar al autor.
License: GNU General Public License
License URI: license.txt
Tags: custom-menu, full-width-template, right-sidebar
*/

Con esto entramos a nuestro panel de administración y en el apartado Apariencia –> Temas, podemos ver que wordpress reconoce nuestra plantilla, sólo que no tiene ninguna imagen en miniatura, pueden copiar la que dejo en los archivos base del tutorial o crear la suya propia.

Si visualizamos la web en el navegador podemos ver que se puede visualizar la estructura html pero sin ningún tipo de estilo aplicado, esto se debe a que debemos cambiar la ruta relativa que utilizábamos anteriormente en nuestro diseño estático y debemos agregar la función que nos brinda wordpress para llamar la hoja de estilos, esto lo haremos en el siguiente paso, con lo cual empecemos a agregar las distintas etiquetas de plantilla que nos brinda wordpress.

Antes de empezar les dejo esta imagen donde pueden encontrar casi todas las etiquetas de plantillas de wordpress organizadas por categorías, pueden tenerla a mano e ir guiándose de ella, también recomendaré utilizar un editor de código que les ayude con referencias al código de wordpress y evitarán problemas de escritura, yo utilizo DreamWeaver y Eclipse, los dos tienen ayuda para la escritura del código en wordpress.

Ahora Trabajaremos dinamizando todo el archivoindex.php, iremos agregando etiquetas de plantilla en orden descendente desde arriba hacia abajo hasta tener todo creado, Empecemos!!!.

Dinamizar información en el head

En nuestro archivo index.php en la parte del head cambiaremos el código estático por el ya dinámico, mayormente utilizaremos la función bloginfo(), les recomiendo echarle un vistazo en el code de wordpress.

En el archivo index.php borra todo el código desde el cierre de la etiqueta headhasta el inicio del documento (DOCTYPE) Como muestra la siguiente imagen.

Borra todo el código seleccionado anteriormente y sustitúyelo por el siguiente:

Código :

php language_attributes(); ?>>

 
   
   php bloginfo( 'charset' ); //cambiamos  por su   ?>" />
   
 
   
 
   
    ); ?>' rel="stylesheet" />
   
 
   
   php bloginfo( 'pingback_url' ); ?>" />
   php bloginfo( 'name' ); ?>" href="php bloginfo( 'rss2_url' ); ?>" />
   
 
   php /* Para compatibilizar HTML5 con navegadores antiguos */ ?>
   
 
   php
        /*Siempre agrege wp_head antes del cierre de  de su thema,
        * si no lo agrega puede que muchos plugins no funcionen ya que
        * lo utilizan este gancho (hook)para agregar elementos al head.
        */
        wp_head();
   ?>

El código está comentado y creo que se puede entender perfectamente para que sirve cada trozo de código.

Las funciones utilizadas fueron las siguientes:

• language_attributes(): Muestra el atributo de idioma para la etiqueta HTML
• bloginfo( 'charset' ): Muestra el conjunto de caracteres usado en tu blog,(EJ: UTF-
  
• Para el título podemos usar bloginfo('name') que nos devuelve el nombre que hemos puesto en el panel de administración, actualmente como se toma tan en serio el tema del SEO ayudamos un poco a nuestro blog colocando untitulo dinámico, que cambie dependiendo de la página que se encuentre el usuario. Esto lo logramos con el código que colocamos entre las etiquetastitle anteriormente.
  
• bloginfo( 'stylesheet_url' ): Esta función nos devuelve la url del archivostyle.css de nuestra plantilla. (stylesheet_url =http://example/home/wp/wp-content/themes/theme/style.css).
  
• bloginfo( 'rss2_url' ):Devuelve la URL del feed RSS 2.0 (/feed)
  
• wp_head(): esta función no puede faltar en tu head ya que muchos plugins la utilizan como referencia para iniciarse.

Seguramente han notado que los script no aparecen en el head, los he eliminado del head para agregarlo desde el archivo functions.php, ¿por qué?Sencillamente evitar que se carguen todos en todas las páginas sin necesidad y además de paso evitar tantas peticiones HTTP solo generando las necesarias en cada caso.

Por ejemplo: si no mostraremos el slider en todas las páginas, ¿para qué cargar en el head el archivo jquery.tinycarousel.min.js, para eso crearemos una función en la que se cargue el script necesario en cada caso.

Agregar script de forma selectiva en el head de wordpress

Para agregar de forma automática los scripts necesarios a nuestro head, wordpress cuenta con una acción wp_register_script(), aprovechando esto, crearemos una función y haremos que se ejecute con wp_enqueue_scripts(), puedes obtener más información sobre esta acción en el code de wordpress, en nuestro caso sólo agregaremos de forma selectiva el script necesario para los comentarios.

Abre el archivo functions.php y agrega el siguiente código:

Código :

function wd_load_script() {
    wp_deregister_script( 'jquery' );
    wp_register_script( 'jquery', 'http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js');
    wp_register_script('tinycarousel', get_template_directory_uri() . '/js/jquery.tinycarousel.min.js', 'jquery');
    wp_register_script('custom', get_template_directory_uri() . '/js/custom.js', 'jquery');
 
    wp_enqueue_script( 'jquery' );
    wp_enqueue_script( 'tinycarousel' );
    wp_enqueue_script( 'custom' );
}    
 
add_action('wp_enqueue_scripts', 'wd_load_script');

¿Como Funciona el código anterior?

Creamos la función wd_load_script(), dentro de esta función registramos y desactivamos los script utilizando las funciones wp_deregister_script() ywp_register_script respectivamente, luego se llama con la funciónwp_enqueue_script() los script registrados con la función wp_register_script, esta función sólo se utiliza cuando utilizamos un script que no sea registrado por defecto en wordpress, aquí puedes ver una lista de los script registrados por defecto en wordpress.

Y por último utilizando add_action('wp_enqueue_scripts', 'wd_load_script');, decimos a wordpress que, cuando inicien los scripts, se ejecute la funciónwd_load_script que es donde cargamos los escript que necesitamos.

La función add_action() en wordpress son muy importantes especialmente para los plugins.)

En nuestro caso desactivamos la carga por defecto de jQuery y utilizamos en su lugar la versión alojada en la librería de API de google.

Script para los comentarios

Para los comentarios, wordpress utiliza un script que es totalmente innecesario cargarlo en la página principal por ejemplo, por esta razón crearemos una función la cual solo cargue este script en las paginas single.php y page.php. El código utilizado es el siguiente.

Código :

// Cargar scripts para comentarios solo en single.php y page.php
function wd_single_scripts() {
   if(is_singular() || is_page()){
   wp_enqueue_script( 'comment-reply' ); // Carga el javascript necesario para los comentarios anidados
   }
}
add_action('wp_print_scripts', 'wd_single_scripts');

En el código anterior simplemente utilizamos una función la cual contiene un condicional if que pregunta si estamos en single.php o en page.php. Si utilizáramos los comentarios en otras páginas pues deberíamos agregarlas a esta lista.

Luego tenemos la función wp_enqueue_script que llama nuestro script, en este caso comment-reply que es uno de los que registra wordpres por defecto con lo cual no hace falta registrarlo, y por último agregamos la accion que activará nuestra función, add_action('wp_print_scripts', 'wd_single_scripts');

Puedes probar que se están cargando correctamente los script, previsualizando la web y mirando si existen en el código fuente.

Con esto concluimos con nuestro head, ya tenemos todos los datos que fluyen dinámicamente, la configuración de lenguaje del documento, la codificación del documento, el título del blog, la hoja de estilos y el canal RSS, sabiendo que debes configurar el blog desde tu panel de administración y colocar los datos pertinentes en la descripción, el nombre y el juego de caracteres que utilizarás.

función body_class();

Ya que terminamos con el head, empezamos con el BODY, lo primero que haremos es agregar a la etiqueta BODY la función body_class();, como misión principal de agregar una clase a la etiqueta BODY dependiendo de la página en la que se encuentre el usuario, esto es de bastante utilidad cuando tenemos un blog temático en el que hay distintas categorías y cada categoría puede tomar un estilo diferente.

Código :

php body_class(); ?>>

Crear menú Principal del blog

Para el menú principal del blog utilizaremos los menús personalizados de wordpress, una característica agregada en la versión 3.0.

Si entra a tu panel de Administración –> Apariencia Puedes ver como nuestra plantilla no tiene soporte para menús personalizados.

Para agregar nuestro menú personalizado, lo primero que debemos hacer es dar a nuestra plantilla soporte para estos menús, para ello utilizamos la funciónregister_nav_menu(), agrega el siguiente código en el archivo functions.php

Código :

/*------------------------------------------------------------*/
/*   Registrar Menus WP3.0+
/*------------------------------------------------------------*/
   if ( function_exists( 'register_nav_menus' ) )
   {
      register_nav_menus(
        array(
              'MenuPrincipal' => __( 'Menu Principal' ),
             )
      );
   }

Con el código anterior además de agregar soporte para menú personalizado, aprovechamos la función y registramos el menú principal del blog, ahora si compruebas en el panel de administración nuestra plantilla te da la opción de entrar en la configuración de menús personalizados.

Lo siguiente después de haber dado soporte y registrado el menú es habilitar un área en la plantilla donde se mostrará este menú, lo haremos con la funciónwp_nav_menu(), esta función proporciona un lugar donde los menús construidos en el panel de control se pueden colocar de forma predeterminada.

En el archivo index.php eliminamos la lista desordenada que representa el menú estático de nuestra plantilla.

Sustituimos la lista por el siguiente código que hace la llamada del menú personalizado que registramos en el archivo functions.php

Código :

php wp_nav_menu( 
     array(
          'theme_location' => 'MenuPrincipal', 
          'container' => 'false' 
          )); 
?>

Utilizamos la función wp_nav_menu esta función tiene bastantes parámetros, de los cuales solo utilizamos los siguientes:

• theme_location' => 'MenuPrincipal': (opcional) Es la ubicación donde podremos agregar nuestro menú desde el panel de administración.
• 'container' => ' ': (Opcional)Pasando este parámetro evitamos que la UL sea envuelta con otras etiquetas, se permiten etiquetas nav y div, utilizamos falsepara que no tenga ningún envolvente.

Ya tenemos soporte para menús personalizados y tenemos un área definida para mostrar el menú en nuestra plantilla. El siguiente paso será crear las categorías que queremos mostrar en el menú y luego crearlo desde el panel deadministración –> Apariencia –> Menú.

Crear categorías del Menú

Vamos a crear las categorías o páginas que queremos mostrar en el menú, en nuestro caso sólo agregaremos categorías, vamos al panel de administración –> Entradas –> categorías, rellenamos los campos necesarios y creamos las siguientes categorías:

• Hip hop, Pop, Rap, Rock 

Crear el menú en el panel de administración

Tenemos los items del menú, ahora crearemos el menú y le asignaremos la ubicación registrada anteriormente, para ello vamos al panel de administración–> Apariencia –> Menús, en el panel de la derecha agregamos el nombre del menú y pulsamos guardar menú, luego en el panel de la izquierda agregamos la ubicación Menú Principal y pulsamos guardar.

Ya tenemos el menú creado y en su posición, ahora solo nos queda agregar las categorías que creamos antes, para ellos en el panel categorías de la izquierdapulsamos Ver todo si no salen todas las categorías, la seleccionamos todas y pulsamos en añadir al menú.

Agregaremos un enlace personalizado para enlazar al index.php y que nos lleve a la página principal del blog, para ellos en la columna izquierda el bloqueEnlaces personalizados, en el campo URL agregamos index.php. En el campoEtiqueta agregamos Home y pulsamos en Añadir menú, este ítem lo colocamos encima de los demás.

Con esto ya está terminado el menú, si previsualizas el blog en el navegador puedes ver el menú terminado, siempre puedes regresar y cambiar el orden, eliminar y agregar ítems al menú, es lo interesante que tiene esta forma de utilizar el menú.

Configurar el slider de imágenes

En esta parte hay varias opciones y detalles que considerar. Para el slider podemos dejar que aparezcan todas las entradas del blog, en nuestro caso configuraremos el slider para una categoría en específico, se llamará Anuncios.

¿Por qué una categoría para el slider? Esto es opcional, yo decidí programarlo así porque me interesa que solo aparezcan imágenes de anuncios en este slider.

Teniendo todo esto en cuenta empecemos!!!

Para la imagen del slider aprovecharemos la función post-thumbnails();, Esta función nos da la facilidad de agregar soporte a imágenes de miniatura, además tiene la capacidad de generar imágenes de varios tamaño, para agregar diferentes tamaño de imágenes se utiliza la función add_image_size(); pasando los siguientes parámetros.

Código :

add_image_size(
     'video-thumbnail',//Nombre de la miniatura, utilizado para llamarla desde la plantilla.
     66,//Ancho de la imagen.
     56, // Alto de la imagen.
     true // Activar o desactivar el recortado de la imagen.
               );

Bien para agregar soporte de imágenes en miniaturas y agregar los distintos tamaños que utilizaremos en la plantilla, agregaremos el siguiente código en el archivo functions.php

Código :

/*-----------------------------------------------------------*/
/*   Configurar Imágenes Thumbnails WP2.9+
/*-----------------------------------------------------------*/
if ( function_exists( 'add_theme_support' ) ) {
   add_theme_support( 'post-thumbnails' );//Agrega soporte
   add_image_size( 'video-thumbnail', 66, 56, true ); // Videos list thumbnails
   add_image_size( 'index-thumbnail', 170, 160, true ); // Blog thumbnail
   add_image_size( 'slider-thumbnail', 400, 190, true ); // Slider thumbnail
}

Al agregar esta función, puede entrar a editar o agregar un post y puede comprobar que existe un nuevo recuadro en el cual puede seleccionar la miniatura para ese post.

Bien, ya que tenemos las imágenes configuradas, creamos la categoría Anuncios y agregamos al menos 5 posts donde estos tengan una imagen destacada con un tamaño mínimo de 400px x 190px, pueden general imágenes en esta web o utilizar las que dejo en los archivos base.

De esta forma agregamos al menos 3 entradas más, una vez tenemos las entradas listas podemos empezar a dinamizar el código del slider con php y las funciones de wordpress.

Necesitamos llamar las entradas de la categoría anuncios, y que sólo se muestren esos artículos en el slider. Wordpress tiene una gran flexibilidad para crear consultas personalizadas un poco más avanzadas que el simple loop, para este caso utilizaremos la función WP_Query(), y llamaremos 5 post de la categoría anuncios y mostraremos sólo la imagen de este artículo, empecemos.

Justo encima del div id="slider-wrapper" agrega el siguiente código:

Código :

php 
   $query = new WP_Query();
   $query->query('posts_per_page=5&cat=9');
   $post_count = $query->post_count;
?>

En el código anterior almacenamos una nueva consulta (WP_Query) en la variable $query, además agregamos dos condiciones a esa consulta: que solo se muestren 5 post: (posts_per_page=5) y que los posts correspondan a la categoría 9: (cat=9), más adelante a esta categoría tendremos que excluirla de la consulta que mostrará los post del blog porque esta categoría solo mostrará sus post en el slider.

Con esta consulta ya tenemos acceso a las imágenes de todos los post de la categoría ID=9. Ahora utilizaremos una lista desordenada (UL) para listar las imágenes en el slider utilizando la función the_post_thumbnail(); y pasaremos como parámetro el nombre que registramos en el archivo fuenctions.php para las imágenes del slider, para ello eliminamos las etiquetas LI que están dentro deul class="overview" y agregamos el siguiente código:

Código :

php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
   

      php the_permalink();?>">php the_post_thumbnail('slider-thumbnail') ?>
   

php endwhile; ?>

El código anterior realiza la consulta a la base de datos y con el bucle whilelistamos las imágenes que se muestran en el slider. La imagen está dentro de un enlace que con la función the_permalink(); enlaza a la vista completa del post, de esta forma ya obtenemos la cantidad de imágenes configurada al principio con el parámetro posts_per_page=5.

Para la paginación de las imágenes utilizaremos la variable $post_count, en la que está almacenada la cantidad de posts que tenemos, y aprovecharemos esta variable en conjunto con el bucle for para listar la cantidad de círculos de paginación así como post hayan guardado en esta variable.

Eliminamos todas las etiquetas li que estén dentro de la etiqueta ul class="pager" y agregamos el siguiente código:

Código :

php for($i = 0; $i < $post_count; $i++ ){
   echo'
.$i.'">'.$i.'
';}?>

Lo que hace el código anterior es: con el bucle for comparar el valor de la variable $post_count y muestra en pantalla la cantidad de etiquetas li que sean necesarias hasta que se cumpla la condición $i < $post_count del bucle, de esta forma obtenemos la paginación dinámicamente dependiendo del número de post que se vayan a mostrar en el slider.

Para concluir cerramos el condicional if, colocamos endif justo antes de del cierre del div id="slider-wrapper".

Si ejecutas el blog en el navegador podrás ver que el slider ya funciona dinámicamente tomando las imágenes de la categoría Anuncios, este método tiene sus inconveniente, esto no deberíamos entregárselo así a un cliente ya que el cliente posiblemente no tenga ni idea de códigos, con lo cual si un día le da con mostrar menos imágenes en el slider, el cliente te llamará. Lo más profesional sería agregar un simple panel de opciones para que éste pueda controlar lo que muestra en el slider de forma fácil, pero eso ya se sale del objetivo de este tutorial.

Para finalizar agregamos el script del plugin tinycarousel en el head del archivoindex.php, En este fragmento de código es donde se controla la configuración del slider, puedes agregar o quitar dependiendo el efecto que desees, para más información visita la página del plugins.

Código :

<script type="text/javascript">// 
$(document).ready(function()
   {
   //Slider Show
   var pager = true;//ESTABLECE A FALSE PARA DESACTIVAR LA PAGINACIÓN.
 
   var oSlider = $('#slider-wrapper');
   if(oSlider.length > 0)
   {
      oSlider.tinycarousel(
   {    
      pager: true, //paginación
      interval: true, //Auto Play
      duration: 300 //retardo de pase de imagen
   });
      }
 });
// ]]>

Configurando el logo de la web.

Para el logo de la web no tenemos mucho que hacer, más que agregar el enlace a la página principal del blog, lo aremos con la función home_url();, también agregaremos el nombre de la web y el valor de la etiqueta title del enlace de forma dinámica, para ellos agregaremos el siguiente código dentro de la etiquetah1 id="logo".

Código :

 id="logo">
   php echo home_url(); ?>" 
      title="php bloginfo('description')?>">
      php bloginfo('name');?>
   

El botón que está debajo del logo lo dejo que decidan ustedes que poner en ese espacio, solo tienen que abrir el psd de la plantilla y agregar el texto que deseen y sustituir la imagen del botón, luego agregar el enlace de una categoría, post o página a la que quiera enlazar.

El loop de Wordpress

Antes de empezar a obtener dinámicamente los artículos del blog en la parte del contenido de la web, trataré de explicar una de las partes más importantes de wordpress, el LOOP, a continuación tratare de explicar su funcionamiento básico.

El loop es el encargado de mostrar el contenido en el blog, se utiliza casi para todas las llamadas de contenido de wordpress, por eso su enorme importancia en saber cómo funciona.

Estructura básica del loop

Código :

php if (have_posts()) : ?>;
php while (have_posts()) : the_post(); ?>
 
/* 1- Lo que quieres que se muestre en  el loop */
 
php endwhile; //finaliza el bucle ?>
 
/*2- Lo que se muestra cuando acaba el loop */
 
php else :?>
 
/*3- Se muestra Si no hay nada que mostrar*/
 
php endif; ?>

¿Cómo funciona? if ( (have_posts() ) Si hay posts disponibles en la base de datos, while( (have_posts() ) mientras haya post, muéstrame el post the_post();, si hay post se ejecuta lo definido en la parte 1. Cuando se acaba elbucle while se muestra lo que salga en la parte 2. Si no se encuentra ningún post se muestra la parte 3.

Con este bucle conseguimos invocar todo lo contenido en la tabla wp_posts de la Base de Datos de nuestro blog y con ayuda de las etiquetas de plantillaspodemos desplegar la información que necesitemos de cada post que es lo que haremos a continuación.

Desplegar dinámicamente los posts

Después de esta breve explicación, empezamos a agregar etiquetas de plantillas para dinamizar la salida de los post del blog, para ello en el archivo index.phpbusca la etiqueta section id="content" role="main" y justo debajo de esta línea de código agregamos el inicio del loop, como muestro a continuación:

Código :

php query_posts('&cat=-9'); //categoria del slider ?>
php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

En el código anterior agregamos al loop la función query_posts();.

query_posts () Es la forma más fácil de modificar la consulta predeterminada que utiliza WordPress para mostrar mensajes. Utilicé query_posts () para mostrar mensajes diferentes a los que normalmente aparecen en una URL específica.

En nuestro caso la utilizamos para evitar que se desplieguen los post de la categoría con ID=9, recomiendo leer en el code de wordpress esta función seguro que les ayudará bastante.

Para cerrar el bucle agregaremos endwhile; justo debajo del cierre de la etiqueta article, que es donde finaliza el post.

Si no hay posts para mostrar agregaremos un mensaje de error, con lo cual agregamos else: después del cierre del bucle y para finalizar agregamos endif;después del código de error que agreguemos.

Ya con el bucle cargado empezaremos a dar dinamismo a las todas las partes que componen el post del blog, que en estos momento solo tenemos uno y en html, si está trabajando en algún editor de código no se asuste si muestra algún error ya que es normal porque aun no hemos cerrado el bucle while ni la condicional if, así que siga trabajando que más adelante cerraremos todo.

Agregando etiquetas de plantilla de wordpress

Titulo del post

Empezamos a sustituir las partes del post por las etiquetas de plantillas de wordpress, primero trabajaremos con el título, buscamos la etiqueta h2 y sustituimos el enlace por el siguiente código:

Código :

php the_permalink(); ?>">php the_title(); ?>

En el código anterior utilizamos las etiquetas de plantilla the_permalink() ythe_title();, the_permalink(); devuelve el enlace de la entrada del post ythe_title(); devuelve el título del post, bastante sencillo, ¿ verdad?.

Meta datos del post

Continuamos con los meta datos, en nuestro caso el autor, la categoría y la fecha del post, para obtener esa información utilizaremos las siguientes funciones:

• the_date(); devuelve la fecha de publicación del post.
• the_category( ' ' ); devuelve la categoría/s del post.
• the_author(); Devuelve el nombre del autor del post.

Dentro de la etiqueta div class=”metadatos” agregamos las etiquetas anteriormente mencionadas y el código final será el siguiente:

Código :

 class="MetaDatos">
    class="fecha">Jun 30th, 2010
   Categoría: href="#">Notícias Musciales
   Autor:  href="#">JordanoPolanco

Hay otras funciones interesantes relacionadas con las mencionadas anteriormente pero no quiero enrollarme mucho con esto ya que es de lo más sencillo.

Imagen en miniatura o post thumbnail

Para la imagen del post utilizaremos la función the_post_thumbnail();, crearé una estructura condicional el cual coloque una imagen por defecto si no existe imagen destacada en el post, el código será el siguiente:

Código :

php if ( has_post_thumbnail() ) {?>
   

      php the_permalink();?>">php the_post_thumbnail('index-thumbnail');?>
   
php }else{ ?>
   

      php the_permalink();?>">
         php bloginfo('template_url');?>/images/imageDefaul.png" alt="php the_title();?>"   />
      
      
php }?>

Lo que hacemos es preguntar si hay imagen thumbnail, si no hay imagen thumbnail ejecutamos el código que agrega una imagen por defecto, si hayimagen thumbnail la muestra en pantalla.

Para llamar la imagen del post utilizamos la función the_post_thumbnail('index-thumbnail'); pasándole como parámetro el nombre de la imagen registrada en el archivo functions.php.

Contenido del post

Para el contenido del post utilizaremos la función the_excerpt(); la cual nos devuelve un fragmento del post, tiene la opción de escribir el fragmento de código que quiere que se muestre al escribir el post, si no configura nada, wordpress toma por defecto un extracto de las primeras 55 palabras del post.

Puede también utilizar la función the_content(); lo único es que debe siempre agregar el comentario ! - More - en la parte del post donde quiere que se corte el extracto para mostrar, es más productivo utilizar la función the_excerpt(); para mostrar extractos.

Botón leer más y número de comentarios

En la parte de abajo de cada post colocaremos el número de comentarios de la entrada y un botón leer más, para ello debajo del final del div entry-contentcolocamos el siguiente código:

Código :

 class="metaBottom">
    php comments_popup_link('0 Comentario »', '1 Comentario »', '% Comentarios »'); ?>
    php the_permalink();?>" title="php the_title(); ?>" class="leermas">Seguir Leyendo

En el código anterior creamos un div y dentro de este div colocamos el botón leer más y el número de comentarios, para el número de comentario utilizamos la función comments_popup_link(), esta función nos devuelve el numero de comentarios que contiene la entrada, además de enlazar el área de los comentarios del post.

Para el botón leer más, simplemente utilizamos un enlace y agregamos en el atributo href="" la función the_permalink(), esta función nos devuelve la url del post y entramos en su vista completa.

Para dar estilo tanto al botón como a los comentarios agregaremos el siguiente código css en nuestro archivo style.css.

Código :

.posts div.metaBottom .leermas {
    float: right;
    margin-left: 120px;
}
.posts div.metaBottom {   float: right;}
.posts div.metaBottom .leermas{ 
   float: right;
   margin-left: 120px;
   }
 
/*BOTÓN LEER MÁS*/
.leermas{
   display: inline-block;
   padding: 5px 10px;
   border-radius: 5px;
   border: solid 1px #558300;
   text-shadow: none !important;
   color: #fff !important;
   background: #6aa103;
   box-shadow:none !important;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.leermas:hover{
   text-decoration: none;
   color: red;
   -moz-box-shadow: 0px 0px 0px 1px #77b800 inset !important;
   text-shadow: 0px 0px 3px #FFFFFF !important;
   cursor:pointer;
}

Con esto concluimos con el botón y el número de comentarios, nuestras entradas quedarían así:

Para concluir con el loop, cerramos el bucle while, para ello después del cierre de la etiqueta article class="post" colocamos el siguiente código:

Código :

php endwhile; else:  ?>

Ademas de cerrar el bucle agregamos la sentencia else, de esta forma se ejecutará el código que agreguemos a continuación si no hay ningún post que mostrar en la base de datos, con lo cual después del código anterior agregaremos lo siguiente.

Código :

 class="posts">
   


php _e('Ha ocurrido un error.'); ?>

   php _e('Disculpe, no existen post relacionados con su criterio de busqueda'); ?>
   php get_search_form();?>

php endif; ?>

El código resultante del cierre del loop será el siguiente:

Código :

php endwhile; else:  ?>
 
    class="posts">
      


php _e('Ha ocurrido un error.'); ?>

      php _e('Disculpe, no existen post relacionados con su criterio de busqueda'); ?>
      php get_search_form();?>
   
php endif; ?>

Por si te ocurre cualquier error te dejo el código completo de la dinamización del contenido del blog.

Código :

 id="content" role="main">
php query_posts('&cat=-9'); //categoria del slider ?>
php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
 
   
    class="posts">
 
      
       class="entry-header">
 
          class="entry-titulo">
            

php the_permalink(); ?>">php the_title(); ?>

         
 
          class="MetaDatos">
             class="fecha">php the_date();?>
            Categoría:php the_category( ' ,' );?>
            Autor: php the_author(); ?>
         
 
      
      
 
      


 
      
      php if ( has_post_thumbnail() ) {?>
      

         php the_permalink();?>">php the_post_thumbnail('index-thumbnail');?>
      
      php }else{ ?>
      

         php the_permalink();?>">
            php bloginfo('template_url');?>/images/imageDefaul.png" alt="php the_title();?>"   />
         
         
      php }?>
      
 
      
       class="entry-content">
         php the_excerpt();?>                     
      
      
 
       class="metaBottom">
         php comments_popup_link('0 Comentario »', '1 Comentario »', '% Comentarios »'); ?>
         php the_permalink();?>" title="php the_title(); ?>" class="leermas">Seguir Leyendo
      
 
   
   
 
   php endwhile; else:  ?>
 
    class="posts">
      


php _e('Ha ocurrido un error.'); ?>

      php _e('Disculpe, no existen post relacionados con su criterio de busqueda'); ?>
      php get_search_form();?>
   
   php endif; ?>


 

Footer del blog

Para el footer tendremos poco trabajo, agregaremos el año del copyRight con la función the_time(), a la cual le pasamos como parámetro la “Y” esta nos devuelve el año actual, con esto mantenemos el año del copyRight actualizado, si quieres ver los parámetros posibles a la función the_time() puedes ver el manual de php en español.

CopyRight

Dentro del párrafo Agregamos la función the_time, el código resultante es el siguiente.

Código :

 class="copy">©php the_time('Y');?> Music.com. All rights reserved.

Menú Footer

Para el menú del footer debemos ir al archivo functions.php y registrarlo del mismo modo que el menú principal nuestro menú para el footer, para ellos abrimos el archivo function.php y donde registramos el menú principal, el código resultante será el siguiente:

Código :

if ( function_exists( 'register_nav_menus' ) ) { //To add support for navigation menus
   register_nav_menus(
      array(
        'MenuPrincipal' => __( 'Menu Principal' ),
        'MenuFooter' =>__('Munu Footer')
      )
   );
}

Una vez registrado nuestro menú debemos sustituir la lista desordenada del footer por la función wp_nav_menu para llamar el menú que registramos anteriormente.

Si entramos en el panel de administración –> Apariencia –> Menú, podemos ver una nueva área de menú llamada Footer Menú.

El siguiente paso es crear las páginas, categorías o post que quieras mostrar en este menú, este proceso no lo explicaré ya que cuando creamos el menú principal explicamos todo este proceso.

Con este paso terminamos la primera parte del tutorial, espero que se haya entendido todo, si tienen alguna duda no duden en dejar sus comentarios y trataré de ayudarlos en todo lo que pueda.

Conclusión

Antes que todo pedir disculpas por la tardanza de esta parte del tutorial, lamentablemente no he podido hacerlo antes, incluso ahora he sacado un tiempo de donde no tengo, pero lo prometido es deuda  .

En esta parte del tutorial solo creamos el index del blog, ya nuestros post salen de forma dinámica de la base de datos, ya tenemos nuestro slider dinámico que toma los post agregados en una categoría específica.

Próximos contenidos

En la siguiente parte del tutorial trabajaremos con el archivo single.php que es donde mostraremos el post completo y agregaremos los comentarios, aprenderemos a modificar la salida predeterminada y crearemos una estructura personalizada adaptada a nuestro diseño.

Recomiendo seguir la siguiente parte que es una de las más interesantes y difícil de encontrar en la red, les prometo que aprenderán cosas nuevas.

Segunda parte:

• Dividir la estructura del archivo index.php en: Header.php, index.php, footer.php y sidebar.php
• Configuración del archivo single.php
• Configurar los comentarios de cada post
• Agregar Navegación de los post desde el archivo single.php

Tercera parte:

• Registrar posición de los widget para el sidebar
• Utilizar campos personalizados de wordpress.
• Crear el widget próximos conciertos utilizando campos personalizados
• Crear widget próximos conciertos
• Crear Widget últimos vídeos
• Crear formulario de contacto con el plugins contactform

fuente:

http://www.cristalab.com/tutoriales/template-de-wordpress-pasar-html5-a-wordpress-c104118l/