Numerar los Encabezados con CSS en GeneratePress

Si eres de los usuarios que ama implementar nuevas cosas en un blog creado con GeneratePress, hoy es tu día de suerte porque con la ayuda de un CSS Snippet podrás enumerar los encabezados de tu sitio de manera automática y de forma jerárquica.

---

---

CSS para Numerar Encabezados en GeneratePress

Este es el CSS snippet que debes agregar a tu sitio para conseguir la enumeración automática y jerárquica de los encabezados de tus publicaciones.

.single-post .inside-article .entry-content {
    counter-reset: section-counter sub-section-counter sub-sub-section-counter sub-sub-sub-section-counter;
}

.single-post .inside-article h2::before {
    content: counter(section-counter) ". ";
    counter-increment: section-counter;
}

.single-post .inside-article h3::before {
    content: counter(section-counter) "." counter(sub-section-counter) ". ";
    counter-increment: sub-section-counter;
}

.single-post .inside-article h4::before {
    content: counter(section-counter) "." counter(sub-section-counter) "." counter(sub-sub-section-counter) ". ";
    counter-increment: sub-sub-section-counter;
}





/* Reset sub-section-counter for h2 elements */
.single-post .inside-article h2 {
    counter-reset: sub-section-counter sub-sub-section-counter sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

.single-post .inside-article h3 {
    counter-reset: sub-sub-section-counter sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

.single-post .inside-article h4 {
    counter-reset: sub-sub-sub-section-counter sub-sub-sub-sub-section-counter;
}

---

¿Donde Agregar CSS en WordPress?

En WordPress, puedes agregar código CSS personalizado de varias maneras, dependiendo de tus necesidades y preferencias.

Aquí hay algunas formas comunes de agregar CSS personalizado en WordPress:

Personalizador de WordPress:

• Ve al panel de administración de WordPress.
• Haz clic en “Apariencia” y luego en “Personalizar”.
• En el menú del personalizador, busca una sección que se llame “Adicional” o “CSS adicional”.
• Aquí puedes agregar tu código CSS personalizado.

Tema de WordPress (archivo style.css):

• Accede al panel de administración de WordPress.
• Navega a “Apariencia” y luego selecciona “Editor” dentro del menú.
• Busca el archivo llamado style.css en la lista de archivos del tema en el lado derecho.
• Agrega tu código CSS al final del archivo y guarda los cambios.

Plugin de Personalización de CSS:

• Puedes utilizar plugins como “Simple Custom CSS and JS” o “Custom CSS” para agregar y gestionar tu código CSS personalizado.
• Instala y activa el plugin deseado.
• Busca la sección correspondiente en el menú de administración para agregar tu código CSS personalizado.

Archivo functions.php del tema:

• Accede al panel de administración de WordPress.
• Navega a “Apariencia” y luego selecciona “Editor” dentro del menú.
• Busca el archivo llamado functions.php en la lista de archivos del tema en el lado derecho.
• Agrega tu código CSS utilizando la función wp_enqueue_style al final del archivo y guarda los cambios.

Por favor, ten en cuenta que modificar directamente los archivos del tema o el archivo functions.php puede ser arriesgado, especialmente si no estás familiarizado con la estructura del tema.

Siempre es recomendable hacer una copia de seguridad antes de realizar cambios significativos en tu sitio de WordPress.

---

Fuentes

Estas son algunas de las fuentes que contribuyeron a la creación de esta publicación

• Automatic Numbered Headlines/Headings