Como editar el estilo CSS en WordPress – Guía para novatos

A lo mejor estás pensando que editar código CSS no es necesario si utilizas WordPress y un constructor visual, y en parte es cierto, yo te recomiendo que si tienes la posibilidad aprendas a usarlo.

Editar código CSS en WordPress es un añadido y un plus a la hora de diseñar una web ya que siempre habrá partes donde la plantilla o el maquetador no lleguen y te veas en la necesidad de acudir a este lenguaje de hojas de estilos.

 

 

Actualmente el panorama ha cambiado bastante y prácticamente no necesitas usar nada de CSS si no quieres con las herramientas que existen.

Incluso a la hora de contratar un diseñador web, este puede no necesitar usar CSS para nada ya que las herramientas que utiliza tienen muchas funcionalidades y no necesitan este lenguaje de programación.

Esto es una ventaja para el cliente ya que una vez entregada la web, el mísmo podrá hacer cambios de textos, imágenes o incluso editar elementos de forma sencilla.

 

Aunque como te digo al principio, el html y el CSS son dos lenguajes complejos pero ni mucho menos difíciles de entender en la actualidad y si sabes un poquito te pueden ayudar a conseguir ese pequeño cambio visual que tanto te gusta.


Te interesará leer:

Elementor 

Plantillas WordPress Profesionales

Si quieres vivir de internet ¡Suscríbete!

 ¿No quieres?, no lo hagas

Plantillas para Woocommerce

Cómo crear una página web


Lo cierto es que la gran mayoría de los usuarios de nuestro querido WordPress, hacen uso del él sin tocar ni una línea de código. Pero que la mayor parte no lo haga no quiere decir que sea lo mejor, dado que conocer de HTML y CSS te abre un abanico de posibilidades inmenso a la hora de personalizar tu web/blog.

Dado que quiero que tú seas uno de esos que meten mano en los códigos, te dejaré esta guía sobre cómo editar los estilos CSS en WordPress.

 

 

Introducción al CSS

Mi objetivo es que cualquier novato entienda este post, por lo tanto comenzaré por darte una breve introducción en la temática. Bueno tan breve como pueda. jeje

 

〉〉¿Qué son los estilos CSS?

En un sitio web, incluyendo aquellos montados en WordPress, son códigos HTML los encargados de dar la estructura.

Sin ir más lejos, bajo estas líneas que estás leyendo, hay códigos HTML que le dan forma a todo. Diferenciando titulares de texto común, colocando enlaces, dejando espacios entre párrafos, ubicando las imágenes, etc.

 

Las hojas CSS son las encargadas de darle a esa estructura HTML, estilos visualmente más agradables.

Haciendo una analogía, supongamos que tomas una fotografía con tu smartphone y antes de subirla a Instagram le aplicas un filtro. Si entendemos a la foto como el HTML, el CSS es el filtro. Básicamente la foto/HTML se mantiene inalterada, pero su apariencia cambiará en función de cada filtro/CSS que apliques.

 

Siendo más exacto, CSS es un lenguaje de hojas de estilo que te permite aplicar estilos de manera selectiva a elementos en documentos HTML. Pudiendo darle color y tamaño al texto de un párrafo, definir la alineación de una imagen, cambiar el grosor de una línea, etc.

 

〉〉 Estructura de las hojas de estilo CSS

Para que cuando comencemos a escribir nuestras primeras líneas en CSS no te pierdas, quiero que entiendas su estructura. La cual, verás que es muy simple.

hojas-de-estilos-css

  • Selector: con este comienza la regla, y es quien define a qué elemento HTML se le dará estilo. Luego veremos que el mismo puede ser una etiqueta, un ID, una clase, un atributo o hasta una pseudo-clase.
  • Propiedades: aquí es donde se define qué es lo que quieres cambiar (tamaño, color, alineación, etc)
  • Valor de la propiedad: para terminar se da el valor a dicha propiedad. Por ejemplo, en caso que la propiedad sea color, el valor podría ser verde.

 

Un ejemplo sencillo es el siguiente, en el cual se da estilo a un título h1.

h1 { color: red; }

En este caso se define que todos los titulares h1, serán de color rojo. Ahora si quisieras que los h2 y h3 también tengan dicho color podrás hacer lo siguiente.

h1,h2,h3 { color: red; }

Así de sencillo, solo haces una regla con múltiples selectores. 😉

 

〉〉 Tipos de selectores

Como te adelante, los selectores pueden ser de diversos tipos. Pero cada uno se llama desde el CSS de diferente manera:

 

  • Selector de etiqueta: selecciona los elementos que se encuentran dentro de una etiqueta. Ejemplo:
p { color: red; }  

Dicho código selecciona la etiqueta <p>.

 

  • Selector de identificación (ID): selecciona todos los elementos que están bajo el ID en cuestión. Ejemplo:
#id-one { background: #FFF; }

El usar el CSS anterior se da estilo a las etiquetas identificadas con el ID id-one (<h1 id=”#id-one”)

 

  • Selector de Clase: selecciona los elementos bajo la clase especificada. Ejemplo:

 .class-one { font-size: 25px; }

 Este CSS modifica todos los elementos clasificados con la clase .clase-one (<p class=”class-one”>)

 

  • Selector de atributo: selecciona todo elemento que contenga el atributo especificado.
img[src] { padding: 65px 0 65px 0; }

Usando este CSS , selecciona <img src=»unaimagen.png»> pero no <img>.

 

  • Selector de Pseudo-clase: Los elementos especificados, pero solo cuando esté en el estado especificado. Ejemplo:
a:hover { color: #000; }

Al pasar el cursor sobre un elemento <a> el mismo tomará el color negro (#000). Muy útil para dar dinámica y resaltar un elemento.

 

  • Combinación de selectores: los selectores  pueden combinarse permitiendo así ser más específicos con la selección. Ejemplo:
<div class=”class-one”> <h2>Un título cualquiera</h2> <p>Con un párrafo cualquiera</p> </div> <div class=”class-two”> <h2>Otro título cualquiera</h2> <p>Con un párrafo cualquiera</p> </div>

Si al código anterior, queremos darle un estilo para que se vea como sigue (sisi ya se que no se ve nada bien, pero es solo a modo de ejemplo. jeje)

combinaciones-css

No se lo podrá hacer llamado solo una etiqueta desde el CSS, sino que tendremos que combinar más de una.

p, h2 { text-align: center; } .class-one h2 { color: #4BBB3E; text-align: center; font-size: 45px; font-weight: bold; font-family: arial; }

Primero definimos una propiedad generalizada (alineación) a las etiquetas h2 y p. Para luego llamar a la clase .class-one, y dentro de ella la etiqueta h2 para darle los estilos a esta última.

 

5 formas de editar el estilo CSS en WordPress

Uno de los pilares en los que se basa la gran popularidad del gestor de contenidos WordPress, es que no se necesita conocer de programación para usarlo. Tus conocimientos en HTML y CSS pueden ser nulos, pero de igual forma es posible que gestiones una web con este CMS.

 

Si tu eres uno de esos super novatos, que no tocan ni una línea de código en tu WordPress, te tengo una buena noticia. Editar el CSS en WordPress no es nada difícil, y en este apartado te lo explicaré. 😉

 

Son varias las maneras de meter mano en el CSS de WordPress. Veremos las siguientes:

  • Desde el editor dinámico de Wordpress.
  • Haciendo uso de plugins.
  • Creando un child theme.

 

〉〉 Desde el editor de WordPress

La edición del CSS desde el propio panel era algo que se le reclamaba a WordPress desde hace tiempo, y fue en su versión 4.7 cuando lo integró. Ahora con solo clickear Apariencia → Personalizar → CSS adicional, tienes acceso a un panel de edición CSS bastante completo.

css-editor-wordpress

 

 En sus primeras versiones el editor era muy básico, casi como escribir en un txt. Pero ahora cuenta con funciones que permiten una escritura más fácil y rápida, algunas de ellas son:

  • Resaltado de código identificando clases y valores.
  • Autocompletador de texto.
  • Detector de errores de escritura.

 

Este es sin dudas el método más sencillo de editar las hojas de estilo en WordPress.

 

〉〉 Mediante plugins

Antes de la versión 4.7 de WordPress, el usar plugins para tocar el CSS en WordPress era el primer método al que acudía un novato.

De igual forma el uso de plugins aún está vigente, y algunos de los más populares son:

 

Personalmente, siempre que puedo prescindir de un plugin para añadir una función lo hago. Pero bueno WordPress no sería WordPress sin los plugins, por lo que no podría obviar este método.


Te interesa leer:

Listado de plugins para tu web en WordPress


〉〉 Creando un tema hijo

De no existir los plugins ni el editor del mismo WordPress, si quisiéramos cambiar o añadir estilos CSS, deberíamos dirigirnos al archivo style.css de nuestro tema. Si bien esta parece la forma más lógica, la verdad no es para nada recomendable.

 

El principal motivo por el cual no te recomiendo este método es por que cada vez que tu theme reciba una actualización, el CSS añadido se perderá. Es decir que debieras estar atento a cada actualización, y añadir nuevamente tus modificaciones CSS cuando ellas sucedan.

 

Para solucionar problemas como este, es que existen los temas hijos o child themes. En caso que no lo sepas, un tema hijo es un tema que hereda las funcionalidades de otro, el cual llamamos “tema padre”. Permitiendo así modificar y/o añadir funcionalidades al tema padre, sin tocar directamente los archivos del mismo. A fin de cuentas, una forma segura de editar una plantilla en WordPress.

 

Por lo tanto, y volviendo a la edición del CSS, el usar un tema hijo hará que los cambios en tu tema de WordPress, no se pierdan con las actualizaciones del tema padre.

 

Debes entender que la creación de un child theme permite editar todos los archivos del tema padre. Entre ellos el function.php. En el próximo apartado, verás que es de mucha utilidad poder meter mano en dicho archivo. 😉

 

¿Quieres aprender a manejar CSS de forma sencilla? Guía para novatos

 

Cómo individualizar CSS para cada post o entrada

Hasta ahora hemos visto cómo dar estilo a tu sitio web de forma general. Es decir que todos los rincones de la web tomará las mismas ediciones. Pero supongamos que necesitas dar estilos individualizados para cada página o post de tu web. ¿Cómo harías eso?.

Bueno como todo en la vida existe una solución, en realidad varias soluciones. Pero aquí te daré dos.

 

〉〉 Edición mediante plugin

Si si para todo problema en WordPress existe un plugin jeje. El plugin en cuestión ya te lo recomendé un par de líneas antes y es el siguiente.

WP Add Custom CSS

 

Lo instalas, lo activas, y tendrás disponible un editor de texto CSS en cada  una de tus páginas y entradas.

plugin-css

 

〉〉 Edición mediante código .php

La anterior es una buena opción, pero la que te daré ahora es mejor por que no necesitarás ningún plugin. Ya te lo comenté, siempre que puedo evito los plugins (que diga esto no me convierte en un un anti-plugin, los 26 plugins activos en mi blog son prueba de ello. jejeje)

 

Para esquivarle al plugin añadiremos unos códigos en el function.php. Si vas a llevar esto a cabo lo mejor será que tengas un tema hijo ya creado. Tocar un archivo de funciones del padre es riesgoso, y cuenta con la misma desventaja de editar el style.css. Las modificaciones se pierden con una actualización.

 

Bueno supongo que me has hecho caso y ya tienes tu child theme. Si es así puedes añadir este trozo de código en el function.php.

//Custom CSS Widget add_action(‘admin_menu’, ‘custom_css_hooks’); add_action(‘save_post’, ‘save_custom_css’); add_action(‘wp_head’,’insert_custom_css’); function custom_css_hooks() { add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘post’, ‘normal’, ‘high’); add_meta_box(‘custom_css’, ‘Custom CSS’, ‘custom_css_input’, ‘page’, ‘normal’, ‘high’); } function custom_css_input() { global $post; echo ‘<input type=»hidden» name=»custom_css_noncename» id=»custom_css_noncename» value=»‘.wp_create_nonce(‘custom-css’).'» />’; echo ‘<textarea name=»custom_css» id=»custom_css» rows=»5″ cols=»30″ style=»width:100%;»>’.get_post_meta($post->ID,’_custom_css’,true).'</textarea>’; } function save_custom_css($post_id) { if (!wp_verify_nonce($_POST[‘custom_css_noncename’], ‘custom-css’)) return $post_id; if (defined(‘DOING_AUTOSAVE’) && DOING_AUTOSAVE) return $post_id; $custom_css = $_POST[‘custom_css’]; update_post_meta($post_id, ‘_custom_css’, $custom_css); } function insert_custom_css() { if (is_page() || is_single()) { if (have_posts()) : while (have_posts()) : the_post(); echo ‘<style type=»text/css»>’.get_post_meta(get_the_ID(), ‘_custom_css’, true).'</style>’; endwhile; endif; rewind_posts(); } }

Esto te dará el mismo resultado del plugin, una caja de edición CSS para cada post y entrada de tu web. 🙂

  

 

Nota: no creerás que yo escribí ese pedazo de código php no? jejeje. No no, lamentablemente mis conocimientos en php no llegan a eso. 🙁 Lo he obtenido de un muy buen post de la web digwp.com.

 

Cómo añadir o sobrescribir CSS en WordPress

En general son dos las tareas que uno puede realizar a la hora de trabajar sobre el CSS en WordPress:

1- Añadir nuevos estilos .

2- Sobrescribir/editar estilos previamente creados.

Si bien son tareas similares vamos a individualizarlas para que lo entiendas mejor.

 

〉〉 Añadir nuevos estilos

Acudimos a esto cuando necesitamos nuevos elementos de diseño para nuestra web. Puede tratarse de botones, cajas de texto, menús, widgets, etc.

Llevar esto a cabo es super sencillo, solo debes tomar el trozo de código CSS y añadirlo de alguna de las tres formas que te expliqué.

 

Por ejemplo, si lo que búscas es el código CSS de un botón, este podría servirte.

/* codigo css botón rojo */ .button.rojo { display: inline-block; padding: 10px 35px; margin: 3px; border: 1px solid #999; border-radius: 3px; -webkit-transition:1.8s opacity; transition: 0.2s opacity; box-shadow: 0 1px 2px rgba(0,0,0,.2); font-size:16px; background-color: #e62727; color: #FFF; font-weight: bold; } .button.rojo:hover{ background-color: #BF00FF; }

Una vez añadido en la hoja de estilo CSS de tu WordPress podrás, a traves del HTML, hacer uso del elemento.

<!– código html del botón –> <a class=»button rojo» href=»URL del botón»><span>Código HTML para el boton</span></a>

El resultado final es el siguiente:

<script async src=»//jsfiddle.net/luisfor09/m07z1612/1/embed/result/dark/»></script>

 

〉〉 Sobrescribir/editar estilos CSS previamente creados

Es muy común necesitar editar el CSS en WordPress de elementos los ya existentes en nuestro tema. Puede que queramos cambiar el color de fondo de nuestro menú, variar el estilo de letra a los textos, dar un estilo más llamativo a la caja de comentarios, etc, etc etc. Las modificaciones posibles son infinitas.

 

Si el elemento a modificar es bien conocido, por ejemplo los títulos h2. No hay muchas vueltas, nos vamos a nuestro editor CSS y escribimos los estilos que deseamos dar.

h2 { color: #FFF; text-align: center; font-size:16px; background-color: #e62727; }

Esto cambiaría de color, alineación y tamaño a estos títulos.

 

Nota: puede pasar que, para ciertas etiquetas, tu tema no tome los nuevos estilos ya que prioriza los propios. Esto sucede en estilos que sobreescribes, no en estilos nuevos. Para ello una solución es el uso de la etiqueta !important.

 

Siguiendo con el ejemplo anterior, si tu plantilla no te toma la edición del color en el título h2, deberías agregar la etiqueta !important de la siguiente manera.

h2 { color: #FFF !important; text-align: center; font-size:16px; background-color: #e62727; }

Esto forzará al sistema a tomar el color que tu dices.

 

Uso del Inspector de Elementos de tu navegador

El caso que acabamos de ver es el ideal, pero generalmente necesitamos modificar el estilo de elementos, de los cuales desconocemos los estilos que los gobiernan. Es ahí cuando acudimos al grandísimo inspector de elementos de nuestro navegador. En mi caso Google Chrome.

Usar dicha herramienta es muy sencillo, solo debemos abrir la web con el navegador, colocarnos en el elemento que deseamos editar, hacer click derecho sobre el mismo y luego click en inspeccionar.

 

inspector de elementos en maquetador

 

El inspector de elementos te da un panel a la derecha, que en su parte superior tiene el código HTML de la web, y debajo el CSS.

A medida que te desplazas con el cursor por el código HTML, en la web se van resaltando los elementos que define cada etiqueta. Además, se muestran los códigos CSS relacionados a cada uno de ellos.

 

ver-codigo-css

 

Por practicidad el HTML se encuentra comprimido, muestra la etiqueta madre y lo demás lo contrae. Te darás cuenta de ello por los puntos suspensivos (…), para expandir el código y llegar a la etiqueta que tú quieres obtener, debes hacer doble clic en los tres puntos.

Desde el panel CSS del inspector se permiten hacer ediciones, las cuales obviamente solo son a nivel de tu navegador, y con solo actualizar se pierden. Por ejemplo, en mi plantilla podemos cambiar el color de los íconos sociales.

 

panel-css

 

Personalmente, lo que busco es dar un color diferente a cada ícono social, por lo que no bastará con hacer la edición anterior a nivel interno. La tarea que debo llevar a cabo es buscar la etiqueta que controla cada ícono, para luego editarla mediante CSS.

Expandiendo el HTML logré llegar hasta la etiqueta del icono de Facebook.

 

ejemplos-css

 

Haciendo doble click en la etiqueta ya puedo seleccionarla, y llevarla a mi panel de edición CSS.

 

custom-css

 

Una vez extraídas las etiquetas de cada icono (Facebook, Twitter, Google Plus, etc), y editadas mediante el CSS en WordPress, el resultado fue el siguiente.

 

css-en-wordpress

 

Y bueno así de sencillo es llevar a cabo la edición CSS en WordPress. Tanto si vas a crear tú mismo una página web como si vas a optar por un diseñador web especializado en WordPress, es bueno que tengas unos mínimos conocimiento.

Espero hayas entendido todo el procedimiento. De lo contrario pégale otra leída, y si continúan tus dudas déjalas en la caja de comentarios. 😉

 ¡Compártelo y déjame un comentario!

José Peña
José Peña
Consultor SEO y Especialista en crear webs rentables con WordPress desde cero. He tenido la oportunidad de ayudar a muchas personas a comenzar y crecer su web hasta convertirse en un negocio de éxito. Además he creado “MkCero” (mi propia agencia de Marketing Digital) y soy Co-fundador de "Market-in Tools" (Una web sobre herramientas de Marketing Digital). Más sobre mí

19 comentarios en «Como editar el estilo CSS en WordPress – Guía para novatos»

  1. Hola José y Luis

    La verdad nunca he podido con este del CSS.
    Estuve leyendo tu post y veo que esta muy completo pero aún así prefiero no tocar código. Para mi es mas seguro jejeje.
    De todas formas lo tendré a mano por si algo.

    Gracias

    Responder
    • Prueba Rolando, tocar CSS no es peligroso, además siempre puedes usar una herremienta externa y luego aplicar en la web.

      Hoy día no hace falta casi para tener un buen diseño pero cualquier pequeña modificación que necesites en un momento dado si eres capaz de usar un poco de CSS es perfecto.

      Echa un vistazo porque Luis ha escrito un post muy bueno para quien quiera empezar a manejar un poco de código.

      Saludos Rolando y gracias por dejar tu comentario

      Responder
  2. Muy interesante la guía. Completa y fácil de entender. Lo que eché en falta fue, como crear el hijo. Pero, supongo que tendréis que crear otra guía explicandolo. CSS ya toco alguna cosita pero con los consejos de Luis todo parece más sencillo. Muchas gracias por compartir con los lectores

    Responder
    • Hola Ana, eso es lo que sabía que iba a conseguir con Luis, que lo pusiera muy fácil para quien no sepa nada o casi nada de CSS.

      Respecto al tema hijo yo no lo uso porque utilizo los hooks que permite mi plantilla pero es sencillo de instalar, tomo nota para futuros post.

      Saludos Ana

      Responder
  3. ¡Genial! Este post me ha resulto unas cuantas dudas, había ciertas partes de todo este asunto del CSS que no me estaban quedando nada claras 🙂 Algunas cosas del mundo WordPress se me hacen cuesta arriba y no siempre es fácil dar con un post que vaya al grano y que aporte una solución que realmente funcione, ¿verdad? Pero ahora creo que ya lo he entendido todo, ¡te explicas de maravilla!
    Muchas gracias por tu ayuda 😀

    Responder
    • De nada pero el mérito es de Luis Forgiarini que ¡fue el que lo escribió! y sí lo explico de maravilla y es super útil.

      Saludos y no hay de qué…

      Responder
  4. Hola José, muy interesante el artículo. Llevo muy poco con el tema del css no lo entiendo muy bien y aunque hago modificaciones y aparentemente se ven bien siempre me surge una duda.
    Los cambios en el css no ralentizan la web?

    Siempre he sido un poco autodidacta, en este tema, mi web la hice en adobe muse fue muy interesante el proceso sin embargo hace poco le añadí un blog e instale un wordpress en una subcarpeta. Escogi la plantilla generate press y al final a base de cambios en el css me quedó ese resultado. Me gusta sobre todo en su version movil pero claro he cambiado tantas cosas de la plantilla que no se si al final compensa utilizar el editor que viene por defecto o crear una hoja de estilo. Mas que nada porque intuitivamente a mi me parece que no es razonable que la plantilla cargue sus propios estilos cuando tengo tantos cambios.

    ¿A tí que te parece?
    Me suscribo a tu sitio porque 3ste tema me interesa mucho.
    Un saludo

    Responder
    • Hola Diego, los css son añadidos al código y en cierta medida pueden ralentizar pero necesitas muchos cambios para que así sea. Además depende de la compresión y minimizado que apliques a los mismo.

      Respecto a los cambios, yo soy partidario de usar un constructor web como Elementor pero claro,lo hago por comodidad y no tiene por qué ser más pesado si se usa con mesura. De esta manera evitar usar tanto CSS que es inevitable cuando usas sólo plantillas.

      Saludos y gracias

      Responder
  5. Hola, muy bueno el tutorial. Siempre metí mano en los códigos, soy programador del viejo cobol. Respecto de Elementor lo usé de prestado y me resultó muy práctico y de buen diseño. Quería saber, porque no me queda claro: si uso woocommerce y elementor, ¿Elementor influye en las funciones de woocommerce o es solo de diseño? Estoy armando una tienda online y no tengo claro algunos aspectos, como por ejemplo si la estructura de Woocommerce está completa o necesito agregarle algunas funciones. Yo quiero, por ahora, una tienda básica. Quizás sea confuso lo que digo, es la desorientación que tengo actualmente y que espero desaparezca con experiencia. muchas gracias.

    Responder
    • Hola Elementor incluye sus propias opciones para editar el diseño alrededor de Woocommerce. Es decir, incluye ciertas plantillas de productos por ejemplo que permiten editar visualmente todo pero las opciones de Woocommerce son las incluidas por defecto o las que añadas a través de plugins específicos.

      Responder
  6. Hola, hay una forma fácil de aplicar color al texto únicamente por párrafo?, usando la casilla de Word Press que se llama Avanzado -Clase CSS adicional

    Responder
  7. hola, me podrías ayudar en una duda: utilizado crome para cambiar un estilo ¿cómo lo «grabo» para que la pagina se modifique? porque al cerrar crome, ya no hay modificación
    gracias

    Responder
    • Hola Carmen.
      Chrome te da una imagen de cómo quedaría la web pero como es lógico no hace modificaciones en la web.
      Para hacerlo tienes que usar el personalizador de la plantilla y meter enl código ahí y si no lo incluye instalar un plugin para copiarlo

      Responder
  8. Muy completo el post. Yo estoy usando el Simple CSS plugin de manera que si se actualiza el tema no pierdo los cambios que hice. De hecho creo que cuando la plantilla se actualiza, teniendo el CSS en el plugin, no se pierde nada verdad? en todo caso lo que se haya podido meter en el header como etiquetas de verificación. O algo más se me escapa? gracias!

    Responder
    • Hola Jaime. Lo que metas en el header si actualizas lo pierdas a no ser que crees un tema hijo. Lo mismo pasa si editas el css en la carpeta Style, pero si usas el personalizador de CSS que traen las plantillas normalmente no se pierde con lo cual puedes prescindir del plugin ya que es lo mismo

      Responder
  9. Como anillo al dedo. Justo estaba pensando en adentrarme en el mundo CSS. Fantástico artículo. Para mi Twitter de cabeza (como de costumbre). ¡Gracias!

    Responder
    • Muchas gracias Mel. Me alegro que te ayude el post.

      Y gracias por compartirlo 😉

      Responder
  10. Hola José. Te vengo siguiendo desde que empecé el rediseño de mi sitio, je:)

    Tal vez ni me recuerdes pero yo estuve consultándote en tu artículo sobre como hacer una copia del sitio, rediseñarla y volverla a subir el sitio original (O algo así:)

    Bueh. No importa.

    Dicho sea de paso te cuento que, después de muuucho buscar (tu solución no me había servido por si no lo recuerdas, je), me di cuenta de que, en mi propio hosting (Mochahost) tienen incluido desde el propio cPanel ¡Un staging!

    Ergo, actualmente, estoy trabajando en mi staging y luego (con un simple clic) lo subiré y, reemplazaré a mi sitio original.

    Dicho esto, a lo nuestro…

    En relación con este artículo, como dije, estoy rediseñando todo y, me pareció una buena idea reemplazar uno de los ¡30 plugin! que tengo en mi sitio "viejo" que sirve para – justamente – cargar CSS personalizado en CADA página/entrada.

    Por eso, me tenté con tu código php. Peeero…

    Acabo de instalarlo y, NO hizo absolutamente NADA, je.

    Un par de cositas:

    1) En este momento NO tengo ninguna caja de CSS personalizado en mis páginas/entradas.

    Esto es porqué, como dije, en mi afán de reucir plugin, eliminé de un "plumazo" el que me creaba la caja de CSS antes mencionada.

    2) En mi staging, instalé:

    2.1) La plantilla Hello Elementor

    Para arrancar desde 0 con la plantilla más liviana que encontré.

    2.2) Elementor Headher & Footer

    Porque Hello Elementor viene "pelada", es decir, sin cabecera ni pié de página. Y esto- a su vez – me permitió hacer tanto una cabecera como un pié de página para TODO el sitio que (modestamente, claro:)… ¡Me esta quedando PRECIOSO!

    Peeero…

    3) Para NO hacer tan pesado el sitio, usé Elementor SOLO en la homepage.

    En el resto de las páginas/entradas estoy usando el editor de Gutenberg.

    Entonces, te pregunto…

    ¿Será esta "combinación" de cosas la que hace que la "caja para CSS" en entradas/páginas NO aparezca cuando instalo el codigo en mi function.php de mi child theme?

    Aguardo tus comentarios.

    Desde ya, muchas gracias.

    Saludos.

    Responder

Deja un comentario