Soporte » WordPress Avanzado » Alguien ha usado CSSout con WordPress?

  • fotov60

    (@fotov60)


    La aplicación CSSout sirve para pasar el CSS inline de un html a una hoja de estilos CSS externa.

    Como WordPress no funciona directamente con html, sino que el php llama a la base de datos para crear un html dinámicamente, queria saber si alguien lo habia usado con WordPress y como lo había hecho.

    Aunque no lo hayais usado, se os ocurre como hacerlo para poder usarlo con WordPress aunque no sean htmls como para lo que está pensado en principio el programa?

Viendo 15 respuestas - de la 1 a la 15 (de un total de 25)
  • Moderador almendron

    (@almendron)

    Pero ese CSS: ¿se crea de forma dinámica o se trata tan solo de unos estilos que quieres añadir?

    Iniciador del debate fotov60

    (@fotov60)

    No se trata de añadir, sino de mover. Pasar de CSS inline a CSS en una hoja de estilos. El CSS es el mismo, solo que deja de estar escrito inline en el post, dejando un codigo mas limpio

    Moderador almendron

    (@almendron)

    A ver si me explico mejor

    Ese CSS: ¿lo genera dinámicamente algún plugin o tema o es algo que has añadido tú?

    Iniciador del debate fotov60

    (@fotov60)

    Ese CSS, en mi caso concreto, lo incluí yo mismo en el momento de la publicación de los posts. Posteriormente al aprender más, supe de las ventajas de hacerlo a traves de una hoja CSS y tras una intensa busqueda llegué a este script que hace lo comentado en el primer post.

    La razón de querer hacerlo automáticamente? Que hacerlo manualmente con casi mil posts se me hace imposible.

    Moderador almendron

    (@almendron)

    Tienes dos opciones:

    1. Añadir esos estilos a la hoja de estilos del tema. Si el selector (clase, identificador o elemento HTML) ya existe en dicha hoja, entonces deberías modificarlo. En caso contrario se añaden.
    2. Añadir una hoja de estilos. Para mi, es la mejor opción: https://www.almendron.com/blog/css-adicional-en-wordpress/
    Iniciador del debate fotov60

    (@fotov60)

    El problema es que no es un patrón fijo de CSS que haya en cada post, además de que solo insertar el selector en el sitio correcto en casi mil posts sigue siendo una tarea titanica.

    Una herramienta como CSSout que pudiera leer wordpress seria lo ideal, porque leeria cada post extrayendo todo el CSS inline, crearia una hoja CSS con los selectores que aun no existan, colocaria el enlace a la hoja al selector correspondiente, y borraria el CSS inline inicial. Eso manualmente son semanas de trabajo.

    Moderador almendron

    (@almendron)

    Ponme un ejemplo del CSS inline que incluyes en un post.

    Iniciador del debate fotov60

    (@fotov60)

    <span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;">JxSI ha explicado el desarrollo del debate parlamentario de la moción “Verdad. Justicia. Reparación” propuesta por la CUP el pasado 10 de noviembre, y admite el error de no haber aprobado el Punto 12 de la moción que instaba al Gobierno a prohibir la requisa de cámaras a los informadores gráficos por parte de los Mossos.</span></p><p style="text-align: justify;">
    <span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;">Aunque una moción no es una ley sino un posicionamiento político, el grupo parlamentario de JxSI está dispuesto a rectificarlo dado que el hecho ha desvelado una gran alarma en el sector de los informadores gráficos y más allá.</span></p><p style="text-align: justify;">
    <span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;">A tal fin, el pasado 18 · 11 · 2016 JxSI presentó a la Mesa del Parlamento la “<span style="color: #0000ff;">Propuesta de resolución en defensa de las libertades democráticas</span>” (Se adjunta PDF), sujeto a enmiendas y que será sometida a debate proximamente en la Comisión de Interior del Parlamento (aprox. el mes de enero, si todo va bien).</span></p><p style="text-align: justify;">
    <span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;">______________________</span></p><p style="text-align: justify;">
    <span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;">Por otra parte, la Comisión Ejecutiva avanza adjunta una <span style="color: #0000ff;"><a style="color: #0000ff;" href="https://www.fotov60.com/wp-content/uploads/2016/11/CEpropostaRESOLUCIOxASSEMBLEA231116.pdf">propuesta de resolución para la Asamblea</a></span> de mañana miércoles (a las 12,30 h en la sede de CCOO en Via Laietana 16, de Barcelona) que, obviamente, está sujeto a las enmiendas que se incorporen en el transcurso del debate).</span></p><p style="text-align: justify;"><a href="https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665.jpg"><img data-lazyloaded="1" src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI0MjAiIGhlaWdodD0iMjc5IiB2aWV3Qm94PSIwIDAgNDIwIDI3OSI+PHJlY3Qgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2NmZDRkYjtmaWxsLW9wYWNpdHk6IDAuMTsiLz48L3N2Zz4=" decoding="async" class="aligncenter size-large wp-image-7848" data-src="https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665-420x279.jpg.webp" alt="No a la requisa de camaras" width="420" height="279" data-srcset="https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665-420x279.jpg.webp 420w, https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665-300x200.jpg.webp 300w, https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665-768x511.jpg.webp 768w, https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665.jpg.webp 1000w" data-sizes="(max-width: 420px) 100vw, 420px" title="Reunión de JxSI con el Sindicat de la Imatge UPIFC y CCOO de Cataluña 4"><noscript><img decoding="async" class="aligncenter size-large wp-image-7848" src="https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665-420x279.jpg.webp" alt="No a la requisa de camaras" width="420" height="279" srcset="https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665-420x279.jpg.webp 420w, https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665-300x200.jpg.webp 300w, https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665-768x511.jpg.webp 768w, https://www.fotov60.com/wp-content/uploads/2016/11/650x432REQUISA-1000x665.jpg.webp 1000w" sizes="(max-width: 420px) 100vw, 420px" title="Reunión de JxSI con el Sindicat de la Imatge UPIFC y CCOO de Cataluña 4"></noscript></a></p><p style="text-align: justify;">
    <span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;">No hace falta decir, pues, que la Asamblea de mañana es importante porque, además de dar una firme respuesta colectiva a una amenaza más que potencial, también nos da la oportunidad de hacernos oir en un momento de más receptividad.</span></p><p style="text-align: justify;">
    <span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;">Contribuye a resolver el problema con tu participación.</span><br />
    <span style="font-family: arial, helvetica, sans-serif; font-size: 12pt;">Ven a la asamblea.</span></p><p style="text-align: justify;"><p style="text-align: justify;"><span style="color: #0000ff; font-family: arial, helvetica, sans-serif; font-size: 12pt;"><a style="color: #0000ff;" href="https://www.fotov60.com/wp-content/uploads/2016/11/INFORMEcomissioEXECUTIVA221116.pdf">Informe Comissió Executiva  de la reunió amb JxSI i proposta de resolució per l´assamblea Versió Català</a></span></p></div></div><div class="post-7844 post type-post status-publish format-standard hentry category-ccoo category-upifc-sindicat-de-la-imatge" id="post-7844"><div class="posttitle"><h2 class="pagetitle"><a href="https://www.fotov60.com/2016/11/22/asamblea-abierta-ccoo-no-la-requisa-de-camaras-de-los-informadores-graficos/" rel="bookmark" title="Permanent Link to Asamblea abierta CCOO “No a la requisa de cámaras de los informadores gráficos”">Asamblea abierta CCOO “No a la requisa de cámaras de los informadores gráficos”</a></h2>
    

    Multiplica esto por mil

    Moderador almendron

    (@almendron)

    He echado un vistazo a tu página y supongo que te referirás a cosas como esto:

    <p style="text-align: justify;"><span style="font-size: 16px;">xxxxxx</span></p>

    Y supongo que esto quieres cambiarlo por

    <p class="estilo1">xxxxx></p>

    ¿Es así?

    Iniciador del debate fotov60

    (@fotov60)

    No estoy muy familiarizado con el uso de las hojas de estilo CSS, pero creo que si.

    Lo que pasa es que hay muchas combinaciones distintas y repartidas por todos los posts, no sabria cuantas clases tendria que crear.

    PD: Hay un post pendiente de publicar antes de tu ultimo mensaje por la moderación segun el aviso que me sale, con la muestra del codigo de mi web. Lo digo para que sepas que te habia enviado una muestra y espera la moderación del foro

    • Esta respuesta fue modificada hace 1 mes, 3 semanas por fotov60.
    Moderador almendron

    (@almendron)

    Respecto a lo que ya tienes, no hay un procedimiento sencillo que se pueda aplicar y tampoco merece la pena.

    Lo importante sería que no siguieras haciendo lo mismo. Te pondré un ejemplo sacado de tu página principal:

    Todos los párrafos aparecen así:

    <p class="has-medium-font-size">xxxxxxx</p>

    Y lo que tendrías que hacer es modificar la hoja de estilos del tema o crear una adicional para crear/modificar la regla correspondiente para que todos los párrafos del artículo tengan las mismas propiedades.

    .entry p { margin: 0 0 0.5rem; }
    Moderador almendron

    (@almendron)

    Otra cosa. Tienes 17 debates iniciados. Deberías pasarte por ellos y marcar los resueltos como tal.

    https://es.wordpress.org/support/users/fotov60/topics/

    Iniciador del debate fotov60

    (@fotov60)

    y tampoco merece la pena

    @almendron

    Yo opino lo contrario, precisamente por lo que he leido un codigo limpio mejora el posicionamiento de la web. Un ratio de texto mayor que codigo es mejor de cara al SEO, por lo que si «limpio» mil posts de código creo que le dará algunos puntos a mi web de cara a los buscadores.

    ¿Qué significa que tu web tenga un ratio de texto/HTML bajo y cómo se soluciona?

    El SEO y la proporción texto/Html

    Moderador almendron

    (@almendron)

    Para limpiar ese código no vale hacerlo «al vuelo» si no que hay que borrarlo de la tabla correspondiente.

    Y eso es muy fácil de decir y muy complicado de hacer ya que, entre otros motivos, hay estilos inline que no se debe borrar como por ejemplo el que se crea de forma dinámica cuando insertas una imagen.

    Esto significa que no puedes aplicar una regla general que te permita cambiar todo de un golpe. Tienes que ir cadena a cadena buscando y reemplazado. Eso sin contar que un solo error podría producir un roto considerable.

    Claro que el código cuanto más limpio es mejor. Otra cosa es que en tu caso se pueda hacer.

    Iniciador del debate fotov60

    (@fotov60)

    Con al vuelo te refieres a que no se borra realmente, sino que se borra de cara al visitante o que lo hace de forma automatizada de una sola vez?

    Yo no lo he probado, pero dicen que en los html da buenos resultados. Si es así, porque no iba a poder hacerse en un WordPress? (Otra cosa es el como)

    Esta claro que yo el CSS inline que quiero «mover» es solo el referente al texto, el del tipo que tu mencionas mi intención es dejarlo intacto. He probado de contactar con el autor del script, pero no he obtenido respuesta. Segun Bard existió un plugin llamado CSSout for WordPress y dice lo siguiente (de lo que desconozco la fiabilidad):

    El plugin CSSout for WordPress existió en el repositorio de WordPress. Fue publicado el 16 de abril de 2014 y descontinuado el 1 de enero de 2023. El plugin estaba diseñado para mover el CSS fuera del HTML, lo que podía mejorar el rendimiento y la usabilidad de los sitios web.
    
    El plugin fue creado por el desarrollador de WordPress John Blackbourn. Blackbourn es un desarrollador experimentado que ha creado varios otros plugins populares de WordPress, incluyendo Yoast SEO y Contact Form 7.
    
    El plugin CSSout for WordPress fue un plugin popular, con más de 100.000 instalaciones activas. Sin embargo, el desarrollador decidió descontinuarlo en 2023, citando la falta de tiempo para mantenerlo.
Viendo 15 respuestas - de la 1 a la 15 (de un total de 25)
  • Debes estar registrado para responder a este debate.