Cómo Añadir CÓDIGO Personalizado en WordPress [+TIPS]

¿Quieres añadir un código personalizado a tu página web, blog o tienda online WordPress y no sabes cómo hacerlo? ¿La idea es añadir código CSS, HTML o Javascript? ¿Buscas cómo hacerlo manualmente o con plugins? ¡Estás en el sitio correcto! WordPress está muy bien tal y como viene pero, para los fanáticos de este CMS (entre los que me incluyo), si quieres ir un poco más allá y agregar o eliminar una funcionalidad específica, es necesario añadir fragmentos de código. Ya sea para añadir el código de Google Analytics o de Google Adsense o código CSS, es importante saber hacerlo bien (porque puedes romper tu sitio web),

La manera más habitual de modificar, agregar o eliminar una funcionalidad específica a WordPress es instalando plugins. Es una prática muy habitual y muy respetable, pero no siempre es la mejor opción. Estos complementos, además de añadir funcionalidad, también ralentizan la instalación web y, en ocasiones, no son necesarios. Existen muchos plugins de WordPress que sólo insertan un simple código en tu WordPress, lo que no tiene mucho sentido (sobre todo si eres un diseñador web WordPress que cuida el rendimiento de WordPress).

La diferencia entre una práctica y otra es que, al hacerlo a mano, te aseguras de insertar el código más optimizado, controlado y con menos carga para tu sitio web y al utilizar plugins no requieres de conocimientos técnicos (además suelen tener una interfaz amigable para realizar ajustes avanzados). Por ejemplo, puede que, cuando un usuario realiza una búsqueda en tu sitio web, no quieras que se muestren en los resultados de búsqueda ciertas entradas, páginas, categorías o productos.

WordPress no trae una función por defecto para realizar este ajuste en su panel de administración, por lo que tienes 2 opciones: instalar un plugin que te permita gestionar qué contenido aparece o no en la búsqueda o añadir un fragmento de código personalizado a WordPress. En esta guía te explico todo lo que tienes que saber para insertar fragmentos de código personalizado en WordPress correctamente.

Ten en cuenta que, antes de añadir fragmentos de código a wordpress, es imprescindible que hagas una copias de seguridad de tu wordpress. Si no lo haces y el código personalizado no es correcto, es muy probable que rompas el sitio web (un error muy común al utilizar wordpress). Además, recuerda solo utilizar 1 de estos métodos, no todos a la vez

Cómo añadir código personalizado en WordPress sin plugins

Una de las opciones más rápidas para añadir fragmentos de código personalizado en WordPress es hacerlo directamente en los archivos core de WordPress o de la plantilla o plugins. Es fácil, pero tienes que tener mucho cuidado. ¿Por qué? Porque estás inyectando código a archivos core de tu instalación WordPress, por lo que, si lo haces mal, la vas a romper. Hay muchos sitios donde puedes insertar fragementos de código, pero los más populares son la cabecera (header.php), pie de página (footer.php) y el archivo de funciones del tema (functions.php).

La mayoría de plantillas de WordPress permiten la inserción de código en la cabecera y el pie de página desde su panel de ajustes. De hecho, hay algunas que directamente tienen una sección para los scripts de Google Analytics, Tag Manager Pixel de Facebook, etc. (de todas maneras, yo te recomiendo Google Tag Manager para hacer esto).

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 borraron. ¿Te suena? Para evitar esto existen los «child themes» o temas hijos. Se trata de un tema adicional al principal que hereda todas las funcionalidades del plantilla WordPress original (o padre), en el que puedes realizar modificaciones en la plantilla sin que las pierdas cuando actualices la plantilla padre u original.

Dirígete a la sección «Apariencia > Temas» de tu WordPress y haz click en «Detalles del tema» de tu tema para saber si es un tema hijo o no

Si no tienes ni idea de lo que te hablo, dirígete a «Apariencia > Temas» y ubica el tema que tienes activo. Haz click en el botón «Detalles del tema» y se abrirá una ventana que te dirá si estás utilizando un tema hijo (y también te indica quién es el padre). Si no tienes un tema hijo, comprueba si los desarrolladores de tu theme ofrecen alguna opción (siempre deberían de ofrecerlo) o crea un child theme tú mismo.

Un tema hijo es la herramienta perfecta para controlar las funcionalidades que añades a Wordpress.

Cómo añadir código personalizado a WordPress en el archivo functions.php

Antes de insertar ningún código en el archivo functions.php de WordPress debes saber que este archivo sólo acepta el lenguaje PHP, ya que se utiliza para lanzar hooks y filtros predefinidos en WordPress que permiten modificar su funcionamiento, y que cada plantilla tiene su propio archivo functions.php.

Dicho esto, y sabiendo que cualquier código que añadas a este archivo de forma defectuosa romperá la web, tienes 2 opciones para editar el archivo functions.php: editándolo desde tu servidor (o un cliente FTP) o desde WordPress. Mi favorita (y la que te recomiendo) es accediendo desde el cPanel de tu servidor (o Plesk) y añadiendo el código directamente en functions.php. Sigue estos pasos:

En cPanel, abre el «Explorador de archivos», busca la carpeta «Themes» de WordPress y edita el archivo functions.php

Añade las líneas de código debajo de las que ya haya en el archivo functions.php

Mucho cuidado si editas el archivo functions.php de wordpress desde el editor de wordpress, ya que no podrás descargar una copia de seguridad ni volver atrás. Además, pon especial cuidado con la línea final del archivo, ya que no debería ver los caracteres «?>» (si así es, extrema las precauciones de que no haya nada después de los mismos, o tu web habrá dejado de funcionar).

Cómo añadir código personalizado a WordPress en el editor de temas

Otra opción es utilizar el editor de temas de WordPress y añadir el código en el archivo functions.php (muy parecido a la opción anterior, pero directamente desde WordPress). Sinceramente, no te recomiendo utilizar esta opción porque, aunque es cómodo hacerlo desde WordPress, no tienes ni puedes hacer una copia de seguridad del archivo, por lo que volver a atrás es más complicado (y tienes que acceder al servidor si te pasa). Además, lo mejor tener siempre un control de cambios (sobre todo si añades códigos que no sabes si funcionan) y un cPanel o Plesk te permiten arreglarlo en segundos.

Añadir código personalizado a wordpress desde el editor de temas es la opción más rápida, pero la menos recomendable. No insertas código sin testear, puedes romper la web, por lo que terminarás teniendo que acceder al servidor para arreglarlo.

Cómo añadir código personalizado en WordPress con plugins

Añadir fragmentos de código personalizado aWordPress con plugins es «coser y cantar», ya que te permiten agregar a tu sitio código independiente del tema, por lo que puedes migrar esos cambios incluso aunque cambies a un tema nuevo.

Además, si quieres agregar gran cantidad de código personalizado a tu sitio web, la interfaz de configuración y usuario de este tipo de plugins te dan mucha más información y control (sobre todo a la hora de saber lo que has añadido) y la opción de activar o desactivar los códigos (algo muy útil). Por ello, hemos hecho un listado de los mejores plugins para añadir código personalizado en WordPress:

#1 WP Code

El plugin de fragmentos de código de WordPress WP Code hace que sea fácil y seguro agregar funciones personalizadas de WordPress a través de fragmentos de código, para que pueda reducir la cantidad de complementos en una web.

Características

• Interfaz intuitiva: Proporciona una interfaz intuitiva y fácil de usar para la inserción y gestión de código personalizado en WordPress.
• Syntax highlighting: Ofrece resaltado de sintaxis para facilitar la lectura y edición del código.
• Compatibilidad: Compatible con las últimas versiones de WordPress y garantiza un rendimiento óptimo.
• Personalización avanzada: Permite una personalización avanzada mediante la implementación de código específico según las necesidades del usuario.

Planes de precios

• Elite ($399/Año).
• Pro ($199/Año).
• Plus ($99/Año).
• Basic ($49/Año).

Ir a WP Code ᐅ

#2 Code Snippets

El plugin Code Snippets te permite añadir y gestionar tus trocitos de código para que los tengas que añadir al functions.php. Es una manera fácil y rápida de añadir código a tu web. Este plugin ofrece una opción muy interesante, puedes indicar que se ejecute siempre o sólo en la administración en el frontend del sitio.

Características

• Organización eficiente: Facilita la organización eficiente y etiquetado de diversos snippets de código para una gestión más ordenada.
• Activación selectiva: Permite la activación o desactivación selectiva de fragmentos de código, adaptándose a las necesidades específicas del usuario.
• Historial de cambios: Registra un historial de cambios detallado, facilitando el seguimiento y la reversión de modificaciones en los snippets.
• Integración fluida: Ofrece una integración fluida con el entorno de WordPress, asegurando un funcionamiento armonioso con otros plugins y temas.

Planes de precios

• Plan completamente gratuito.

Ir a Code Snippets ᐅ

#3 CodeKit

Al usar el plugin CodeKit, puedes crear bloques de código para diferentes idiomas y mantenerlos en bloques separados tal como lo haces con tus publicaciones. Con el poder del IDE integrado, puedes agregar códigos con resaltado de sintaxis, función emmet y autocompletar.

Características

• Compilación automática: Simplifica la compilación automática de recursos como Sass, Less y JavaScript, optimizando el flujo de trabajo del desarrollador.
• Optimización de recursos: Contribuye a la optimización de recursos web mediante técnicas como la minimización y concatenación de archivos.
• Integración con proyectos: Se integra fácilmente con proyectos de desarrollo web, proporcionando una solución integral para la gestión y mejora del código.
• Compatibilidad avanzada: Garantiza una compatibilidad avanzada con diversas tecnologías y frameworks utilizados en el desarrollo web.

Planes de precios

• Desde ($39/Mes).

Ir a CodeKit ᐅ

#4 Elementor Custom Code

Si has diseñado tu sitio web con Elementor, y dispones de la versión PRO, debes saber que este page builder trae una funcionalidad integrada para añadir código personalizado a WordPress.

Características

• Integración con Elementor: Diseñado específicamente para integrarse sin problemas con el popular constructor de páginas Elementor.
• Control preciso: Ofrece un control preciso sobre la inserción de código personalizado en páginas y secciones específicas, mejorando la flexibilidad.
• Compatibilidad extensa: Asegura una compatibilidad extensa con widgets y elementos de diseño de Elementor, facilitando la implementación de código personalizado.
• Visualización en tiempo real: Permite la visualización en tiempo real de los cambios realizados en el código dentro del entorno de Elementor.

Planes de precios

• Essential ($49/Año).
• Advanced ($99/Año).
• Expert ($199/Año).

Ir a Elementor Custom Code ᐅ

#5 Header Footer Code Manager

Header Footer Code Manager es una interfaz sencilla para agregar fragmentos al encabezado o pie de página o arriba o debajo del contenido de su página, te brinda un control granular de las páginas y es perfecto para agregar código de administrador de etiquetas u otros.

Características

• Gestión centralizada: Proporciona una gestión centralizada del código insertado en las secciones de encabezado y pie de página de WordPress.
• Configuración por página: Permite la configuración específica del código para cada página o entrada, brindando un control detallado sobre la presentación.
• Compatibilidad con scripts externos: Facilita la inclusión de scripts externos y códigos de seguimiento en el encabezado o pie de página de manera sencilla.
• Prioridades de carga: Ofrece opciones para establecer prioridades de carga, asegurando una ejecución ordenada de los códigos en las páginas.

Planes de precios

• Completamente gratuito.

Ir a Header Footer Code Manager ᐅ

#6 Post Snippets

Post Snippets es un personalizador de fragmentos de código de WordPress personalizados, en la que puedes crear una biblioteca de códigos abreviados personalizados ilimitados e insertarlos en tus publicaciones y páginas en segundos.

Características

• Inserción dinámica: Permite la inserción dinámica de snippets de código en las publicaciones y páginas de WordPress.
• Variables personalizadas: Facilita el uso de variables personalizadas en los snippets para adaptar el código a contenido específico.
• Administración desde el editor: Posibilita la gestión y configuración de snippets directamente desde el editor de entradas o páginas.
• Reutilización eficiente: Favorece la reutilización eficiente de fragmentos de código en múltiples lugares sin duplicar el esfuerzo de programación.

Planes de precios

• Basic ($29/Año).
• Pro ($79/Año).
• Agency ($179/Año).

Ir a Post Snippets ᐅ

Como una imagen vale más que mil palabras, y para que veas un ejemplo en directo, te voy a explicar cómo añadir código personalizado en WordPress utilizando Code Snippets, que es mi plugin favorito para este tipo de trabajo. ¡Es muy fácil! Instala el plugin (es gratis y está disponible en el repositorio oficial de WordPress, en la sección «Plugins > Añadir nuevo«) y sigue estos pasos:

Instala el plugin haz click en «Añadir nuevo»

Añade el fragmento de código personalizado, asígnale un título (para diferenciarlo del resto) y en qué parte se tiene que ejecutar y guarda los cambios

A la hora de elegir dónde se ejecutará este código dentro de tu wordpress, recuerda que puedes ejecutar el fragmento de código en todas partes (en caso de dudas puedes dejar esta opción, ya que te aseguras de que el código se ejecutará donde lo necesitas), sólo en el área de administración (por ejemplo, para cargar un campo adicional en el listado de entradas), en la portada del sitio (es la opción más habitual, ya que normalmente el código que insertes será para modificar algo en el frontal de la web) o sólo 1 vez (es la opción menos habitual, y está pensada para códigos que van a modificar algo de forma permanente la primera que se ejecutan.).

Si has diseñado tu sitio web con Elementor, y dispones de la versión PRO, debes saber que este page builder trae una funcionalidad integrada para añadir código personalizado a WordPress. Accede a tu sitio web y sigue estos pasos:

Dirígete a «Elementor > Código personalizado» y haz click en «Añadir nuevo»

Añade el fragmento de código personalizado, asígnale un título (para diferenciarlo del resto), una ubicación y una proridad y haz click en «Publicar»

Cómo añadir código personalizado en WordPress creando un plugin

Finalmente, la tercera y en mi opinión la mejor opción, es crear tu propio plugin. Dentro del plugin, puedes meter todo tu código personalizado. Lo que debes hacer es crear un plugin (solo la primera vez) donde meterás todos esos snippets. Como digo, la primera vez es un poco más entretenido, pero luego ya será tan simple como hacerlo en functions.php. Para crear un plugin simplemente tienes que crear una carpeta dentro de la carpeta «plugins» con el nombre que quieras, y ahí crear un archivo PHP con el mismo nombre.

<?php
/**
* Plugin Name: [Insert Name]
* Plugin URI: [Insert Plugin URL]
* Description: [Insert Short Description]
* Author: [Insert Your Name]
* Author URI: [Insert Your URL]
* Version: 1.0
* Text Domain: plugin-name
*
* Copyright: (c) 2012-2022 [Insert Your Name] (your@email.com)
*
* License: GNU General Public License v3.0
* License URI: http://www.gnu.org/licenses/gpl-3.0.html
*
* @author [Insert Your Name]
* @copyright Copyright (c) 2012-2022, [Insert Your Name]
* @license http://www.gnu.org/licenses/gpl-3.0.html GNU General Public License v3.0
*
*/</p>
<p>if ( ! defined( ‘ABSPATH’ ) ) exit; // Exit if accessed directly</p>
<p>//Añade los frangmentos de código personalizado debajo de esta línea

Si no sabes cómo crear un archivo php descarga este (es el mismo que el del ejemplo) y utilízalo. Una vez que lo tengas creado, subido y activado, tan solo tendrás que añadir los fragmentos de código después de la última línea.

Preguntas frecuentes a la hora de añadir código a WordPress

Añadir fragmentos de código personalizado a WordPress es fácil y rápido, ya sea a mano o con plugins específicos. Eso si, eso no quita que surjan dudas y preguntas que a veces no tienen fácil respuesta. Por ello, después de muchos años insertando códigos en decenas de instalaciones WordPress, he juntado algunas preguntas frecuentes que me suelen hacer amigos, conocidos y clientes a la hora de insertar custom code en WordPress:

¿Qué se puede conseguir añadiendo código personalizado en WordPress?

De todo (el límite es tu imaginación). Gracias a la forma en la que está desarrollado WordPress y sus plugins, con sus acciones, filtros, etc. podrás modificar el comportamiento, el diseño y la funcionalidad de WordPress, la plantilla y los plugins.

Conclusión: Añade código personalizado a tu Wordpress sin errores

Si no tienes conocimientos en programación es posible que en más de una ocasión hayas renunciado a añadir fragmentos de código para mejorar la funcionalidad de WordPress. Como has podido ver, dispones de varias formas de hacerlo, y todas bastante sencillas. WordPress es una herramienta maravillosa, y la forma en la que está programado permite modificar casi cualquier cosa, lo que da mucha liberta para crear cualquier tipo de diseño y funcionalidad. Aunque en ocasiones hace falta recurrir a plugins para cubrir tus necesidades, en otros casos conseguirás lo que buscas agregando unas pocas líneas de código tú mismo.

¿Qué te ha parecido esta guía para añadir código personalizado en Wordpress? ¿Conocías todas las maneras de añadirlo? ¿Hay alguna que te haya resultado más sencilla? ¿Crees que nos hemos dejado alguna? ¿Te has quedado con alguna duda o pregunta? Entonces te pedimos que dejes un comentario. Da igual que sea o una duda o un simple gracias, pero nos alegraremos mucho de leerlo y responderlo.