{"id":24295,"date":"2021-10-08T15:04:37","date_gmt":"2021-10-08T13:04:37","guid":{"rendered":"https:\/\/clientes.ignaciosantiago.com\/new\/codigo-personalizado-wordpress\/"},"modified":"2024-04-29T10:30:30","modified_gmt":"2024-04-29T08:30:30","slug":"codigo-personalizado-wordpress","status":"publish","type":"post","link":"https:\/\/clientes.ignaciosantiago.com\/new\/codigo-personalizado-wordpress\/","title":{"rendered":"C\u00f3mo A\u00f1adir C\u00d3DIGO Personalizado en WordPress [+TIPS]"},"content":{"rendered":"\n

\u00bfQuieres a\u00f1adir un c\u00f3digo personalizado<\/strong> a tu p\u00e1gina web<\/a>, blog<\/a> o tienda online<\/a> WordPress y no sabes c\u00f3mo hacerlo? \u00bfLa idea es a\u00f1adir c\u00f3digo CSS, HTML o Javascript<\/strong>? \u00bfBuscas c\u00f3mo hacerlo manualmente o con plugins? \u00a1Est\u00e1s en el sitio correcto! WordPress est\u00e1 muy bien tal y como viene pero, para los fan\u00e1ticos de este CMS<\/a> (entre los que me incluyo), si quieres ir un poco m\u00e1s all\u00e1 y agregar o eliminar una funcionalidad espec\u00edfica, es necesario a\u00f1adir fragmentos de c\u00f3digo<\/strong>. Ya sea para a\u00f1adir el c\u00f3digo de Google Analytics<\/a> o de Google Adsense<\/a> o c\u00f3digo CSS, es importante saber hacerlo bien (porque puedes romper tu sitio web), <\/p>\n\n\n\n

\"como<\/figure>\n\n\n\n

La manera m\u00e1s habitual de modificar, agregar o eliminar una funcionalidad espec\u00edfica a WordPress es instalando plugins<\/a>. Es una pr\u00e1tica muy habitual y muy respetable, pero no siempre es la mejor opci\u00f3n. Estos complementos, adem\u00e1s de a\u00f1adir funcionalidad, tambi\u00e9n ralentizan la instalaci\u00f3n web<\/strong> y, en ocasiones, no son necesarios. Existen muchos plugins de WordPress<\/a> que s\u00f3lo insertan un simple c\u00f3digo en tu WordPress, lo que no tiene mucho sentido (sobre todo si eres un dise\u00f1ador web WordPress<\/a> que cuida el rendimiento de WordPress<\/a>). <\/p>\n\n\n\n

La diferencia entre una pr\u00e1ctica y otra es que, al hacerlo a mano, te aseguras de insertar el c\u00f3digo<\/strong> m\u00e1s optimizado, controlado y con menos carga para tu sitio web y al utilizar plugins no requieres de conocimientos t\u00e9cnicos<\/strong> (adem\u00e1s suelen tener una interfaz amigable para realizar ajustes avanzados). Por ejemplo, puede que, cuando un usuario realiza una b\u00fasqueda en tu sitio web, no quieras que se muestren en los resultados de b\u00fasqueda ciertas entradas, p\u00e1ginas, categor\u00edas o productos. <\/p>\n\n\n\n

WordPress no trae una funci\u00f3n por defecto<\/strong> para realizar este ajuste en su panel de administraci\u00f3n, por lo que tienes 2 opciones: instalar un plugin que te permita gestionar qu\u00e9 contenido aparece o no en la b\u00fasqueda o a\u00f1adir un fragmento de c\u00f3digo personalizado a WordPress. En esta gu\u00eda te explico todo lo que tienes que saber para insertar fragmentos de c\u00f3digo personalizado en WordPress<\/strong> correctamente.<\/p>\n\n\n\n

Ten en cuenta que, antes de a\u00f1adir fragmentos de c\u00f3digo a wordpress, es imprescindible que hagas una copias de seguridad<\/a> de tu wordpress. Si no lo haces y el c\u00f3digo personalizado no es correcto, es muy probable que rompas el sitio web (un error muy com\u00fan al utilizar wordpress<\/a>). Adem\u00e1s, recuerda solo utilizar 1 de estos m\u00e9todos,<\/strong> no todos a la vez<\/p>\n\n\n\n

C\u00f3mo a\u00f1adir c\u00f3digo personalizado en WordPress sin plugins<\/h2>\n\n\n\n

Una de las opciones m\u00e1s r\u00e1pidas para a\u00f1adir fragmentos de c\u00f3digo personalizado en WordPress<\/strong> es hacerlo directamente en los archivos core de WordPress o de la plantilla o plugins. Es f\u00e1cil, pero tienes que tener mucho cuidado. \u00bfPor qu\u00e9? Porque est\u00e1s inyectando c\u00f3digo a archivos core de tu instalaci\u00f3n WordPress<\/strong>, por lo que, si lo haces mal, la vas a romper. Hay muchos sitios donde puedes insertar fragementos de c\u00f3digo, pero los m\u00e1s populares son la cabecera<\/strong> (header.php), pie de p\u00e1gina<\/strong> (footer.php) y el archivo de funciones del tema<\/strong> (functions.php).<\/p>\n\n\n\n

\n

La mayor\u00eda de plantillas de WordPress permiten la inserci\u00f3n de c\u00f3digo<\/strong> en la cabecera y el pie de p\u00e1gina desde su panel de ajustes<\/strong>. De hecho, hay algunas que directamente tienen una secci\u00f3n para los scripts de Google Analytics, Tag Manager Pixel de Facebook, etc. (de todas maneras, yo te recomiendo Google Tag Manager<\/a> para hacer esto).<\/p>\n<\/blockquote>\n\n\n\n

Quiz\u00e1s en el pasado instalaste un tema que te gust\u00f3 mucho, sin embargo, quiz\u00e1s le faltaba alguna funcionalidad que te hubiera gustado, o bien modificar alguna existente. As\u00ed que fuiste a modificar directamente el tema. Funcion\u00f3 bien, hasta que un d\u00eda sali\u00f3 una actualizaci\u00f3n y al aplicarla tus modificaciones se borraron. \u00bfTe suena? Para evitar esto existen los \u00abchild themes<\/strong>\u00bb o temas hijos<\/strong>. Se trata de un tema adicional al principal<\/strong> 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<\/strong>.<\/p>\n\n\n\n

\"como<\/figure>\n\n\n\n

Dir\u00edgete a la secci\u00f3n \u00abApariencia > Temas\u00bb de tu WordPress y haz click en \u00abDetalles del tema\u00bb de tu tema para saber si es un tema hijo o no<\/p>\n\n\n\n

Si no tienes ni idea de lo que te hablo, dir\u00edgete a \u00abApariencia > Temas<\/em>\u00bb y ubica el tema que tienes activo. Haz click en el bot\u00f3n \u00abDetalles del tema<\/strong>\u00bb y se abrir\u00e1 una ventana que te dir\u00e1 si est\u00e1s utilizando un tema hijo (y tambi\u00e9n te indica qui\u00e9n es el padre). Si no tienes un tema hijo, comprueba si los desarrolladores de tu theme ofrecen alguna opci\u00f3n (siempre deber\u00edan de ofrecerlo) o crea un child theme t\u00fa mismo<\/a>.<\/p>\n\n\n\n

Un tema hijo es la herramienta perfecta para controlar las funcionalidades que a\u00f1ades a Wordpress<\/strong>.<\/p>\n\n\n\n

C\u00f3mo a\u00f1adir c\u00f3digo personalizado a WordPress en el archivo functions.php<\/h2>\n\n\n\n

Antes de insertar ning\u00fan c\u00f3digo en el archivo functions.php de WordPress debes saber que este archivo s\u00f3lo acepta el lenguaje PHP<\/strong>, 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<\/strong>.<\/p>\n\n\n\n

Dicho esto, y sabiendo que cualquier c\u00f3digo que a\u00f1adas a este archivo de forma defectuosa romper\u00e1 la web, tienes 2 opciones para editar el archivo functions.php: edit\u00e1ndolo 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\u00f1adiendo el c\u00f3digo directamente en functions.php<\/strong>. Sigue estos pasos:<\/p>\n\n\n\n

\"como<\/figure>\n\n\n\n

En cPanel, abre el \u00abExplorador de archivos\u00bb, busca la carpeta \u00abThemes\u00bb de WordPress y edita el archivo functions.php<\/p>\n\n\n\n

\"como<\/figure>\n\n\n\n

A\u00f1ade las l\u00edneas de c\u00f3digo debajo de las que ya haya en el archivo functions.php<\/p>\n\n\n\n

Mucho cuidado si editas el archivo functions.php de wordpress desde el editor de wordpress, ya que no podr\u00e1s descargar una copia de seguridad ni volver atr\u00e1s<\/strong>. Adem\u00e1s, pon especial cuidado con la l\u00ednea final del archivo<\/strong>, ya que no deber\u00eda ver los caracteres \u00ab?><\/em>\u00bb (si as\u00ed es, extrema las precauciones de que no haya nada despu\u00e9s de los mismos, o tu web habr\u00e1 dejado de funcionar).<\/p>\n\n\n\n

C\u00f3mo a\u00f1adir c\u00f3digo personalizado a WordPress en el editor de temas<\/h2>\n\n\n\n

Otra opci\u00f3n es utilizar el editor de temas de WordPress<\/strong> y a\u00f1adir el c\u00f3digo en el archivo functions.php (muy parecido a la opci\u00f3n anterior, pero directamente desde WordPress). Sinceramente, no te recomiendo utilizar esta opci\u00f3n porque, aunque es c\u00f3modo hacerlo desde WordPress, no tienes ni puedes hacer una copia de seguridad del archivo, por lo que volver a atr\u00e1s es m\u00e1s complicado (y tienes que acceder al servidor si te pasa). Adem\u00e1s, lo mejor tener siempre un control de cambios<\/strong> (sobre todo si a\u00f1ades c\u00f3digos que no sabes si funcionan) y un cPanel o Plesk te permiten arreglarlo en segundos.<\/p>\n\n\n\n

A\u00f1adir c\u00f3digo personalizado a wordpress desde el editor de temas es la opci\u00f3n m\u00e1s r\u00e1pida, pero la menos recomendable<\/strong>. No insertas c\u00f3digo sin testear, puedes romper la web, por lo que terminar\u00e1s teniendo que acceder al servidor para arreglarlo.<\/p>\n\n\n\n

C\u00f3mo a\u00f1adir c\u00f3digo personalizado en WordPress con plugins<\/h2>\n\n\n\n

A\u00f1adir fragmentos de c\u00f3digo personalizado aWordPress con plugins es \u00abcoser y cantar\u00bb, ya que te permiten agregar a tu sitio c\u00f3digo independiente del tema<\/strong>, por lo que puedes migrar esos cambios incluso aunque cambies a un tema nuevo. <\/p>\n\n\n\n

Adem\u00e1s, si quieres agregar gran cantidad de c\u00f3digo personalizado a tu sitio web, la interfaz de configuraci\u00f3n y usuario de este tipo de plugins te dan mucha m\u00e1s informaci\u00f3n y control<\/strong> (sobre todo a la hora de saber lo que has a\u00f1adido) y la opci\u00f3n de activar o desactivar los c\u00f3digos<\/strong> (algo muy \u00fatil). Por ello, hemos hecho un listado de los mejores plugins para a\u00f1adir c\u00f3digo personalizado en WordPress<\/strong>:<\/p>\n\n\n\n

\n

#1 WP Code<\/h3>\n\n\n\n
\"mejores<\/figure>\n\n\n\n

El plugin de fragmentos de c\u00f3digo de WordPress WP Code <\/strong>hace que sea f\u00e1cil y seguro agregar funciones personalizadas<\/strong> de WordPress a trav\u00e9s de fragmentos de c\u00f3digo, para que pueda reducir la cantidad de complementos en una web.<\/p>\n\n\n\n

Caracter\u00edsticas <\/h4>\n\n\n\n