14 Codici utili per GeneratePress

 

Ecco alcuni snippet di codice utili. Si tratta di funzioni, filtri e CSS che utilizzo o di cui ho avuto bisogno in un certo momento per il template GeneratePressche uso e raccomando

Alcuni di loro sono usciti dalla sua forum di supportouna fonte inesauribile di soluzioni, dal suo documentazione e altri dalle richieste di assistenza e dalle ricerche.

Mostra la data e l'ora di aggiornamento nei post accanto alla data di pubblicazione

Questo filtro mostra la data e l'ora di aggiornamento delle voci di GeneratePress. Dipende da come ha configurato la data in Impostazioni/Generali/Formato data/Custom. Nel caso qui utilizzato, si presenta così: d/m/Y : H:i

/* Fecha y Hora de PUBLICADO Y ACTUALIZADO EN META POST */
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 );

Rimuovere le virgole tra i tag

Non c'è altro da aggiungere.

Se non si desidera che le virgole vengano visualizzate tra i tag, questo filtro non le mostrerà.

È molto utile se si decide di colorare i tag o di utilizzare un altro simbolo per separarli.

/* QUITA LAS COMAS EN LAS ETIQUETAS */
add_filter('generate_term_separator', function($separator, $tags){
	return " ";
}, 10, 2);

Aggiunga il colore di sfondo alle categorie e ai tag

Con questo CSS può aggiungere il colore che desidera a tutte le categorie e/o a tutti i tag.

L'esempio di CSS li mostrerebbe in questo modo:

14 Codici utili per GeneratePress 0
/* Categorías y colores */
.entry-meta .cat-links a {
    padding: 3px 5px;
    font-size: 17px;
	background-color: #B50000;
	border-radius: 5px;  
    color: #FFF	
		
}
/* Etiquetas y colores */  
.entry-meta .tags-links a {
	padding: 3px 5px;
	font-size: 17px;
	background-color: #006a05;
	border-radius: 5px;  
    color: #FFFF	
}

/* Espacio entre línea de categorías y etiquetas */
.cat-links {
    margin-bottom: 10px;
}

Mostra un colore di sfondo diverso per ogni categoria o etichetta

Con questo CSS può dare un colore diverso a ciascuna categoria. Per farlo, dovrà scrivere un pezzo come questo per ogni categoria o tag che desidera modificare. Nel primo esempio utilizziamo la categoria"wordpress" a cui aggiungiamo uno sfondo blu e un testo bianco. Nel secondo esempio utilizziamo il tag"blog" a cui aggiungiamo uno sfondo arancione e un testo bianco.

E questo è il risultato..:

14 Codici utili per GeneratePress 1
/* Mostrar un color diferente para cada categoría o etiqueta */
#main span.cat-links a[href*="wordpress"] {
    background-color: #005ca5;
    color: white;
}


#main span.tags-links a[href*="blog"] {
    background-color: #d47e00;
    color: white;
}

Mostra solo gli anni nel widget dell'archivio

Questa funzione farà in modo che il widget archivio a tendina mostri solo gli anni invece dei mesi. Funziona con qualsiasi modello, poiché agisce su un widget nativo di WordPress. Utile se il suo blog è molto vecchio e il menu a tendina dei mesi è già troppo lungo. Nell'esempio è mostrato con il numero di post pubblicati.

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 di avanzamento semplice da leggere senza plugin

Esistono diversi plugin per aggiungere una barra di avanzamento della lettura in WordPress e anche dei componenti aggiuntivi per Elementor, ma con un po' di codice e un filtro di Elements di GeneratePress si può facilmente rendere il tutto molto più leggero. Questo codice proviene da Somnath Sahu

*Per questo esempio è necessario utilizzare la versione Premium di GeneratePress.

Per prima cosa creiamo un filtro con Elementi con questo codice.

<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 impostiamo con la posizione wp_head e lo facciamo visualizzare in Posts / All Posts.

14 Codici utili per GeneratePress 3
Per visualizzarlo basta aggiungere questo CSS in il suo tema figlio o in Personalizzazione/CSS aggiuntivi e la stilizzi in base al suo 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;
}

Ecco come viene visualizzato questo codice dopo aver cambiato il colore in verde

La barra di avanzamento apparirà in alto, ci accompagnerà durante la lettura e aumenterà se scorriamo verso il basso e diminuirà se scorriamo verso l'alto.

14 Codici utili per GeneratePress 4

Cambi il logo solo in una pagina specifica

Avevo bisogno di questo una volta e l'ho trovato in quel momento sulla pagina di David Lanau. Il filtro mostra un logo diverso solo sulla pagina specificata e io l'ho utilizzato per inserire un logo diverso su una pagina di categoria che raggruppava contenuti di un tema specifico.

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 'URL DEL LOGO AQUÍ';

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

 }

Nasconda la sibebar nella versione mobile

Se è uno di quelli che utilizzano ancora la barra laterale e hanno rinunciato al pagine AMPse utilizza la versione mobile nativa di GeneratePress con la barra laterale, con questo CSS può nasconderla solo per la versione mobile.

In questo caso può aggiungerlo al foglio di stile del suo tema figlio o da Custom/Additional CSS.

Nascondere la barra laterale destra

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

Nascondere la barra laterale sinistra

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

Nascondere entrambi

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

Visualizza le immagini in primo piano nel ciclo a sinistra e a destra

Se utilizza un modello tradizionale GeneratePress come Marketer o simili, con questo codice può mostrare l'immagine in primo piano alternando a sinistra o a destra nel ciclo

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

Ho trovato questo codice su aquigeneratepress.com dove può trovare altri trucchi utili. Ed ecco il risultato

14 Codici utili per GeneratePress 5

Personalizzare il pulsante "Leggi tutto

Come sopra, questo CSS è per il pulsante "Leggi di più". È quello che utilizzo qui e lo posiziona a destra sotto l'estratto nella prima pagina.

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

Stile di paginazione delle voci

Un filtro e un po' di CSS per ottenere questo aspetto per la paginazione dei post sulla prima pagina. Da qui, può modificarlo a suo piacimento.

14 Codici utili per GeneratePress 6

La prima cosa da fare è sostituire le parole Precedente e Successivo con i simboli << e >> con questo filtro che può aggiungere nel functions.php del suo tema figlio o con Code Snippet.

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

E poi il CSS, aggiunto nello stesso modo dei casi precedenti

#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;
}

Centra il riquadro del browser

Il motore di ricerca nativo di GeneratePress è un po' zoppo, ecco un po' di CSS per adattarlo ai dispositivi e 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%)
    }
}
14 Codici utili per GeneratePress 7

Dimensione del testo della categoria e del tag

Se visualizza le categorie e i tag sotto i post, aggiungendo questo CSS può modificare le dimensioni e continuare ad aggiungere CSS per stilizzarli come desidera. Tutte le classi per modificarle si trovano nella documentazione o nel CSS stesso, ma se non vuole complicare le cose e vuole solo cambiare le dimensioni, ecco qui.

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

}
14 Codici utili per GeneratePress 8

/* Subrayado de enlace animado con color de fondo */
p a{
  font-weight: bold;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#fdede7), to(#fdede7));
  background-image: linear-gradient(to bottom, #fdede7 0%, #fdede7 100%);
  background-repeat: no-repeat;
  background-size: 100% 00%;
  background-position: 0 111%;
  -webkit-transition: background-size .25s ease-in;
  transition: background-size .25s ease-in;
  padding-left: 2px;
  padding-right: 2px;
  border-bottom: 2px solid #ec4911;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}

p a:hover{
  background-size: 100% 100%;
}

CSS per creare un effetto animato per i link testuali, come quello che si vede nella gif.

In background-image e border-bottom è possibile modificare i colori.

Dovrete osservare il comportamento dei paragrafi, dei pulsanti e degli altri elementi che includono i link per adattarlo in modo che nulla sia fuori posto.

Il codice è Kyle Van Deusen che, oltre a The Admin Bar, ha un interessante blog chiamato Generatetweaks dove pubblica alcuni curiosi pezzi di codice e modelli per GeneratePress e GenerateBloks, come questo modalità scura per GP e GB.


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

Articoli correlati

GB QUERY LOOP BLOCK VERSION 1

GB QUERY BLOCK VERSION 2

Abbonamento via e-mail

Ricevi gratuitamente nella tua casella di posta elettronica articoli completi senza pubblicità non appena vengono pubblicati. Il contenuto completo del feed viene inviato senza pubblicità tramite un servizio esterno.