Cómo agregar fragmentos de código en WordPress

Si desea agregar fragmentos de código a su sitio web de WordPress, ha venido al lugar correcto.

Por lo general, la gente copia códigos y los pega en archivos de temas de WordPress. Es un proceso sencillo pero este proceso es para usuarios expertos.

Para usuarios principiantes e intermedios, copiar y pegar puede parecer intimidante. Por eso estoy escribiendo esta publicación.

Además, los usuarios expertos pueden obtener beneficios porque les mostraré cómo agregar fragmentos de código fácilmente.

¡Vamos a empezar!

Razones para agregar fragmentos de código a su sitio de WordPress

En primer lugar, WordPress es el creador de sitios web más popular debido a su configuración fácil de usar para principiantes y su funcionalidad centrada en el usuario.

Sin embargo, agregar algunos códigos personalizados puede ampliar el poder de su WordPress sin dañar su sitio web.

Digamos que de alguna manera tienes algunos códigos que se pueden implementar en tu sitio web. ¿Pero dónde o cómo los publicarás?

Ahí es donde entra en juego la opción de pegar código. Es una excelente manera de potenciar su sitio web con cosas innovadoras.

Otra razón para utilizar código personalizado es que es una forma eficiente de ampliar el poder de su WordPress.

Casi para cada necesidad, encontrarás un complemento de WordPress. Pero, ¿es aconsejable instalar complementos para todas las necesidades y hacer que su sitio sea pesado?

Si puede gestionar el problema con un pequeño conjunto de código, debería hacerlo.

Dicho todo esto, veamos el proceso de agregar código personalizado a su sitio web de WordPress.

Formas de agregar códigos personalizados

Hay varias formas de agregar códigos personalizados a su sitio web de WordPress. Antes de discutir esa parte, quiero que instales un complemento de respaldo de WordPress para que tus nuevos códigos no rompan nada en tu sitio.

Si sale mal, puedes restaurar la versión anterior desde la copia de seguridad y llevar tu sitio a la etapa anterior. Dicho esto, otro aspecto de agregar fragmentos de código es dónde agregarlos.

Por lo general, puede agregar códigos a archivos de plantilla de temas, como index.php. Hay otros archivos PHP donde puedes pegar tus códigos directamente.

Supongo que el método más popular es agregar fragmentos a funciones.php. Al menos, eso es lo que verás en la mayoría de los tutoriales disponibles.

Pero te mostraré el mejor método que te ayudará más cuando cambies el tema o quieras detener la funcionalidad en un momento.

Sin embargo, estos son algunos de los métodos que puede utilizar para agregar su código personalizado a su sitio de WordPress.

Cómo agregar fragmentos de código en WordPress (FluentSnippets)

El primer paso es agregar código personalizado con un complemento llamado FluentSnippets. Por cierto, este complemento fue desarrollado por nosotros (tu WPManageNinja favorito). Si ya eres usuario de Fluent (utilizas cualquier producto de Fluent), sabes la gran calidad que mantienen nuestros complementos.

Paso uno: instalar el complemento gratuito

Vaya a Complementos > Agregar nuevo complemento y busque FluentSnippets.

Haga clic en el botón Instalar ahora .

Ahora haga clic en el botón Activar y su complemento se activará.

Regrese a su panel de WordPress y ubique FluentSnippets en el panel izquierdo. Verás un botón que dice Crea tu primer fragmento . Alternativamente, siempre puedes presionar el botón Nuevo fragmento en la parte superior derecha.

Paso dos: pegar los fragmentos de código

Ahora pega tu fragmento y dale un nombre. Puedes escribir alguna descripción si quieres. Después de todo, dígale dónde ejecutar y haga clic en el botón Crear fragmento .

También puede establecer cierta prioridad con números; cuanto menor sea el número, mayor prioridad obtendrá.

Cuando tenga varios fragmentos, puede organizarlos en grupos. También puedes asignar algunas etiquetas para encontrar tus fragmentos fácilmente.

Hay una opción llamada Lógica condicional avanzada. Si lo habilita, puede filtrar sus fragmentos y dejar que se ejecuten cuando cumplan con la condición.

Por cierto, puedes escribir scripts para PHP, PHP + HTML, CSS y JS.

La forma más sencilla de copiar y pegar código se realiza aquí. Puedes ir a ver la Configuración, aunque no hay mucho que hacer allí.

Pega el código dentro de tu archivo de tema

WordPress, por defecto, viene con una gran cantidad de funcionalidades para aplicar a su sitio. Los temas suelen tener funciones ricas y opciones de personalización. Pero cuando necesites algo exacto, puedes agregar algunos códigos escritos por tu cuenta.

Aquí viene el archivo function.php para salvar tu espalda. Bueno, puedes encontrar el archivo dentro de cada tema, pero quiero que sigas el camino más seguro. Por eso te sugiero que crees un tema hijo.

No te abrumes. Un tema secundario reside bajo el tema principal y funciona como los padres. Y el beneficio es que, si algo sale mal, sólo se verán afectados los brunch y no el árbol (tema principal).

Paso uno: crea un tema secundario

Para crear un tema secundario, debe acceder a las carpetas de su sitio a través de un cliente FTP como FileZilla. También puedes acceder utilizando el administrador de archivos desde donde se aloja el sitio.

Cuando haya iniciado sesión correctamente, vaya a wp-content > temas . Cuando navegue hasta allí, podrá ver las carpetas de todos los temas instalados en su sitio web.

Ahora necesitas crear una carpeta para el tema secundario que deseas crear. Dale un nombre a la carpeta. Te sugiero que escribas un nombre descriptivo para evitar confusiones en el futuro. Digamos que el nombre de su tema es tropica, puede nombrar su tema hijo como tropica_childtheme.

Paso dos: agregue un archivo css

Después de crear la carpeta, agregue un archivo style.css dentro de ella. En su editor de texto, pegue el siguiente código:

 /* Theme Name: My Child Theme Theme URI: https: //mysite.com/ Description: This is a new child theme I have created for experimentation. Author: Your Name Author URI: https: //mysite.com/ Template: parenttheme Version: 0.1 */

No olvide reemplazar su información con el contenido ficticio. Asegúrate de escribir correctamente el nombre del tema principal (aquí es tropica). Otra cosa importante es que debes llamar al CSS del tema principal dentro del archivo style.css del tema secundario.

Puedes hacerlo simplemente agregando el siguiente código:

 @import url("../parenttheme/style.css");

Aquí el “tema principal” es tropical. ¿Bien?

Entonces, no olvides escribir correctamente el nombre de tu tema principal. Una vez que haya terminado, guarde su archivo como style.css dentro de la carpeta de su tema hijo.

Paso 3: crea un archivo funciones.php

Lo siguiente es crear un archivo funciones.php para el tema de su hijo. Abra su editor de texto y pegue la siguiente etiqueta PHP:

 <?php //* Write your code here

Ahora guarde este archivo como funciones.php y agréguelo a la carpeta del tema secundario. Además, arrastre esta carpeta al directorio de temas de su sitio usando su cliente FTP.

Paso cuatro: activa tu tema

Es hora de activar tu tema. Para hacer esto, vaya a Apariencia > Temas en el panel izquierdo de su panel de WordPress. Puedes ver el tema secundario que has creado allí. Haga clic en el botón Activar y su tema hijo comenzará a funcionar.

Paso cinco: agregue sus fragmentos de código

Aquí para hacer la tarea principal. Para agregar fragmentos de código al tema secundario, navegue hasta Apariencia > Editor de archivos de tema . Ahora seleccione funciones.php o cualquier otro archivo que desee personalizar.

Aquí hay un ejemplo de funciones.php

Cuando haya terminado, haga clic en Actualizar archivo y sus cambios se implementarán en su sitio web. ¡Simplemente recarga el sitio y compruébalo tú mismo!

Conclusión

Ahora ya sabe cómo agregar fragmentos de código personalizados a sus sitios de WordPress. Utilicemos el conocimiento y hagamos que su sitio sea más poderoso que nunca con sus códigos personalizados. Espero que ya no sea una tarea difícil agregar códigos.