• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

Dani Sánchez

  • ¿Eres agencia?
  • Quién soy
  • Servicios WordPress
    • Mantenimiento
    • Maquetación
    • Soporte técnico
  • Máster en WordPress
  • Portfolio
  • Blog
  • Presupuestos
Estás en: Inicio / Publicaciones / Cómo añadir un archivo CSS a tu tema de WordPress

Cómo añadir un archivo CSS a tu tema de WordPress

El 5 de septiembre de 2018 por dani.sanchez

En muchas ocasiones deseamos hacer algunos cambios en el estilo de nuestro theme de WordPress, ya sea cambiarle el color a un fondo, añadir una tipografía externa, cambiar el tamaño de un texto, etc.

Es cierto que para cambios de CSS tenemos la opción de personalizar el CSS dentro de los ajustes del tema, pero esto lo que hace es añadir código CSS en la cabecera del HTML del sitio web, lo que no forma parte de las buenas prácticas del estandar HTML5.

También podemos modificar de forma manual el archivo style.css del theme, pero corremos el riesgo de que el theme se actualice y perdamos los cambios efectuados hasta la fecha, o rompamos sin querer alguna de las clases definidas y nuestro sitio no se vea del todo bien.

Añadir nuestro archivo CSS a WordPress

Declarar un nuevo archivo CSS dentro de nuestro sitio web en WordPress es muy sencillo y puede hacerse tanto desde el archivo functions.php como desde nuestro propio plugin de funciones (si no sabes cómo crear tu propio plugin de funciones, visita este artículo). Esto último es lo más aconsejable, ya que así nos aseguramos de mantener todos los cambios realizados si el tema principal se actualiza.

Lo primero, crearemos nuestro archivo de CSS, al que llamaremos por ejemplo «mi-css.css». Y lo guardamos en un subdirectorio dentro de nuestro theme principal, por ejemplo en la ruta:

/wp-content/themes/mi-theme/css/mi-css.css

Ahora creamos la siguiente función, como hemo comentado, o bien en el archivo functions.php del thema activo, o en nuestro plugin de funciones:

<?php
    function mi_css_personalizado(){
        wp_enqueue_style('mi-css', get_template_directory_uri().'/css/mi-css.css', array(), '1.0.0');
    }
    add_action('wp_enqueue_scripts', 'mi_css_personalizado');
?>

wp_enqueue_style, añadirá nuestro nuevo archivo de estilos como un <link rel=»stylesheet» href=»https://midominio/wp-content/themes/mi-theme/css/mi-css.css», que es la forma a la que estamos acostumbrados cuando aprendemos HTML + CSS por primera vez.

Los parámetros que espera wp_enqueue_style son:

  1. Nombre del parámetro: ‘mi-css’. Podemos cargar todos los archivos de estilos que deseemos, siempre que les asignemos un nombre propio a cada uno.
  2. Ruta del archivo CSS: Utilizando la función get_template_directory_uri(), nos traemos la dirección completa hacia nuestro tema activo, es decir: https://midominio/wp-content/themes/mi-theme/. Ahora solo tenemos que añadirle el subdirectorio /css donde guardamos nuestro archivo mi-css.css.
  3. El siguiente parámetro es un array(), donde podemos especificar si nuestro archivo de estilos depende de que antes se cargue otro archivo CSS, por ejemplo, porque hereda clases de este. Si en nuestro archivo de estilos personalizados heredamos propiedades de alguna clase del tema principal, tendremos que indicarlo dentro del array(), por ejemplo array(‘estilo-principal’).
  4. El cuarto parámetro es la versión de nuestro archivo. Por defecto, los navegadores web guardan los archivos CSS y Javascript para cargarlos már rápidamente en siguientes visitas. Si modificamos nuestro archivo de estilos, es conveniente cambiar el número de versión para que el navegador compare la nueva versión con la que tiene guardada en caché y si esta difiere, volver a descargarse el archivo.

Con esto ya tenemos disponible nuestro propio archivo de estilos, donde podremos llevar a cabo todas las modificaciones que necesitemos en nuestro theme.

Si crees que este artículo es útil, compártelo, ayudarás a que este sitio siga creciendo y ofreciendo más y mejores contenidos. Hasta el siguiente post 🙂

Publicado en: Publicaciones, Tutoriales, WordPress Etiquetado como: desarrollo web, php, programación web, publicaciones, tutoriales, wordpress

¿Quiéres invitarme a un café?

Si te has fijado en este blog no hay ni rastro de publicidad, todo el contenido publicado lo hago de forma artruista al igual que yo recurro a otros sitios cuando necesito algo. Pero si te he servido de ayuda y quieres agradecérmelo, puedes hacer una pequeña donación (el importe que quieras):

Entradas similares

  • Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  • Instalar LAMP (Linux, Apache, MySQL, PHP) en Opensuse Tumbleweed
  • PRO Elements, o como tener Elementor Pro libre y gratuito
  • Tip para Elementor: Alinea elementos de forma óptima
  • Habilitar el soporte de Wayland en Firefox

Interacciones con los lectores

Comentarios

  1. Laura dice

    11 de abril de 2020 a las 14:09

    ¡Hola de nuevo, Daniel!
    Una pregunta: he comprobado que el parámetro get_template_directory_uri() devuelve el directorio donde se encuentra genesis, y no el child theme.
    Quizá no me ha quedado claro, pero ¿sería correcto alojar el CSS en el tema padre en lugar del tema hijo? Si el archivo misfunciones.php que me he creado lo he puesto en el tema hijo, me parecía un poco raro que tuviera que colocar el css en el tema padre…
    ¡Gracias de antemano y un saludo!
    Laura.

    • Daniel, Gestionatuweb.net dice

      13 de abril de 2020 a las 09:07

      Hola Laura, para referenciar al archivo de estilos del Child Theme tienes que usar get_stylesheet_directory_uri().

      Un saludo.

  2. Laura dice

    11 de abril de 2020 a las 14:16

    Vale, entiendo que «en nuestro theme principal» es el genesis.. que es lo que no he hecho, jejeje. Allá voy 🙂

Barra lateral principal

Autor

Dani Sánchez

logo mastodon @danisanchez

Entradas recientes

  • Importar un proyecto WordPress en un contenedor Docker
  • Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  • Instalar LAMP (Linux, Apache, MySQL, PHP) en Opensuse Tumbleweed
  • PRO Elements, o como tener Elementor Pro libre y gratuito
  • Tip para Elementor: Alinea elementos de forma óptima

Comentarios recientes

  1. Laura en Habilitar el soporte de Wayland en Firefox
  2. Laura en Habilitar el soporte de Wayland en Firefox
  3. Denys Vega en Instalar WordPress + MySQL + phpMyAdmin desde Docker Compose
  4. Ramon Tubau en Evitar que WordPress pida los datos FTP al instalar o actualizar un plugin o tema en localhost
  5. Ramon Tubau en Evitar que WordPress pida los datos FTP al instalar o actualizar un plugin o tema en localhost

Categorías

  • Actualidad
  • Afiliación AliExpress
  • Agent Press Pro
  • Bettaso Web Restaurantes
  • Cursos
  • Destacado
  • Divi
  • Drupal
  • Elementor
  • Genesis
  • Iniciación a PHP
  • Joomla!
  • Linux
  • Publicaciones
  • Tutoriales
  • WooCommerce
  • WordPress

Maquetación web, landings, blogs y tiendas online
cuidando hasta el mínimo detalle

Si necesitas que desarrolle tu proyecto web ponte en contacto conmigo.

Contacto
  • Mastodon
  • YouTube
  • LinkedIn

Dani Sánchez © 2023 · Política de privacidad · Política de cookies

En mi sitio web utilizo cookies de carácter técnico para el correcto funcionamiento de la plataforma. Además de cookies analíticas de terceros para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no, en el botón de Preferencias. Más información sobre el uso de cookies en la: Política de cookies.

Powered by  GDPR Cookie Compliance
Resumen de privacidad

En mi sitio web utilizo cookies de carácter técnico para el correcto funcionamiento de la plataforma. Además de cookies analíticas de terceros para obtener datos estadísticos sobre el uso de la web, con el fin de mejorar la experiencia de navegación y conocer qué contenidos son los más consultados. Puedes desactivar todas las cookies (excepto las técnicas) pulsando en Rechazar, o elegir qué cookies admites y cuales no, en el botón de Preferencias. Más información sobre el uso de cookies en la: Política de cookies.

Cookies técnicas necesarias

Las cookies técnicas necesarias tienen que activarse siempre para poder guardar tus preferencias de ajustes de cookies.

Si desactivas esta cookie no se pueden guardar tus preferencias. Esto significa que cada vez que visites esta web tendrás que activar o desactivar las cookies de nuevo.

Cookies analíticas

Utilizo Google Analytics para recopilar información anónima tal como el número de visitantes del sitio, o las páginas más populares.

Dejar este tipo de cookies activas me permite mejorar la web y mis servicios.

¡Por favor, activa primero las cookies estrictamente necesarias para que podamos guardar tus preferencias!

Política de cookies

Más información sobre la política de cookies