Spanish (Español) translation by Marilu (you can also view the original English article)
Los temas son una gran parte de lo que hace a WordPress tan popular, y en esta serie de tres partes te llevaremos a través de un proceso paso a paso que resulta en un tema de WordPress completo y funcional. En la segunda parte, nos sumergiremos en la codificación de la mayor parte de nuestro tema.
Segunda parte
Bienvenidos a la segunda parte de esta serie de tres partes sobre el desarrollo de un tema de WordPress desde cero. La última vez miramos lo que hace a un "buen tema", así como los componentes generales necesarios para que un tema funcione. Esta semana vamos a sumergirnos de lleno y empezar a crear nuestro primer tema.
- Desarrollando tu primer tema de WordPress: Día 1 de 3
- Desarrollando tu primer tema de WordPress: Día 2 de 3
- Desarrollando tu primer tema de WordPress: Día 3 de 3 (Próximamente)
Nuestro tema
Me gustaría subrayar que si tienes tu propio diseño para trabajar, úsalo, lo más probable es que aprendas más experimentando y tengas un resultado que se adapte a tus gustos. Si no tienes un diseño con el que trabajar, te proporcionamos un diseño personal sencillo para que trabajes.
Este diseño es algo que hice hace un tiempo como uno de los muchos diseños sin usar para el blog personal de un amigo. En el zip descargable que acompaña a este tutorial, encontrarás dos carpetas; bftheme y bffiles. En la carpeta bffiles está el diseño en su estado previo a WordPress, la otra carpeta contiene el tema terminado.
Abre el tema en un navegador para tener una idea de lo que vamos a hacer, debería verse un poco como esto:
Romperlo
Aunque sería posible hacer que un tema funcione con un solo archivo, es una práctica muy mala y no es algo que se vea en absoluto en la naturaleza. Es bueno atenerse a la estructura de archivos estándar ya que facilita la modificación del tema en el futuro y te permite usar las funciones incorporadas de WordPress para incluir archivos fácilmente (como get_header()).
En primer lugar, preparemos nuestro espacio de trabajo. En el directorio de temas de tu instalación de WordPress, crea una nueva carpeta llamada blindfaith. Dentro de esa carpeta, crea los siguientes archivos:
- index.php
- single.php
- page.php
- comments.php
- functions.php
- header.php
- footer.php
- sidebar.php
Ahora que tenemos nuestras hojas de estilo e imágenes en su lugar, así como un esqueleto temático, vamos a saltar a la derecha. Primero tenemos que hacer que nuestro tema aparezca en el panel de control de WordPress, para ello tenemos que modificar nuestro archivo style.css.
WordPress buscará automáticamente un archivo llamado style.css en un directorio de temas para extraer información sobre el tema. Pega el siguiente código en la parte superior de style.css:
1 |
/*
|
2 |
Theme Name: Blind Faith
|
3 |
Theme URI: https://www.danwalker.com/
|
4 |
Description: A minimalistic, simple theme for WordPress -- supports widgets in the sidebar, all manors of post/page formatting and comes with an easy to customize stylesheet.
|
5 |
|
6 |
Author: Dan Walker
|
7 |
Version: 1.0
|
8 |
Tags: minimalistic, simple, widgets, sidebar, elegant
|
9 |
*/
|
Si revisamos WordPress ahora, nuestro tema debería aparecer en la parte de cambio de temas del tablero. Activar nuestro nuevo tema y cargar la primera página de WordPress. ¿No ves nada? Bien. Una vez que WordPress ha hecho su magia averiguando qué página quiere el usuario y ha preparado los resultados, llama a index.php desde nuestro directorio de temas, excepto que ahora mismo ese archivo está en blanco.
Primero que nada, necesitamos cortar nuestro HTML en sus cuatro partes respectivas; encabezado, cuerpo, barra lateral, pie de página. Si abres el index.html suministrado con este tutorial, deberías ver esto:
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
23 |
<div id="nav-bar-tile"> |
24 |
<div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div> |
25 |
</div><!-- nav-bar-tile --> |
26 |
<div id="wrapper"> |
27 |
<div id="content"> |
28 |
|
29 |
<div class="post"> |
30 |
<h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1> |
31 |
<div class="post-details"> |
32 |
<div class="post-details-left"> |
33 |
Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> |
34 |
</div>
|
35 |
<div class="post-details-right"> |
36 |
<span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span> |
37 |
</div>
|
38 |
</div>
|
39 |
|
40 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p> |
41 |
|
42 |
<p> <a href="#" class="more-link">Read More</a></p> |
43 |
|
44 |
<div class="dots"></div> |
45 |
</div><!-- post --> |
46 |
|
47 |
<div id="only-page">No newer/older posts</div> |
48 |
|
49 |
<div class="spacer"></div> |
50 |
<div class="dots"></div> |
51 |
|
52 |
<div id="footer"> |
53 |
Copyright © 2011 <a href="http://www.danwalker.com">Dan Walker</a><br /> |
54 |
Don't steal anything etc |
55 |
</div>
|
56 |
|
57 |
</div><!-- content --> |
58 |
<div id="sidebar"> |
59 |
<div class="sidebar-box"> |
60 |
<span class="sidebar-title">a bit about me</span> |
61 |
<div class="dots"></div> |
62 |
<div class="textwidget"> |
63 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p> |
64 |
</div>
|
65 |
</div>
|
66 |
<div class="sidebar-box"> |
67 |
<span class="sidebar-title">recent posts</span><div class="dots"></div> |
68 |
<ul>
|
69 |
<li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li> |
70 |
</ul>
|
71 |
</div>
|
72 |
</div><!-- sidebar --> |
73 |
<div class="spacer"></div> |
74 |
</div><!-- wrapper --> |
75 |
</body>
|
76 |
</html>
|
Si cargamos este HTML en un navegador en este momento, veremos el diseño básico. Mirando este diseño, lo primero que tenemos que hacer es decidir qué es lo que debe incluir el encabezado. Como queremos el título, el cuadro de búsqueda y la navegación en la parte superior de cada página, eso es lo que pondremos en nuestro archivo de cabecera.
El área de contenido principal será variable, lo que significa que podría ser index.php, page.php, etc. La barra lateral es todo el contenido fuera del cuadro de contenido a la derecha del diseño y el pie de página será simplemente el mensaje de copyright. Nuestro tema se hará así:
Así que, copia el código de index.html todo el camino desde el doctype hasta la división de contenido y pégalo en nuestro archivo de cabecera, ahora deberíamos tener un archivo header.php que se vea así:
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
23 |
<div id="nav-bar-tile"> |
24 |
<div class="nav-bar-content"><ul><li class="current_page_item"><a href="http://www.danwalker.com/themes/blindfaith/" title="Home">Home</a></li><li class="page_item page-item-2"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=2" title="About">About</a></li><li class="page_item page-item-4"><a href="http://www.danwalker.com/themes/blindfaith/?page_id=4" title="Typography">Typography</a></li></ul></div> |
25 |
</div><!-- nav-bar-tile --> |
26 |
<div id="wrapper"> |
27 |
<div id="content"> |
Por ahora, nos saltaremos la sección de contenido, ya que es la parte más grande y compleja (compuesta por muchos archivos diferentes) y pasaremos directamente al pie de página. Normalmente un pie de página es el último en un diseño, sin embargo como la barra lateral viene después del pie de página en nuestro código, simplemente llamaremos a la barra lateral después del pie de página. Por lo tanto, el pie de página.php debe contener el siguiente código;
1 |
<div class="spacer"></div> |
2 |
|
3 |
<div id="footer"> |
4 |
Copyright © 2011 Blind Faith by <a href="http://www.danwalker.com">Dan Walker</a><br /> |
5 |
</div>
|
6 |
|
7 |
</div><!-- content --> |
8 |
<?php get_sidebar(); ?>
|
Notarás que estamos usando nuestra primera función de WordPress arriba; get_sidebar();. Esta función es más o menos la misma que require("sidebar.php"); y como siempre vamos a requerir la barra lateral después del pie de página, tiene sentido llamar a la barra lateral en el archivo del pie de página al final.
Finalmente necesitamos incluir la barra lateral. Como el pie de página viene antes de la barra lateral, la barra lateral es el último archivo incluido y por lo tanto debería cerrar el diseño también (cerrando las etiquetas restantes; envoltorio, cuerpo y html).
1 |
<div id="sidebar"> |
2 |
<div class="sidebar-box"> |
3 |
<span class="sidebar-title">a bit about me</span> |
4 |
<div class="dots"></div> |
5 |
<div class="textwidget"> |
6 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo.</p> |
7 |
</div>
|
8 |
</div>
|
9 |
<div class="sidebar-box"> |
10 |
<span class="sidebar-title">recent posts</span><div class="dots"></div> |
11 |
<ul>
|
12 |
<li><a href="http://www.danwalker.com/themes/blindfaith/?p=1" title="Hello world!">Hello world!</a></li> |
13 |
</ul>
|
14 |
</div>
|
15 |
</div><!-- sidebar --> |
16 |
<div class="spacer"></div> |
17 |
</div><!-- wrapper --> |
18 |
</body>
|
19 |
</html>
|
Por ahora, abre index.php e introduce lo siguiente;
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php get_footer(); ?>
|
Si navegamos a nuestra instalación de WordPress, deberíamos obtener algo como esto
Por el momento, el contenido del sitio web (o lo que hemos hecho hasta ahora) parece estar cargando pero las hojas de estilo no. Esto se debe a que en nuestro archivo de encabezado, las llamadas a las hojas de estilo ahora usan una ruta que no existe. Ahora residen en /wp-content/themes/blindfaith/, pero hay una forma más fácil de pegar que en todas partes se necesita, una forma más dinámica.
La función bloginfo()
WordPress viene con una función incorporada llamada bloginfo() que es genial para obtener todo tipo de información local útil como; nombre del blog, descripción, URL de la hoja de estilo, directorio de la hoja de estilo y más. Para más información sobre lo que podemos conseguir con bloginfo, lee esta página en el códice de WordPress.
Abramos nuestro archivo de cabecera y cambiemos algunas cosas para usar la información dinámica proporcionada por WordPress en lugar de la información estática del tema. Nuestro actual archivo header.php se ve así hasta la etiqueta nav-bar-tile:
1 |
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
2 |
<html lang='en'> |
3 |
<head>
|
4 |
<title>Blind Faith</title> |
5 |
<link rel="stylesheet" href="reset.css" type="text/css"> |
6 |
<link rel="stylesheet" href="style.css" type="text/css"> |
7 |
<!--[if IE]>
|
8 |
<link rel="stylesheet" href="ie.css" type="text/css" />
|
9 |
<![endif]-->
|
10 |
</head>
|
11 |
<body class="home blog"> |
12 |
<div id="top-bar-tile"> |
13 |
<div id="top-bar-content"> |
14 |
<h1><a href="http://www.danwalker.com/themes/blindfaith">Blind Faith</a></h1> |
15 |
<span class="slogan">Just Another Theme by Dan Walker</span> |
16 |
<div id="search-box"> |
17 |
<form method="get" id="searchform" action="" > |
18 |
<input type="text" value="Search..." onfocus="if(this.value == this.defaultValue) this.value = ''" name="s" id="s" /> |
19 |
</form>
|
20 |
</div><!-- search-box --> |
21 |
</div><!-- top-bar-content --> |
22 |
</div><!-- top-bar-tile --> |
Primero que nada, arreglemos las hojas de estilo que faltan. Usaremos dos valores de bloginfo; stylesheet_directory y stylesheet_url. El valor de la URL es un enlace directo a style.css, mientras que el directorio lista el directorio en el que reside style.css. Es importante recordar que las funciones de WordPress como esta no añaden una barra de arrastre a los valores.
Reemplaza las líneas de la hoja de estilo con lo siguiente;
1 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/reset.css" type="text/css"> |
2 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css"> |
3 |
<!--[if IE]>
|
4 |
<link rel="stylesheet" href="<?php bloginfo('stylesheet_directory'); ?>/ie.css" type="text/css" />
|
5 |
<![endif]-->
|
Nuestro tema ahora tiene hojas de estilo debidamente vinculadas. A continuación, mientras estamos en el archivo de la cabecera, cambiemos el título del blog, el eslogan y el enlace.
La etiqueta <title> no solo tiene la propiedad bloginfo que representa el nombre del blog, también podemos añadir otra función; wp_title(). Esta función devuelve el título de la página o del mensaje que se está viendo actualmente, precedido de >>. Para desactivar el >> antes del nombre de la página, simplemente cambia los paréntesis de wp_title() a wp_title("", true);
1 |
<title><?php bloginfo('name'); ?> <?php wp_title(); ?></title> |
Esto producirá algo parecido a;
1 |
Local Test Blog >> Hello World |
Ahora podemos simplemente cambiar el texto del logo/título, el eslogan y la URL usando las siguientes propiedades de bloginfo();
1 |
<h1><a href="<!--?php bloginfo('url'); ?-->"><?php bloginfo('name'); ?></a></h1> |
2 |
<span class="slogan"><?php bloginfo('description'); ?></span> |
Nuestra página debería verse ahora algo como esto;
Ahora echaremos un vistazo al archivo index.php. Este es el archivo llamado por defecto y debería ser capaz de mostrar listas de mensajes para la portada, categorías, archivos y resultados de la búsqueda o un mensaje de error si no existe ninguno. Obviamente cada una de estas diferentes listas puede contener cantidades variables de publicaciones, podemos trabajar con esto usando algo en WordPress conocido como "The Loop".
The Loop (El Bucle)
WordPress averigua qué publicaciones mostrar antes de que se ejecute el archivo de índice, después de todo estamos haciendo un tema, y el tema viene en último lugar ya que es simplemente una forma de mostrar la salida. Usando algunas funciones incorporadas, podemos evitar tener que hacer complejos bucles PHP con comprobaciones constantes de datos válidos, este aspecto del desarrollo de temas de WordPress hace el proceso mucho más fácil y causa menos dolores de cabeza.
En primer lugar, veamos nuestra estructura de post;
1 |
<div class="post"> |
2 |
<h1><a href="http://www.danwalker.com/themes/blindfaith/?p=1">Hello world!</a></h1> |
3 |
<div class="post-details"> |
4 |
<div class="post-details-left"> |
5 |
Posted on <strong>February 6, 2011</strong> by <span class="author">Dan</span> under <span class="author"><a href="http://www.danwalker.com/themes/blindfaith/?cat=1" title="View all posts in Uncategorized" rel="category">Uncategorized</a></span> |
6 |
</div>
|
7 |
<div class="post-details-right"> |
8 |
<span class="comment-count"><a href="http://www.danwalker.com/themes/blindfaith/?p=1#comments" title="Comment on Hello world!">1 Comment</a></span> |
9 |
</div>
|
10 |
</div>
|
11 |
|
12 |
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam malesuada sem in orci ornare et porta nisi tristique. Integer sodales feugiat interdum. Nunc nec hendrerit velit. Praesent at dolor arcu. Nulla porttitor dui vel justo vehicula fringilla. Nunc condimentum justo ut nibh pharetra tempor. Morbi nulla nisl, blandit eu egestas vel, cursus eget justo. Nulla lectus ante, pellentesque tempor pretium eu, porttitor vitae mi. Nunc et dolor eget purus ultricies sollicitudin. Phasellus luctus tincidunt lobortis. Nunc ac aliquam leo. In tortor orci, auctor non condimentum ultricies, hendrerit et nunc. Nam neque est, laoreet at rhoncus vitae, porttitor at nulla. Maecenas dignissim sagittis massa non ultrices. Cras eros quam, ultrices eu iaculis eu, egestas eget justo. Vivamus diam sapien, volutpat eget luctus nec, lacinia non quam. Duis suscipit nunc eget neque congue pretium. Vestibulum non lectus ut quam tempus varius. Nunc a ligula non metus luctus molestie.</p> |
13 |
|
14 |
<p> <a href="#" class="more-link">Read More</a></p> |
15 |
|
16 |
<div class="dots"></div> |
17 |
</div><!-- post --> |
Como sabemos cómo es la estructura de una publicación y tenemos una copia con información ficticia, podemos reemplazar la información ficticia con algunas funciones que devolverán los valores reales de la publicación. Hay varias piezas de información que podemos mostrar con cada publicación, como;
- the_title
- the_tags
- the_ID
- the_category
- the_date
- the_content
- muchos más (que puedes encontrar en http://codex.wordpress.org/Template_Tags#Post_tags)
Cuando cualquiera de estas funciones se llama dentro del bucle, muestran la información correcta para la publicación actual que se está atravesando.
Utilizando el enlace anterior (o solo las funciones suministradas antes del enlace), intenta reemplazar el contenido ficticio por sí mismo con las funciones de reemplazo correctas antes de continuar.
El código correcto debería ser así;
1 |
<div class="post"> |
2 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
3 |
<div class="post-details"> |
4 |
<div class="post-details-left"> |
5 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
6 |
</div>
|
7 |
<div class="post-details-right"> |
8 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
9 |
</div>
|
10 |
</div>
|
11 |
|
12 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
13 |
<?php the_excerpt(); ?>
|
14 |
<?php else : ?>
|
15 |
<?php the_content('Read More'); ?>
|
16 |
<?php endif; ?>
|
17 |
|
18 |
<div class="dots"></div> |
19 |
</div><!-- post --> |
Hay algunas cosas que quizá no hayas podido hacer, veámoslas.
En primer lugar, cuando se muestran las categorías, a WordPress le gusta imprimir un estilo predeterminado usando una lista. Para anular esto, podemos proporcionar nuestro propio separador, que en nuestro caso es simplemente una coma y un espacio.
1 |
<?php the_category(', '); ? |
A continuación, para mostrar un enlace de edición, seguido de cuántos comentarios tiene una entrada, podemos utilizar una función que crea el enlace y puede dar lugar a tres estados diferentes para; sin comentarios, comentario único y comentarios múltiples (donde el signo de porcentaje es el marcador de posición para el recuento de comentarios).
1 |
<?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?>
|
Finalmente tenemos una simple declaración para decidir qué tipo de contenido mostrar. Si usamos the_excerpt() entonces solo se muestra un extracto del contenido, si usamos the_content() entonces se muestra todo el contenido (o hasta que aparezca un <--más--> en el contenido). En una página de búsqueda o de archivo, no es importante mostrar el artículo completo, solo lo suficiente para obtener la esencia, así que usamos el_excerpt().
Ahora, para hacer que este código funcione, tenemos que proveerlo de posts, y para ello tenemos que ponerlo dentro del bucle. Nuestro archivo index.php debería parecerse a esto;
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<div class="post"> |
4 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
5 |
<div class="post-details"> |
6 |
<div class="post-details-left"> |
7 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
8 |
</div>
|
9 |
<div class="post-details-right"> |
10 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
11 |
</div>
|
12 |
</div>
|
13 |
</div>
|
14 |
|
15 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
16 |
<?php the_excerpt(); ?>
|
17 |
<?php else : ?>
|
18 |
<?php the_content('Read More'); ?>
|
19 |
<?php endif; ?>
|
20 |
|
21 |
<div class="dots"></div> |
22 |
</div><!-- post --> |
23 |
|
24 |
<?php get_footer(); ?>
|
Pon este código después de la función de cabecera;
1 |
<?php if ( ! have_posts() ) : ?>
|
2 |
<h1>Not Found</h1> |
3 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
4 |
<?php endif; ?>
|
5 |
|
6 |
<?php while ( have_posts() ) : the_post(); ?>
|
y este justo antes de la función de pie de página;
1 |
<?php endwhile; ?>
|
La carga del blog de WordPress ahora debería verse algo así;
Ahora nuestro tema mostrará una lista de posts de WordPress de acuerdo a cuántos deben ser mostrados (cambiados en la configuración general del Escritorio). ¿Pero qué pasa si hay más publicaciones? ¿Y si el blog contiene 6 publicaciones pero solo muestra 5? Para combatir esto necesitamos añadir simples enlaces de siguiente/anterior o nuevo/antiguo.
Por supuesto que no tiene sentido mostrar estos enlaces si no hay mensajes nuevos o antiguos a los que saltar ya que es engañoso, por lo tanto usaremos el siguiente código después del bucle;
1 |
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
|
2 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
3 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
4 |
<?php else: ?>
|
5 |
<div id="only-page">No newer/older posts</div> |
6 |
<?php endif; ?>
|
El next_posts_link() y el previous_posts_link() solo se mostrarán cuando se necesiten, usando el texto proporcionado en el primer parámetro. Por supuesto, es posible eliminar la declaración de "si" y usar solo las dos líneas siguientes;
1 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
2 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
Pero usando la declaración if de arriba, tenemos la opción de mostrar un mensaje si no hay páginas a las que saltar, lo que puede hacer que las cosas sean menos confusas para el usuario (lo que siempre es bueno).
Nuestro archivo index.php completo debería verse así;
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
<div class="post-details"> |
14 |
<div class="post-details-left"> |
15 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
16 |
</div>
|
17 |
<div class="post-details-right"> |
18 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
19 |
</div>
|
20 |
</div>
|
21 |
|
22 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
23 |
<?php the_excerpt(); ?>
|
24 |
<?php else : ?>
|
25 |
<?php the_content('Read More'); ?>
|
26 |
<?php endif; ?>
|
27 |
|
28 |
<div class="dots"></div> |
29 |
</div><!-- post --> |
30 |
|
31 |
<?php endwhile; ?>
|
32 |
|
33 |
<?php if ( $wp_query->max_num_pages > 1 ) : ?>
|
34 |
<div id="older-posts"><?php next_posts_link('Older Posts'); ?></div> |
35 |
<div id="newer-posts"><?php previous_posts_link('Newer Posts'); ?></div> |
36 |
<?php else: ?>
|
37 |
<div id="only-page">No newer/older posts</div> |
38 |
<?php endif; ?>
|
39 |
|
40 |
<div class="spacer"></div> |
41 |
<?php get_footer(); ?>
|
Publicaciones individuales
Ahora tenemos un índice de trabajo, pero ahora necesitamos una forma de mostrar las publicaciones individuales. Debido a la simplicidad de nuestro diseño, nuestro archivo single.php y el index.php son casi idénticos, la diferencia es que no necesitamos los enlaces siguientes/anteriores en single.php pero sí necesitamos comentarios. El código de single.php es el siguiente;
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
<div class="post-details"> |
14 |
<div class="post-details-left"> |
15 |
Posted on <strong><?php the_date(); ?></strong> by <span class="author"><?php the_author(); ?></span> under <span class="author"><?php the_category(', '); ?></span> |
16 |
</div>
|
17 |
<div class="post-details-right"> |
18 |
<?php edit_post_link('Edit', '<span class="comment-count"> ' , '</span>'); ?><span class="comment-count"><?php comments_popup_link('Leave a comment', '1 Comment', '% Comments'); ?></span> |
19 |
</div>
|
20 |
</div>
|
21 |
|
22 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
23 |
<?php the_excerpt(); ?>
|
24 |
<?php else : ?>
|
25 |
<?php the_content('Read More'); ?>
|
26 |
<?php endif; ?>
|
27 |
|
28 |
<div class="dots"></div> |
29 |
</div><!-- post --> |
30 |
|
31 |
<div class="spacer"></div> |
32 |
|
33 |
<?php comments_template( '', true ); ?>
|
34 |
|
35 |
<?php endwhile; ?>
|
36 |
|
37 |
<div class="spacer"></div> |
38 |
<?php get_footer(); ?>
|
Como puedes ver, no ha cambiado mucho excepto alrededor de la parte inferior del archivo Simplemente hemos eliminado el código de los enlaces y añadido una nueva función llamada comments_template(). Los parámetros de esta función son simplemente el archivo a cargar (comments.php si se deja en blanco o por default (defecto)) y si se ordenan o no los comentarios por tipo (default to false) (por defecto a falso).
Como habrás adivinado, el archivo que maneja los comentarios es comments.php, se mantiene en un archivo separado para que podamos usarlo tanto en single.php como en page.php.
Página
El archivo para mostrar una página es casi idéntico al archivo de correo único, con la excepción de que se elimina la información sobre la hora del correo, el autor y demás. Esto significa que el archivo de la página se ve así;
1 |
<?php get_header(); ?>
|
2 |
|
3 |
<?php /* If there are no posts to display, such as an empty archive page */ ?>
|
4 |
<?php if ( ! have_posts() ) : ?>
|
5 |
<h1>Not Found</h1> |
6 |
<p>Apologies, but no results were found for the requested archive. Perhaps searching will help find a related post</p> |
7 |
<?php endif; ?>
|
8 |
|
9 |
<?php while ( have_posts() ) : the_post(); ?>
|
10 |
|
11 |
<div class="post"> |
12 |
<h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1> |
13 |
|
14 |
<?php if ( is_archive() || is_search() ) : // Only display excerpts for archives and search. ?>
|
15 |
<?php the_excerpt(); ?>
|
16 |
<?php else : ?>
|
17 |
<?php the_content('Read More'); ?>
|
18 |
<?php endif; ?>
|
19 |
|
20 |
<div class="dots"></div> |
21 |
</div><!-- post --> |
22 |
|
23 |
<div class="spacer"></div> |
24 |
|
25 |
<?php comments_template( '', true ); ?>
|
26 |
|
27 |
<?php endwhile; ?>
|
28 |
|
29 |
<div class="spacer"></div> |
30 |
<?php get_footer(); ?>
|
Navegación
La última parte que añadiremos hoy es la navegación hacia arriba ¡(ya que es tan simple)! Abre header.php y reemplaza la división nav-bar-tile con esto;
1 |
<div id="nav-bar-tile"> |
2 |
<?php wp_nav_menu(array( 'menu' => 'mainnav', 'menu_class' => 'nav-bar-content', 'menu_id' => 'navigation', 'container' => false, 'theme_location' => 'primary-menu', 'show_home' => '1')); ?>
|
3 |
</div><!-- nav-bar-tile --> |
La función wp_nav_menu escupe una lista de páginas, sin embargo también toma argumentos en forma de un array. Los argumentos que hemos presentado, en orden, son;
- menu - El menú deseado
- menu_class - La clase de CSS a utilizar
- menu_id - El elemento ID de UL
- container (contenedor) - Si envuelve o no la lista
- theme_location - La ubicación del menú dentro del tema (para menús múltiples)
- show_home - Si muestra o no un enlace de 'Home (Inicio)'.
El CSS que estamos usando está codificado para adaptarse a la forma en que WordPress escupe una lista de navegación, es importante considerar cómo una lista será emitida en código por WordPress cuando se codifica un diseño.
Nuestra instalación de WordPress debería verse ahora así;
La próxima vez...
La próxima vez veremos la posibilidad de añadir una barra lateral funcional que esté preparada para los widgets, tipos de publicaciones dinámicas, campos personalizados y ¡cubrir los últimos elementos del tema!
Si hay algo de lo que no estabas seguro en esta publicación, o si solo tienes preguntas, no dudes en dejar un comentario a continuación. Para los que tengan preguntas o solo quieran saber más, el códice de WordPress es una mina de oro de información para todas las funciones y demás que usa WordPress.
By
