Saltar al contenido

Guía para principiantes para pegar fragmentos de la Web en WordPress

How to safely copy and paste code snippets in WordPress

En WPBeginner, a menudo publicamos tutoriales pidiendo a los usuarios que agreguen fragmentos de código en WordPress. Copiar y pegar código en archivos de temas de WordPress puede parecer fácil para los usuarios experimentados, pero es bastante tedioso e intimidante para los principiantes. Debido a la falta de familiaridad con la codificación, los principiantes pueden terminar cometiendo un error que podría bloquear su sitio web. En esta guía paso a paso, le mostraremos cómo copiar y pegar fragmentos de código de la web en WordPress.

Cómo copiar y pegar fragmentos de código de forma segura en WordPress

¿Por qué agregar fragmentos de código a su sitio de WordPress?

WordPress es el mejor creador de sitios web del mundo debido a la flexibilidad que ofrece. Es muy fácil agregar nuevas características y funcionalidades a su sitio web de WordPress.

Los sitios de recursos de WordPress, como WPBeginner, comparten consejos y trucos que puedes agregar para mejorar tu sitio web. Si bien agregar fragmentos de código personalizados a su sitio web es opcional, y a menudo puede encontrar complementos para hacer la misma tarea, a veces un fragmento simple es más eficiente.

Algunos fragmentos de código pueden ser muy útiles y pueden ayudarlo a corregir muchos errores comunes de WordPress, mejorar la seguridad de WordPress e incluso agregar nuevas funciones a su sitio web.

Dicho esto, echemos un vistazo a cómo agregar fragmentos de código de manera segura a su sitio web de WordPress.

¿Cuáles son las mejores formas de agregar fragmentos de código en WordPress?

Lo primero que debe hacer en cada sitio web de WordPress es instalar un complemento de respaldo de WordPress. Esto mantiene su sitio de WordPress seguro, y siempre puede restaurarlo desde la copia de seguridad en caso de que algo salga mal.

A veces puede encontrar instrucciones para agregar fragmentos de código en plantillas de temas de WordPress como index.php, single.php, header.php y más. Estos fragmentos de código son útiles solo en esas plantillas particulares, por lo que deberá agregarlos directamente a sus archivos de temas o crear un tema secundario.

Sin embargo, la mayoría de los fragmentos de código personalizados se agregan al archivo functions.php de su tema de WordPress. Si bien el tutorial puede recomendarle que lo agregue al archivo functions.php del tema, existe una alternativa mucho mejor que funciona de la misma manera que un archivo de funciones.

Echemos un vistazo a algunas de las formas en que puede agregar fragmentos de código personalizados en WordPress.

1. Use el complemento de WordPress Snippets de código

Complemento de fragmentos de código

Este es el método más seguro y más recomendado para principiantes. Code Snippets es un complemento de WordPress que le permite agregar y administrar fácilmente fragmentos de código personalizados en su sitio web.

Viene con un interruptor a prueba de fallas que desactiva inmediatamente un fragmento de código si causa un error. Esto lo protege de perder el acceso a su sitio web al agregar un fragmento de código personalizado.

Para obtener instrucciones detalladas, consulte nuestra guía sobre cómo agregar fácilmente fragmentos de código personalizados en WordPress.

Nota: El método de fragmentos de código es útil para los fragmentos que deben agregarse en un archivo de funciones. Si se le pide que agregue un fragmento de código en otros archivos de tema, este método no funcionará.

2. Cree un tema secundario para guardar el código personalizado

Uso del tema secundario para agregar fragmentos de código personalizados en WordPress

El segundo enfoque es crear un tema hijo. El uso del tema secundario mantendrá sus cambios intactos cuando actualice su tema. También le permitirá agregar código a otros archivos de tema si es necesario sin preocuparse por las actualizaciones que deshacen sus cambios.

Para obtener más detalles, consulte nuestra guía sobre cómo crear un tema secundario en WordPress.

Nota: Este método también funcionará para fragmentos de código que deben agregarse en otras plantillas de tema.

3. Use un complemento específico del sitio para el código personalizado

Otra opción flexible es usar un complemento de WordPress específico del sitio. Este es un complemento personalizado que puede crear para su propio sitio web y usarlo para guardar todo su código personalizado.

La ventaja de este método es que su código no depende de su tema y permanecerá activo incluso cuando cambie de tema. Tampoco se ve afectado por ninguna actualización de WordPress en su sitio web.

Consulte nuestra guía sobre cómo hacer un complemento específico para su sitio web para obtener instrucciones detalladas.

Nota: Este método solo es aplicable para fragmentos de código que deben agregarse en el archivo de funciones.

4. Agregar código directamente al archivo de funciones

Está bien agregar fragmentos de código en el archivo functions.php de su tema. Sin embargo, hay algunas desventajas.

  • Sus cambios se borrarán cuando actualice su tema de WordPress
  • Su código solo funcionará si está usando ese tema en particular

Dicho esto, echemos un vistazo a cómo copiar y pegar correctamente fragmentos de código y evitar romper su sitio web.

¿Cómo editar archivos de WordPress?

Existen diferentes formas de editar archivos de WordPress según el método que elija para agregar fragmentos de código personalizados en su sitio web.

1. Agregar código personalizado en el complemento de fragmentos de código

Si está utilizando el complemento Fragmentos de código, puede agregar fácilmente fragmentos de código desde el área de administración de WordPress. Simplemente ve a Fragmentos »Añadir nuevo página para agregar su código personalizado.

Agregar un nuevo fragmento de código en el complemento de fragmentos de código

2. Agregar código personalizado en el complemento de WordPress específico del sitio

Si está agregando código personalizado en un complemento específico del sitio, puede usar el editor de complementos de WordPress incorporado para agregar código personalizado.

Edición de un complemento específico del sitio utilizando el editor de complementos de WordPress

Primero, seleccione el complemento específico de su sitio en el menú desplegable etiquetado «Seleccionar complemento para editar». El editor cargará su archivo de complemento y podrá agregar fragmentos de código en él.

Una vez que haya terminado, haga clic en el botón «Actualizar archivo» para guardar sus cambios.

Si falta algo en su código o tiene el potencial de romper su sitio web, entonces el editor de complementos automáticamente deshacerá sus cambios.

Otro método para agregar código personalizado en un complemento específico del sitio es mediante FTP.

Simplemente vaya a la carpeta de complementos con su cliente FTP. Haga clic derecho en el archivo de complemento y luego seleccione Ver / Editar archivo.

Edite el complemento de WordPress específico del sitio usando FTP

3. Agregar código personalizado a functions.php u otras plantillas de tema

Si está agregando fragmentos de código al archivo functions.php de su tema o cualquier otra plantilla, puede agregar código directamente visitando Apariencia »Editor. Puede seleccionar el archivo donde necesita agregar el código de la columna derecha.

Editor de temas

Las instrucciones que está siguiendo le indicarán dónde pegar el código, pero si no lo hacen, deberá agregar el código al final del archivo.

Una mejor forma alternativa sería usar FTP para agregar código personalizado en los archivos de tema. Simplemente conecte su cliente FTP a su sitio web y vaya a / wp-content / themes / your-theme-folder / y haga clic derecho en el archivo que necesita edición.

Editar archivos de tema a través de FTPSeleccione la opción Ver / Editar archivo para abrir el archivo en el editor de texto.

Solución de problemas de errores de PHP al agregar código personalizado

Hay algunos errores comunes que los principiantes cometen al agregar fragmentos de código personalizados a sus sitios web. Echemos un vistazo a algunos de ellos y cómo evitarlos.

1. Uso incorrecto de las etiquetas PHP Begin y End

WordPress está escrito principalmente en el lenguaje de programación PHP que tiene una sintaxis específica que le dice a su servidor que el siguiente código debe ser procesado por PHP. Así es como se ve un fragmento de código PHP típico:

// PHP Begin Tag

Todo su código PHP debe estar dentro del Etiquetas

La etiqueta final de PHP se vuelve más importante en los archivos que cambian de un lado a otro en HTML. Esto incluye la mayoría de los archivos de temas de WordPress que usan etiquetas PHP junto con HTML.

Debe asegurarse de que si está pegando su código en una ubicación donde la etiqueta de inicio de PHP no está cerrada, debe agregar su código sin la etiqueta de PHP de inicio.

 

Si está pegando su código personalizado fuera o después de la etiqueta de finalización de PHP, también debe agregar la etiqueta de inicio de PHP.

 

// Your custom code snippet

Casi el 90% de todos los errores son causados ​​por la colocación incorrecta de las etiquetas finales o iniciales de PHP. Estudiar el código le permitirá comprender si necesita agregar o no las etiquetas de inicio o finalización de PHP en su fragmento de código personalizado.

Muchos archivos de tema de WordPress, en particular el archivo functions.php, pueden no tener una etiqueta final de PHP. Esto significa que puede agregar su código al final del archivo sin las etiquetas de inicio o finalización.


h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
';
}
add_action('login_head', 'custom_loginlogo');

Recuerde que los escritores de tutoriales pueden suponer en algún momento que ya sabe cómo usar las etiquetas de inicio y finalización de PHP. Es posible que simplemente le muestren un fragmento de código sin esas etiquetas.

function custom_loginlogo() {
echo '';
}
add_action('login_head', 'custom_loginlogo');

Como el autor del tutorial no sabe dónde agregará este código, se ha saltado el final de PHP y las etiquetas de inicio. Ahora, cuando agrega un fragmento de código de este tipo en sus archivos de tema, debe asegurarse de que esté dentro de las etiquetas PHP.

2. Errores de anidamiento incorrectos

PHP tiene una sintaxis particular para funciones, lógicas condicionales y bucles. Esta sintaxis depende de llaves que indican cuándo comienza una función y cuándo termina.

Por ejemplo, aquí hay una función PHP simple:


Ahora, si desea agregar un fragmento de código personalizado que no tiene nada que ver con esta función, deberá colocarlo fuera de esta función de esta manera:

// Pre-existing code in your theme file

h1 a {background-image: url('.get_bloginfo('template_directory').'/images/login_logo.png) !important; }
';
}
?>

Si pierde los corchetes iniciales o finales, esto romperá el código y terminará con una página de error.

Comprender los errores de PHP en WordPress

Los errores causados ​​al agregar un código personalizado en WordPress a menudo resultan en un mensaje de error detallado. La mayoría de ellos son errores de sintaxis, errores de análisis o errores fatales debido a caracteres inesperados.

Lo bueno es que estos errores le dirán qué línea en su código causó el error.

Mensaje de error PHP

Luego puede ir a la línea exacta para revisar el código y descubrir qué se perdió. Para este propósito, recomendamos utilizar un editor de texto adecuado para la edición de código porque tienen números de línea y resaltado de sintaxis que pueden ayudarlo a solucionar el problema fácilmente.

¿Qué hacer cuando su sitio de WordPress es inaccesible?

En primer lugar, no se asuste. Simplemente conéctese a su sitio web utilizando un cliente FTP o la aplicación Administrador de archivos en cPanel. Luego, ubique el archivo donde agregó el código que causó el error y edítelo.

Puede intentar solucionar los problemas con el fragmento de código. Si no puede solucionar esos problemas, elimine el código y guarde los cambios.

Su sitio debería volver a la normalidad nuevamente. Si todavía muestra algún error, descargue una copia nueva de su tema de WordPress y extraiga el archivo zip en su computadora.

Cargue el archivo donde realizó los cambios desde su computadora a su sitio web mientras sobrescribe el archivo anterior.

Para obtener más formas de resolver estos problemas, consulte nuestra guía sobre los errores más comunes de WordPress y cómo solucionarlos. Si eso no ayuda, siga nuestra guía de solución de problemas de WordPress para realizar un diagnóstico paso a paso.

Esperamos que este artículo te haya ayudado a aprender cómo pegar fragmentos de código de la web en WordPress. ¿Necesita algunos fragmentos de código que puede probar en su sitio web? Vea nuestra lista de trucos extremadamente útiles para el archivo de funciones de WordPress.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para ver videos tutoriales de WordPress. También nos puede encontrar en Twitter y Facebook.

.