Cómo añadir código personalizado en tu sitio web

Cómo añadir código personalizado en tu sitio web

El código personalizado... ¿Amigo o enemigo?

Antes de responder, es importante entender que Wordpress es una plataforma de código abierto (Open Source), y que a pesar de que la utilidad principal es crear sitios web sin necesidad de saber programar, nos permite ponernos tan creativos como podamos, gracias a la posibilidad de añadir Código Personalizado.

En este sentido, quienes nos enfocamos más en el diseño que en el desarrollo, preferimos utilizar plugins para cada nueva funcionalidad que buscamos añadir, ya que nos asustamos al ver una línea de código, pero te puedo decir con total seguridad que habrán muchos casos donde añadir código personalizado será nuestra mejor opción.

En este post te explico cuando, cómo y por qué deberías añadir código personalizado para mejorar tus sitios Wordpress.

Resumido: Cómo añadir código personalizado en tu sitio web

Guía paso a paso

¿Cuándo y por qué añadir código personalizado?

  1. Funcionalidad Específica: Necesitas una funcionalidad muy específica que ningún plugin ofrece.
  2.  Optimización: Quieres optimizar tu sitio eliminando dependencias de plugins que pueden agregar carga innecesaria.
  3. Personalización: Quieres personalizar la apariencia o el comportamiento de tu sitio más allá de lo que permiten los plugins.

 

Cómo añadir código personalizado

Paso 1: Acceder al Editor de Archivos del Tema

Accede al panel de administración de WordPress.
En el menú lateral, ve a “Apariencia” y selecciona “Editor de archivos de temas”.

Paso 2: Seleccionar el archivo functions.php

En el editor de archivos, busca y selecciona el archivo functions.php de tu tema activo.
Nota: Es recomendable hacer estos cambios en un tema hijo para evitar perderlos en futuras actualizaciones del tema.

Paso 3: Añadir el código personalizado

Ahora que tienes abierto el archivo functions.php, puedes añadir tu código personalizado. Aquí tienes algunos ejemplos útiles:

Ejemplo 1: Ocultar el título de todas las páginas

				
					// Ocultar títulos de página
function ele_disable_page_title( $return ) {
    return false;
}
add_filter( 'hello_elementor_page_title', 'ele_disable_page_title' );

				
			

Ejemplo 2: Permitir la carga de archivos SVG

				
					// Permitir carga archivos SVG
function cc_mime_types($mimes) {
    $mimes['svg'] = 'image/svg+xml';
    return $mimes;
}
add_filter('upload_mimes', 'cc_mime_types');

				
			

Ejemplo 3: Cambiar el pie de página del panel de administración

				
					// Cambiar el pie de página del admin
function cambiar_pie_admin() {
    echo 'Creado por <a href="https://example.com" target="_blank" rel="noopener">Tu Nombre</a>';
}
add_filter('admin_footer_text', 'cambiar_pie_admin');

				
			

Paso 4: Guardar los cambios
Una vez que hayas añadido el código, haz clic en “Actualizar archivo” para guardar los cambios.

Paso 5: Verificar los cambios en tu sitio web
Visita tu sitio web:
Abre tu sitio web en el navegador y navega a una página para verificar que los cambios han sido aplicados correctamente.

Consejos adicionales

Hacer una copia de seguridad: Siempre haz una copia de seguridad de tu sitio antes de hacer cambios en el código.
Probar en un entorno de desarrollo: Si es posible, prueba los cambios en un entorno de desarrollo antes de aplicarlos en el sitio en vivo.

Conclusión

Añadir código personalizado a tu sitio WordPress te permite tener un control total sobre su funcionalidad y apariencia. Siguiendo estos pasos, puedes asegurarte de que tus cambios se implementan de manera segura y efectiva. Si tienes alguna pregunta o necesitas más ayuda, no dudes en dejar un comentario.

Contenido

Dificultad

Nivel Intermedio

¿Te gusta este contenido? Apóyanos para más 😊

Contenido relacionado
codigo personalizado en wordpress
Cómo añadir código personalizado en tu...
design ops en ambientes caóticos
¿DesignOps? Qué es y cómo impacta...
categorias y subcategorias (1)
Cómo crear categorías y subcategorías en...