Soporte » Diseño – Temas y plantillas » Problemas con los estilos con tema hijo

  • Resuelto kuro

    (@kuro)


    Hola. Estoy montando mi primer tema hijo y tengo una duda y un problema que no consigo resolver.

    Primero la duda, tras mucho buscar encontré como enlazar correctamente los css en WordPress usando functions.php y así lo tengo:

    function enqueue_styles() {
    
        // enqueue parent styles
        wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
    
        // enqueue child styles
        wp_enqueue_style('child-theme', get_stylesheet_directory_uri() .'/style.css', array('parent-theme'));
    
    }
    add_action('wp_enqueue_scripts', 'enqueue_styles');

    Pero veo en el inspector del Chrome que me carga los estilos hijo 2 veces, con otras cargas css entre medio. Si elimino la carga del functions.php y dejo sólo la del padre todo bien, sólo carga los del hijo una vez pero no se si es así cómo hay que dejarlo. Entiendo que el própio WordPress lee automáticamente el style.css al ver que está en la carpeta del hijo. La pregunta sería ¿sólo hay que cargar los estilos del padre?

    Y ahora la pregunta al problema que no consigo resolver ¿Cómo se sobreescriben correctamente los estilos del tema padre? Resulta que en los estilos hijos he indicado esto:

    a:visited {
      color: #004b2b !important;
    }

    Pero si miro el inspector de Chrome sólo carga los del padre que son los que quiero sobreescribir:

    a:visited {
        color: #0896fe;
    }

    Lo que más me mosquea és que ni usando la etiqueta important logro sobreescribirlos ¿se me escapa algo que hago mal?

    Para acabar una duda que me resolvería mucho trabajo ¿puedo cambiar fácilmente un color al tema padre de golpe? El color principal del tema padre es azul y yo lo estoy pasando a verde. Veo que se pierde mucho tiempo buscando y replicando cada estilo padre para sobreescribir el color.

    Espero puedan ayudarme. Muchas gracias desde ya.

Viendo 11 respuestas - de la 1 a la 11 (de un total de 11)
  • Moderador LGrusin

    (@lgrusin)

    El problema podría ser que el tema use más archivos de estilos además del style.css

    Mira en este enlace a ver si te aclara algo:
    https://codex.wordpress.org/Child_Themes

    Un saludo

    Moderador almendron

    (@almendron)

    Aquí tienes la documentación:
    https://codex.wordpress.org/Child_Themes
    (la versión en español está desfasada).

    Al margen del problema concreto que tienes, mi opinión es que no me gustan los temas hijos. Dan demasiados problemas. Ya te adelanto que hay personas que opinan justo lo contrario.
    Solo puedo decirte que yo no los uso. En su lugar, modifico el tema a mi gusto y comento todos los cambios. Uso una palabra clave (cambio) para luego buscarla y encontrar todas las modificaciones realizadas.

    Luego guardo aparte los ficheros que he modificado. Cuando hay una actualización del tema compara aquéllos con los nuevos.

    Iniciador del debate kuro

    (@kuro)

    Gracias chicos por vuestras respuestas.

    @lgrusin tras un estudio a fondo de la plantilla padre puedo asegurar que no usa más estilos mediante un archivo externo porque el style.css no tiene ningún import ni tampoco hay ningún otro archivo css en las diferentes carpetas. Si bien es cierto que buscando la palabra css en functions.php he encontrado varios imports para FontAwesome y otras librerías.

    @almendron te doy toda la razón, es un dolor de muelas tener que reescribir el tema padre. Además con mi nivel hay un montón de código que no comprendo y en tema php todo son suposiciones. Así que tiro todo el rato con el prueba y error. Probablemente es menos doloroso modificar directamente el tema padre como dices, porque hay estilos que se me resisten y por ejemplo cambiar todo el color principal de un tema es muy laborioso. Lo mejor está claro que es hacerlo a partir de un Framework que ya se responsive, estuve probando (underscores, Bones, Beans…) pero no conseguía entender como funcionaban y empecé a hacer la plantilla totalmente a mano porque al final los frameworks también vienen con muchos estilos predefinidos y es algo así como tener que lidiar con el tema hijo y padre. Finalmente escogí una buena plantilla responsive y gratuita (Ultra) con la finalidad de tener el grueso ya realizado. Aunque por ejemplo, mi cabecera es totalmente personalizada para adaptarse al proyecto que es para una ONG y así tener un menú principal, uno secundario, 2 botones destacados para pedir donaciones y voluntarios, y un desplegable con los idiomas. Total que uso un tema padre para tener el trabajo gordo porque no se hacer por ahora como es tener el menú responsive y sticky básicamente. Así que probablemente es matar moscas a cañonazos y seguro que me ahorraría muchos problemas pero tendría otros que por ahora no sabría solucionar. Es con lo que tiene que lidiar el autodidacta, todo cuesta mucho más tiempo y esfuerzo que cuando te dedicas de pleno a algo.

    ¿Y vosotros, usáis Frameworks?

    Saludos y muchas gracias

    Moderador almendron

    (@almendron)

    Yo no uso Frameworks pero debo decir que yo no me dedico a diseñar sitios. Tengo mi propia página y lo que hice en su momento fue buscar un tema que me gustara y modificarlo a mi gusto. También soy autodidacta y con el tiempo he ido aprendiendo.

    Los problemas con los child themes suelen venir cuándo los temas padres no están bien hechos. Y por «bien» me refiero a seguir las reglas dadas en el Codex para hacer temas compatibles con child themes.

    En el caso de los CSS, si un tema está bien hecho para trabajar con child themes, lo normal es que el style.css del tema hijo se cargue automáticamente y que el tema hijo solo tenga que insertar el css del tema padre de forma opcional sólo en el caso de que se necesite.

    Así, deberías utilizar esto si es que necesitas el CSS del tema padre:

    function enqueue_styles() {
    
        // enqueue parent styles
        wp_enqueue_style('parent-theme', get_template_directory_uri() .'/style.css');
    
    }
    add_action('wp_enqueue_scripts', 'enqueue_styles');

    Y ahora, solo si el CSS del tema hijo no cargara automáticamente, que no parece tu caso, tendrías que utilizar el código que utilizabas antes.

    ¿Dónde está la magia?

    El tema padre debería utilizar get_stylesheet_directory_uri() para cargar el style.css principal en lugar de get_template_directory_uri(). Si no hay tema hijo, ambas funciones apuntan a la carpeta del tema padre; si hay tema hijo get_stylesheet_directory_uri() apunta a la carpeta del tema hijo y get_template_directory_uri() a la carpeta del tema padre.

    Por eso, si el tema padre utiliza get_stylesheet_directory_uri(), el style.css del tema hijo se carga automáticamente y se puede elegir si necesitamos o no el style.css del tema padre.

    Y ahora, la otra parte de sobreescribir reglas CSS. Si los archivos CSS son insertados en el orden correcto, deberías tener el style.css del tema padre antes que el del tema hijo, así que ! important no debería ser necesario. Con redefinir la regla CSS debería ser suficiente. Si no, utiliza selectores más específicos o ! important si no te queda más remedio. Pero comprueba primero que los CSS se hayan cargado en el orden correcto.

    Moderador LGrusin

    (@lgrusin)

    A ver, al grano que después nos liamos… 🙂

    Todos esos códigos son para cargar el style.css del tema padre.

    Si es cierto que el tema padre no usa más estilos (por ejemplo en una carpeta CSS). Copia los estilos del style.css del tema padre y ponlos en el tema hijo. Después lo modificas desde éste último como desees. No existe otra opción más fácil.

    Sobre la discusión de Tema Hijo si o Tema Hijo no, ya di mi opinión en otro hilo donde preguntaban lo mismo. https://es.forums.wordpress.org/topic/temas-hijos-si-o-no?replies=3

    Un saludo

    Iniciador del debate kuro

    (@kuro)

    @cybmeta excelente explicación. Me ha quedado clarísimo. Además he chafardeado y ya sigo tu twitter y el blog que aunque tiene documentación para pros y yo soy profano, pero en eso estamos, tenemos toda la vida para aprender ; )

    @lgrusin muchas gracias por tu información. La verdad que para un profano en el desarrollo wordpress como yo se hace díficil elección cuando hay opiniones que defienden ambas partes. El hecho es que aunque entiendo tu postura prorendimiento depende de la embergadura de la actualización del tema puede ser un dolor de muelas tener que replicarlo todo, al menos con mi nivel, pero también es cierto que uno puede que ese tema no se actualize nunca y por tanto tu elección de trabajar sobre el tema padre sería lo más acertado.

    Saludos y gracias a todos por vuestros aportes, me han sido de gran ayuda.

    Moderador LGrusin

    (@lgrusin)

    De nada…

    Pues fijate que si el Tema no se actualiza nunca puedes tener otro problema con el tiempo. El código PHP también recibe actualizaciones frecuentes. En una de esas el Tema puede quedar inservible por usar código obsoleto… 🙂

    Pero bueno, no nos pongamos dramáticos, todos los casos tienen sus pro y sus contras.

    Un saludo

    Iniciador del debate kuro

    (@kuro)

    Ostras LGrusin pues en eso no había caido. Ayer encontré un curso en youtube con 9 videos y todavía va ha publicar más, para crear tu plantilla desde cero basándose en Bootstrap. Acabo de ver todos los videos y me había decidido a pasar mi diseño siguiendo este curso para evitar todos estos problemas de sobreescribir estilos, y en algunos casos ver como voy a contracorriente del tema padre porque mi cabecera y pie son diferentes, añadí un segundo menú (el padre sólo tiene uno), en fin, sólo me interesaba por los estilos en general (menos el color principal), tiene menu responsivo y es compatible con Woocommerce.

    Pero hoy al leer tu comentario me he quedado bloqueado porque no se si sabría actualizar el código php llegado el caso.

    Esto es más difícil de lo que pensaba.

    Por si a alguien le interesa el curso que comento es de un chico brasileño, así que está en portugués pero se sigue perfectamente:
    https://www.youtube.com/watch?v=eZYwtzDMGE0&list=PL9iRXc4XHkhU9EoKB6THSrN6h8dtodqZp

    La lista de reproducción tiene 3 cursos, el primer curso es de crear un diseño de plantilla en Photoshop, el segundo curso es pasar el tema a WordPress y el tercero es el curso que todavía no ha finalizado que es crear el tema desde cero usando Bootstrap.

    Que no os desanime el idioma porque se sigue perfectamente.

    Saludos

    Moderador LGrusin

    (@lgrusin)

    Pues no te bloquees, normalmente esos cambios no ocurren de un dia para otro. Para cuando eso ocurra posiblemente encontrarás otro Tema que te guste más o que se adapte mejor a los nuevos tiempos.

    Además ya habrás adquirido más conocimientos y entenderás algo más de código, o sabrás crear tus propios Temas.

    Muy interesante el curso, muchas gracias.

    Saludos

    Iniciador del debate kuro

    (@kuro)

    Muchas gracias LGrusin por los ánimos y recomendaciones! Me quedo más tranquilo y me meto en harina ahora mismo.

    Respecto el curso como dices es muy interesante, el chico es muy majo y la verdad que lo explica de manera que es muy sencillo de entender.

    Saludos y gracias a ti.

Viendo 11 respuestas - de la 1 a la 11 (de un total de 11)
  • El debate ‘Problemas con los estilos con tema hijo’ está cerrado a nuevas respuestas.