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

Desarrollar un tema de WordPress desde cero (III)

Diseño de un tema para wordpress

Es el tercer post sobre la creación de un tema para nuestro wordpress. En este artículo veremos:

  • Añadir los comentarios, creando el archivo comments.php
  • Añadir archivos de estilo y javascript desde el archivo functions.php
  • Añadir una fuente de google desde el archivo functions.php
  • Que wordpress nos genere un título diferente para cada artículo
  • Generar automáticamente el atributo lang

Activar los comentarios en nuestra plantilla

Una de las grandes ventajas de wordpress es la capacidad de incluir comentarios. Volvemos a single.php para permitir los comentarios. Nuestro código actual es:

<?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(); ?>

Con el nuevo código modificado:

<?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() );
           // Comentarios
           if ( comments_open() || get_comments_number() ) :
              comments_template();
           endif;
           // fin de comentarios
        endwhile; endif; ?>
     </div><!-- /.blog-main -->
     <?php get_sidebar(); ?>
   </div><!-- /.row -->
<?php get_footer(); ?>
  • Función comments_open(), si los comentarios están permitidos, es una función boleana, quiere decir que solo retorna verdadero o falso.
  • Función get_comments_number(), nos devuelve el número de comentarios de un post en concreto.
  • Función comments_template(), busca en nuestra plantilla el archivo comments.php. Es el archivo que crearemos en el siguiente paso.

Creamos el archivo comments.php:

 
<?php if ( post_password_required() ) {
   return;
} ?>

<div id="comments" class="comentarios-area">
   <?php if ( have_comments() ) : ?>
      <h3 class="comentarios-titulo">
         <?php
         printf( _nx( 'One comment on “%2$s”', '%1$s comments on “%2$s”', get_comments_number(), 'comments title'), number_format_i18n( get_comments_number() ), get_the_title() );
         ?>
      </h3>
      <ul class="comentarios-lista">
         <?php
         wp_list_comments( array(
            'short_ping'  => true,
            'avatar_size' => 50,
         ) );
         ?>
      </ul>
   <?php endif; ?>
   <?php if ( ! comments_open() && get_comments_number() && post_type_supports( get_post_type(), 'comments' ) ) : ?>
       <p class="no-comentarios">
          <?php _e( 'Comments are closed.' ); ?>
       </p>
   <?php endif; ?>
   <?php comment_form(); ?>
</div>

 

Nuevas funciones:

  • Función post_password_required(), nos indica si el post actual está protegido con contraseña.
  • Función have_coments(), nos devuelve si el post tiene comentarios.
  • Función get_comments_number(), devuelve la cantidad total de comentarios de un post.
  • Función wp_list_comments(), muestra todos los comentarios de un post o página.
  • Función comment_form(), realiza la llamada al formulario de comentarios

Primero comprobamos si los comentarios están protegidos y es necesario contraseña. Seguidamente comprobamos si hay comentarios «if( have_comments())», mostramos el número de comentarios con la función get_comments_number(), la lista de comentarios wp_list_comments(), en el caso que los comentarios no estén disponibles, lo hacemos saber «comments_open()» y por último, colocamos el formulario de comentarios comment_form().

plantilla-bootsrap-blog-24

Vista previa de los comentarios en la plantilla, una vez creado el archivo comments.php

También podemos colocar el número de comentarios en la página principal, mostraremos el número de comentarios en el listado de los post. En content.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>
   <br><span class="nun_comentarios"><a href="<?php comments_link(); ?>">
   <?php printf( _nx('One Comment', '%1$s Comments', get_comments_number(), 'comments title', 'textdomain' ), number_format_i18n(get_comments_number()) ); ?>
   </a></span>
   <?php the_excerpt(); ?>
</div>
plantilla-bootsrap-blog-25

Debajo de la fecha de la publicación del articulo se observa el número de comentarios

Enqueue Scripts and Stylesheets.

En el capitulo anterior hemos añadido los archivos CSS directamente en el header.php. Toca hacerlo de una forma más correcta, a través del archivo functions.php. Antes hemos hablado de los filtros para modificar el atributo class en los enlaces, ahora utilizaremos una acción, add_action(). Recordad que una acción era: cuando llegues a tal sitio, «haz esto».

// Añadir CSS y scripts

function bootstrap_scripts() {
   wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.6' );
   wp_enqueue_style( 'blog', get_template_directory_uri() . '/style.css' );
}
  
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

Siguiente paso es limpiar el archivo header.php:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <title>Blog Template for Bootstrap</title>
  <?php wp_head();?>
</head>
  
<body>
  
  <div class="blog-masthead">
     <div class="container">
        <nav class="nav blog-nav">
            <?php wp_list_pages( '&title_li='); ?>
        </nav>
     </div>
  </div>
  
  <div class="blog-header">
     <div class="container">
        <a href="<?php bloginfo( 'wpurl' );?>"><h1 class="blog-title"><?php echo get_bloginfo( 'name' ); ?></h1></a>
        <p class="lead blog-description"><?php echo get_bloginfo( 'description' ); ?></p>
     </div>
  </div>
  
  <div class="container">  <!--  inicio container - se cierra en footer.php  -->

Para cargar los archivos de js. Primero creamos la carpeta js en nuestro tema y colocamos el archivo de js:

plantilla-bootsrap-blog-26

Creamos una nueva carpeta «js», donde colocamos los archivos de javascript

Añadimos la línea de código en functions.php, nuestro código quedará:

<?php
// Añadir CSS y scripts
function bootstrap_scripts() {
  wp_enqueue_style( 'bootstrap', get_template_directory_uri() . '/css/bootstrap.min.css', array(), '3.3.6' );
  wp_enqueue_style( 'blog', get_template_directory_uri() . '/style.css' );
  wp_enqueue_script( 'bootstrap', get_template_directory_uri() . '/js/bootstrap.min.js', array('jquery'), '3.3.6', true );
}
  
add_action( 'wp_enqueue_scripts', 'bootstrap_scripts' );

y limpiamos el archivo footer.php dejándolo:

</div><!-- /.container -->
  
<footer class="blog-footer">
   <p>Blog template built for <a href="https://getbootstrap.com">Bootstrap</a> by <a href="https://twitter.com/mdo">@mdo</a>.</p>
   <p>
      <a href="#">Back to top</a>
   </p>
</footer>
<?php wp_footer(); ?>
</body>
</html>

Hemos borrado el código sobrante y añadido la función wp_footer(), el archivo bootstrap.min.js se añadirá al pie de nuestro blog.

Enqueue Google Fonts. Añadir fuentes de google

Para añadir fuentes de google es necesario añadir en functions.php el siguiente código:

 
// Añadir Google Fonts
function bootstrap_google_fonts() {
  wp_register_style('OpenSans', 'http://fonts.googleapis.com/css?family=Open+Sans:400,600,700,800');
  wp_enqueue_style( 'OpenSans');
}
  
add_action('wp_print_styles', 'bootstrap_google_fonts');

¿Cómo podemos comprobar si se ha añadido correctamente?

plantilla-bootsrap-blog-27

Comprobamos si se ha añadido correctamente la fuente de google en el head

Pequeños arreglos en el archivo header.php

Corregir el título de wordPress

En el archivo header.php buscar:

<title>Blog Template for Bootstrap</title>

Modificar por:

<title><?php echo get_bloginfo( 'name' ); ?></title>

¿Qué problema nos surge al hacerlo de esta forma? Todas las páginas tienen el mismo título, sin embargo si eliminamos del header.php la línea correspondiente al título y añadimos en functions.php el siguiente código:

// WordPress Títulos
add_theme_support( 'title-tag' );

Automáticamente el wordPress nos genera el título correspondiente a cada artículo (post) o página.

Modificar el atributo lang automáticamente, buscamos en header.php:

<html lang="en">

y cambiarlo por:

<html <?php language_attributes(); ?>>

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

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