5 formas seguras de agregar código personalizado a tu wordpress
5 formas seguras de agregar código personalizado a tu wordpress
En ocasiones algunos propietarios y administradores de sitios de WordPress requieren agregar algunas funcionalidades extras a ciertos plugins y temas, y así modificar o potenciar su funcionamiento; en esta publicación veremos las mejores y más seguras formas de agregar ese código personalizado a nuestros sitios.
Qué no hacer al agregar un código personalizado
No edites directamente el código en los archivos core del WordPress, Plugin o Theme
Este método puede ser el más fácil y los usuarios pueden tener la tentación de editar directamente los archivos principales de WordPress, plugins o temas. Los cambios se perderán si el plugin, theme o versión wordpress se actualiza. Esta es una de las mayores desventajas de editar directamente un archivo core de WordPress.
Que sí se debe hacer para agregar código personalizado a los sitios WordPress
El código personalizado se puede agregar mediante cualquiera de los siguientes métodos:
- Usando un plugin adicional
- Crear un plugin personalizado
- Crear un tema hijo o child theme
Analicemos cada uno de ellos en detalle.
1. Usando un plugin adicional
Generalmente recomendamos el plugin Code Snippets a nuestros clientes para agregar código personalizado a los sitios WordPress.
Repasemos este plugin y veamos cómo podemos agregar código personalizado usándolo.
Después de instalar el plugin, se creará una nueva opción en el menú llamada “Snippets”. Haz clic en el submenú “Agregar nuevo” para agregar un código personalizado.
Aquí tomaremos un ejemplo de cómo agregar un código personalizado a “Cambiar el número de productos en la página de la tienda” . Ingresa el título, el fragmento de código a ejecutar y la descripción que identifica qué hace o para qué sirve este código. También hay una opción sobre dónde se ejecutará particularmente este fragmento de código en el sitio (en todo el site, sólo el back-end o sólo el front-end)
Aquí hay una captura de pantalla del fragmento que acabamos de agregar.
Una vez que se guarda el fragmento, aparecerá en la vista Todos los fragmentos . Haz clic en Activar para aplicar el código, y ahora tu fragmento ya está agregado -de la forma que elegiste previamente- en tu sitio WordPress.
2. Creación de un plugin personalizado
Crear un plugin propio es la mejor manera de agregar código personalizado a los sitios WordPress. Incluso si cambias de theme o actualizas cualquier plugin, tema o versión WordPress, los códigos personalizados no se verán afectados. Esto brinda adicionalmente la flexibilidad de activar o desactivar este plugin propio (y el código personalizado asociado) según tus necesidades.
Hay varias formas de crear un plugin personalizado. Pasaremos por los conceptos más utilizados:
A.- Plugin para crear un plugin personalizado
Confundido ? Sí, leiste bien –
Un plugin para crear un plugin personalizado
Pluginception es un plugin que permite crear plugins personalizados. Este plugin te ayuda a crear otro en minutos, y agregarle el código personalizado que requieras. Veamos cómo se usa.
Después de instalar y activar el plugin, aparecerá un nuevo submenú en la opción de menú Plugins: Crear un nuevo plugin.
Una vez que hagas click en Crear un nuevo plugin, se te presentará un formulario para agregar información de encabezado relacionada con el nuevo plugin.
Una vez que hagas click en Crear un plugin en blanco y activarlo serás redirigido a la página del Editor de ese plugin. Con las funciones de edición de código implementadas en la versión 4.9, editar un plugin a través del panel de WordPress se vuelve más fácil. Pero al igual que WordPress, también recomendamos editar los archivos del plugin a través de FTP y un editor de código.
Copia el mismo fragmento de código que habíamos utilizado anteriormente para el plugin Code Snippets. De esta manera podremos agregar código personalizado a través de un plugin personalizado.
B. Creando un plugin personalizado de la forma tradicional
WordPress tiene muchos tutoriales útiles sobre cómo escribir un complemento . Discutiremos sobre cómo crear un plugin personalizado muy rápidamente y nos pondremos en marcha.
El primer paso es crear una carpeta en tudominio.com/wp-content/plugins /. En nuestro caso, consideremos que queremos crear un plugin personalizado como el que mencionamos anteriormente: Tyche New Plugin , por lo que el nombre de esta nueva carpeta sería tyche-new-plugin y en ella agregaremos un nuevo archivo con el nombre tyche-new-plugin.php.
Una vez hecho esto, es necesario agregar la información del encabezado del plugin.
| <? php | |
| / * | |
| Nombre del plugin: Tyche New Plugin | |
| URI del plugin: https://tychesoftwares.com | |
| Descripción: Plugin personalizado para agregar código personalizado | |
| Versión: 1.0.0 | |
| Autor: Dhruvin Shah | |
| URI del autor: https://tychesoftwares.com | |
| Licencia: GPL2 | |
| URI de licencia: https://www.gnu.org/licenses/gpl-2.0.html | |
| * / |
ver crudotyche-new-plugin.php alojado con ❤ por GitHub
Luego, puedes continuar y agregar tu código personalizado aquí y ver los resultados deseados.
3. Creación de un tema hijo o child theme.
Los temas hijo o child themes se utilizan específicamente para anular algunas de las funcionalidades básicas proporcionadas por un tema principal. El requisito más básico y generalizado de usar un tema hijo es anular o agregar JavaScript o Estilo usando CSS. La documentación para desarrolladores de WordPress recomienda usar un tema hijo cuando se requieran cambios específicos para un tema.
Similar a la creación de un plugin personalizado, los temas hijo también se pueden crear usando dos métodos.
A. Creando un tema hijo usando un plugin
Child Theme Configurator es un plugin que permite crear un tema hijo a partir de cualquiera de los temas instalados en tu sitio. Veamos cómo agregar código personalizado usando el plugin Child Theme Configurator .
Después de instalar el plugin, se agregará un nuevo submenú: Temas secundarios en el menú Herramientas . Cuando hagas clic en el submenú Temas secundarios, aparecerá una opción que te pedirá que selecciones el tema principal y analizar . Selecciona el tema y haz clic en Analizar , aparecerán las siguientes opciones:
Como queremos un tema secundario simple con algunas funciones básicas, usa las opciones predeterminadas y haz clic en Crear nuevo tema secundario . Ahora se creará un child theme en la carpeta wp-contents de tu sitio.
Para configurar un CSS personalizado, haz clic en la pestaña Consulta / Selector y agrega el selector o agrega directamente el CSS personalizado. Por ejemplo, si queremos cambiar el margen y el color de fondo de la etiqueta <body> agregaremos CSS sin procesar como se muestra.
Una vez que hagas clic en Guardar, es posible que aparezca la siguiente pantalla de confirmación para que estés seguro de lo que estás haciendo y de qué estilos del tema principal se anularán.
Haz clic en Guardar valores secundarios para confirmar los cambios. El CSS recién agregado aparecerá en la pestaña de estilos secundarios
De manera similar, se pueden copiar y modificar otros archivos de plantilla utilizando la pestaña Archivos . La documentación detallada sobre el uso se puede encontrar en su sitio web aquí .
B. Creación de un tema hijo de la manera tradicional
WordPress tiene un tutorial detallado sobre cómo crear un tema hijo. Enumeraremos algunos pasos básicos para crear rápidamente un tema hijo.
La mejor manera de crear un child theme es crear una nueva carpeta con ‘ -child ‘ adjunto en la misma carpeta que la carpeta Tema principal, es decir, tudominio.com/wp-content/themes.
El siguiente paso es crear un archivo style.css con los siguientes encabezados
| / * | |
| Nombre del tema: Twenty Seventeen Child | |
| URI del tema: https://wordpress.org/themes/twentyseventeen/ | |
| Descripción: Tema Twenty Seventeen | |
| Autor: El equipo de WordPress | |
| URI del autor: https://wordpress.org/ | |
| Plantilla: Twenty Seventeen | |
| Versión: 1.0.0 | |
| Licencia: Licencia pública general GNU v2 o posterior | |
| URI de licencia: http://www.gnu.org/licenses/gpl-2.0.html | |
| Etiquetas: claro, oscuro, dos columnas, barra lateral derecha, diseño receptivo, listo para accesibilidad | |
| Dominio del texto: Twenty Seventeen Child | |
| * / |
ver crudostyle.css alojado con ❤ por GitHub
El último paso es poner en cola las hojas de estilo del tema principal y del tema secundario. Para esto, es necesario agregar el siguiente fragmento en un nuevo archivo functions.php en la carpeta de temas secundarios.
| <? php | |
| add_action ( ‘wp_enqueue_scripts’ , ‘my_theme_enqueue_styles’ ); | |
| function my_theme_enqueue_styles () { | |
| wp_enqueue_style ( ‘estilo padre’ , get_template_directory_uri (). ‘/style.css’ ); | |
| wp_enqueue_style ( ‘estilo infantil’ , | |
| get_stylesheet_directory_uri (). ‘/style.css’ , | |
| array ( ‘estilo_padre’ ), | |
| wp_get_theme () -> get ( ‘Versión’ ) | |
| ); | |
| } | |
| ?> |
ver crudofunctions.php alojado con ❤ por GitHub
Del mismo modo, puedes copiar archivos de plantilla adicionales y modificarlos según tus requisitos.
Entérate también sobre estos temas relacionados:
¿Cómo Crear un Dashboard o Administrador Personalizado de WordPress para Usted o Sus Clientes?
Códigos que puedes agregar al archivo .htaccess para acelerar, optimizar y asegurar tu WordPress
¿Cómo agrego animaciones a mi sitio wordpress?
3 formas fáciles de integrar WordPress con las redes sociales
Acceso temporal al Administrador WordPress
 |