10 Códigos útiles para GeneratePress

 

Aquí dejo algunas porciones de código útiles. Son funciones, filtros y CSS que uso o he necesitado en algún momento para la plantilla GeneratePress, que uso y recomiendo. Algunos han salido de su foro de soporte, fuente inagotable de soluciones, de su documentación y otros de consultas de soporte y búsquedas.

Mostrar fecha y hora de actualización en entradas junto a fecha de publicación

Este filtro muestra fecha y hora de actualización en las entradas de GeneratePress. Depende de cómo tengas configurada la fecha en Ajustes/generales/Formato de fecha/ personalizado. En el caso usado aquí está así: d/m/Y : H:i

add_filter( 'generate_post_date_output', function( $output, $time_string ) {
    $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';

    if ( get_the_date() !== get_the_modified_date() ) {
        $time_string = '<time class="entry-date published" datetime="%1$s" itemprop="datePublished">Publicado: %2$s</time> | <time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">Actualizado: %4$s | </time>';
    }

    $time_string = sprintf( $time_string,
        esc_attr( get_the_date( 'c' ) ),
        esc_html( get_the_date() ),
        esc_attr( get_the_modified_date( 'c' ) ),
        esc_html( get_the_modified_date() )
    );

    return sprintf( '<span class="posted-on">%s</span> ',
        $time_string
    );
}, 10, 2 );

Mostrar solo los años en el widget de archivo

Esta función hará que el desplegable del widget de archivo muestre sólo los años en lugar de los meses. Sirve para cualquier plantilla, ya que actúa sobre un widget nativo de WordPress. Útil si tu blog es muy antiguo y el desplegable por meses ya resulta demasiado largo. En el ejemplo se muestra con el número de post publicados.

function my_limit_archives( $args ) {
    $args['type'] = 'yearly';
    return $args;
}

add_filter( 'widget_archives_args', 'my_limit_archives' );
add_filter( 'widget_archives_dropdown_args', 'my_limit_archives' );
10 Códigos útiles para GeneratePress

Barra de progreso de lectura simple sin plugin

Existen varios plugins para añadir una barra de progreso de lectura en WordPress y también addons para Elementor, pero con un poco de código y un filtro de Elements de GeneratePress puede hacerse fácilmente para que sea mucho más ligero. Este código es de Somnath Sahu.

*Para este ejemplo hay que usar la versión de GeneratePress Premium .

Primero creamos un filtro con Elements con este código.

<div class="progress-container">
    <div class="progress-bar" id="myProgressBar"></div>
</div>

<script>
window.onscroll = function() {myFunction()};
function myFunction() {
  var winScroll = document.body.scrollTop || document.documentElement.scrollTop;
  var height = document.documentElement.scrollHeight - document.documentElement.clientHeight;
  var scrolled = (winScroll / height) * 100;
  document.getElementById("myProgressBar").style.width = scrolled + "%";
}
</script>

Lo configuramos con la posición wp_head y que se muestre en Entradas / Todas las entradas.

10 Códigos útiles para GeneratePress
Para mostrarlo basta añadir este CSS en tu tema hijo o en Personalizar/ CSS adicional y darle el estilo que más se ajuste a tu blog.
/* Barra de progreso de lectura */
.progress-container {
  width: 100%;
  height: 8px;  /* Ancho del contenedor de la barra de progreso */
  background: #ccc;  /* Color del contenedor sobre el que se mueve la barra de progreso */
}

.progress-bar {
  height: 8px; /* Ancho de la barra de progreso */
  background: #a70404; /* Color de la barra de progreso */
  width: 0%;
  position:fixed;
  z-index:999;
}

Y así es como se muestra este código tras cambiarle el color a verde.

La barra de progreso aparecerá en la parte superior, nos acompañará durante la lectura e irá creciendo a medida que vayamos haciendo scroll hacia abajo y decreciendo si subimos.

10 Códigos útiles para GeneratePress

Cambiar el logo solo en una página en concreto

Esto lo necesité una vez y lo encontré en su día en la página de David Lanau. El filtro muestra un logo diferente sólo en la página que le indiques y lo usé para poner un logo distinto en una página de categoría que agrupaba contenidos de una temática concreta.

add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
 	// Si por ejemplo estamos en la página servicios, vamos a poner nuestro logo personalizado para esta página
 	if ( is_page( 'servicios' ) )
 	 	return 'PON LA URL DEL LOGO AQUÍ';

 	// Y SI NO, PON EL LOGO GENERAL
 	return $logo;

 }

Esconder el sibebar en la versión móvil

Si eres de los que aún usa sidebar y has prescindido de las páginas AMP, por lo que usas la versión móvil nativa de GeneratePress con sidebar, con este CSS puedes esconderlo sólo para la versión móvil.

En este caso puedes añadirlo a la hoja de estilo en tu tema hijo o bien desde Personalizar/ CSS Adicional.

Esconder sidebar derecho

@media(max-width: 768px) {
    #right-sidebar {
        display: none;
    }
}

Esconder sidebar izquierdo

@media(max-width: 768px) {
    #left-sidebar {
        display: none;
    }
}

Esconder ambos

@media(max-width: 768px) {
    #right-sidebar, #left-sidebar {
        display: none;
    }
}

Mostrar imágenes destacadas en el loop a izquierda y derecha

Si usas una plantilla tradicional de GeneratePress como Marketer o similar, con este código puedes mostrar la imagen destacada alternándolas a izquierda o derecha en el loop.

.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
    margin-left: 2em;
    float: right;
    text-align: right;
}

Este código lo encontré en aquigeneratepress.com donde puedes encontrar otros truquillos útiles. Y aquí el resulltado:

10 Códigos útiles para GeneratePress

Personalizar el botón «Leer más»

Igual que en el caso anterior, este CSS es para el botón «Leer más». Es el que uso aquí y lo coloca a la derecha bajo el extracto en la portada.

a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}

Estilo de paginación de entradas

Un filtro y un poco de CSS para conseguir este aspecto para la paginación de las entradas en la portada. A partir de aquí, puedes maquearlo a tu gusto.

10 Códigos útiles para GeneratePress

Lo primero que debemos hacer es reemplazar las palabras Anterior (Previous) y Siguiente (Next) por los símbolos << y >> con este filtro que puedes añadir en el functions.php de tu tema hijo o con Code Snippet.

add_filter( 'generate_next_link_text', function() {
    return '>>';
} );
add_filter( 'generate_previous_link_text', function() {
    return '<<';
} );

Y después el CSS, añadido de la misma forma que en los casos anteriores


#nav-below {
    text-align: center;

.paging-navigation .nav-links>* {
	  font-size: 20px;
    padding: 7px 10px;
    background-color: #b50707;
    color: white;
    border-radius: 4px;
}
.paging-navigation .nav-links span.page-numbers.current {
    background: red;
    color: #ffffff;
}
a.next.page-numbers > span {
    display: none;
}

Centrar la caja del buscador

El buscador nativo de GeneratePress es un tanto cojonero, aquí un poco de CSS para adaptarlo a los dispositivos y centrarlo.

/* Centrar caja de búsqueda en menú principal */
form.search-form.navigation-search.nav-search-active {
    width:50%;
    left:50%;
    transform:translateX(-50%)
}

 /* Responsive caja de búsqueda en móvil - tablet y PC */
@media (max-width: 768px) {
    /* CSS para móvil */
        form.search-form.navigation-search.nav-search-active {
        width:100%;
        left:50%;
        transform:translateX(-50%)
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS para tablet */
    form.search-form.navigation-search.nav-search-active {
    width:100%;
    left:50%;
    transform:translateX(-50%)
    }

    .inside-navigation {
        align-items: flex-end !important;
        flex-direction:column-reverse;
    }
}
@media (min-width: 1025px) {
    /* CSS para PC */
        form.search-form.navigation-search.nav-search-active {
        width:40%;
        left:50%;
        transform:translateX(-50%)
    }
}
10 Códigos útiles para GeneratePress

Tamaño de texto de categorías y etiquetas

Si muestras las categorías y etiquetas bajo los post, añadiendo este CSS puedes cambiar el tamaño y seguir añadiendo CSS para darles el estilo que quieras. Todas las clases para modificarlas puedes encontrarlas en la documentación o en el propio CSS, pero si no te quieres complicar, aquí lo dejo.

.entry-meta .cat-links a {
    padding: 3px 5px;
    font-size: 20px;
}
.entry-meta .tags-links a {
    padding: 3px 1px;
	  font-size: 20px;

}


Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Repositorio de documentales sobre dibujantes de cómic y humor gráfico.

Tontolares. Los titulares más gilipollas de la prensa. Envía los tuyos

¿Algo que decir?