Template de Wordpress: pasar HTML5 a Wordpress (III)

Bienvenidos a esta la última parte del tutorial Pasar HTML5 a Wordpress, trabajaremos con la barra lateral o sidebar, agregaremos soporte para widget en la plantilla, aprenderemos cómo utilizar campos personalizados en wordpress y crearemos los widgets específicos para esta web.

Tutoriales anteriores de la serie:

• Parte 1: Diseñar template de Wordpress en Photoshop
• Parte 2: Template de Wordpress: pasar de PSD a HTML5
  
• Parte 3:Template de Wordpress: pasar HTML5 a Wordpress
  
• Parte 3.1:Template de Wordpress: pasar HTML5 a Wordpress (II)
  

Dejaré para descargar la plantilla ya terminada, está completamente desarrollada por mí, le he agregado algunas funcionalidades que no tocamos en este tutorial, entre las cuales puedo destacar el uso de un panel de configuración para la plantilla en el cual puede configurar lo siguiente:

• Activar o desactivar el slider de imágenes.
  
• Seleccionar la categoría que mostrará las imágenes en el slider
  
• Seleccionar la cantidad de imágenes a mostrar en el slider
  
• Subir su propio logo
  
• Activar o desactivar el botón más vídeos
  
• Activar o desactivar la caja de búsqueda de la parte superior
  
• Excluir categorías de la página principal de la web

Plantilla para página de contacto

• Sidebar exclusivo para la página de contacto
  
• Introducir el email donde quiere recibir los mensajes.
  
• Agregar información adicional de contacto (email, teléfono, dirección, etc.)
  
• Agregar url de las principales redes sociales
  

Capturas del Panel de configuración

• Configuración General
  
• Información de contacto
  

Todas estas opciones son configurables de una forma muy simple, ésta es la forma en la que un desarrollador debe entregar una plantilla a un cliente para que éste no tenga que meter mano dentro del código de la web, si no que sólo tenga que rellenar algunos campos y obtener resultados.

Contenido del tutorial

En este tutorial trataremos los siguientes temas:

• Registrar posición de los widgets para el sidebar
  
• Utilizar campos personalizados de wordpress.
  
• Crear el widget próximos conciertos utilizando campos personalizados
  
• Crear Widget últimos videos[/url]
  
• Crear formulario de contacto con el plugins contactform
  

Antes de empezar les pido disculpas por el gran retraso para salir esta parte del tutorial, ahora empezamos con el tutorial, espero les sirva de mucho.

Registrar posición de los widgets para el sidebar

En estos momentos nuestra plantilla wordpress no tiene áreas definidas para la utilización de widget, si entras al panel de administración –> Apariencia –> Widget, notarás que la plantilla efectivamente no tiene soporte para widget por que no tenemos ninguna área definida para este fin.



Para definir el área de widget, que en nuestro caso solo será el sidebar, agregaremos la función que utiliza wordpress para este fin (register_sidebar()) en el archivo functions.php, copiamos el siguiente código en este archivo y más adelante explicaré cada parte del código.

Código :

if ( function_exists('register_sidebar') ) {

   register_sidebar(array(
     'name' => 'Right Sidebar',//Titulo del área de widget, aparece en el panel de Administración.
     'before_widget' => '<div id="%1$s" class="widget %2$s">', // div que estará antes del widget
     'after_widget' => '</div>', // cierre del div anterior
     'before_title' => '<h3 class="widget-title">', //Lo que envolverá al titulo del widget
     'after_title' => '</h3>',
   ));

}

• name – nombre de la barra lateral (este nombre se visualiza en el panel de administración áreas de wiget).
  
• Descripción – Texto descriptivo de la ubicación de la barra lateral. Se muestra en la pantalla de gestión de widgets.(Opcional)
  
• before_widget – HTML para colocar antes de cada widget
  
• after_widget - HTML para colocar después de cada widget utilizaremos
  
• before_title – HTML para colocar antes de cada título
  
• after_title – HTML para colocar después de cada título
  

Con esto ya tenemos soporte para widget en nuestra plantilla, sólo nos queda hacer la llamada desde nuestra plantilla en el lugar que queremos que aparezcan los widget agregados en esta área de widget.
Para ello abriremos el archivo sidebar.php y borraremos todo su contenido y agregaremos la siguiente línea de código.

Código :

<!-- #sidebar -->
   <aside id="sidebar" role="complementary">
     if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Right Sidebar') ) ?>>
   </aside>
<!-- Final #sidebar -->

Con la función dynamic_sidebar() en este caso llamamos al sidebar registrado en el archivo funtion.php, como parámetro tenemos la opción de pasarle o bien el nombre o el ID que utilizamos para registrar el área de widget que queremos llamar.

Con esto ya tenemos activa nuestra área de widget y lista para agregar los widgets necesarios para este ejemplo que estamos desarrollando en la serie de tutoriales.

Aunque agregaremos código directamente en el archivo sidebar.php, también podemos agregar widget desde el gestor de widget de wordpress, estos widget quedarán siempre por encima de los que agreguemos directamente en el archivo sidebar.php.

Aunque esto nos sea útil, no quiere decir que sea la única opicón que nos brinda wordpress para trabajar con los widget. He utilizado la forma más sencilla de trabajar los widget en una plantilla, pero esto tiene una infinidad de opciones, las cuales no tocaré en este tutorial. Si quieren ampliar su información sobre las distintas opciones que puedes utilizar en este tema de los widget y las zonas de widget te recomiendo pasar por el codex de wordpress en donde el tema está bastante documentado.

Temas recomendados para leer:

• dynamic sidebar: para agregar widget dinámica mente y código estático
  
• register sidebar: para registrar área de widget para tu plantilla
  
• register sidebars: para crear múltiples sidebar o áreas de widget.
  
• is dynamic sidebar: Tag condicional que revisa si hay widget activos en el actual sidebar, con esto puedes mostrar un contenido por defecto si no existen widget activos.
  

Ya puedes hacer una prueba y agregar algún widget en el sidebar y comprobar que se visualiza correctamente.

Utilizar campos personalizados de wordpress

Los campos personalizados también conocidos como custom fields, son meta datos que se pueden agregar tanto a los artículos como a las páginas de wordpress.

Por ponerles un ejemplo, el título, la fecha, categoría y los tags de un post son campos generales de una entrada en wordpress, de esta misma forma podemos utilizar los campos personalizados para agregar información adicional a un artículo, se pueden utilizar tanto en los artículos como en cualquier otra parte de nuestra plantilla, sólo hay que utilizar la llamada adecuada para obtener esos datos.

En nuestro caso utilizaremos campos personalizados para crear los widgets para nuestro sidebar, primero creando el widget próximos conciertos. Este widget será bastante sencillo, sólo necesitamos 3 datos que son: Nombre del artista, Fecha y lugar del concierto, estos tres datos se le agregaran a cada artículo que pertenezca a la categoría conciertos, y desde nuestro sidebar llamaremos esos datos los cuales sustituiremos por los datos estáticos del html del widget. Ya no los mareo más, creo que con un ejemplo se entenderá mejor, empecemos!!!

Lo primero es crear la categoría en la que agregaremos los artículos referentes a los conciertos. En esta categoría agregaremos los artículos de los conciertos y a estos artículos agregaremos los campos personalizados.

En cada artículo que agreguemos en esa categoría debemos agregar 3 campos personalizados, el área dedicada a este fin está ubicada justo debajo del editor de artículos, y desde aquí agregaremos los tres datos: Artista, Fecha, Donde, y a cada campo agregarle un valor que será lo que utilizaremos en el widget.



Como muestra la imagen anterior, debes agregar cada campo personalizado lo que nos daría como resultado lo siguiente.



Para mostrar estos campos personalizados sólo debemos utilizar la función get_post_meta() dentro del bucle de wordpress, puede utilizar el siguiente código para hacer esa llamada desde el lugar de tu plantilla donde quieras mostrar el campo personalizado.

Código :

<?php $Fecha = get_post_meta($post->ID, 'Fecha',true); echo $Fecha ?>

Ya teniendo claro el uso de los campos personalizados en wordpress abordaremos la creación del widget específico para esta web.

Antes de empezar quiero aclarar algo, esta no es la forma de crear widget para wordpress, wordpress cuenta con un API para este fin. En este tutorial no crearemos un widget utilizando esta información sino que agregaremos el código directamente en el archivo en el que queremos mostrar esta información en forma de widget. Esta no es la forma más profesional de hacerlo, pero para este tutorial creo que es suficiente ya que la creación de widget es un tema bastante extenso que no tocaré en el tutorial.

Crear el widget "próximos conciertos" utilizando campos personalizados

Teniendo los campos personalizados en cada artículo que agreguemos en la categoría conciertos sólo debemos llamar esos datos desde el archivo sidebar.php. Para poder extraer estos datos debemos utilizar la función get_post_meta()

Hasta este punto nuestro sidebar.php sólo tiene el siguiente código.

Código :

<!-- #sidebar -->
   <aside id="sidebar" role="complementary">
     <?php if ( !function_exists( 'dynamic_sidebar' ) || !dynamic_sidebar('Right Sidebar') ) ?>

                 <!-- CÓDIGO A MOSTRAR -->
   </aside>
<!-- Final #sidebar -->

Dentro de la etiqueta aside pegaremos el siguiente código, este mostrará los datos que nos interesan para formar el widget, pegaré el código completo y explicaré cada línea para que sirve.

Código :

<!-- Widget Proximos conciertos -->
<h3>Proximos Conciertos</h3>
   <ul>
      <?php query_posts("cat=10&posts_per_page=5");while (have_posts()) : the_post();?>
      <li>
          <a href="<?php the_permalink();?>"><?php $Artista = get_post_meta($post->ID, 'Artista',true); echo $Artista ?></a>
     <p><?php $Fecha = get_post_meta($post->ID, 'Fecha',true); echo $Fecha ?></p>
     <p><?php $Donde = get_post_meta($post->ID, 'Donde',true); echo $Donde ?></p>
      </li>
      <?php endwhile; ?>
   </ul>
<!-- Final Widget Proximos conciertos -->

Código :

<?php query_posts("cat=10&posts_per_page=5");while (have_posts()) : the_post();?>

Primero utilizamos el loop personalizado de wordpress con la función query_posts pasando como parámetro a esta función la categoría y el número de post a mostrar.

Código :

<li>
   <a href="<?php the_permalink();?>"><?php $Artista = get_post_meta($post->ID, 'Artista',true); echo $Artista ?></a>
   <p><?php $Fecha = get_post_meta($post->ID, 'Fecha',true); echo $Fecha ?></p>
   <p><?php $Donde = get_post_meta($post->ID, 'Donde',true); echo $Donde ?></p>
</li>

Dentro de la lista desordenada llamamos como aprendimos anteriormente los datos que nos dan los campos personalizados. Este contenido será el que se repetirá con el loop de wordpress, este sencillo código nos dará el siguiente resultado.



En la imagen anterior se muestra el resultado final, como de una forma fácil obtenemos los datos de los campos personalizados en nuestra plantilla, esta es una técnica no muy profesional para realizar widgets pero es algo que te puede evitar muchos dolores de cabeza.

Crear widget "últimos videos"

Este widget no lo trataré en este tutorial, es un plugin específico para esta plantilla, por lo que creo que no a muchos le interesará, de todas formas pueden hacerlo con campos personalizados tomando como referencia el widget anterior.

La idea que tenía era agregar un campo personalizado a los artículos agregados en la categoría vídeos musicales, y en ese campo personalizado agregar una captura del video que publico en ese post. Con ese campo personalizado y el título de la entrada crear un listado de los artículos de esa categoría sólo sacando en la lista la imagen del campo personalizado y el título de la entrada. No creo que sea muy complicado hacerlo teniendo ya un ejemplo como el que creamos anteriormente.

Si alguien tiene interés de agregar esta funcionalidad a su web o a esta plantilla que deje su comentario y lo crearé, en estos momentos no lo veo necesario por lo que obviaré este paso.

Crear formulario de contacto con el plugin Contact Form 7

Pasaremos a la creación del formulario de contacto con el plugin contact form 7, este es un plugin con el que puedes crear formularios de contacto fabulosos de una forma extremadamente fácil, en nuestro caso es un formulario sencillo, pero este plugin te brinda un sin número de opciones para formularios avanzados creado desde el panel de administración.

Para iniciar esta parte lo primero que haremos es instalar el plugin en nuestro wordpress, tiene la opción de hacerlo de dos formas:

1. Descargar del plugin y subir vía FTP a la carpeta wp-content/plugins.
   
   
   
   
   
2. Instalar el plugins desde el gestor de plugins de wordpress.
   
   
   
   
   

Después de instalar el plugin tomando la opción que más te guste, sólo debes activarlo y ya podemos empezar con la configuración de formulario de contacto para la web.

Después de activar el plugin se activa un nuevo apartado en la barra de menú de wordpress llamado contacto, generalmente al final, accedemos a ella y encontramos el apartado de configuración del formulario, editaremos ese formulario que encontramos creado por defecto, editaremos su nombre y borraremos el código que trae el formulario para crear el nuestro.



En la parte derecha podemos encontrar un listado de opciones en el que aparecen todos los tipos de entrada de datos para los formularios, en nuestro caso sólo necesitamos un campo de texto, un campo de email, un área te texto y un botón submit. Empecemos la configuración del formulario.

Campo de texto Nombre

Seleccionamos de la lista desplegable la opción campo de texto y agregamos la configuración que muestra en la imagen.



Cada campo de que utilicemos lo utilizaremos envuelto con la etiqueta <p>

Campo de email

Seleccionamos en la lista desplegable la opción campo de email, y configuramos sus opciones como muestro en la imagen de abajo, siempre tengan presente que esto lo explico teniendo en cuenta las necesidades de la plantilla, siempre pueden cambiar lo que deseen.

Campo área de texto

De la lista desplegable seleccionamos la opción Área de texto, y lo configuramos como en la imagen siguiente.

Botón de enviar (submit)

Para general el botón de envío del formulario utilizaremos la opción botón de enviar de la lista desplegable y lo configuramos como muestro a continuación.



El código completo que hemos generado será el siguiente:

Código :

<p>[email* email id:form-email watermark "Email"]</p>
<p>[textarea* mensaje x8 id:form-mensage watermark "Mensaje"]</p>
<p>[submit id:form-enviar "Enviar"]</p>

Con esto ya tenemos nuestro formulario generado y ya podemos utilizarlo en cualquier parte de nuestra plantilla o en cualquier parte de una página o post. En este formulario, sólo debemos utilizar el código identificador del formulario que hemos creado.



Este código sólo funciona si lo utilizas en una página o parte de un post, en nuestro caso no nos sirve ya que lo agregaremos directamente en el código del archivo sidebar.php, para que funcione debemos pegar este código en formato php y ayudarnos de la función <php do_shortcode(); ?>, de esta forma.

Código :

<?php echo do_shortcode('Aquí El identificador del formulario'); ?>

El código completo que debemos pegar en el sidebar.php justo debajo del widget anterior es el siguiente.

Código :

<!-- Widget Contáctenos -->
   <div class="widget" id="contact">
      <h3>Contáctenos</h3>
      <?php echo do_shortcode('Identificador del formulario'); ?>
   </div>
<!-- Final Widget Contáctenos -->

Al agregar este código en el sidebar.php debemos tener el formulario ya funcionando, nos quedará algo como en la siguiente imagen.



Como pueden notar el formulario no está tomando los estilos css aplicado en tutoriales anteriores. Para solucionarlo sólo debemos arreglar un error que surge, el error es que cuando aplicamos las reglas css para dar estilos al formulario utilizamos un ID (#wiget-contact) este ID lo sustituiremos por la ID (#wpcf7-f76-t1-o1) del DIV que envuelve a la etiqueta <form>

Con esto ya nuestro formulario debería tomar los estilos que tenemos en nuestro archivo style.css, si visualizamos el formulario quedaría como muestro en la siguiente imagen.



Con esto ya tenemos configurado nuestro formulario de contacto para la web, sólo quedaría configurar la forma en que llegan los mensajes a nuestro correo, esto se configura en el panel de configuración del formulario en el segundo cuadro, debajo del que utilizamos para generar nuestro formulario.



Como pueden notar en la imagen anterior se puede configurar la forma en que llegan los mensajes a nuestro correo, utilizando los ID de los distintos campos de formularios que utilizamos.

También tenemos la opción de agregar código HTML al cuerpo del mensaje, con esta opción podemos resaltar parte del mensaje o algún título para diferenciar las distintas partes del mensaje que nos llega.

Con esto ya queda configurado nuestro formulario de contacto y doy por concluido el tutorial.

Conclusión

Antes que nada pedir disculpas por la larga espera para concluir el tutorial, dar también las gracias a todos los usuarios que dejan sus comentarios, que sepan que sus comentarios me llenan de gratitud al ver que con mi tutorial muchos han aprendido algo nuevo.

En este tutorial además de seguir las pautas que me marcaba el diseño de la plantilla he tratado de utilizar algunas técnicas muy útiles para el desarrollo en wordpress, con este tutorial debes de ser capaz de crear una plantilla simple para tu blog.

La plantilla desarrollada en este tutorial la he creado yo de forma avanzada agregándole un panel de configuración propio, con este panel de configuración podemos mostrar y ocultar algunas partes de la web, o activar y desactivar otras, dejare la plantilla para descargar y cuando la instalen podran ver las opciones que he agregado, lo más lógico sería que creara un artículo hablando de la configuración de la plantilla pero no voy a hacerles esperar más. Si quieren ver la plantilla sólo descárguenla y miren la opciones que tiene.

Un saludo muy grande a todos y esperen otro interesantes tutoriales que tengo en marcha.

Twitter: @jordano_p

¿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.