Interadictos
Para los que no pueden separarse de internet
Entradas etiquetadas con tema
WordPress 3.x para desarrolladores: Temas y plantillas, sidebar.php y sidebar-footer.php
0hace 11 años
Ya hemos creado casi todas las partes importantes que necesita la página principal, pero aun nos quedan algunas cosas más por crear.
SIDEBAR.PHP
Como expliqué en el post anterior, nuestro tema hace dos llamadas a get_sidebar(). La primera se realiza en index.php, y la segunda en footer.php pero pasando a la función un argumento, en este caso ‘footer‘. Este argumento permite a WordPress buscar una plantilla diferente para sidebar que no sea sidebar.php, en nuestro caso necesitará sidebar-footer.php. Si WordPress no encontrase esta plantilla, cargaría la plantilla principal para el sidebar: sidebar.php.
Creamos el archivo sidebar.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<div id="secondary" class="widget-area" role="complementary"> <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?> <aside id="archives" class="widget"> <h3 class="widget-title"><?php _e( 'Archives', 'newtheme' ); ?></h3> <ul> <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?> </ul> </aside> <aside id="meta" class="widget"> <h3 class="widget-title"><?php _e( 'Meta', 'newtheme' ); ?></h3> <ul> <?php wp_register(); ?> <li><?php wp_loginout(); ?></li> <?php wp_meta(); ?> </ul> </aside> <?php endif; // end sidebar widget area ?> </div><!-- #secondary .widget-area -->
[/codesyntax]
El código es bastante sencillo, abrimos una nueva capa que contendrá los widgets que no sean de la sidebar sidebar-1. Como puedes ver hay un condicional que hace esto mismo, utilizando la función dynamic_sidebar( ‘sidebar-1’ ). Esta función comprueba si hay widgets o no en la sidebar que le indiquemos. Según el código, si no hay widgets añadimos dos a la columna. El primero está dentro de la etiqueta aside. Esta etiqueta pertenece a HTML5 y se utiliza para crear bloques de contenido tangencial, dicho de otra forma, sirve para crear bloques con contenido que tengan alguna relación con el contenido de la página (una cita del texto, publicidad, una imagen, etc.). Seguimos.
Dentro del bloque aside encontramos el título del bloque, en este caso «Archives» y una lista que se genera con la función wp_get_archives(). Esta función crea un listado de links, en nuestro caso mostrará los meses y el año en los que haya algún post publicado. Para más información sobre este método, lo mejor es que acudas a la fuente http://codex.wordpress.org/Function_Reference/wp_get_archives, ahí te explican todas las opciones que tienes para generar ese listado.
El segundo bloque aside nos muestra una serie de vínculos para registrarnos (siempre que el registro de usuarios esté activo) y/o identificarnos. Por último tenemos la función wp_meta() que permitirá a otros plugins añadir más vínculos a la lista.
SIDEBAR-FOOTER.PHP
Ahora vamos a crear los sidebars del pie de la página, para ello creamos el archivo sidebar-footer.php
WordPress nos permite crear plantillas para partes concretas del tema, como por ejemplo estos sidebar que vamos a crear, para ello existe una jerarquía que WordPress siempre respeta, de tal manera que si la plantilla que se le pide no existe busca la siguiente en esa jerarquía.
Aquí teneis un esquema con la jerarquía que sigue WordPress para el contenido: http://codex.wordpress.org/images/1/18/Template_Hierarchy.png
Dicho esto, vamos a crear la plantilla. Creamos el archivo sidebar-footer.php y añadimos el siguiente código:
[codesyntax lang=»php»]
<?php /* The footer widget area is triggered if any of the areas * have widgets. So let's check that first. * * If none of the sidebars have widgets, then let's bail early. */ if ( ! is_active_sidebar( 'sidebar-3' ) && ! is_active_sidebar( 'sidebar-4' ) && ! is_active_sidebar( 'sidebar-5' ) ) return; // If we get this far, we have widgets. Let do this. ?> <div id="supplementary" <?php newtheme_footer_sidebar_class(); ?>> <?php if ( is_active_sidebar( 'sidebar-3' ) ) : ?> <div id="first" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-3' ); ?> </div><!-- #first .widget-area --> <?php endif; ?> <?php if ( is_active_sidebar( 'sidebar-4' ) ) : ?> <div id="second" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-4' ); ?> </div><!-- #second .widget-area --> <?php endif; ?> <?php if ( is_active_sidebar( 'sidebar-5' ) ) : ?> <div id="third" class="widget-area" role="complementary"> <?php dynamic_sidebar( 'sidebar-5' ); ?> </div><!-- #third .widget-area --> <?php endif; ?> </div><!-- #supplementary -->
[/codesyntax]
En primer lugar se comprueba si alguno de los tres sidebars está activo, sino se devuelve un return para dar por finalizado el script y que no se genere código html.
En el caso de que alguno, varios o todos los sidebars estén activos se crean sus respectivos bloques, primero comprobando que el sidebar correspondiente está activo, y después cargando los widgets del sidebar con la función dynamic_sidebar( ‘nombre-del-sidebar’ ).
En la capa que alberga los diferentes sidebars se hace una llamada a newtheme_footer_sidebar_class(), esta función la crearemos más adelante en el archivo functions.php, y principalmente lo que hace es crear el atributo class de la capa y su correspondiente valor.
Ahora que ya empezamos a ver algo de contenido, vamos a añadir los estilos. Aquí te dejo a tu elección que hacer, si crearlos tu a mano desde cero o copiar los estilos del tema Twenty Eleven, ya que serían los que se utilizarían para el tema que estamos creando. En cualquier caso solo necesitas, de momento, los estilos del archivo style.css, el resto los iremos añadiendo con posterioridad.
WordPress 3.x para desarrolladores: Temas y plantillas, index.php y content.php
0hace 11 años
Con el anterior post os dejé un poco colgados con el tutorial, expliqué las plantillas más básicas y la creación de las plantillas de la cabecera y el pie, además de la explicación del código de cada una. Pero aun falta la parte más importante de todas, el contenido.
EL BUCLE ( THE LOOP )
Bueno, vamos al lío y explico esto del bucle. En el archivo index.php añadimos el siguiente código entre wp_head() y wp_footer().
[codesyntax lang=»php»]
<div id="primary"> <div id="content" role="main"> <?php if ( have_posts() ) : ?> <?php newtheme_content_nav( 'nav-above' ); ?> <?php /* Start the Loop */ ?> <?php while ( have_posts() ) : the_post(); ?> <?php get_template_part( 'content', get_post_format() ); ?> <?php endwhile; ?> <?php newtheme_content_nav( 'nav-below' ); ?> <?php else : ?> <article id="post-0" class="post no-results not-found"> <header class="entry-header"> <h1 class="entry-title"><?php _e( 'Nothing Found', 'newtheme' ); ?></h1> </header><!-- .entry-header --> <div class="entry-content"> <p><?php _e( 'Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post.', 'newtheme' ); ?></p> </div><!-- .entry-content --> </article><!-- #post-0 --> <?php endif; ?> </div><!-- #content --> </div><!-- #primary --> <?php get_sidebar(); ?>
[/codesyntax]
Lo primero que hacemos es crear dos capas con id primary y content, ambas contendrán el contenido que se muestre en la página.
Seguidamente tenemos un condicional que comprueba si hay posts para mostrar en la página.
Si es que sí hay posts, WordPress procesará las cinco siguientes líneas de código y dentro de estas nuestro bucle o The Loop.
Antes y después del bucle se hace una llamada a la función newtheme_content_nav(), este es un hook para crear el paginador de post en el caso de que haya más que las que pueden entrar en una página. Esta función la crearemos más adelante en el archivo functions.php.
El bucle while se ejecutará mientras have_posts() sea true, y los datos del post se obtienen de the_post(), que serán procesados en la plantilla correspondiente utilizando get_template_part( ‘content’, get_post_format() ). Esta función (get_template_part()) llama a la plantilla content para procesarla y generar el código html correspondiente.
Si no hay posts entonces se muestra un mensaje al usuario indicando esto mismo.
Cerramos las etiquetas div. Por último nos encontramos con la función get_sidebar(), que nos generará la barra lateral con los widgets de nuestro blog. De hecho ya vimos esta función en la plantilla del pie (footer.php) en ella nos encontramos con la función get_sidebar( ‘footer’ ). La razón de que una función tenga argumento y otra no, radica en la plantilla a usar. En el caso del sidebar del pie, se utilizará sidebar-footer.php y para el sidebar del index.php usaremos la genérica: sidebar.php.
Si ejecutásemos ahora la página principal de nuestro WordPress no veríamos contenido, la razón es que aun no hemos creado la plantilla que muestra el contenido, así que vamos a ello.
CONTENT.PHP
Este archivo es el encargado de mostrar el contenido de los posts y maquetarlo en html. Para ello vamos a crear el archivo content.php y añadir las siguientes líneas de código:
[codesyntax lang=»php»]
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header"> <?php if ( is_sticky() ) : ?> <hgroup> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <h3 class="entry-format"><?php _e( 'Featured', 'newtheme' ); ?></h3> </hgroup> <?php else : ?> <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1> <?php endif; ?> <?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?> <?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?> </header><!-- .entry-header --> <?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?> <footer class="entry-meta"> <?php $show_sep = false; ?> <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?> <?php /* translators: used between list items, there is a space after the comma */ $categories_list = get_the_category_list( __( ', ', 'newtheme' ) ); if ( $categories_list ): ?> <span class="cat-links"> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list ); $show_sep = true; ?> </span> <?php endif; // End if categories ?> <?php /* translators: used between list items, there is a space after the comma */ $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) ); if ( $tags_list ): if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="tag-links"> <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); $show_sep = true; ?> </span> <?php endif; // End if $tags_list ?> <?php endif; // End if 'post' == get_post_type() ?> <?php if ( comments_open() ) : ?> <?php if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'nwtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; // End if comments_open() ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta --> </article><!-- #post-<?php the_ID(); ?> -->
[/codesyntax]
Sí, es mucho código pero como siempre os lo explicaré casi línea por línea.
En primer lugar tenemos las etiquetas article y header del post:
<article id="post-<?php the_ID(); ?>" <?php post_class(); ?>> <header class="entry-header">
Aquí vemos dos funciones de WordPress, la primera the_ID() sirve para devolver el id del post, el segundo genera las clases de estilos para el post.
Ha continuación tenemos el siguiente bloque condicional dentro de la etiqueta header:
[codesyntax lang=»php»]
<?php if ( is_sticky() ) : ?> <hgroup> <h2 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h2> <h3 class="entry-format"><?php _e( 'Featured', 'newtheme' ); ?></h3> </hgroup> <?php else : ?> <h1 class="entry-title"><a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'newtheme' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a></h1> <?php endif; ?> <?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?> <?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?>
[/codesyntax]
Como puedes ver el condicional comprueba la función is_sticky(). Esta función comprueba si el post ha sido seleccionado para que se mantenga fijo en la página principal o como destacado. Como verás, si el post está fijo en la página principal se mostrará el título de la entrada y un texto (Featured o Destacado) que indica el estado de este.
En el caso que no sea un post destacado se genera el título por defecto. Para generar la url se utiliza la función the_permalink() que genera la url absoluta del post. Además se añade al atributo title del link el título del post.
[codesyntax lang=»php»]
<?php if ( 'post' == get_post_type() ) : ?> <div class="entry-meta"> <?php newtheme_posted_on(); ?> </div><!-- .entry-meta --> <?php endif; ?>
[/codesyntax]
Este código genera el html correspondiente para las etiquetas meta de la página/post: fecha/hora, autor, descripción, etc.
[codesyntax lang=»php»]
<?php if ( comments_open() && ! post_password_required() ) : ?> <div class="comments-link"> <?php comments_popup_link( '<span class="leave-reply">' . __( 'Reply', 'newtheme' ) . '</span>', _x( '1', 'comments number', 'newtheme' ), _x( '%', 'comments number', 'newtheme' ) ); ?> </div> <?php endif; ?>
[/codesyntax]
Aquí se comprueba si el post permite comentarios y no es requerida una contraseña. Dentro del condicional se crea el link que mostrará los comentarios, además el texto del vínculo será el número de comentarios que tiene el post. Esto crearía un número al lado del título del post, normalmente con un fondo con una burbuja de diálogo.
[codesyntax lang=»php»]
<?php if ( is_search() ) : // Only display Excerpts for Search ?> <div class="entry-summary"> <?php the_excerpt(); ?> </div><!-- .entry-summary --> <?php else : ?> <div class="entry-content"> <?php the_content( __( 'Continue reading <span class="meta-nav">→</span>', 'newtheme' ) ); ?> <?php wp_link_pages( array( 'before' => '<div class="page-link"><span>' . __( 'Pages:', 'newtheme' ) . '</span>', 'after' => '</div>' ) ); ?> </div><!-- .entry-content --> <?php endif; ?>
[/codesyntax]
Se comprueba si lo que se está mostrando es una búsqueda, si es así se carga parte del cuerpo del post pero añadiendo al final del texto […].
Si no se está mostrando una búsqueda se carga el contenido con la función the_content(), que en el caso que el post contenga un separador del tipo «read more… » se mostrará un texto que lo indique. Por último se muestran una serie de links para poder ir directamente a las diferentes páginas del post.
[codesyntax lang=»php»]
<footer class="entry-meta"> <?php $show_sep = false; ?> <?php if ( 'post' == get_post_type() ) : // Hide category and tag text for pages on Search ?> <?php /* translators: used between list items, there is a space after the comma */ $categories_list = get_the_category_list( __( ', ', 'newtheme' ) ); if ( $categories_list ): ?> <span class="cat-links"> <?php printf( __( '<span class="%1$s">Posted in</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-cat-links', $categories_list ); $show_sep = true; ?> </span> <?php endif; // End if categories ?> <?php /* translators: used between list items, there is a space after the comma */ $tags_list = get_the_tag_list( '', __( ', ', 'newtheme' ) ); if ( $tags_list ): if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="tag-links"> <?php printf( __( '<span class="%1$s">Tagged</span> %2$s', 'newtheme' ), 'entry-utility-prep entry-utility-prep-tag-links', $tags_list ); $show_sep = true; ?> </span> <?php endif; // End if $tags_list ?> <?php endif; // End if 'post' == get_post_type() ?> <?php if ( comments_open() ) : ?> <?php if ( $show_sep ) : ?> <span class="sep"> | </span> <?php endif; // End if $show_sep ?> <span class="comments-link"><?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'newtheme' ) . '</span>', __( '<b>1</b> Reply', 'nwtheme' ), __( '<b>%</b> Replies', 'newtheme' ) ); ?></span> <?php endif; // End if comments_open() ?> <?php edit_post_link( __( 'Edit', 'newtheme' ), '<span class="edit-link">', '</span>' ); ?> </footer><!-- #entry-meta -->
[/codesyntax]
Llegamos al pie del post donde se comprobará primero que lo que se muestra es un post y no una búsqueda, en el caso de ser esto afirmativo se cargan las categorías a la que pertenezca el post y se genera su código html correspondiente.
Después se carga el listado de tags o etiquetas y se genera el código html para mostrarlas.
A continuación mostramos de nuevo el número de comentarios del post.
Por último mostramos el link de editar post, siempre y cuando el usuario tenga permiso para ello.
WordPress 3.x para desarrolladores: Temas y plantillas, primeros pasos
0hace 11 años
Una vez que conocemos los conceptos básicos de WordPress y la estructura de archivos que tienen los temas, vamos a empezar a crear nuestro propio tema. Para ello vamos a utilizar el tema Twenty Elevencomo modelo, iré extrayendo partes del código de este tema y pegándolas en el nuestro, de tal forma que pueda explicar el funcionamiento del código y así poder aprender a crear un tema desde cero.
EL TEMA MÁS BÁSICO
Como vimos en el post anterior, el tema más básico que se puede crear en WordPress es el que disponga de los archivos style.css e index.php (en caso de un tema hijo solo sería necesario el archivo style.css, pero eso lo explicaré más adelante). Por tanto vamos a crearlos. Doy por hecho que ya tienes instalado y configurado WordPress en tu entorno de desarrollo, lo único que vamos hacer es activar la muestra de avisos de WordPress durante el desarrollo. Abre el archivo wp-config.php, busca la constante WP_DEBUG y ponla a true.
define('WP_DEBUG', true);
Una vez hecho esto creamos la carpeta de nuestro tema el cual llamaremos newtheme: wp-content/themes/newtheme. A continuación creamos el archivo style.css y añadimos los datos que WordPressnecesita para mostrar el tema en el listado de temas.
/* Theme Name: New Theme Theme URI: http://localhost/newtheme Author: Interadictos.es Author URI: http://interadictos.es Description: Primer desarrollo de un tema Version: 1.0 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Tags: basic, white Text Domain: newtheme */
Ahora creamos el archivo index.phpy le añadiremos una única linea de código:
[codesyntax lang=»php»]
<?php echo "Hola mundo"; ?>
[/codesyntax]
Nos vamos a la administración de nuestro WordPressy activamos nuestro tema. Si se ha hecho correctamente nos aparecerá el siguiente texto cuando accedamos a la página principal del blog:
Hola mundo
Ya sé, ya sé, este tema no muestra nada, en realidad acabamos de conocer como crear el tema y hacer que se muestre en la administración para poder activarlo. Podríamos seguir añadiendo código al archivo index.php, pero estaríamos creando algo que a la larga nos resultaría difícil de mantener. Por tanto vamos a dividir nuestro tema en partes para poder trabajar mejor con él.
CREANDO PLANTILLAS
Habitualmente una página web podemos separarla en tres partes: cabecera, cuerpo y pie. En WordPress ocurre lo mismo, de hecho, WordPressnos va a facilitar la tarea de dividir una página ya que dispone de varios métodos creados exclusivamente para ello.
- get_header(): Devuelve la plantilla de la cabecera ya procesada.
- get_footer(): Devuelve la plantilla del pie ya procesada.
Como verás no hay un método como tal para devolver la plantilla del contenido, pero esto lo veremos un poquito más adelante. Vamos a modificar el archivo index.phppara añadir estos dos métodos.
[codesyntax lang=»php»]
<?php get_header(); ?> <?php get_footer(); ?>
[/codesyntax]
Ahora vamos a crear dos plantillas nuevas que se corresponderán con la cabecera de la página y el pie. Lo llamaremos header.php y footer.php.
HEADER.PHP
En header.phpañadimos el siguiente código:
[codesyntax lang=»php»]
<!DOCTYPE html> <!--[if IE 6]> <html id="ie6" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 7]> <html id="ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html id="ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]--> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" /> <title><?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'newtheme' ), max( $paged, $page ) ); ?></title> <link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]--> <?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); /* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */ wp_head(); ?> </head> <body <?php body_class(); ?>>
[/codesyntax]
Antes de seguir explicaré un poco el código. Este código es un extracto del archivo header.php del tema twentyeleven que viene incluido con WordPress y que me ha parecido muy bueno para poder utilizarlo como ejemplo. En primer lugar nos encontramos con esto:
<!DOCTYPE html> <!--[if IE 6]> <html id="ie6" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 7]> <html id="ie7" <?php language_attributes(); ?>> <![endif]--> <!--[if IE 8]> <html id="ie8" <?php language_attributes(); ?>> <![endif]--> <!--[if !(IE 6) | !(IE 7) | !(IE 8) ]><!--> <html <?php language_attributes(); ?>> <!--<![endif]-->
language_attributes() devuelve varios atributos de la etiqueta html, más concretamente el idioma y la dirección del texto. En este caso, además, se cuadriplica para poder diferenciar cada versión de Internet Explorer y del resto de navegadores. A continuación tenemos el inicio de la cabecera propiamente dicha y las etiquetas meta:
<head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width" />
WordPress nos provee de muchos métodos para poder hacernos la vida más fácil. Entre esos métodos se encuentra bloginfo() que nos devolverá varios datos referentes al blog que estamos creando. Ver más sobre bloginfo(): http://codex.wordpress.org/Function_Reference/bloginfo La metaetiqueta llamada viewport es utiliza para indicarle a los navegadores móviles el tamaño de la página. Más info en: http://www.htmlcinco.com/etiqueta-meta-viewport-web-movil/Seguidamente tenemos el título de la página:
[codesyntax lang=»php»]
<title><?php /* * Print the <title> tag based on what is being viewed. */ global $page, $paged; wp_title( '|', true, 'right' ); // Add the blog name. bloginfo( 'name' ); // Add the blog description for the home/front page. $site_description = get_bloginfo( 'description', 'display' ); if ( $site_description && ( is_home() || is_front_page() ) ) echo " | $site_description"; // Add a page number if necessary: if ( $paged >= 2 || $page >= 2 ) echo ' | ' . sprintf( __( 'Page %s', 'newtheme' ), max( $paged, $page ) ); ?></title>
[/codesyntax]
Primero recupera dos variables globales $page y $paged, que se refieren a la página y el número de páginas en que esté dividido el contenido. Después utiliza el método wp_title() para mostrar el título de la página o post. Esto le indica a WordPress que muestre el título del post o la página y añada un separador «|» al final (derecha) del título.
A continuación se añade el nombre del blog con bloginfo( ‘name’ ). Se recupera la descripción del sitio utilizando get_bloginfo(), se comprueba si existe esa descripción y si la página que se va a mostrar es el homeo la página principal, y se muestra la descripción. Acto seguido se comprueba el número de página en el que se encuentra el usuario y se muestra. Una vez que se procesa el título tenemos las siguientes etiquetas:
<link rel="profile" href="http://gmpg.org/xfn/11" /> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" /> <!--[if lt IE 9]> <script src="<?php echo get_template_directory_uri(); ?>/js/html5.js" type="text/javascript"></script> <![endif]-->
La primera línea si no recuerdo mal está relacionado con el SEO para los buscadores, a la hora de desarrollar no nos afectará.
La segunda linea nos indica el archivo css para la página, en este caso se utiliza bloginfo( ‘stylesheet_url’ ) para recuperar la url del archivo de estilo style.css.
La tercera línea indica al navegador la ruta para el archivo de pingback, es decir el archivo que se dedicará a recibir las notificaciones de otros autores cuando linken a una página de tu blog.
Las últimas lineas son exclusivas para IE9, que como todas las versiones de Internet Explorer siempre hay algo especial que ponerle a cada uno. En este caso es un pequeño código js para HTML5. Recuerda que este archivo aun no está en nuestro tema. Tendrás que crear una carpeta llamada js, y copiar el archivo desde el tema twentyeleven hasta tu tema dentro de la carpeta que acabas de crear. Por último en nuestro archivo header.phpnos encontramos con lo siguiente:
[codesyntax lang=»php»]
<?php /* We add some JavaScript to pages with the comment form * to support sites with threaded comments (when in use). */ if ( is_singular() && get_option( 'thread_comments' ) ) wp_enqueue_script( 'comment-reply' ); /* Always have wp_head() just before the closing </head> * tag of your theme, or you will break many plugins, which * generally use this hook to add elements to <head> such * as styles, scripts, and meta tags. */ wp_head(); ?> </head> <body <?php body_class(); ?>>
[/codesyntax]
El pequeño script de php tiene un condicional que lo que hace es añadir un pequeño JavaScript en el caso de que los comentarios estén configurados como hilos. Utilizando wp_enqueue_script( ‘comment-reply’ ) le estamos diciendo a WordPress que carge ahí el archivo wp-include/js/comment-reply.js. Como puedes observar, se llama a la función wp_head(). Esto permite a los plugins poder añadir las cabeceras que ellos consideren oportuno.
Por último cerramos la etiqueta head y abrimos body en la que añadiremos las clases correspondientes a través de la función body_class.
Añadimos el siguiente código justo debajo de la etiqueta body:
[codesyntax lang=»php»]
<div id="page" class="hfeed">
<header id="branding" role="banner">
<hgroup>
<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>
<h2 id="site-description"><?php bloginfo( 'description' ); ?></h2>
</hgroup>
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( $header_image ) :
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
// We need to figure out what the minimum width should be for our featured image.
// This result would be the suggested width if the theme were to implement flexible widths.
$header_image_width = get_theme_support( 'custom-header', 'width' );
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
}
?>
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
$image[1] >= $header_image_width ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else :
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
$header_image_width = get_custom_header()->width;
$header_image_height = get_custom_header()->height;
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
$header_image_height = HEADER_IMAGE_HEIGHT;
}
?>
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
<?php endif; // end check for removed header image ?>
<?php
// Has the text been hidden?
if ( 'blank' == get_header_textcolor() ) :
?>
<div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>">
<?php get_search_form(); ?>
</div>
<?php
else :
?>
<?php get_search_form(); ?>
<?php endif; ?>
<nav id="access" role="navigation">
<h3 class="assistive-text"><?php _e( 'Main menu', 'newtheme' ); ?></h3>
<?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?>
<div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'newtheme' ); ?>"><?php _e( 'Skip to primary content', 'newtheme' ); ?></a></div>
<div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'newtheme' ); ?>"><?php _e( 'Skip to secondary content', 'newtheme' ); ?></a></div>
<?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?>
<?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?>
</nav><!-- #access -->
</header><!-- #branding -->
<div id="main">
[/codesyntax]
Explicaré el código paso a paso:
[codesyntax lang=»php»]
<header id="branding" role="banner"> <hgroup> <h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1> <h2 id="site-description"><?php bloginfo( 'description' ); ?></h2> </hgroup>
[/codesyntax]
En primer lugar se abre una etiqueta header y dentro de hgroupse añade el título y la descripción de la página.
[codesyntax lang=»php»]
<?php
// Check to see if the header image has been removed
$header_image = get_header_image();
if ( $header_image ) :
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
// We need to figure out what the minimum width should be for our featured image.
// This result would be the suggested width if the theme were to implement flexible widths.
$header_image_width = get_theme_support( 'custom-header', 'width' );
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
}
?>
[/codesyntax]
Esta parte comprueba que existe una imagen para la cabecera. Si es que sí se crea un condicional para comprobar que la función get_custom_header existe para que el tema sea compatible con versiones de WordPress anterior a la 3.4. En el caso de que existe se utilizará la función get_theme_support para obtener el ancho para la imagen, sino se utilizará la constante HEADER_IMAGE_WIDTH.
Tanto la constante como el ancho se crean en el archivo functions.php que veremos más adelante.
[codesyntax lang=»php»]
<a href="<?php echo esc_url( home_url( '/' ) ); ?>">
<?php
// The header image
// Check if this is a post or page, if it has a thumbnail, and if it's a big one
if ( is_singular() && has_post_thumbnail( $post->ID ) &&
( /* $src, $width, $height */ $image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( $header_image_width, $header_image_width ) ) ) &&
$image[1] >= $header_image_width ) :
// Houston, we have a new header image!
echo get_the_post_thumbnail( $post->ID, 'post-thumbnail' );
else :
// Compatibility with versions of WordPress prior to 3.4.
if ( function_exists( 'get_custom_header' ) ) {
$header_image_width = get_custom_header()->width;
$header_image_height = get_custom_header()->height;
} else {
$header_image_width = HEADER_IMAGE_WIDTH;
$header_image_height = HEADER_IMAGE_HEIGHT;
}
?>
<img src="<?php header_image(); ?>" width="<?php echo $header_image_width; ?>" height="<?php echo $header_image_height; ?>" alt="" />
<?php endif; // end check for featured image or standard header ?>
</a>
[/codesyntax]
Creamos el vínculo con la url de la página principal, el condicional permite tener compatibilidad con versiones anteriores a la versión 3.4 de WordPress. Con get_the_post_thumbnailcreamos la imagen en caso de que sea un post o una página, sino obtenemos el ancho y alto de la imagen y creamos la etiqueta correspondiente.
[codesyntax lang=»php»]
<?php // Has the text been hidden? if ( 'blank' == get_header_textcolor() ) : ?> <div class="only-search<?php if ( $header_image ) : ?> with-image<?php endif; ?>"> <?php get_search_form(); ?> </div> <?php else : ?> <?php get_search_form(); ?> <?php endif; ?>
[/codesyntax]
Aquí se comprueba el color de texto de la cabecera, si es blanco (blank) se crea una capa con el formulario de búsqueda dentro, si no solo se añade el formulario de búsqueda. El color de texto de la cabecera se configura en functions.php.
[codesyntax lang=»php»]
<nav id="access" role="navigation"> <h3 class="assistive-text"><?php _e( 'Main menu', 'newtheme' ); ?></h3> <?php /* Allow screen readers / text browsers to skip the navigation menu and get right to the good stuff. */ ?> <div class="skip-link"><a class="assistive-text" href="#content" title="<?php esc_attr_e( 'Skip to primary content', 'newtheme' ); ?>"><?php _e( 'Skip to primary content', 'newtheme' ); ?></a></div> <div class="skip-link"><a class="assistive-text" href="#secondary" title="<?php esc_attr_e( 'Skip to secondary content', 'newtheme' ); ?>"><?php _e( 'Skip to secondary content', 'newtheme' ); ?></a></div> <?php /* Our navigation menu. If one isn't filled out, wp_nav_menu falls back to wp_page_menu. The menu assigned to the primary location is the one used. If one isn't assigned, the menu with the lowest ID is used. */ ?> <?php wp_nav_menu( array( 'theme_location' => 'primary' ) ); ?> </nav><!-- #access -->
[/codesyntax]
Por último se añade el menú superior de las páginas.
FOOTER.PHP
Añadimos el siguiente código al archivo footer.php:
[codesyntax lang=»php»]
</div><!-- #main --> <footer id="colophon" role="contentinfo"> <?php /* A sidebar in the footer? Yep. You can can customize * your footer with three columns of widgets. */ if ( ! is_404() ) get_sidebar( 'footer' ); ?> <div id="site-generator"> <?php do_action( 'newtheme_credits' ); ?> <a href="<?php echo esc_url( __( 'http://interadictos.es/', 'newtheme' ) ); ?>" title="<?php esc_attr_e( 'Semantic Personal Publishing Platform', 'newtheme' ); ?>" rel="generator"><?php printf( __( 'Proudly powered by %s', 'newtheme' ), 'interadictos.es' ); ?></a> </div> </footer><!-- #colophon --> </div><!-- #page --> <?php wp_footer(); ?> </body> </html>
[/codesyntax]
En este archivo se cierran las etiquetas que contienen la mayor parte del contenido de la página, se añaden los sidebar (que veremos más adelante) del pie, siempre y cuando no sea una página 404, y se añade el copyright y la información del tema. Por último se añade la función wp_footer que permitirá a los plugins mostrar su propio contenido en el pie de página.
WordPress 3.x para desarrolladores: Temas y plantillas, single.php y comments.php
0Vamos con dos plantillas más, esta vez las que generan la página del post (single.php) y la de los comentarios (comment.php).
SINGLE.PHP
Creamos el archivo single.php y añadimos el siguiente código:
[codesyntax lang=»php»]
[/codesyntax]
Como puedes ver la estructura de este archivo es muy parecida a la de index.php, tenemos una llamada get_header() para crear la cabecera y otra a get_footer() para crear el pie. En medio encontramos el bloque que generará el html para mostrar el post. Tenemos el mismo bucle que teníamos en la página principal además de dos funciones que generan los links hacia el post anterior y el posterior: previous_post_link() y next_post_link().
Se hace una llamada a get_template_part() que cargará la plantilla content-single.php.
Por último carga la plantilla de comentarios con la función comments_template().
COMMENTS.PHP
Crea el archivo comments.php y añade el siguiente código:
[codesyntax lang=»php»]
[/codesyntax]
Vamos a ver este código poco a poco:
[codesyntax lang=»php»]
[/codesyntax]
En primer lugar comprobamos si los comentarios están protegidos por contraseña, si es así se devuelve un return, que evitará que el resto de la plantilla se procese, pero se continuará ejecutando el script.
En el caso de que los comentarios no estén protegidos por contraseña, se comprueba que el post tenga comentarios utilizando la función have_comments(), si es que sí los tiene se genera el html correspondiente.
[codesyntax lang=»php»]
[/codesyntax]
Como ves, aquí se comprueba si hay comentarios, en caso positivo se crea la cabecera de los comentarios.
[codesyntax lang=»php»]
[/codesyntax]
Se crea el sistema de navegación de los comentarios, para mostrar los comentarios más recientes o los más antiguos.
[codesyntax lang=»php»]
[/codesyntax]
Añadimos los comentarios utilizando una llamada a wp_list_comments(), en el que se indica que procese los datos de los comentarios utilizando la función newtheme_comment que encontrará en el archivo functions.php.
Para ver otros argumentos que se le pueden indicar a la función wp_list_comments() ver http://codex.wordpress.org/Function_Reference/wp_list_comments
[codesyntax lang=»php»]
[/codesyntax]
Volvemos a crear el sistema de navegación de los comentarios, pero esta vez al finalizar la lista de comentarios.
[codesyntax lang=»php»]
[/codesyntax]
Por último mostramos un mensaje en el caso de que los comentarios estén cerrados, además, mostramos el formulario para enviar un comentario.