Comunidad de diseño web y desarrollo en internet online

Template de Wordpress: pasar HTML5 a Wordpress (II)

Por jordano_p el 04 de Abril de 2012 con 36,958 visitas

PHP, MySQL y Servidor Otros tutoriales por jordano_p.

Retomamos la segunda parte de la conversión de HTML5 a Wordpress, en esta segunda parte configuraremos el archivo single.php que es el archivo que muestra los post completos, sus comentarios y un formulario para que los usuarios puedan enviar comentarios a la entrada.

Descargas y resultados del tutorial




Aspecto final de la página single.php




Tutoriales anteriores




En esta segunda parte trataremos los siguientes temas:
  • Dividir la estructura del archivo index.php en: (Header.php, index.php, footer.php y sidebar.php)
  • Configuración del archivo single.php
  • Agregar Navegación de los posts desde el archivo single.php
  • Configurar los comentarios de cada post


Dividir el archivo index.php

Para iniciar con el tutorial vamos a dividir el archivo index.php en tres partes(header.php, footer.php y sidebar.php). El código que tenemos en el archivo index.php será dividido entre estos tres archivos, como se muestra en la siguiente imagen.



Para empezar crearemos los tres archivos antes mencionados y deberíamos de tener una estructura de archivos hasta este punto del tutorial como muestra la siguiente imagen.



Código para el header.php

Empezaremos a trabajar con el header.php, para ello cortaremos del index.php el siguiente trozo de código y lo pegaremos en el header.php, no explicaré todo el código ya que lo explicamos anteriormente en la codificación del index, además lo dejo comentado por si no se acuerdan para qué sirve cada trozo de código.

Código :

<!DOCTYPE HTML>
<html <?php language_attributes(); ?>>
<head>

   <!-- METAS -->
   <meta charset="<?php bloginfo( 'charset' ); //cambiamos <meta charset="utf-8"> por su   ?>" />
   <!-- /METAS -->

   <title><?php
        /*Con este código agregamos a wordpress un título que cambia dependiendo
        * del lugar donde te encuentres en el blog. También puede utilizar <?php bloginfo('name'); ?>
        * Muestra en la etiqueta <title> el nombre de lo que está viendo, la forma en la que lo estamos creando
        * es mucho más amigable para los navegadores ya que muestra información de cada lugar que estés.
        */
        global $page, $paged;

        wp_title( '|', true, 'right' );

        // Agrega el nombre del blog.
        bloginfo( 'name' );

        // Agrega la descripción del blog, en la página principal.
        $site_description = get_bloginfo( 'description', 'display' );
        if ( $site_description && ( is_home() || is_front_page() ) )
        echo " | $site_description";

        // Agrega el número de página si es necesario:
        if ( $paged >= 2 || $page >= 2 )
        echo ' | ' . sprintf( __( 'Page %s', 'twentyten' ), max( $paged, $page ) );
        ?>
   </title>

   <!-- CSS -->
   <link href='<?php bloginfo( 'stylesheet_url' ); ?>' rel="stylesheet" />
   <!-- /CSS -->

   <!-- RSS & PINGBACKS -->
   <link rel="pingback" href="<?php bloginfo( 'pingback_url' ); ?>" />
   <link rel="alternate" type="application/rss+xml" title="<?php bloginfo( 'name' ); ?>" href="<?php bloginfo( 'rss2_url' ); ?>" />
   <!-- /RSS & PINGBACKS -->

   <?php /* Para compatibilizar HTML5 con navegadores antiguos */ ?>
   <!--[if IE]>
   <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
   <![endif]-->

   <?php
        /*Siempre agrege wp_head antes del cierre de </ head> de su thema,
        * si no lo agrega puede que muchos plugins no funcionen ya que
        * lo utilizan este gancho (hook)para agregar elementos al head.
        */
        wp_head();
   ?>

       <script>
      $(document).ready(function()
         {
         //Slider Show
            var pager = true;//ESTABLECE A FALSE PARA DESACTIVAR LA PAGINACIÓN.

            var oSlider = $('#slider-wrapper');
            if(oSlider.length > 0)
            {
               oSlider.tinycarousel(
               {    pager: true, //paginación
                  interval: true, //Auto Play
                  duration: 300 //retardo de pase de imagen
               });
            }
         });
      </script>

</head>

   <body <?php body_class(); ?>>

      <!-- WRAPPER -->
      <div id="wrapper" class="clearfix">

         <!-- NAV#TOP-MENU -->
         <nav id="top-menu" role="navigation" class="clearfix">

            <!-- ul Menú -->
            <?php wp_nav_menu( array('theme_location' => 'MenuPrincipal', 'container' => 'false' )); ?>
            <!-- final ul Menú-->

            <!-- .Top-search -->
            <div class="top-search">
               <form  method="get" id="searchform" action="#">
                  <input type="text" value="" name="s" id="s" placeholder="Buscar..." />
                  <button id="searchsubmit">Go</button>
               </form>
            </div>
            <!-- Final .Top-search  -->

         </nav>
         <!-- FINAL NAV#TOP-MENU -->

         <!-- HEADER -->
         <header id="header" class="clearfix">

            <?php
            $query = new WP_Query();
            $query->query('posts_per_page=5&cat=9');
            $post_count = $query->post_count;
            ?>
            <!-- #slider-wrapper -->
            <div id="slider-wrapper">

               <!-- .viewport -->
               <div class="viewport clearfix">

                  <div>
                     <ul class="overview">
                     <?php if ($query->have_posts()) : while ($query->have_posts()) : $query->the_post(); ?>
                        <li>
                           <a href="<?php the_permalink();?>"><?php the_post_thumbnail('slider-thumbnail') ?></a>
                        </li>
                     <?php endwhile; ?>
                     </ul>
                  </div>

               </div>
               <!-- Final .viewport -->

               <!-- .slider-controls -->
               <div class="slider-controls">

                  <!-- .pager -->
                  <ul class="pager">
                  <?php for($i = 0; $i < $post_count; $i++ ){
                     echo'<li><a href="#" class="pagenum" rel="'.$i.'">'.$i.'</a></li>';}?>
                  </ul>
                  <!-- Final .pager -->

                  <!-- .button-left , .button-right -->
                  <div class="button-left">
                     <a class="buttons prev" href="#">left</a>
                     <span></span>
                  </div>

                  <div class="button-right">
                     <a href="#" class="buttons next">right</a>
                     <span></span>
                  </div>
                  <!-- Final .button-left , .button-right -->

               </div>
               <!-- Final .slider-controls -->
               <?php endif?>
            </div>
            <!-- Final #slider-wrapper -->

            <!-- #logo -->
            <h1 id="logo">
               <a href="<?php echo home_url(); ?>"
                 title="<?php bloginfo('description')?>">
                         <?php bloginfo('name');?>
               </a>
            </h1>
            <!-- Final #logo -->

            <!-- .vermasVideos -->
            <div class="vermasVideos"><a href="#">Ver Más videos</a></div>
            <!-- Final .vermasVideos -->

         </header>
         <!-- FINAL HEADER -->

         <!-- #MAIN -->
         <div id="main" class="clearfix">

            <!-- .main-content -->
            <div class="main-content clearfix">
En el mismo lugar del index.php donde cortamos ese código incluiremos el archivo header.php mediante la función get_header(), con esto ya tenemos el header incluido en el index.php desde un archivo externo.

Código :

<?php get_header(); ?>


Código para el footer.php

Para el footer.php haremos lo mismo, del index.php cortaremos el siguiente código y lo pegaremos en el archivo footer.php que creamos anteriormente.

Código :

            </div>
            <!-- final .main-content -->

         </div>
         <!-- FINAL #MAIN -->

         <!-- #FOOTER -->
         <footer id="footer" class="clearfix" role="contentinfo">

            <!-- .Copy -->
            <p class="copy">&copy;2010 Music.com. All rights reserved.</p>
            <!-- Final .Copy -->

            <!-- Menu Footer -->
            <?php wp_nav_menu( array('theme_location' => 'MenuFooter',
                               'container' => 'false' ));
            ?>
            <!-- Final Menu Footer -->

            <!-- .GoTop -->
            <a href="#" class="goTop">Ir Arriba</a>
            <!-- Final .GoTop -->

         </footer>
         <!-- FINAL #FOOTER -->

      </div>
      <!-- FINAL WRAPPER -->
      <?php wp_footer();?>
   </body>
</html>
Para terminar con el footer sólo nos queda llamar el archivo footer, para ello utilizaremos la función get_footer() desde el archivo index.php en el mismo lugar donde cortamos el código en el index.php.

Código :

<?php get_footer(); ?>

Código para el sidebar.php

Para el sidebar lo mismo, cortamos el siguiente código del archivo index.php y lo pegamos en el archivo sidebar.php.

Código :

<!-- #sidebar -->
<aside id="sidebar" role="complementary">

   <!-- Widget Últimas Noticias -->
   <aside class="widget" id="ultimas-noticias">
      <h3>Últimas Noticias</h3>
      <ul>
         <li>
            <a href="#">Alejandro Sanz</a>
            <p>Miércoles - 8-09-2010</p>
            <p>Palacio de los Deportes Madrid</p>
         </li>

         <li>
            <a href="#">Alejandro Sanz</a>
            <p>Miércoles - 8-09-2010</p>
            <p>Palacio de los Deportes Madrid</p>
         </li>

         <li>
            <a href="#">Alejandro Sanz</a>
            <p>Miércoles - 8-09-2010</p>
            <p>Palacio de los Deportes Madrid</p>
         </li>
      </ul>
   </aside>
   <!-- Final Widget Últimas Noticias -->

   <!-- Widget Últimos Videos -->
   <aside class="widget" id="ultimos-videos">
      <h3>Últimas Noticias</h3>
      <ul>
         <li class="clearfix">
            <img src="images/tmp/list-video1.jpg" alt="">
            <p><a href="#">Mi princesa</a></p>
            <p>David Bisbal</p>
         </li>

         <li class="clearfix">
            <img src="images/tmp/list-video2.jpg" alt="">
            <p><a href="#">Desde Cuando</a></p>
            <p>Alejandro Sanz</p>
         </li>

         <li class="clearfix">
            <img src="images/tmp/list-video3.jpg" alt="">
            <p><a href="#">Mientes</a></p>
            <p>Camila</p>
         </li>

         <li class="clearfix">
            <img src="images/tmp/list-video4.jpg" alt="">
            <p><a href="#">Bad Romance</a></p>
            <p>Lady Gaga</p>
         </li>
      </ul>
   </aside>
   <!-- Final Widget Últimos Videos -->

   <!-- Widget Contáctenos -->
   <aside class="widget">
      <h3>Contáctenos</h3>
      <form id="wiget-contact" action="#" method="post" name="Widget-Contact">
         <p><input id="form-nombre" type="text" placeholder="Nombre" name="Nombre"></p>
         <p><input id="form-email" type="email" placeholder="Email" name="Email"></p>
         <p><textarea id="form-mensage" cols="0" rows="8" placeholder="Su Mensaje..." name="Mensaje"></textarea></p>
         <p><button id="form-enviar">Enviar</button></p>
      </form>
   </aside>
   <!-- Final Widget Contáctenos -->

</aside>
<!-- Final #sidebar -->
Para llamar el sidebar desde el index.php utilizaremos en el mismo lugar donde cortamos el código anterior la función get_sidebar().

Código :

<?php get_sidebar(); ?>


Las funciones utilizadas para incluir estos archivos nos dan algunas funcionalidades más avanzadas, esta función acepta parámetros que en algún momento pueden ser de mucha ayuda.

Por ejemplo: si queremos tener un sidebar en distintas situaciones podemos crear un archivo para cada situación, si creamos un archivo sidebar-404.php, podemos incluir este archivo cuando la página que se muestra sea la página 404.php utilizando la misma función pasándole como parámetro el nombre del archivo(get_sidebar('404')) y haciendo uso de las funciones condicionales de wordpress para gestionar la visualización de los archivos.

Esto solo es un ejemplo, lo mismo puede hacerlo con los demás archivos, para ampliar la información sobre esto puede visitar la información completa en codex wordpress

Con esto ya tenemos los archivos separados cada uno en su fichero independiente e incluido en el index mediante sus respectivas funciones. Lo siguiente será configurar el archivo single.php que es donde se visualizarán las entradas.

Configurar el archivo single.php

Nuestro single.php es bastante simple, estará formado por el contenido, una imagen representativa del post, el listado de comentarios, el formulario para comentar y el sidebar.

Para crear el archivo single.php duplicamos el index.php y cambiamos su nombre a single.php, este archivo prácticamente tiene lo que necesitamos, solo eliminaremos algunas líneas de código y agregaremos otras.

Contenido del post

En el single.php buscamos las líneas correspondientes al loop. Tienen una consulta personalizada que no necesitamos en el single.php, con lo cual eliminaremos las líneas de código del loop y lo cambiaremos por el loop simple de wordpress.

Código :

<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>

Para mostrar el contenido completo del post sustituiremos la función the_excerpt(); por la función the_content();. A esta función se le puede pasar algunos parámetros muy interesantes en los cuales no entraré en detalle, pero pueden verlo en el codex de wordpress si quieren ampliar la información sobre esta función.

Código :

<?php the_content();?>

En el index.php teníamos un código de error que se mostraba si no había post en la base de datos, en el single.php no necesitamos este trozo de código, con lo cual lo eliminaremos y editaremos el final del loop, ya que contiene parte del código que no utilizaremos, el código debe quedar como en la imagen siguiente.

Código :

<!-- Eliminamos todo este código -->

<?php endwhile; else:  ?>
<article class="posts">
   <p><h2><?php _e('Ha ocurrido un error.'); ?></h2></p>
   <p><?php _e('Disculpe, no existen post relacionados con su criterio de busqueda'); ?></p>
   <?php get_search_form();?>
</article>
<?php endif; ?>

<!-- Se sustituye por este -->

<?php endwhile; ?>

Por último eliminaremos el número de comentarios y el botón "leer más" que se utilizaban en el index, para ello eliminaremos el siguiente trozo de código.


Navegación de los posts

Debajo del contenido del post agregaremos dos botones de navegación los cuales enlazarán la entrada anterior y la siguiente a la actual, para ello utilizaremos las funciones previous_post_link() y next_post_link() las cuales nos proporcionan dichos enlaces a sus respectivas entradas, solo debemos agregar el siguiente código html después del final de la etiqueta article class="posts".

Código :

<section class="newer-older">
     <p class="older"><?php previous_post_link('%link', '&laquo; Post Anterior') ?>
     <p class="newer"><?php next_post_link('%link', 'Siguiente Post &raquo;') ?></p>
</section>

Código Css para la navegación

Código :

/* =ESTILOS PARA LA PÁGINA SINGLE
-------------------------------------------------------------- */
/*Parrafos*/
.entry-content P{
   line-height: 20px;
   margin-bottom: 15px;
}

/* Navegador de post */
.newer-older{
   display: block;
   height: 30px;
   clear: both;
   padding: 20px 0;
}
.older{float: left; text-align:left;}
.newer{float: right; text-align:right;}
.newer-older p{
   display:inline-block;
   width: 150px;
   background: #c4c4c4;
   border-radius: 5px;
   box-shadow: 1px 1px 0px 0px #e1e1e1;
   overflow:hidden;
}
.newer-older p a{
   display: inline-block;
   height: 30px;
   line-height:30px;
   padding: 0 20px;
   color: #777777;
   text-decoration: none;
   font-weight: bold;
   text-shadow: 1px 1px 0 #e1e1e1;
   width:110px;
}
.newer-older p:hover{background:#c9c8c8;}
.older:hover a{
   color: #6d9110;
   margin-left: -10px;
}
.newer:hover a{
   color: #6d9110;
   margin-right: -10px;
}
El resultado sería algo como la imagen siguiente:

Configurar los comentarios de cada post

A mi entender creo que ésta es una de las partes que más puede sufrir un usuario que se inicia en el desarrollo de theme de wordpress, al listar los comentarios no tienen más que utilizar la función correspondiente para realizar esa llamada, hasta aquí todo fácil, pero ¿y si quieres crear una lista personalizada de comentarios? Si quieres utilizar esta opción de crear una función personalizada para listar los comentarios de wordpress podemos utilizar este artículo: (Mostrar de forma personalizada los comentarios en wordpress), que pone a nuestra disposición el codex de wordpress.

No me atrevo a meterme a explicarlo ya que sería alargar bastante más el tutorial y creo que ese tema se merece un tutorial ya que es un tema que puede ampliarse bastante, en nuestro caso utilizaremos la salida por defecto de los comentarios y lo adaptaremos a nuestro gusto solo utilizando CSS, vamos a ello.

Para listar los comentarios y el formulario para enviarlos utilizaremos la función comments_template( '', true );, esta función muestra los comentarios tanto en las páginas como en la página single.

Utilizar solo esta función tiene sus ventajas y sus desventajas

Esta función utiliza el archivo comment-template.php ubicado en la carpeta wp-include, para mostrar los comentarios y el formulario.

Ventajas:
  • Con la llamada de una simple función obtenemos los comentarios y el formulario de envío.
  • Más simplicidad en el código de nuestra plantilla.
  • No hace falta ser un experto ni saber de programación para hacer esto.

Des Ventajas:
  • Con esta función estamos utilizando el código fuente de wordpress con lo cual cualquier actualización puede afectarnos a la visualización de nuestra estructura.
  • Tenemos pocas opciones para cambiar la estructura, o salida HTML que nos proporciona esta función.
  • Si editamos el código saliente al actualizar tu wordpress perderás todos los cambios que hay realizado en la estructura de estos archivos.
En fin utilizaremos en este caso el modo fácil teniendo en cuenta los puntos tratados anteriormente, para listar los comentarios en nuestra plantilla agregaremos la función comments_template( '', true ); después de la navegación de los posts.

Código :

<?php comments_template( '', true ); ?>

Esta función nos da como resultado la siguiente estructura HTML la cual adaptaremos a la plantilla a continuación con CSS.

Tomando como referencia los selectores (ID y class) que nos proporciona esta función aplicaremos CSS.

Css para el listado de comentarios

Código :

/* ESTILOS PARA LISTA DE COMENTARIOS*/
h3#comments{
   font-size: 16px;
   color: #437201;
   background:url(images/title-bg.png) no-repeat left top;
   height: 55px;
   line-height: 55px;
   margin: 0 0  15px -22px;
   padding-left:20px;
   color: #e1e1e1;
}
.commentlist{
   border: medium none !important;
    list-style: none outside none;
    margin-left: 0;
}
.commentlist li .children > li{   padding-left: 25px;   }
.comment-awaiting-moderation{color:red;text-align:center;}
.commentlist li > .children #respond h3{margin: 0 0  15px -46px;}
.commentlist li > .children li > .children #respond h3{margin: 0 0  15px -71px;/*nivel 2 comentarios anidados*/}
.commentlist li > .children li > .children li > .children #respond h3{margin: 0 0  15px -96px;/*nivel 3 comentarios anidados*/}

.comment-body{
   padding-bottom:25px;
   position:relative;
   overflow:hidden;
}
.reply{
   bottom: 25px;
    position: absolute;
    right: -76px;
   opacity:0;
   -webkit-transition: all 0.2s ease-in-out;
   -moz-transition: all 0.2s ease-in-out;
   -o-transition: all 0.2s ease-in-out;
   transition: all 0.2s ease-in-out;
}
.comment-body:hover > .reply{ right:0px; opacity:1;}

.comment-body p{
   margin:15px 0;
   padding-left:15px;
}

.comment-author{
   background: #EEEEEE;
   border-radius: 5px;
   border: solid 1px #cbcbcb;
   height: 50px;
}
.comment-author img{
   background: #f1f1f1;
   padding:3px;
   margin: 5px;
   border: 1px solid #cbcbcb;
}
.comment-author .fn,
.comment-author .says{
   position: relative;
   top: -20px;
   font-style:italic;
}
.commentmetadata{
   position: absolute;
   right:10px;
   top: 15px;
}
Aplicando el CSS anterior organizamos los comentarios adaptándolos al estilo de nuestra plantilla, obtendremos un resultado como muestro en la siguiente imagen.



He aplicado los estilos de manera que los comentarios anidados se muestren dentro del comentario padre, solo lo he probado con los comentarios anidados hasta nivel 3.

Estilos para el formulario de envío de comentario

Para el formulario de envío de comentarios utilizaremos los siguientes estilos.

Código :

/* FORMULARIO DE COMENTARIOS */
#respond{
   clear: both;
   display: block;
   border-top: solid 1px #ecede9;
   padding: 15px 0;
   position:relative;
}
#respond h3{
   font-size: 16px;
   color: #437201;
   background:url(images/title-bg-sidebar-right.png) no-repeat left top;
   height: 55px;
   line-height: 55px;
   margin: 0 0  15px -22px;
   padding-left:20px;
   color: #e1e1e1;
}

#respond #cancel-comment-reply {
    position: absolute;
    right: 0;
    top: 35px;
}

#respond #cancel-comment-reply a{color:red; font-style:italic;}
#respond #cancel-comment-reply a:hover{text-decoration:none; border-bottom: 1px dotted red;}

div#respond form#commentform p{ margin: 15px 0;}
div#respond form#commentform input[type=text]{   width: 230px; height:20px;}
#commentform #submit{width: auto !important;}
div#respond form#commentform textarea{ width: 400px;}
#commentform label{font-size:11px;margin-left:10px;}

.nocomments{color:red; text-align:center;}/*Comentarios Cerrados*/
.page .nocomments{display: none;}
Para los input, el textarea y el botón del formulario de comentario reutilizaremos el código utilizado para el widget de contacto, y para el botón reutilizaremos el código css utilizado para el botón leer más que creamos en el index, de esta forma nos evitamos crear nuevas reglas css para el formulario.

Para el css del input y el textarea buscamos la línea #546 ó el selector #sidebar #wiget-contact input, en esta parte agregaremos los selectores del input y el textarea para aplicarle el mismo estilo. No es nada del otro mundo, sólo es agregar el selector separado por comas, pero por si alguno no sabe a qué me refiero trataré de ilustrarlo en la siguiente imagen.

Código completo

Código :

#sidebar #wiget-contact input,
#sidebar #wiget-contact textarea,
form#commentform p input,
form#commentform p textarea {
   width: 100%;
   padding: 5px;
   text-transform: uppercase;
   font-size: 12px;
   text-shadow: 1px 1px 0px #dedede;
   color: #9a9b9d;
   background: #c4c4c4;
   border:none;
   -moz-border-radius: 5px;
   -webkit-border-radius: 5px;
   border-radius: 5px;
   -moz-box-shadow: 1px 1px 0px 0px #f4f4f4,
          1px 2px 1px 0px #b1b3b5 inset;
   -webkit-box-shadow: 1px 1px 0px 0px #f4f4f4,
             1px 2px 1px 0px #b1b3b5 inset;
   box-shadow: 1px 1px 0px 0px #f4f4f4,
          1px 2px 1px 0px #b1b3b5 inset;
}

#sidebar #wiget-contact input:focus,
#sidebar #wiget-contact textarea:focus,
form#commentform p input:focus,
form#commentform p textarea:focus{
   -moz-box-shadow: 0px 0px 8px 0px #afafaf inset,
          0px 0px 5px 0px #efefef,
          1px 1px 0px 0px #f4f4f4,
          1px 2px 1px 0px #b1b3b5 inset;
   -webkit-box-shadow: 0px 0px 8px 0px #afafaf inset,
             0px 0px 5px 0px #efefef,
             1px 1px 0px 0px #f4f4f4,
             1px 2px 1px 0px #b1b3b5 inset;
   box-shadow: 0px 0px 8px 0px #afafaf inset,
          0px 0px 5px 0px #efefef,
          1px 1px 0px 0px #f4f4f4,
          1px 2px 1px 0px #b1b3b5 inset;
   color: #707070;
   background: #cdcdcd;
   }
Esto mismo haremos con el botón de enviar el formulario, igualaremos sus estilos con el botón leer más que creamos en el tutorial anterior, exactamente en la línea #659 de nuestra hoja de estilo, de todas forma les dejo el código completo para estos botones.

Código :

.leermas,
#wiget-contact #form-enviar,
#commentform p input#submit{
   display: inline-block;
   padding: 5px 10px;
   border-radius: 5px;
   border: solid 1px #558300;
   text-shadow: none !important;
   color: #fff !important;
   background: #6aa103;
   box-shadow:none !important;
   -webkit-transition: all 0.3s ease-in-out;
   -moz-transition: all 0.3s ease-in-out;
   transition: all 0.3s ease-in-out;
}
.leermas:hover,
#wiget-contact #form-enviar:hover,
#commentform #submit:hover{
   text-decoration: none;
   color: red;
   -moz-box-shadow: 0px 0px 0px 1px #77b800 inset !important;
   text-shadow: 0px 0px 3px #FFFFFF !important;
   cursor:pointer;
}

Conclusión

Con esto ya debemos tener tanto la lista de comentarios y el formulario ya con estilos y adaptado al estilo de nuestra plantilla, y con esto pueden darse cuenta de lo sencillo que puede ser si no necesitamos utilizar formulario ni listas de comentarios personalizadas.

Como puedes notar en el código CSS3 he utilizado prefijos específicos para los navegadores, si no quieres marearte con los prefijos esta a opción de cada uno utilizar alguna utilidad para eliminar los prefijos o dejarlo tal cual está en el tutorial.

Disculpa por coger la forma fácil para mostrar el listado de comentarios, es que si empiezo a explicar lo de crear una lista personalizada de comentarios el tutorial se me alarga mucho y este es un tema bastante amplio del cual se puede hablar mucho.

En la siguiente y última parte del tutorial trataremos los siguientes temas:

Tercera parte:

  • Registrar posición de los widget para el sidebar
  • Utilizar campos personalizados de wordpress.
  • Crear el widget próximos conciertos utilizando campos personalizados
  • Crear widget próximos conciertos
  • Crear Widget últimos vídeos
  • Crear formulario de contacto con el plugins contactform

¿Sabes SQL? ¿No-SQL? Aprende MySQL, PostgreSQL, MongoDB, Redis y más con el Curso Profesional de Bases de Datos que empieza el martes, en vivo.

Envia un comentario (19)

Publica tu comentario

o puedes...

¿Estás registrado en Cristalab y quieres
publicar tu URL y avatar?

¿No estás registrado aún pero quieres hacerlo antes de publicar tu comentario?

Registrate