Tutorial de como crear tu tema en WordPress parte3

Bueno, tanto si te has saltado las otras partes porque caíste directamente en este articulo o si has llegado hasta aquí, voy a hacer un repaso.

En mi primer articulo de como crear tu tema en WordPress, estuvimos tocando y preparando la estructura de nuestro theme o plantilla.

En mi segundo articulo de como crear tu tema en WordPress, comenzamos a darle forma a la plantilla, haciendo funcionar la página de Inicio, la del blog y preparando el menú de navegación.

También tienes información de como instalar un servidor local Apache, para realizar tus pruebas y proyectos de forma local.

En este articulo final, vamos a completar el theme o plantilla en la que hemos estado trabajando a lo largo de este tutorial.

Categorías

Como podemos ver en la sección de Entradas>Categorías en el menú de la Izquierda de WordPress, tenemos unas opciones para crear categorías y clasificar artículos.

Vamos a crear la categoría General ya que estamos en esta página, veremos más adelante que implica este cambio.

Una vez hecho esto, vamos a añadir la función the_category() en el archivo home.php y single.php:

home.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>
  <?php the_category (); ?>
</header>
...
single.php
...
  <section>
    <h1><?php the_title(); ?></h1>
    <time datatime="<?php the_time('Y-m-j'); ?>"><?php the_time('j F, Y'); ?></time>
    <?php the_category (); ?>
    <?php the_content(); ?>
...

Ahora nuestro blog ya esta preparado para mostrar y redirigir a la correspondiente categoría del articulo mostrado.

Pero si visitamos el enlace de la categoría en cuestión, nos lo muestra en blanco!

Sin problema, eso es porque aún no hemos añadido código al archivo category.php, pero es justo el siguiente paso.

Así que abre tu archivo category.php y el archivo home.php, copia todo el código de home.php al archivo vacío category.php, edita la siguiente línea:

<?php the_category (); ?>
Y cambiala por esta:
...
<h2><?php single_cat_title(); ?></h2>
...

Autor

Si recuerdas en mi anterior articulo, cuando usamos la función the_author_posts_link() hicimos que el nombre de autor que se muestra en cada articulo, fuera un enlace, pero este solo dirigía a una página en blanco.

Vamos a cambiar esto, creando el archivo author.php, pero en vez de crear un archivo en blanco y añadir código en él, vamos a crear una copia del archivo category.php y renombrarlo a author.php, una vez hecho esto, procedemos a abrir el archivo para editar y cambiar las líneas tachadas que muestro a continuación, por las que están en negrita:

...
<!-- Archivo de cabecera global de WordPress -->
<?php get_header(); ?>
<!-- Título de categoría -->
<h2><?php single_cat_title(); ?></h2>
<!-- Autor -->
<p>Posts de <strong><?php echo get_the_author(); ?></strong></p>
...

Tags

En este caso, vamos a hacer como en el caso de las categorías, editando el archivo home.php y single.php para añadir la línea que indico a continuación en negrita:

home.php

home.php
...
<footer>
   <?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>            
   <address>Por <?php the_author_posts_link() ?></address>
</footer>
...
single.php
...
   <?php the_tags('<ul><li>','</li><li>','</li></ul>'); ?>
   <address>Por <?php the_author_posts_link() ?></address>
   </section>
...

Comentarios

Simplemente vamos a tener que añadir la función comments_template() en nuestro archivo single.php para llamar al archivo comment-template.php y que se muestran los comentarios y el formulario para que tus visitantes puedan comentar.

Abre el archivo single.php y añade la línea que muestro a continuación en negrita:

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

Widgets

Vamos a añadir nuestra barra de widgets en nuestro theme o plantilla (no obstante, recuerda que puedes añadir mas de un sidebar tal como explico en este tutorial).

Para ello vamos a nuestro archivo functions.php y añadimos las siguientes líneas en negrita:

/**
 * Crear nuestros menús gestionables desde el
 * administrador de WordPress.
 */
function mis_menus() {
 register_nav_menus(
   array(
     'navegation' => __( 'Menú de navegación' ),
   )
 );
}
add_action( 'init', 'mis_menus' );

/**
 * Crear una zonan de widgets que podremos gestionar
 * fácilmente desde administrador de 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');

Sidebar

Ahora solo queda abrir el archivo sidebar.php y añadir las siguientes líneas:

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

Para comprobar que todo funciona correctamente, antes de abrir nuestro proyecto en el navegador, vamos a añadir un widget en nuestra nueva barra lateral en la sección Apariencia>Widgets.

El buscador

Ahora ya falta poco para que nuestro theme o plantilla esté listo.

Casi todo funciona correctamente, ahora vamos a por el buscador, ya que a la hora de realizar una búsqueda, verás que vas a una página en blanco.

Para solucionar esto, vamos a hacer como antes, hacer una copia de home.php y renombrar el nuevo archivo a search.php y hacer la siguiente modificación con las líneas en negrita:

<!-- 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() ) : ?>

Ahora vamos a añadir una función en nuestro archivo functions.php para que la búsqueda excluya las páginas estáticas, con el siguiente código:

/**
* Filtrar resultados de búsqueda para que solo muestre
* posts en el listado
*/
function buscar_solo_posts($query) {
if($query->is_search) {
$query->set('post_type','post');
}
return $query;
}

add_filter('pre_get_posts','buscar_solo_posts');

La plantilla de página

Simplemente tenemos que hacer una copia del archivo front-page.php y nombrarlo a page.php.

La plantilla personalizada ‘Contacto’

Vamos a duplicar el archivo page.php y renombrarlo al nombre contacto.php y, seguidamente, le añadiremos las siguientes líneas en negrita:

<?php
/**
* Template Name: Plantilla de Contacto
*/
?>
<!-- Archivo de cabecera gobal de WordPress -->
<?php get_header(); ?>
<!-- Contenido de página de inicio -->
<?php if ( have_posts() ) : the_post(); ?>
<section>
  <h1><?php the_title(); ?></h1>
  <?php the_content(); ?>
  <form method="post" action="">
      <label for="name">Nombre</label><br>
      <input type="text" id="name" placeholder="Escribe aquí tu nombre y apellidos"><br>
      <label for="subject">Asunto</label><br>
      <input type="text" id="subject" placeholder="Motivo de tu consulta"><br>     
      <label for="message">Mensaje</label><br>
      <textarea id="message"></textarea><br>
      <button type="submit">Enviar datos</button><br>
  </form>
</section>
<?php endif; ?>
<!-- Archivo de barra lateral por defecto -->
<?php get_sidebar(); ?>
<!-- Archivo de pié global de WordPress -->
<?php get_footer(); ?>

Conclusiones

Espero que este tutorial te haya ayudado tanto como me ayudo a mi en su momento, a la hora de crear/editar un proyecto en WordPress.

< Como crear tu tema en WordPress parte2