Programación

Crear una plantilla de WordPress: Parte 2

Hace unos días escribí el primer artículo de cómo crear una plantilla de WordPress. Este es el segundo artículo, donde veremos algo más de código PHP para hacer más dinámica nuestra plantilla. Así que, no perdamos más el tiempo, ¡manos a la obra!.

Crear una plantilla de WordPress dinámica

Como bien comenté en el artículo anterior, es necesario que nuestra plantilla sea dinámica para poder mostrar el contenido que deseamos. Recordemos los archivos fundamentales con los que tiene que contar una plantilla de WordPress:

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

Si visitamos el artículo anterior, vemos que la mayoría del código escrito en los ficheros anteriores es HTML estático. Bueno, pues vamos a cambiar el código anterior para darle vida a esta plantilla.

Navegación

Para poder agregar los menús de nuestro sitio de WordPress es necesario registrar en el archivo functions.php una función que admita esta funcionalidad. Para ello, agregamos el siguiente código al ya existente del artículo anterior:


function bootstrapstarter_register_menu() {
register_nav_menu('header-menu', __( 'Header Menu' ));
}
add_action( 'init', 'bootstrapstarter_register_menu' );

Con esto, le indicamos a WordPress que tenemos un header-menu y que es dinámico, es decir, que se puede cambiar. También es necesario cambiar nuestro fichero header.php, concretamente el contenido entre las etiquetas nav. Sustituimos el contenido anterior por este:


<?php wp_nav_menu( array(
'theme_location' => 'header-menu',
'menu_class' => 'blog-nav list-inline'
) ); ?>

Como podéis ver, ya no existen etiquetas nav. En su lugar, se añade la función wp_nav_menu, propia de WordPress que devuelve las etiquetas mencionadas anteriormente. También se le dice dónde se coloca el menú y se le aplican los propios estilos en esa función.

Le daremos a nuestra plantilla también la posibilidad de mostrar el nombre del sitio y la descripción del mismo, como la mayoría de los temas de WordPress que podemos encontrar en el mercado. En este caso, solamente debemos editar la etiqueta div cuya clase es blog-header. El código que escribimos en la primera parte de la serie es el siguiente:


<div class="blog-header">
<h1 class="blog-title">The Bootstrap Blog</h1>
<p class="lead blog-description">The official example template of creating a blog with Bootstrap.</p>
</div>

En este caso, en lugar de borrar el div “padre”, simplemente cambiaremos el contenido. Es decir, se respetarán la mayoría de etiquetas, y solamente se cambiará el contenido de las mismas. El código resultante tras este cambio lo podemos ver en el siguiente bloque:


<div class="blog-header">
<h1 class="blog-title"><?php bloginfo( 'name' ); ?></h1>
<?php $description = get_bloginfo( 'description', 'display' ); ?>
<?php if($description) { ?><p class="lead blog-description"><?php echo $description ?></p><?php } ?>
</div>

Con todos estos cambios, ya tendríamos listo todo el fichero header.php que creamos anteriormente.

Footer

Ahora le toca el turno al pie de nuestra plantilla. ¿A quién no le gusta tener un texto de copyright en su plantilla? Pues es lo que haremos en esta sección: modificar el código de nuestro archivo footer.php para que muestre el copyright. Para poder realizar esta acción, hay que modificar de nuevo el fichero functions.php, pero no te preocupes, como antes, es añadir una nueva función al mismo. La función de la que hablamos es la siguiente:


function bootstrapstarter_widgets_init() {

register_sidebar( array(
'name' => 'Footer - Copyright Text',
'id' => 'footer_copyright_text',
'before_widget' => '<div class="footer_copyright_text">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
) );

}
add_action( 'widgets_init', 'bootstrapstarter_widgets_init' );

Una vez añadida esta función, simplemente debemos modificar el código de nuestro footer. Se sustituye todo el fichero por el siguiente contenido:


</div><!-- /.row -->

</div><!-- /.container -->

<footer class="blog-footer">
<?php if ( is_active_sidebar( 'footer-copyright-text' ) ) { dynamic_sidebar( 'footer-copyright-text' ); } ?>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Para finalizar esta segunda parte de cómo crear una plantilla de WordPress solamente nos quedaría modificar nuestro sidebar.php, que permita añadirle widgets.

Barra lateral

Como era de esperar, también es necesario editar el fichero functions.php. En este caso, hay que modificar el contenido de la función bootstrapstarter_widgets_init() definida anteriormente. El código que sustituye al contenido de esta función es el siguiente:


register_sidebar( array(
'name' => 'Sidebar - Inset',
'id' => 'sidebar-1',
'before_widget' => '<div class="sidebar-module sidebar-module-inset">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
) );

register_sidebar( array(
'name' => 'Sidebar - Default',
'id' => 'sidebar-2',
'before_widget' => '<div class="sidebar-module">',
'after_widget' => '</div>',
'before_title' => '<h4>',
'after_title' => '</h4>',
) );

 

 

También es necesario modificar el fichero sidebar.php. Hay que sustituir el contenido de este fichero por el siguiente:


<div class="col-sm-3 col-sm-offset-1 blog-sidebar">
<?php if ( is_active_sidebar( 'sidebar-1' ) ) { dynamic_sidebar( 'sidebar-1' ); } ?>
<?php if ( is_active_sidebar( 'sidebar-2' ) ) { dynamic_sidebar( 'sidebar-2' ); } ?>
</div><!-- /.blog-sidebar -->

 

 

De esta forma, si están activas se mostrarán las barras laterales, pudiendo añadir widgets desde el backoffice de WordPress.

Contenido

Ahora solamente queda hacer que se muestren los diferentes artículos. Para ello, es preciso modificar el contenido de index.php. Lo haremos rápido, pues el código es muy fácil de leer, ya que WordPress ofrece funciones para este tipo de acciones. El código para sustituir el escrito en el artículo anterior es el siguiente:


<?php get_header(); ?>
<div class="col-sm-8 blog-main">

<?php
if ( have_posts() ) {
while ( have_posts() ) : the_post();
?>
<div class="blog-post">
<h2 class="blog-post-title"><?php the_title(); ?></h2>
<p class="blog-post-meta"><?php the_date(); ?> by <?php the_author(); ?></p>
<?php the_content(); ?>
</div><!-- /.blog-post -->
<?php
endwhile;
}
?>

<nav>
<ul class="pager">
<li><?php next_posts_link('Previous'); ?></li>
<li><?php previous_posts_link('Next'); ?></li>
</ul>
</nav>

</div><!-- /.blog-main -->

<?php get_sidebar(); ?>

<?php get_footer(); ?>

 

 

Conclusiones

Como podéis ver, apenas tiene dificultad crear una plantilla para WordPress, eso sí, muy sencillita. Las posibilidades de diseño que existen son infinitas. Para más funcionalidades, WordPress ofrece una documentación para desarrolladores donde podemos encontrar ejemplos de funciones muy útiles para poder crear una plantilla de WordPress.

crear una plantilla de wordpress resultado

Si queremos desplegar nuestro tema, basta con comprimir la carpeta del proyecto en .zip y subirla a nuestra instalación de WordPress. Podéis descargar el código completo desde el siguiente enlace:

Descargar

También os animo a que probéis diferentes frameworks css, como MaterializeCSS y que me enseñéis vuestras plantillas.

Si tenéis alguna duda con este código o no os queda muy claro, escribidme en los comentarios e intentaré solucionar vuestros problemas 🙂

 

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Close

Adblock Detected

Por favor, desactiva tu adblock