DeWebIdea » WordPress » Desarrollar un tema de WordPress desde cero (II)

Desarrollar un tema de WordPress desde cero (II)

Diseño de un tema para wordpress

En el post anterior, desarrollar un tema de wordpress desde cero, se inició el desarrollo de una plantilla de wordpress con el framework de boostrap. Se generó la estructura principal, creando los archivos:

  • style.css
  • index.php
  • header.php
  • footer.php
  • sidebar.php
  • content.php

El objetivo de este post, es conseguir que las páginas y los artículos, post, tengan un diseño diferente. Las páginas tendrán un diseño que ocupará el 100% del ancho, mientras que los artículos o entradas tendrán un columna lateral con el sidebar. Archivos nuevos que veremos:

  • page.php
  • single.php
  • content-single.php
  • content-page.php

Terminaremos el artículo añadiendo la paginación a nuestra plantilla.

El archivo page.php

Para personalizar y diferenciar las páginas del resto del blog creamos un nuevo archivo page.php en la carpeta de nuestro tema. Imaginad que queremos que nuestras páginas no tengan la barra sidebar y ocupen el ancho total. El código de page.php sería:

<?php get_header(); ?>
   <div class="row">
      <div class="col-sm-12">
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
            get_template_part( 'content', get_post_format() );
         endwhile; endif; ?>
      </div><!-- /.blog-main -->
   </div><!-- /.row -->
<?php get_footer(); ?>

Comparad con el de index.php. El div correspondiente al contenido lo hemos modificado de 8 a 12 columnas y la llamada al archivo sidebar.php la hemos eliminado. Si comprobamos el resultado:

plantilla-bootsrap-blog-17

Vista de la página de nuestra plantilla desde el archivo page.php. El sidebar ya no se aprecia, y la columna de contenido ocupa el ancho total

El archivo single.php

Creamos un nuevo archivo denominado single.php, la función de este archivo es mostrar cada post individualmente, cuando presionamos sobre algún post del listado de index.php nos llevará a este archivo. Va a ser un duplicado exacto de index.php, excepto por la llamada al archivo content.php, que será a content-single.php. El código quedaría de la siguiente forma:

<?php get_header(); ?>
   <div class="row">
      <div class="col-sm-8 blog-main">
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
            get_template_part( 'content-single', get_post_format() );
         endwhile; endif; ?>
      </div><!-- /.blog-main -->
      <?php get_sidebar(); ?>
   </div><!-- /.row -->
<?php get_footer(); ?>

Antes de continuar, vamos a crear el enlace que nos permita llegar a la lectura del post. Buscamos en content.php el código correspondiente al título:

<h2 class="blog-post-title"><?php the_title(); ?></h2>

y lo modificamos añadiendo la etiqueta de enlace y la función the_permalink(), esta función muestra el enlace permanente de cada post

<h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>

En el listado de nuestros post en el blog ahora mismo nos aparece todo el artículo completo, el siguiente paso es conseguir un extracto del artículo. Buscamos en conten.php la función the_content() y lo cambiamos por:

<?php the_excerpt(); ?>

La función the_content(), muestra el contenido del post, mientras que la función the_excerpt(), muestra una versión más corta, por defecto nos muestra 55 palabras del post.

Si comprobamos nuestro blog:

plantilla-bootsrap-blog-18

Vista del listado de entradas despues de modificar el archivo content.php. Nos muestra los títulos de las entradas como enlaces y un extracto del artículo

Los artículos ya no aparecen completos y el título del post nos funciona como enlace para leer el artículo completo, si lo probamos todavía no funciona, nos falta crear el archivo conten-single.php.

El archivo conten-single.php

Este archivo nos va a mostrar el contenido del artículo completo. El código es el mismo que content.php antes de modificarlo, tendremos la función the_content(), nos interesa mostrar el contenido completo del artículo, no un extracto.

<div class="blog-post">
   <h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
   <?php the_date(); ?> by <a href="#"><?php the_author(); ?></a>
   <?php the_content(); ?>
</div>
<!-- /.blog-post -->

La estructura de nuestro tema por ahora es la siguiente:

plantilla-bootsrap-blog-19

Estructura de la plantilla bootstrap con los archivos nuevos page.php, single.php y content-single.php

Resumen: entramos a nuestro blog, el index.php crea un bucle llamando a conten.php para mostrarnos un listado de entradas (post). Si presionamos para ver un artículo, realiza una llamada al single.php, que carga el artículo en el conten-single.php. Si lo que hacemos es presionar para ir a una página, se carga el archivo page.php, que realiza una llamada a content.php mostrándonos sólo una parte del contenido de la página, como si fuera el listado de artículos (post). Nos falta crear el archivo que carga el contenido de la página, content-page.php.

El archivo content-page.php

Este archivo nos muestra el contenido de una página, creamos un nuevo archivo en la carpeta de nuestro tema llamado content-page.php. Por ahora su código es como content-single.php.

<div class="blog-post">
   <h2 class="blog-post-title"><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
   <?php the_date(); ?> by <a href="#"><?php the_author(); ?></a>
   <?php the_content(); ?>
</div>
<!-- /.blog-post -->

Para que se cargue el archivo content-page.php nos falta realizar un pequeño cambio en page.php. Buscamos en el archivo page.php:

get_template_part( 'content', get_post_format() );

y lo modificamos por:

get_template_part( 'content-page', get_post_format() );

con este cambio evitamos que se cargue content.php que contiene la función the_excerpt(), recordad que esta función muestra un extracto del artículo, mientras que la función the_content() carga el articulo completo.

La paginación del wordpress

Conforme aumenten las entradas en nuestro blog vamos a necesitar alguna forma de pasar a las entradas más antiguas. Crearemos los enlaces de paginación:

plantilla-bootsrap-blog-20

Paginación de nuestra plantilla de wordpress

En la actualidad nuestro archivo index.php contiene:

<?php get_header(); ?>
   <div class="row">
      <div class="col-sm-8 blog-main">
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
            get_template_part( 'content', get_post_format() );
         endwhile; endif; ?>
      </div><!-- /.blog-main -->
      <?php get_sidebar(); ?>
   </div><!-- /.row -->
<?php get_footer(); ?>

Bien, ¿dónde tenemos que colocar la paginación? Hay que fijarse bien que tenemos un bucle if (Si) y while (Mientras), nuestro código se debe colocar despues del while, pero dentro del if. Si lo colocamos dentro del while se repetirá para cada post. La nuevas funciones que hemos utilizado son next_posts_link() y previous_posts_link().

  • next_posts_link(), muestra un enlace a la página siguiente.
  • previous_posts_link(), muestra un enlace a la página con los post anteriores.

 

<?php get_header(); ?>
   <div class="row">
      <div class="col-sm-8 blog-main">
         <?php if ( have_posts() ) : while ( have_posts() ) : the_post();
            get_template_part( 'content', get_post_format() );
         endwhile;
          ?>
         <nav class="blog-pagination">
            <?php next_posts_link( 'Anteriores' ); ?>
            <?php previous_posts_link( 'Siguientes' ); ?>
         </nav>
         <?php  
         endif; ?>
      </div><!-- /.blog-main -->
      <?php get_sidebar(); ?>
   </div><!-- /.row -->
<?php get_footer(); ?>

Si nos fijamos en nuestro blog, veremos que no queda como el de la plantilla de ejemplo, se debe a que las funciones que hemos utilizado no colocan la clase «btn btn-outline-primary» en los enlaces:

plantilla-bootsrap-blog-21

Podemos comprobar que la clase btn btn-outline-primary no aparece en los enlaces

Para poder añadir la clase a los enlaces necesitamos añadir un nuevo archivo, functions.php, que nos va a servir para personalizar nuestro tema.

El archivo functions.php

Es un archivo de funciones opcional disponible en casi cualquier tema de WordPress. Para que un tema funcione, no es necesario que exista este archivo, hasta ahora no lo hemos necesitado, por eso no lo hemos creado, pero para añadir las clases a los enlaces de paginación si lo vamos a necesitar. Creamos el archivo function.php.

¿Cómo funciona este archivo?

En WordPress existe la posibilidad de modificar el comportamiento o funcionamiento por defecto, se utilizan términos genéricos, Hook, para hacer referencia al lugar donde queremos realizar la modificación. Existen dos tipos: Acciones, «cuando llegues haz esto», y filtros, «cuando llegues cámbiame la información por ésta».

plantilla-bootsrap-blog-22

Crear el archivo functions.php

Para cambiar los atributos de los enlaces se utilizará un filtro. Se utiliza la función add_filter( $tag, $value ), donde $tag, es el nombre del filtro donde inyectaremos el codigo y $value, es la función que queremos ejecutar

<?php
// añadir el atributo class a los enlaces de paginación
add_filter('next_posts_link_attributes', 'posts_link_attributes');
add_filter('previous_posts_link_attributes', 'posts_link_attributes');
function posts_link_attributes() {
   return 'class="btn btn-outline-primary"';
}
?>
plantilla-bootsrap-blog-23

Se puede observar como aparece class=»btn btn-outline-primary» después de añadir el filtro

Ya tenemos nuestra paginación funcionando y con la clase que necesitamos para los estilos.

Sé el primero en comentar en «Desarrollar un tema de WordPress desde cero (II)»

Deja un comentario

Tu dirección de correo electrónico no será publicada.


*


Uso de cookies

Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies, pinche el enlace para mayor información.

ACEPTAR
Aviso de cookies