Añade una clase global al primer párrafo de WordPress

Añadir clases al primer parrafo de WordPress de forma global

Si dividimos un sitio web por partes y valoramos cada una del 1 al 10, una de las más importantes es la zona superior. Es lo primero que van a ver nada más cargar tu web o blog así que tenemos que esforzarnos un poco para enganchar al público y que continúe leyendo.

Una buena presentación puede contribuir a mejorar el consumo de tu contenido.

Las variaciones como títulos, imágenes, quotes… contribuyen para que la lectura por parte del usuario sea mucho más ágil. Se trata simplemente de un juego psicológico para evitar la resistencia que supone una gran bloque de texto plano sin variaciones en la mente de las personas.

Podemos decir que las variaciones de contenido ayudan que la experiencia de usuario de nuestro sitio web o articulo sea mejor.

Por mi parte quiero echarte una mano y poner mi granito de arena para ayudarte a que tus artículos se vean mejor. A continuación encontraras una manera de añadir una clase única a cada primer párrafo de cada una de tus artículos.

Quizá alguno piense, esto es algo que puedo hacer ya ¿Que tiene de especial tu método?

Si te has hecho esta pregunta, la ventaja de este método son:

  • Es global, se aplica a todos los párrafos, los que ya hemos escrito y los que vamos a escribir.
  • Es dinámico, si en algún momento decidimos no usarlo más, solo necesitamos desactivar el código y listo.
  • Además...

Optimiza procesos y no pierdas tiempo en elementos que puedas automatizar, "No te repitas a ti mismo" o DRY, "

Pues eso si lo podemos automatizar, automatizamos 🙂

Al grano, ¿como añadimos esta clase global al primer párrafo de nuestro blog?

Como ya te he dicho la principal ventaja de este método es que:

Esta clase será global y se añadirá de forma automática incluso a los artículos ya escritos y futuros.

Por ejemplo con esta clase CSS puedes incluir una imagen al inicio o al final del primer párrafo.

Imagen antes y despues del párrafo

Al final tienes el código CSS que uso en esta imagen.

Código PHP para añadir clases CSS al primer párrafo de los artículos

Este el código que va a añadir a la clase a tus artículos. Como siempre te recomiendo que lo añadas este código usando Code Snippets.

/**
 * Add class to first post paragraph
 */
function rv_first_paragraph_class($content)
{
    if (is_singular('post')) {
        return preg_replace('/<p([^>]+)?>/', '<p$1 class="first-class alignwide">', $content, 1);
    } else {
        return $content;
    }
}

add_filter('the_content', 'rv_first_paragraph_class');

Este código solo va a actuar solo en los artículos de la web por la condición establecida en la línea 6.

 if (is_singular('post'))

Pero si quieres, puedes personalizarlo para que actúe donde tú quieres. Para esto tienes que usar los tags condicionales para WordPress.

Y este es el código CSS de la imagen anterior:

p.first-class {
    font-size: 1.2em;
}

p.first-class::after, p.first-class::before {
    content: "";
    display: block;
    margin: 40px auto;
    height: 4em;
    width: 65%;
    max-width: 400px;
// Cambia la url por tu imagen
background-image: url("https://cdn.pixabay.com/photo/2016/10/18/19/04/floral-1751088_960_720.png");

    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-blend-mode: multiply;
}

p.first-class::before {
    -webkit-transform: rotate(180deg);
    -moz-transform: rotate(180deg);
    -ms-transform: rotate(180deg);
    -o-transform: rotate(180deg);
    transform: rotate(180deg);
}

Espero que te sirva y hasta la próxima.

Rubén Veliz

Rubén Veliz

Diseñador web freelance especializado en páginas web a medida, escalables y fáciles de administrar. Utilizo WordPress de forma exclusiva desde hace más de 6 años. Quiero compartir con vosotros la experiencia de emprender y el apasionante mundo de WordPress.

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.