Cómo añadir código y CSS personalizado a WordPress

Por , actualizado en

Una de las principales virtudes de WordPress es que puedes modificarlo a la medida de tus anchas; ¿no te gusta como se ve algún elemento del tema? Escribe un poco de CSS y cambia. ¿No te gusta como funciona algo? Escribe un pequeño bloque de código, añádelo y listo. Ahora bien, una de las primeras preguntas que se hacen los que empiezan en WordPress (y otros que ya llevan tiempo y se animan a modificarlo) , es la que viene a continuación: ¿dónde pongo mis personalizaciones de código y/o estilos CSS en WordPress?

Voy a contestar explicando donde NO poner tus personalizaciones de código y CSS.

Como seguramente sabes, todo en WordPress se actualiza; es decir, el software (core), temas y plugins…y cuando lo hacen se  sobreescribe todo lo que haya antes, y si modificaste algún archivo con tus personalizaciones, bueno, tengo malas noticias para ti, particularmente si no tienes un respaldo: acabas de perder tus modificaciones. En pocas palabras, esto nos lleva a la siguiente regla: 

No modifiques los archivos del core de WordPress, o un tema, o un plugin. Nunca.

Espero que el fondo rojo teatral tenga el efecto deseado. Eso nos vuelve a dejar la pregunta; entonces, si no es así…¿dónde pongo mis personalizaciones de código y/o estilos CSS? Bueno, estamos en el mundo de WordPress, así que lo que nos sobra son opciones, sólo tienes que saber donde y como. Empezamos por métodos para añadir código personalizado a WordPress:

Parte I: Cómo añadir código personalizado a WordPress

Primero vamos a ver como añadir código personalizado a WordPress, y aquí mi sugerencia es que si no entiendes o no tienes la alternativa que estés leyendo, pasa a la siguiente. Y recuerda: sólo usa UNO de estos métodos, no todos a la vez.

Ahora si, empecemos:

Método #1: usa la funcionalidad incorporada en tu tema

No es nada descabellado que tu tema ofrezca algún soporte para añadir personalizaciones directamente sin ensuciarse tanto las manos. Por ejemplo en GeneratePress Premium, el tema que yo recomiendo, es muy fácil meter personalizaciones tanto de código como de CSS a través del módulo Elements. Por supuesto no cubriremos aquí como hacerlo pues hay muchísimos temas y más posibilidades aún, lo que quiero decirte con esto es que investigues tu tema para saber si tiene la característica o no; puede que el tema de tu elección haga mucho más que solo cambiar la apariencia de WordPress.

En el caso de GeneratePress Premium, puedes hacerlo de la siguiente manera:

  1. Ve a Apariencia > Elements, verás un administrador general de elementos previamente definidos; haz clic en el botón “Añadir nueva” que se muestra arriba.
  2. Verás un selector de tipo de elemento, tienes tres posibilidades:
    1. Header (encabezado): permite definir encabezados que pueden desplegarse en base a condiciones.
    2. Hook (gancho): este es el que nos interesa, nos permite definir un elemento que puede estar conectado a un hook definido. Elige esta opción.
    3. Layout (disposición): permite controlar como se muestran las páginas.
  3. Elige Hook y en seguida verás que carga el editor del elemento. Llena lo que se te pide como sigue:
    1. Título: un nombre para identificar tu elemento.
    2. El contenido/código del elemento.
    3. En la parte de abajo del editor hay tres secciones:
      1. En la sección Settings:
        1. Hook con el cual se ejecuta el código, en mi caso elegiré wp_head para que se ejecute en el encabezado.
        2. Execute shortcodes (opcional): si quieres habilitar la ejecución de shortcodes, habilita esta casilla.
        3. Execute PHP (opcional): si quieres ejecutar PHP, habilita esta casilla; requiere que esté habilitada la edición de archivos, es decir, que no esté definida la constante DISALLOW_FILE_EDIT con valor a true.
        4. Priority, establecida por default a 10.
      2. En la sección Display rules estableces donde y como quieres mostrar este elemento (todos opcionales):
        1. Location: elige en que parte quieres ejecutar el elemento; hay muchas opciones para escoger.
        2. Exclude: hace lo inverso a Location, es decir, en que parte no quieres ejecutar el elemento.
        3. Rules: puedes definir la ejecución por rol de usuario.
      3. En la sección Internal rules opcionalmente puedes dejar una nota con una explicación más a fondo sobre tu elemento.
  4. Cuando hayas terminado, presiona el botón “Publicar” y tu elemento estará visible.

Parecen muchos pasos, pero no todos son obligatorios, y para ser honesto se hace bastante rápido.

Método #2: si estás usando un tema hijo, usa el archivo functions.php 

¿Cuántas veces has escuchado esa frase de “¡pónlo en tu functions!”? si tu tema actual es un tema hijo, no se diga más; aquí es donde puedes añadir el código personalizado que desees. Para los que no sepan lo que son:

Brevemente: temas hijos

Quizás en el pasado instalaste un tema que te gustó mucho; sin embargo, quizás le faltaba alguna funcionalidad que te hubiera gustado, o bien modificar alguna existente. Así que fuiste a modificar directamente el tema. Funcionó bien, hasta que un día salió una actualización y al aplicarla tus modificaciones se fueron al caño…¿porqué? bueno, al actualizar el tema se sobreescriben los archivos, así que cualquier cosa que pongas en los archivos del tema se irá cuando actualices de nuevo. Para evitar esto, idearon los temas hijos; estos son un tema que depende del tema padre (o completo) y donde puedes añadir funcionalidad adicional sin ningún problema.

¿Cómo sé si uso un tema hijo?

En Apariencia > Temas ubica el tema activo, y presiona el botón Detalles del tema; esto te mostrará una ventana donde verás una leyenda como esta, que es la que te indica que si, estás usando un tema hijo, y también te indica quién es el padre:

Como puedes ver, hay un tema llamado GeneratePress (para mi el mejor tema para WordPress y el que yo recomiendo) y otro llamado GeneratePress Child; éste último es el que estamos buscando. Ahora bien, el archivo functions.php es el responsable de contener todas las funciones del tema, y el tema hijo tiene su propio archivo functions.php que puedes modificar a tu antojo.

¿Donde están los archivos del tema hijo?

Conéctate a tu sitio de la forma que desees, ya sea a través de tu panel de hosting o bien por FTP, y navega hacia wp-content/themes/ y trata de ubicar la carpeta que más se asemeje al nombre que viste en el selector de temas; en mi caso es la carpeta generatepress-child; cuando ubiques tu carpeta, ahí encontrarás los archivos de tu tema hijo.

¿Y si no tengo un tema hijo?

Algunos temas como el que uso aquí (GeneratePress Premium) no incluyen un tema hijo; en el caso particular de este tema, es porque la versión premium incluye un módulo que te permite gestionar fragmentos de código que puedes incrustar donde quieras (como ya vimos hace un momento); si quieres el tema hijo de GeneratePress lo puedes obtener, pero algunos temas simple y sencillamente se quedaron en la época de las cavernas y no tienen un tema hijo. Para esos casos puedes seguir infinidad de guías sobre el tema (como esta o esta otra) o bien usar un plugin como Child Theme Configurator, aunque ambos temas quedan fuera de esta guía por el momento.

Nota importante: pon especial cuidado con la línea final del archivo; no debería tener los caracteres ?> ; si los tuviera, extrema precauciones de que no haya nada después de los mismos, o tendrás un error al intentar usar WordPress.

Método #3: añadir código personalizado con tu propio plugin 

Otra opción es que hagas un plugin con el código que necesitas que se ejecute; este aparecerá en el listado de plugins y lo podrás activar y desactivar como cualquier otro. No te preocupes por hacer el plugin, a pesar de que  hay generadores muy sofisticados en la red, el plugin mínimo necesita lo siguiente: 

<?php
/*
Plugin Name: <nombre del plugin>
Plugin URI: <URI de página del plugin>
Description: <descripción corta del propósito del plugin>
Version: <Versión del plugin, p.e. '1.0' (sin apóstrofes) >
Author: <Nombre del autor del plugin>
Author URI: <URI del autor>
License: <nombre de la licencia, por ejemplo 'GPL2' (sin apóstrofes)>
*/

// Tu código va aquí...

La primera línea es el indicador de que estamos en un bloque de código PHP; es necesaria en esa posición. después viene un bloque encerrado entre /* y */ que es el encabezado básico de un plugin. WordPress usa la información que está en este bloque de comentario para extraer datos del plugin y mostrarlos en el administrador.

Reemplaza lo que veas entre signos de menor y mayor que (inclusive), y guárdalo en un archivo con el nombre que quieras, y ponlo en /wp-content/plugins usando el método que más te guste (FTP, SSH, subirlo en ZIP usando la interfaz, etc.), y luego ve a la sección de plugins y lo verás listado con el nombre que dice en “Plugin Name” en el código de arriba; actívalo como cualquier otro plugin; y ahora si, resistirá actualizaciones de WordPress sin problemas y no perderás nada. Este es un método efectivo y sin mucho problema.

Método #4: añadir código personalizado con plugin imprescindible (mu-plugin)

Los mu-plugins o plugins imprescindible (actualmente la “mu” significa “must use”, pero anteriormente se usaba para “multi user” por una funcionalidad ya obsoleta) son como un plugin normal, excepto por tres cosillas:

  1. No hay gestión a través de la interfaz de WordPress; se activan sin tu intervención;
  2. Lo hacen antes de los plugins normales, y
  3. Se activan en orden alfabético tal y como se encuentren en la carpeta.

Los plugins imprescindibles también requieren que los gestiones manualmente en cuanto a actualizaciones, y deben ser un solo archivo sin nada más, nada de carpetas ni nada, y deben ir en /wp-content/mu-plugins. Para ver que plugins imprescindibles tienes en tu instalación, ve a Plugins y filtra por Imprescindible:

Así que si quieres usar tu código personalizado, sólo basta que generes un archivo tal cual lo harías con un plugin normal (excepto que no requiere de una cabecera, ese bloque de comentarios que van arriba y que sirven para que WordPress muestra información del plugin en formato entendible al usuario), y guardarlo en la carpeta /wp-content/mu-plugins y eso es todo; a partir de ahora se ejecutará solo.

¿Cuando es útil usar un plugin imprescindible?

Hay varios escenarios en los que un plugin imprescindible es una buena opción:

  1. Cargar alguna dependencia de otro componente; como se cargan antes de cualquier plugin normal, es una excelente opción para cargar librerías, por ejemplo.
  2. Cuando no quieres que otro usuario pueda interferir con una funcionalidad ya sea modificándola o quitándola.

Sin embargo, por las peculiaridades de estos plugins, te recomiendo que los uses sólo si tienes una buena razón para hacerlo, pues como la gestión es manual, a veces se olvida que están ahí cuando hay problemas. Como no hay interfaz para gestionarlos, necesitarás acceso por panel de hosting o FTP o SSH para gestionar el archivo de tu mu-plugin.

Método #5: añadir código personalizado con un plugin del repositorio

Y claro, podemos usar plugins del repositorio para introducir nuestras personalizaciones. Uno de los plugins más usados para este fin es Code Snippets, el cual es un viejo conocido para muchos usuarios, es una de las primeras opciones para meter código personalizado, y tiene un organizador bastante decente de todo lo que vas metiendo para que no te pierdas. Hay otros, y aunque Code Snippets es muy bueno no está de más experimentar. Vamos a ver como añadir código personalizado usando Code Snippets; doy por sentado que ya tienes instalado y activado el plugin. Ya que lo hagas verás que aparece un menú nuevo . Sigue estos pasos:

  1. Haz clic en el menú Fragmentos de código; irás a la pantalla donde puedes gestionar todos los snippets que hayas introducido; por default verás algunos que vienen de demostración con Code Snippets. Verás que junto al nombre de cada uno hay un switch, el cual sirve para activar un snippet; por default todos vienen deshabilitados. Haz clic en el botón Añadir nuevo en la parte de arriba.
  2. Necesitarás llenar varios campos:
    1. Un título de tu snippet;
    2. El código del snippet;
    3. La condición de donde ejecutar el snippet: tus opciones son en cualquier lugar, en el admin, en el front y correr sólo una vez;
    4. La prioridad de ejecución: 10 es el default, a menor número más prioridad. Aconsejo dejarlo en el default;
    5. Descripción del snippet;
    6. Etiquetas del snippet, para organización.
  3. En este punto puedes guardar y activar (con los botones Activar o bien Guardar cambios y activar) o sólo presionar Guardar cambios. Cualquiera de estas opciones cuando menos almacena los cambios realizados.
  4. Si por alguna razón no guardaste y activaste en un paso, recuerda que puedes habilitar un fragmento de código habilitando el switch que tiene junto al nombre.

Con todo lo anterior listo, presiona el botón Guardar cambios en la parte de arriba para guardar tus cambios, o bien Activar para guardar y activar el snippet que estés editando en ese momento, o bien presionar Guardar cambios y activar (el botón azul) abajo a la izquierda.

¿Qué hago si mi sitio se cae a consecuencia de las modificaciones?

Como estamos metiendo código personalizado, siempre hay la posibilidad de que algo vaya mal y tu sitio termine con problemas; ten a la mano un acceso alternativo a tu sitio (por panel de hosting, por FTP o SSH), y dependiendo de si lo que añades es o no delicado, quizás un respaldo de tu sitio no estaría nada mal. De resto, si tienes problemas:

  • Si tienes WordPress 5.2 o superior, deberás saber como utilizar el Modo de Recuperación de esta para poder echar a andar el sitio de nuevo – es bastante fácil.
  • ¿Habilitaste un plugin o un mu-plugin? bastará con que renombres el archivo o lo elimines, para ello necesitarás acceso a tu sitio por panel de hosting, FTP o SSH.
  • Si te fuiste por el camino del functions.php, comenta el código que hayas añadido, o bien elimínalo.

Parte II: Cómo añadir CSS personalizado a WordPress

Método #1: añadir CSS a través del Personalizador

El Personalizador de WordPress permite que añadas CSS, y lo mejor de todo es que este se aplica en vivo, es decir, al editarlo ves el resultado. Para añadir CSS en el Personalizador, ve a Apariencia > Personalizar, y una vez que aparezca el personalizador ubica CSS Adicional en el menú de la izquierda (casi siempre está al final), haz clic en esa opción y verás que aparece un editor donde puedes meter tu CSS personalizado. 

No de olvides que al terminar debes presionar el botón ublicar que se muestra arriba para que los cambios se apliquen.

Este método funciona de maravilla, se aplica al momento y no causa ningún problema.

Método #2: añadir CSS personalizado a través del tema hijo

Si cuentas con un tema hijo, es una excelente y sencilla forma de añadir CSS personalizado a tu WordPress; en la carpeta de tu tema hijo hay un archivo style.css, y al final de este puedes añadir tus estilos personalizados con la opción CSS Adicional.

Método #3: añadir CSS personalizado con un plugin del repositorio

De nuevo, una forma eficiente de meter personalizaciones es con un plugin dedicado a eso; el mismo Code Snippets del que hablamos hace un rato igual sirve; otro plugin muy usado para meter CSS personalizado es Simple CSS (por cierto es de Tom Usborne, el mismo autor del tema GeneratePress); otra buena buena opción es Simple Custom CSS and JS, que te permite introducir personalizaciones con HTML, CSS y JS. 

Método #4: añadir CSS personalizado con código

Finalmente, si el código es lo tuyo, puedes encolar tu archivo de estilos usando la función wp_enqueue_style() de WordPress; suponiendo que tienes un archivo con tus reglas personalizadas llamado mis-estilos.css y está en la carpeta raíz de tu tema actual, la siguiente línea:

wp_enqueue_style( 'mis-estilos', get_stylesheet_directory_uri() . '/mis-estilos.css' );

Cargará dicho archivo. Lo ideal es que para usarlo es meterlo con un gancho, como por ejemplo:

function encolar_mis_estilos() {
    if ( ! is_admin() ) {
        wp_enqueue_style( 'mis-estilos', get_template_directory_uri() . '/mis-estilos.css' );
    }
}
add_action( 'wp_enqueue_scripts', 'encolar_mis_estilos', 11 );

Nota el 11 al final de add_action(); esta es la prioridad y a número más alto se carga más tarde, por ello usamos 11 (el default es 10), de modo que se cargue después de la mayoría de estilos.

¿Y donde pondrás esas líneas? lo más recomendable para estos casos es en el functions.php, el cual ahora ya sabes donde encontrarlo.

Palabras finales

Ahora no hay excusa, ya sabes donde y como poner tus personalizaciones de código sin problemas; ya puedes ir a meter cuantos snippets, gists de GitHub y estilos te venga en gana para dejar a punto tu WordPress. 

Deja un comentario

¡NO sigas este enlace o serás bloqueado en este sitio!