Finalizamos nuestro articulo anterior creando dos paginas en nuestro panel de WordPress, ahora vamos a asignar a cada una de estas páginas su función. Accederemos a «Ajustes > Lectura» y activaremos la opción «Una página estática». Se activaran los dos desplegables que están justo debajo. En «Página inicial», seleccionaremos la página que hemos creado «Inicio» y para la opción «Página de entradas», elegiremos «Blog».

crear-tema-paginas-widgets   crear-tema-paginas-widgets-tema-wordpress

Ya tendremos la página de inicio funcionando, aunque todavía no se puede acceder al blog, es necesario crear un menú de navegación que podremos gestionar desde el panel de administración de WordPress.

Menú de Navegación

Debemos crear zonas de menú para activar los menus de la plantilla. Se pueden crear tantas como desees. Generaremos nuestro primer menú, debemos abrir el archivo functions.php e insertar el siguiente código:

<?php
 
/**
 * Crear menú Wordpress.
 */
 
function mis_menus() {
  register_nav_menus(
    array(
      'navegation' => __( 'Menú de navegación' ),
    )
  );
}
add_action( 'init', 'mi_menu' );

Debemos crear una función PHP, tu puedes ponerle el nombre que desees, yo la nombre mi_menu(). Esta función sirve para registrar los menús, y que WordPress permita editarlos con la función register_nav_menus(). Mediante un array, añadimos los menús que necesitemos. Para que WordPress trabaje con la función de menús, debemos usar la función add_action(). Indicaremos en el primer parámetro, cuándo se desea ejecutar la función y en el segundo, el nombre de la función que ejecutaremos, en este caso «mi_menu». Volvemos a nuestro panel de administración WordPress y en «Apariencia», tendremos el ítem «Menús». Crearemos nuestro menú en la zona en la que que hemos registrado en el archivo functions.php. Le podemos ponemos cualquier nombre que nos ayude a identificarlo, luego agregaremos las paginas a nuestro menú y dejaremos activa la función «Mostrar ubicación» > «Menú de navegación».

crear-tema-paginas

Si navegamos por la página veremos que no nos aparece ningún menú. Eso es porque hemos registrado el menú, pero no hemos indicado en qué parte de la plantilla queremos que aparezca. Volvemos a abrir el archivo header.php y agregamos el siguiente código al final del archivo:

<!DOCTYPE html>
<html lang="<?php bloginfo('language'); ?>">
  <head>
    <meta charset="<?php bloginfo('charset'); ?>">
    <title><?php bloginfo('name'); ?></title>
    <link rel="stylesheet" href="<?php bloginfo('stylesheet_url') ?>">
    <?php wp_head(); ?>
  </head>
  <body>
    <header>
      <h1><?php bloginfo('name'); ?></h1>
    </header>
 
<!-- Aquí agregamos el nuevo código para nuestro menú de navegación -->
 
    <nav>
      <ul class="main-nav">
        <?php wp_nav_menu( array( 'theme_location' => 'navegation' ) ); ?>
      </ul>
    </nav>

Ya tendremos una plantilla con página de inicio y un blog completamente funcional con un menú de navegación que nos permite cambiar de secciones y navegar por las pestañas.

Categorías

En la sección de entradas del administrador de WordPress, encontramos un item «categorías», este nos permite otorgarle una o varias categorías a cada una de las entradas para crear filtros en nuestro blog.  Debemos crear algunas categorías y asignarlas a entradas que ya tengamos. Luego abrimos el archivo home.php y añadiremos la función the_category(), que mostrara la lista de categorías asignadas en cada entrada. Repetiremos la misma acción en la plantilla single.php.

...
<header>
  <h1><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h1>
  <time datatime="<?php the_time('Y-m-j'); ?>"><?php the_time('j F, Y'); ?></time>
<!-- Agregamos acá las categorías -->
  <?php the_category (); ?>
</header>
...

Podremos comprobar que en cada Entrada aparecen las categorías que tiene asignadas. En el archivo category.php copiaremos el codigo que se encuentra en el home.php, luego agregaremos la función single_cat_title().  

<!-- Archivo de cabecera global de Wordpress -->
<?php get_header(); ?>
<!-- Título de categoría -->
<h2><?php single_cat_title(); ?></h2>
...

 

Autor

Duplicamos el archivo category.php y lo re-nombramos como author.php. Luego reemplazamos las líneas que aparecen tachadas por las que especifico en el comentario del código. Agregaremos ademas una línea en la que podremos decirle a los usuarios que están viendo la entradas escritas por un autor especifico.

<!-- Archivo de cabecera global de Wordpress -->
<?php get_header(); ?>
<!-- las lineas a continuación son las  que debes borrar y reemplazar -->
<!-- Título de categoría -->
<h2><?php single_cat_title(); ?></h2>
<!-- las lineas a continuación son las que debes agregar para el "Autor" -->
<p>Posts de <strong><?php echo get_the_author(); ?></strong></p>
<!-- Listado de posts -->
<?php if ( have_posts() ) : ?>
...

 

Etiquetas o ‘Tags’

Nos aseguraremos de que tengamos disponibles algunas entradas a las que le añadimos tags o etiquetas y volveremos a nuestro archivo home.php para agregar la función the_tags().

...
<footer>
<!-- A continuación agregamos etiquetas -->
   <?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>            
   <address>Por <?php the_author_posts_link() ?></address>
</footer>
...

Repetiremos el mismo proceso en el archivo single.php. Veremos que nuestros tags ya aparecen formando una lista, pero si hacemos clic en uno de ellos nos llevará a una página en blanco. Para solucionar este asunto, debemos duplicar el archivo category.php y cambiar el nombre por tag.php.

Los comentarios

Para añadir un sistema de comentarios al blog, abriremos el archivo single.php e incorporaremos la función de WordPress comments_template(). Con ella llamaremos el archivo comment-template.php del directorio wp-includes de WordPress.

...
   <address>Por <?php the_author_posts_link() ?></address>
   <!-- Comentarios -->
   <?php comments_template(); ?>
</section>
...

Podríamos crear el archivo comments.php en nuestra plantilla para personalizar el aspecto de los comentarios de nuestro blog, si WordPress detecta el archivo, lo prioriza respecto a comment-template.php. Nosotros no usaremos un aspecto diferente, por lo que recomiendo que elimines el archivo comment-template.php del directorio de la plantilla.

Zona de Widgets

Vamos a crear una zona de widgets en la barra lateral del blog. Debemos abrir nuestro archivo functions.php, donde agregaremos el nuevo código.

...
add_action( 'init', 'mis_menus' );
 
/**
 * Crear una zona de widgets Wordpress.
 */
 
function mis_widgets(){
 register_sidebar(
   array(
       'name'          => __( 'Sidebar' ),
       'id'            => 'sidebar',
       'before_widget' => '<div class="widget">',
       'after_widget'  => '</div>',
       'before_title'  => '<h3>',
       'after_title'   => '</h3>',
   )
 );
}
add_action('init','mis_widgets');

Ya tendría que aparecer una zona de widgets bajo el nombre de Barra lateral (o Sidebar, si tu instalación está en inglés). Nuestra barra lateral todavía no mostrará ningún widget, primero debemos abrir el archivo sidebar.php y añadir lo siguiente:

<aside>
  <!-- Zona de Widgets -->
  <?php dynamic_sidebar('sidebar'); ?>
</aside>

Usamos la etiqueta de HTML5 <aside> y hacemos una llamada a nuestra zona de widgets con la función dynamic_sidebar(), de esta manera indicamos el identificador de la zona que queremos mostrar. Hasta el momento no le estamos aplicando ningún estilo a la plantilla, es por esto que los widgets aparecerán en la parte inferior de las páginas y no al lado.

Buscador WordPress

Si haces una búsqueda en el wodget de «Buscador», ésta te llevará una página en blanco. Debemos copiar el código del archivo home.php, y pegarlo en el archivo search.php, luego efectuaremos una pequeña modificación.

<!-- Archivo de cabecera global de Wordpress -->
<?php get_header(); ?>
<!-- Búsqueda -->
<p>Resultados de búsqueda para <strong><?php echo get_search_query() ?></strong></p>
<!-- Listado de posts -->
<?php if ( have_posts() ) : ?>
...

 


Las conclusiones

Ya tenemos un tema de WordPress con un blog completo y funcional. Sin embargo, nuestro tema no estaría preparado en el caso de crear una página de contenido. asi que por ultimo iremos a nuestro administrador de WordPress y crearemos una nueva página de contenido junto a Inicio y Blog, la llamaremos como deseemos. Luego vamos al gestor de menús y la añadimos. Si tratamos de acceder a esta página, nos damos cuenta que la página aparece en blanco. Para solucionarlo, abrimos el archivo page.php y utilizamos el mismo código que tenemos en front-page.php. Así ya tendremos lista una plantilla que se utilizará por defecto para todas las páginas que creemos.

Espero que estos artículos te hayan ayudado a entender mejor WordPress y la estructura de sus plantillas. Hasta el momento a este tema no le hemos agregado ningún estilo, tendras que agregarlos en el archivo styles.css, que modificamos en la primera entrada del proyecto. No olvides comentar si tienes alguna duda y si te gusto puedes compartirlo ¡Muchas Gracias!

Puedes descargar los archivos de este tutorial aquí.

 

Share This