Curso de WordPress 2018

Curso avanzado sobre WordPress en el CAP de Pamplona

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

, por

Acabamos de ver en los artículos anteriores que es posible modificar el comportamiento del framework Genesis mediante la manipulación del CSS, añadiendo scripts en JavaScript o modificando el comportamiento de las áreas de hooks. Y esto no es todo, ya que también es posible crear funciones que no solo afecten al comportamiento de los temas de la familia Genesis, sino a cualquier otro aspecto de WordPress: es decir, el funconamiento del núcleo de la aplicación, o de cualquiera de sus temas y plugins. Para hacerlo con seguridad y de forma eficiente, utilizaremos el plugin Code Snippets, que ha sido instalado y activado en los sitios de práctica de los alumnos y alumnas del curso.

1. Manipular el código PHP de forma segura y eficiente

WordPress incorpora un editor interno que permite modificar los ficheros de los temas o de los plugins directamente, desde el propio interfaz de administración de WordPress. Sin embargo, en las instalaciones de WordPress del PNTE este procedimiento está desactivado, no solo por motivos de seguridad, sino para evitar que la manipulación del código CSS o PHP haga imposible el mantenimiento futuro de los sitios web. En efecto, si el código se modifica directamente, sin ninguna clase de control y sin posibilidad de diferenciar el código original de sus modificaciones, es imposible para los servicios del PNTE realizar las actualizaciones necesarias y prestar el adecuado soporte a los responsables de los sitios web entonces.

¿Qué hacer entonces si se quiere personalizar el funcionamiento de un sitio web más allá de las opciones que ofrece el tema seleccionado o los plugins disponibles? La respuesta la proporciona el plugin Code Snippets, que una vez activado aparece en el menú de administración mediante la etiqueta Snippets.

2. El plugin Code Snippets

El plugin Code Snippets permite definir funciones personalizadas en código PHP, y activarlas una por una, lo cual es muy útil para modificar el comportamiento de un sitio web hasta sus más recónditos rincones. Aunque esta tarea se puede llevar a cabo de diversas maneras, las ventajas de trabajar con este plugin son muchas:

  • Ejecuta las funciones definidas al final del proceso de carga de WordPress. Esto significa que dichas funciones pueden modificar cualesquiera otras que existan en el núcleo de la aplicación o en cualquiera de los temas o plugins instalados.
  • Permite estructurar en unidades discretas (que se denominan snippets) las modificaciones a que se somete un sitio web. En la práctica, esto significa que si hay que definir cinco funciones para personalizar un sitio web, habrá que crear cinco snippets, cada uno de ellos diferenciado de los demás. Esto simplifica el código y permite gestionarlo de manera muy simple y eficiente. Además, la división del código personalizado en fragmentos pequeños reduce las posibilidades de cometer errores graves.
  • Ofrece una gran facilidad de gestión de los fragmentos de código, ya que los snippets se tratan de forma muy parecida a las entradas o páginas. Es decir, los snippets se pueden crear, modificar, eliminar y publicar en modo «borrador», lo cual significa que no están activos. Además, los snippets se pueden activar o desactivar selectivamente.
  • Incorpora un editor de código que facilita la escritura y advierte de algunos posibles errores (conviene tener en cuenta que el plugin no es capaz de impedir todos los errores que un ser humano es capaz de cometer). Además, el editor incorpora un mecanismo de seguridad que detecta algunos errores de sintaxis e impide que se ejecuten los snippets que tienen ciertos fallos (no todos).
  • Permite activar o desactivar a voluntad cada uno de los snippets de código definidos. Esto facilita el mantenimiento del sitio, ya que en función de las necesidades existentes a lo largo de su vida pueden eliminarse o añadirse scripts a voluntad.
  • Los snippets se pueden activar para el área de administración (el backend), las páginas públicas (el frontend), o para backend y frontend a la vez.  También existe la posibilidad de ejecutar algunos snippets una única vez, lo cual resulta muy útil para aquellas funciones que solo deben ejecutarse en una única ocasión.
  • En las instalaciones multisitio, el plugin permite definir funciones globales que se ejecutan a nivel de todo el multisitio, y, si se desea, para todos y cada uno de los sitios o blogs existentes.
  • Los snippets son independientes de los temas; por tanto, una función bien definida puede seguir funcionando incluso aunque el tema cambie. Por supuesto, también es posible definir funciones vinculadas al tema activado en un sitio web.
  • El plugin dispone de un mecanismo para describir y etiquetar los snippets, lo cual resulta muy útil para hacer comentarios, citar fuentes, etc.
  • Permite importar y exportar los snippets definidos en formato JSON, con lo cual estos son reutilizables en otros sitios web, tanto si tienen instalado el plugin como si no lo tienen; para que esta segunda opción sea viable, los snippets, en lugar de exportarse, deben descargarse, lo cual genera un fichero en código PHP.
  • El plugin incorpora un mecanismo de seguridad para desactivar todos los snippets en caso de que se haya generado un error de sistema irrecuperable. El procedimiento para ello consiste en añadir una constante al fichero de configuración de WordPress, wp-config.php. Aunque la manipulación de este fichero requiere conocimientos avanzados de administración de WordPress, la reparación de errores catastróficos es sencillísima para quien sabe ponerla en práctica.
  • Dispone de una ayuda contextual que, además de explicar las funciones principales del plugin, proporciona enlaces a varios sitios que contienen colecciones de snippets muy interesantes: WP-Snippets, WP Snipp, Cats Who Code y WP Function Me.

3. Cómo se utiliza el plugin Code Snippets

Dejando a un lado las dificultades inherentes a programar en PHP, utilizar el plugin es muy sencillo. Basta con ir al menú Snippets, crear un nuevo snippet haciendo clic en el botón Añadir nuevo, escribir el código, la descripción (siempre que hay que declarar lo que hace el código y, en su caso, de dónde lo hemos tomado) y las etiquetas, y por último guardarlo. El snippet se puede guardar sin activar, o guardarlo y activarlo a la vez; en este segundo caso, la función definida por el código estará operativa y será plenamente funcional (siempre que haya sido correctamente programada, claro está). A continuación podemos ver un videotutorial que explica claramente el procedimiento:

4. Ejemplos de código para utilizar con Code Snippets

Con el plugin Code Snippets se pueden definir funciones muy sencillas o muy complicadas, dependiendo de las necesidades del caso. Los ejemplos que vamos a incluir a continuación los presentaremos por orden creciente de complejidad, a fin de garantizar que todos los niveles de aprendizaje quedan cubiertos y atendidos.

1. Eliminación de la barra de administración. Este snippet, que suprime la barra de administración en el frontend de WordPress, ha sido tomado de WP FUNCTION ME.

add_filter( 'show_admin_bar', '__return_false' );

2. Personalización del formulario de búsqueda de cualquiera de los temas de la familia Genesis. Este snippet permite modificar el texto que aparece dentro de la caja del formulario de búsqueda de WordPress, y ha sido tomado de Customize The Search Form Input Box:

add_filter( 'genesis_search_text', 'elarequi_search_text' );

function elarequi_search_text( $text ) {
  return esc_attr( '¡A buscar...!' );
}

3. Refuerzo de la seguridad de WordPress ante inicios de sesión incorrectos. Cuando se intenta iniciar sesión en WordPress y se introduce un nombre de usuario o contraseña incorrectos, WordPress advierte del tipo de error cometido, lo cual puede dar pistas a los hackers. Para reforzar la seguridad del sitio, se puede utilizar este script, que no da ninguna pista sobre el tipo de información que se ha introducido erróneamente. El código ha sido tomado de 32 Extremely Useful Tricks for the WordPress Functions File:

function elarequi_no_wordpress_errors(){
  return '¡Algo ha salido mal, pero no te vamos a dar pistas!';
}

add_filter( 'login_errors', 'elarequi_no_wordpress_errors' );

4. Modificación del contenido de la etiqueta «more», para personalizarla. Este snippet sustituye el texto que aparece tras la etiqueta «more» por un texto personalizado. El snippet ha sido adaptado del ejemplo que aparece en 32 Extremely Useful Tricks for the WordPress Functions File:

function elarequi_modify_read_more_link() {
    return '<a class="more-link" href="' . get_permalink() . '">Sigue leyendo, hay más</a>';
}
add_filter( 'the_content_more_link', 'elarequi_modify_read_more_link' );

5. Eliminación del menú «Enlaces» de WordPress. Este snippet, que permite suprimir el menú «Enlaces» del backend (de hecho, WordPress ha prescindido de esta función en las instalaciones «normales» desde la versión 3.5), ha sido copiado de How To Remove Links Manager Admin Menu.

add_action( 'admin_menu', 'elarequi_remove_links_menu' );

function elarequi_remove_links_menu() {
  remove_menu_page('link-manager.php');
}

6. Creación del shortcode [agradecimiento]. Al incluir este shortcode al final de una entrada, se genera automáticamente el siguiente texto: «Gracias por leer este artículo. Esperamos que vuelvas pronto por nuestro sitio web.». El shortcode ha sido creado siguiendo las instrucciones del artículo Crear shortcodes de contenido en WordPress.

function elarequi_shortcode_de_agradecimiento() {
  return '<p>Gracias por leer este artículo. Esperamos que vuelvas pronto por nuestro sitio web.</p>';
}

add_shortcode('agradecimiento', 'elarequi_shortcode_de_agradecimiento');

7. Definición de un nuevo tamaño de imagen para el tema eleven40 Pro, del Consejo Escolar de Navarra. Este snippet permite definir dos tamaños personalizados de imágenes (uno de 809×350 píxels, y el otro de 388×144 píxels, acordes con el diseño del citado tema. Con estos dos tamaños de imagen se puede generar un diseño de entradas en cuadrícula con un elemento inicial destacado, tal como se ve en la página de inicio de este tema. El snippet está basado en las instrucciones de How to Change the Image Size in Genesis Blog Archives.

// Se define un nuevo tamaño para la miniatura de la primera imagen de la página de inicio
add_image_size( 'grid-featured-first-post', 809, 350, TRUE );

// Se define un nuevo tamaño para las miniaturas de la página de inicio

add_image_size( 'grid-featured-new', 388, 144, TRUE );

8. Modificación del pie de página del framework Genesis. Este código permite personalizar los créditos del pie de página en cualquiera de los temas de la familia Genesis. Ha sido tomado de Customize The Credits Text.

add_filter('genesis_footer_creds_text', 'elarequi_footer_creds_filter');

function elarequi_footer_creds_filter( $creds ) {
  $creds = 'Pie de página modificado de acuerdo con el procedimiento descrito en el <a href="https://cursoswp.educacion.navarra.es/cursowp2018/" title="Curso de WordPress 2018" target="_blank">Curso de WordPress 2018</a>';
  return $creds;
}

9. Activación de un diseño por defecto para los artículos individuales del sitio web. Este código sirve para que todos los artículos de este sitio web (tanto entradas como páginas) adquieran el diseño con barra lateral a la derecha, aun a pesar de que el diseño por defecto del tema sea sin barras laterales. El snippet se ha adaptado a partir de Change Layout On Posts, Pages & Archives in Genesis.

add_filter( 'genesis_pre_get_option_site_layout', 'elarequi_full_width_layout_single_posts' );

function elarequi_full_width_layout_single_posts( $opt ) {
if ( is_singular( array ('post', 'page' ) ) ) {
    $opt = 'content-sidebar'; 
    return $opt;
    } 
}

10. Configuración de un orden personalizado de entradas. Este código permite que las entradas aparezcan en el frontend en el mismo orden cronológico en que han sido publicadas, es decir, al revés que como WordPress lo hace por defecto. El snippet se utiliza en este mismo sitio web, y ha sido adaptado de How To Reorder Standard & Custom Post Type Posts In WordPress.

function elarequi_order_category( $query ) {
  // La función solo se ejecuta en el frontend, y siempre que sea la consulta principal
  if ( is_admin() || ! $query->is_main_query() ) {
    return;
  }
  // Las páginas de archivo se ordenan por fecha, en sentido ascendente
  if ( is_category() || is_home() || is_archive() ) {
    $query->set( 'order' , 'asc' );
    $query->set( 'orderby', 'date');
    return;
  }
}
add_action( 'pre_get_posts', 'elarequi_order_category', 1 );

11. Exclusión de ciertas categorías de las páginas de archivo o índice. El código, que se utiliza en este mismo sitio web, sirve para que en las páginas de archivo (los listados de entradas) no aparezcan los artículos correspondientes a la categoría «Actividades», cuyo identificador es el 3; naturalmente, en la página de la categoría «Actividades» las entradas sí deben aparecer. El snippet ha sido adaptado a partir de las instrucciones de estos dos artículos: How to Exclude Posts of Particular Category from Front Page : Genesis Framework y Exclude Specific Categories From The WordPress Loop.

add_action( 'pre_get_posts', 'elarequi_exclude_category_from_blog' );

function elarequi_exclude_category_from_blog( $query ) {
    if( $query->is_main_query() && $query->is_home() || ( is_archive() && ! is_category('actividades') ) ) {
    $query->set( 'cat', '-3' );
    }
}

12. Modificación de las dimensiones predeterminadas del área de cabecera del tema News Pro, utilizado en el sitio web del IES Biurdana. Este código modifica el tamaño inicialmente previsto, a fin de que el centro pueda utilizar una imagen de cabecera de 1140 píxels de ancho y 250 píxels de alto. Para que funcione adecuadamente, el snippet debe operar en coordinación con una serie de estilos CSS personalizados. Las instrucciones para hacerlo pueden leerse en el artículo News Pro Theme Full Width Header Image.

add_theme_support( 'custom-header', array(
  'header_image'    => '',
  'header-selector' => '.site-title a',
  'header-text'     => false,
  'height'          => 250,
  'width'           => 1140,
) );

5. Algunos consejos con respecto al uso de Code Snippets

Antes de plantearse siquiera el uso del plugin Code Snippets para manipular y personalizar una instalación de WordPress, conviene tener en cuenta algunos consejos básicos:

  1. Se debe actuar con mucha cautela y paso a paso, yendo siempre de lo más fácil y conocido a lo más complejo, a fin de cobrar experiencia y confianza. Es necesario tener en cuenta que una función mal definida en PHP puede hacer que un sitio web se torne completamente inoperativo. Aunque el plugin Code Snippets dispone de un mecanismo de seguridad que hace posible recuperarse de un error grave, siempre es mejor ser prudente que correr riesgos.
  2. Hay que verificar exhaustivamente cada script creado y activado, ya que algunos pueden tener efectos que no son perceptibles a primera vista. Para una verificación detallada y en profundidad, aconsejamos activar el modo de depuración de WordPress, que debe desactivarse inmediatamente después de haberse utilizado.
  3. No hay que programar funciones o scripts 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.
  4. Cada vez que se añade código a una instalación de WordPress mediante el plugin Code Snippets, hay que incluir la correspondiente descripción, que servirá a posteriori para identificar y entender lo que se ha hecho (no nos olvidemos de que la memoria es frágil). Si hemos copiado y adaptado el código a partir de una fuente externa, también conviene anotar la fuente de donde hemos tomado la información, porque así podremos acudir a ella en el futuro.
  5. Para poder avanzar en el conocimiento de la programación de scripts y funciones, 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.