Curso de WordPress 2018

Curso avanzado sobre WordPress en el CAP de Pamplona

You are here: Home / Sesión 4 / Personalización del tema mediante PHP

, por

1. Personalización de los temas de la familia Genesis mediante las áreas de hooks

Tal como explicamos en un artículo anterior, los temas de la familia Genesis se pueden personalizar exhaustivamente mediante la manipulación de las áreas de hooks. Ahora bien, para hacerlo hay que editar directamente los ficheros del tema, lo cual es siempre complicado, y requiere conocimientos avanzados de PHP.  Además, a partir del momento en que se realiza este tipo de manipulaciones, el tema queda, por decirlo así, «inmovilizado» para recibir las actualizaciones que se suelen ir publicando de forma regular.

Por tanto, es conveniente utilizar otro método que permita utilizar las áreas de hooks sin tocar los ficheros del tema, y que además permita gestionar las modificaciones realizadas de forma simple, segura y eficiente. Para ello utilizaremos el plugin Genesis Simple Hooks, que hemos activado en todos los sitios de prácticas de los alumnos y alumnas de este curso.

2. Cómo funciona el plugin Genesis Simple Hooks

El plugin Genesis Simple Hooks añade al interfaz de administración de las opciones del tema Genesis una capa de gestión mediante la cual se identifican y describen todas las áreas de hooks del framework; además, el plugin presenta diversas opciones para añadir código. Mediante este interfaz se pueden llevar a cabo las siguientes acciones:

  • Añadir código a una o varias áreas de hooks. Se puede utilizar código HTML, CSS, PHP o JavaScript, o cualquier combinación sintácticamente correcta de todos esos códigos. Para añadir código PHP hay que utilizar la opción denominada «¿Quieres que se pueda ejecutar código PHP en este hook?».
  • Añadir shortcodes; para ello, se dispone de la opción denominada «¿Quieres que se puedan ejecutar shortcodes en este hook?»
  • Permite desactivar ciertas funciones del framework Genesis asociadas a las áreas de hooks. Esto se consigue activando la opción denominada «¿Quieres desactivar la función xxxxxxxx en este hook?».

Utilizar el plugin es muy sencillo, siguiendo estos pasos:

  • Hay que ir al menú Genesis > Hooks fáciles.
  • Se debe identificar el área de hooks en la que se va a trabajar
  • Hay que escribir el código (o copiarlo y pegarlo de una fuente externa) en el área de hooks adecuada.
  • Si es necesario, se deben seleccionar las opciones para activar shortcodes, activar código PHP o desactivar funciones.
  • Finalmente hay que guardar los cambios, haciendo clic en cualquiera de los botones Guardar los cambios, que están repartidos por entre las diferentes áreas de hooks.

Para poder identificar correctamente las áreas de hooks sobre las que se va a trabajar, aconsejamos tener al alcance de la mano estos dos recursos:

  • Visual Hook Guide: es una página que muestra todas las áreas de hooks del framework Genesis. Sin embargo, no muestra todos los hooks existentes en el framework, tal como se explica en Genesis Simple Hook Guide.
  • Genesis Simple Hook Guide demo page: muestra dinámicamente todas las áreas de hooks, tanto las actuales como las que se vayan añadiendo a nuevas versiones del framework; además, al hacer clic sobre el nombre de un área de hooks, esta se puede copiar fácilmente.

En los dos vídeos que incluimos a continuación se detalla el procedimiento. El primero está en español (conviene tener en cuenta que su autor menciona varios plugins que no están instalados en los sitios del PNTE); el segundo vídeo, mucho más completo y valioso para nuestros propósitos, está en inglés. Ambos videotutoriales se corresponden con sendas páginas en las que se explica el procedimiento: Genesis Simple Hooks: vamos a jugar con nuestro theme de Genesis y Simple Hooks tutorial, Genesis hooks the easy way:

No parece demasiado difícil, pero es evidente que a la mayoría de usuarios se les presenta un problema previo, que tiene que ver con sus conocimientos de programación; en efecto, si no saben programar, difícilmente podrán aprovechar toda la potencia de esta técnica. No es objetivo de este curso enseñar a sus alumnos y alumnas las complejidades de la programación, así que, como en el caso de la edición de CSS, adoptaremos un enfoque práctico, consistente en presentar ejemplos reales de sencillos fragmentos de código que puedan ser utilizados como ejemplo o modelo en las prácticas correspondientes a esta sesión. Además, ofreceremos un listado de recursos a partir de los cuales se podrán identificar scripts aprovechables para ser utilizados, con o sin adaptación previa, en los sitios web de los centros educativos.

3. Ejemplos de código para las áreas de hooks

A continuación figuran algunos ejemplos de código destinados a ser insertados mediante el plugin Genesis Simple Hooks. Cada uno de los ejemplos incluye la información necesaria para poder utilizarlo en los sitios web de prácticas de este curso.

1. Modificación del área de metadatos de las entradas. Este código, que modifica el comportamiento del área de metadatos por defecto de las entradas, se utiliza en el blog de prácticas de Eduardo Larequi. El código ha sido adaptado de uno de los ejemplos que propone el plugin Genesis Simple Hooks):

<div class="post-meta">
<span class="categories">Entrada archivada en la categoría: <?php the_category(', ') ?></span> <span class="tags">Etiquetas: <?php the_tags('') ?></span>
</div>

Para que este código funcione, hay que copiarlo en el área de hooks denominada genesis_entry_footer., que es aquella donde se generan los metadatos de las entradas correspondientes a categorías y etiquetas; además, hay que activar dos opciones:

  • La ejecución de código PHP, ya que el código contiene un par de funciones para recuperar las categorías y etiquetas de las entradas.
  • La desactivación de la función «genesis_post_meta()» en este hook. De esta manera, la caja original de metadatos de las entradas es sustituida por la que se acaba de crear. Si esa función no se anula, la información sobre categorías y etiquetas aparecería dos veces.

2. Inserción de una imagen a modo de logotipo del sitio web. El sitio web del Consejo Escolar de Navarra utiliza esta técnica, para lo cual ha insertado el siguiente código en el área de hooks genesis_before_content_sidebar_wrap:

<div class="banner-abajo-header">
<div class="wrap">
<img style="margin-top:10px;" src="http://consejoescolar.educacion.navarra.es/web1/wp-content/uploads/2014/11/logoconsejobiling2.jpg" alt="Logotipo del Consejo Escolar" />
</div>
</div>

Mediante este código se consigue que el logotipo bilingüe del Consejo Escolar se inserte en un contenedor (wrap) que está situado justo por encima del contenido del sitio. Como no incluye código PHP, no hace falta activar la opción «¿Quieres que se pueda ejecutar código PHP en este hook?». Por otro lado, dado que no se ha definido ninguna etiqueta condicional, este logotipo aparece en todas las páginas de este.

3. Inserción de una imagen con la bandera de la Unión Europea, en la web del IESO Mendaur de Doneztebe. En este caso, el área de hooks utilizada es genesis_before, que está situada antes de la cabecera del sitio web.

<a href="http://ec.europa.eu/social/home.jsp?langId=es" target="_blank" rel="noopener"><img class="alignleft wp-image-1153" title="Europar Batasuna" src="http://mendaur.educacion.navarra.es/web/wp-content/uploads/2016/10/flag_yellow_low-300x201.jpg" alt="Europar Batasuna" width="100" height="67" /></a>
<span style="font-size: x-small;">Europako Gizarte Funtsa EGIF<br/ >
Zure etorkizunean inbertitzen du</span>

Al igual que en el ejemplo anterior, no hace falta activar la opción «¿Quieres que se pueda ejecutar código PHP en este hook?», ya que el ejemplo no incluye ese tipo de código. Como no se ha definido ninguna etiqueta condicional, el resultado es un elemento gráfico situado justo en la parte superior de todas las páginas del sitio.

4. Inserción de un bloque de texto en el área de hooks situada después del contenido de una entrada, que se llama genesis_after_entry. El ejemplo ha sido adaptado del artículo 3 ideas para usar Genesis Simple Hooks en tu Blog. En este caso, el código utilizado es el siguiente:

<?php
  global $wp_query;
  if( is_single( '405' )) {
?>
  <div id="caja-ejemplo" class="caja-texto-roja">Esto es un bloque de texto que aparecerá justo bajo el contenido de la presente entrada, en el área de hooks denominada <strong>genesis_after_entry</strong>. Al bloque de texto se le ha aplicado un estilo CSS que genera un borde de color rojo y un fondo en un tono más claro del mismo color. El código solo se aplica a esta misma página, que tiene el ID 405.</div>
<?php
}
?>

En este código, hay varios aspectos importantes, que conviene explicar:

  • Incluye código PHP; por tanto, para que funcione es imprescindible activar la casilla correspondiente en las opciones de las áreas de hooks.
  • Combina código PHP con HTML, lo cual exige utilizar las etiquetas de apertura y cierre de PHP de forma adecuada.
  • Utiliza una etiqueta condicional como «is_single», lo cual permite aplicar el código solo a la entrada que tiene el ID de la entrada 405 (esta misma entrada).
  • A la etiqueta <div> del código HTML se le ha aplicado una clase CSS, a fin de crear una caja de texto de color rojo; los estilos correspondientes ya los hemos visto en el artículo correspondiente.

5. Inserción de una galería de fotos bajo la cabecera del sitio web y antes del contenido. El área de hooks apropiada para lograr tal efecto es genesis_before_content. Veamos el código:

<?php
  if ( ( is_home() ) )
{ ?>
  <div style="text-align:center;">
  <h2 class="entry-title">Galería de fotos</h2>
  [gallery columns="8" link="file" ids="260,234,233,232,231,216,215,120"]
  </div>
<?php }
?>

Como puede observarse, el código combina PHP con HTML, lo cual exige utilizar las etiquetas de apertura y cierre de PHP de forma adecuada. Además, se ha aplicado una etiqueta condicional «is_home», lo cual significa que solo se ejecutará en la página de inicio del sitio web. Por su parte, la galería de fotos se ha creado mediante el shortcode nativo de WordPress, con parámetros que sirven para que la galería se muestre en 8 columnas y que las miniaturas enlacen a las imágenes a tamaño completo. Para que todo ello funcione correctamente, hay que activar en el interfaz del plugin Genesis Simple Hooks las opciones que hacen posible que se ejecuten tanto los shortcodes como el código PHP. El resultado de todo ello puede verse bajo la cabecera del Blog de práctica de Eduardo Larequi.

4. Listados de snippets y recursos

Aunque no se tengan conocimientos de programación, es relativamente fácil encontrar en Internet técnicas y trucos de personalización de WordPress, y también de los temas de la familia Genesis, mediante código. A continuación incluimos algunos sitios web donde se pueden localizar este tipo de materiales y recursos:

  • Code Snippets Archive: la colección de snippets de Bill Erickson es uno de los lugares donde todo practicante del framework Genesis debe buscar ejemplos e inspiración.
  • CSS-Tricks: una potentísima biblioteca de fragmentos de código en PHP, CSS, JavaScript, HTML, etc.
  • Genesis Code Snippets: colección de fragmentos de código desarrollados por Brian Gardner, fundador de StudioPress.
  • Genesis Code Snippets: una gran colección de fragmentos de código, de los creadores del framework Genesis.
  • Genesis Code Snippets: otra estupenda colección de snippets, esta vez a cargo de Greg Rickaby,
  • Genesis Framework from StudioPress: tutoriales, técnicas y scripts a cargo de Carrie Dills, experta en el framework Genesis.
  • Genesis Snippets: una gran colección de scripts y fragmentos de código para los temas de la familia Genesis. Incluye un buscador de snippets.
  • Sridhar Katakam: la web de este experto en Genesis es uno de los mejores sitios para encontrar tutoriales y scripts. Muchos de ellos recursos exigen una suscripción de pago, pero también hay recursos que se pueden consultar libremente.
  • The Daily Bolt: un sitio decidado a la curación de contenidos relacionados con el framework Genesis.
  • WP Sites: este sitio, creado por Brad Dalton, otro experto en Genesis, también ofrece muchísimos recursos para los usuarios del framework. Como el anterior, exige una suscripción de pago, pero muchos de los artículos se pueden consultar de forma gratuita.

5. Consejos para modificar las áreas de hooks

Antes de plantearse siquiera el uso del plugin Genesis Simple Hooks para manipular y personalizar las áreas de hooks del framework Genesis, conviene tener en cuenta algunos consejos básicos:

  1. Se debe actuar con cautela y paso a paso, yendo siempre de lo más fácil y conocido a lo más complejo. No conviene modificar varias áreas de hooks a la vez, porque eso puede dar lugar a confusión y dificultar la identificación de los errores. Debe tenerse en cuenta que una función mal definida en PHP puede hacer que un sitio web se torne completamente inoperativo.
  2. No hay que modificar las áreas de hooks solo porque resulte fácil hacerlo, o por el afán de singularizar a toda costa el sitio web. Toda personalización debe tener tener un claro propósito funcional y no debe ser utilizada como un mero adorno.
  3. Cada vez que se añade código a un área de hooks, hay que declarar la correspondiente línea de comentarios, que servirá a posteriori para identificar y entender lo que se ha hecho (no nos olvidemos de que la memoria es frágil). La forma de anotar los comentarios en los distintos lenguajes de programación la hemos descrito en el artículo dedicado a las actividades tras la sesión 4.
  4. Para poder avanzar en el conocimiento de las áreas de hooks de Genesis, es necesario investigar, buscar información, y hacer pruebas. En Internet hay una verdadera multitud de tutoriales y una cantidad interminable de ejemplos, pero a veces hay que invertir mucho tiempo en encontrar exactamente lo que se está buscando.
Esto es un bloque de texto que aparecerá justo bajo el contenido de la presente entrada, en el área de hooks denominada genesis_after_entry. Al bloque de texto se le ha aplicado un estilo CSS que genera un borde de color rojo y un fondo en un tono más claro del mismo color. El código solo se aplica a esta misma página, que tiene el ID 405.