14 Användbara koder för GeneratePress

 

Här finns några användbara kodutdrag. Detta är funktioner, filter och CSS som jag använder eller har behövt någon gång för mallen GeneratePressmallen, som jag använder och rekommenderar.

Några av dem har kommit ut ur deras supportforumforum, en outtömlig källa till lösningar, från din dokumentation och andra från supportförfrågningar och sökningar.

Visa datum och tid för uppdatering i inlägg bredvid publiceringsdatum

Det här filtret visar datum och tid för uppdatering på inlägg i GeneratePress. Det beror på hur du har konfigurerat datumet i Inställningar/Allmänt/Datumformat/Anpassat. I det fall som används här ser det ut så här: 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 );

Animerade understrukna länkar

CSS för att skapa en animerad effekt för dina textlänkar som den du ser i gif:en nedan:

14 Användbara koder för GeneratePress

/* 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%;
}

I background-image och border-bottom kan du ändra färgerna.

Du måste observera beteendet i stycken, knappar och andra element som innehåller länkar för att justera det så att det inte ser fel ut.

Koden kommer från Kyle Van Deusen som förutom The Admin Bar har en intressant blogg som heter Generatetweaks där han publicerar flera märkliga kodbitar och mallar för GeneratePress och GenerateBloks, som till exempel det här mörka läget för GP och GB.

Ta bort kommatecken mellan taggar

Det är allt som finns att göra.

Om du inte vill ha kommatecken mellan taggar kommer det här filtret inte att visa dem.

Det är mycket användbart om du bestämmer dig för att färga taggarna eller använda en annan symbol för att skilja dem åt.

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

Lägg till bakgrundsfärg till kategorier och taggar

Med den här CSS-funktionen kan du lägga till vilken färg du vill till alla kategorier och/eller alla taggar.

I exemplet skulle de visas så här:

14 Användbara koder för GeneratePress
/* 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;
}

Visa en annan bakgrundsfärg för varje kategori eller tagg

Med denna CSS kan du ge varje kategori en annan färg. För att göra detta måste du skriva ett stycke som detta för varje kategori eller tagg du vill ändra. I det första exemplet använder vi kategorin"wordpress" som vi lägger till blå bakgrund och vit text. I det andra exemplet använder vi taggen"blog" som vi lägger till orange bakgrund och vit text.

Och det här är resultatet..:

14 Användbara koder för GeneratePress
/* 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;
}

Visa endast årtalen i arkivwidgeten

Den här funktionen gör att arkivwidgeten endast visar årtal i stället för månader. Den fungerar för alla mallar, eftersom den verkar på en inhemsk WordPress-widget. Användbart om din blogg är mycket gammal och månads-rullgardinsmenyn redan är för lång. I exemplet visas den med antalet publicerade inlägg.

/* MOSTRAR SOLO AÑOS EN ARCHIVO WIDGET */
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

Enkel läsning framstegsindikator utan plugin

Det finns flera plugins för att lägga till en läsfunktionslist i WordPress och även tillägg för Elementormen med lite kod och ett GeneratePress Elements-filter kan det enkelt göras mycket lättare. Den här koden kommer från Somnath Sahu.

*I det här exemplet använder vi GeneratePress Premium-versionen .

Först skapar vi en filter med element med den här koden.

<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>

Vi konfigurerar det med positionen wp_head och att det visas i Inlägg / Alla inlägg.

14 Användbara koder för GeneratePress
För att visa det lägger vi bara till denna CSS i ditt barntema eller i Anpassa / Ytterligare CSS och ge den den stil som passar bäst för din blogg.
/*** Barra de progreso de lectura - Progress bar **/
.progress-container {
  width: 100%;
  height: 8px;
  background: #ccc;  /** Change Progress bar background color **/
}

.progress-bar {
  height: 8px;
  background: #a70404; /** Change Progress bar color **/
  width: 0%;
  position:fixed;
  z-index:999;
}

Och så här visas koden efter att ha ändrat färgen till grönt.

Framstegsindikatorn kommer att visas högst upp, den kommer att följa oss under läsningen och den kommer att växa när vi scrollar ner och minska om vi scrollar uppåt.

14 Användbara koder för GeneratePress

Ändra logotypen endast på en viss sida

Jag behövde detta en gång och jag hittade det en gång på sidan för David Lanau.

Filtret visar en annan logotyp endast på den sida du anger.

Jag använde det för att sätta en annan logotyp på en kategorisida som grupperade innehåll av ett visst tema.

add_filter( 'generate_logo','tu_custom_about_logo' );
function tu_custom_about_logo( $logo )
{
 	// Si 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;

 }

Dölj sibebar i mobilversionen

Om du är en av dem som fortfarande använder sidofältet och du har avstått från att använda den aMP-sidorsidor, så du använder den inhemska mobilversionen av GeneratePress med sidebar, kan du med denna CSS dölja den endast för mobilversionen.

I det här fallet kan du lägga till den i formatmallarna i ditt barntema eller från Custom / Additional CSS.

Dölj höger sidebar

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

Dölj vänster sidofält

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

Dölj båda sidorna

Dölj båda sidofältet.

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

Visa presenterade bilder i vänster och höger slinga

Om du använder en mall som Marketer eller liknande, kan du med den här koden visa den presenterade bilden växelvis till vänster och höger i slingan.

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

Jag hittade den här koden på aquigeneratepress.com där du kan hitta andra användbara knep. Och här är resultatet:

14 Användbara koder för GeneratePress

Anpassa "Läs mer"-knappen

Samma som ovan, denna CSS är för knappen "Läs mer". Det är den jag använder här och placerar den till höger under utdraget på förstasidan.

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

Stil för sidindelning av inlägg

Ett filter och lite CSS för att få det här utseendet för sidindelningen av inläggen på förstasidan. Härifrån kan du finjustera det efter eget tycke och smak.

14 Användbara koder för GeneratePress

Det första du behöver göra är att ersätta orden Föregående och Nästa med symbolerna << och >> med det här filtret som du kan lägga till i functions.php i ditt barntema eller med Code Snippet.

/* Cambia ANTERIOR y SIGUIENTE por << y >> en navegación */
add_filter( 'generate_previous_link_text', function() {
	return '<<';
} );

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

Och sedan CSS, som läggs till på samma sätt som i de tidigare fallen

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

Centrering av sökrutan

Den ursprungliga sökmotorn i GeneratePress är lite haltande, här lite CSS för att anpassa den till enheter och centrera den.

/* 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 in here for mobile only */
        form.search-form.navigation-search.nav-search-active {
        width:100%;
        left:50%;
        transform:translateX(-50%)
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    /* CSS in here for tablet only */
    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 in here for desktop only */
        form.search-form.navigation-search.nav-search-active {
        width:40%;
        left:50%;
        transform:translateX(-50%)
    }
}
14 Användbara koder för GeneratePress

Textstorlek för kategorier och taggar

Om du visar kategorierna och taggarna under inläggen kan du genom att lägga till denna CSS ändra storleken och fortsätta att lägga till CSS för att styla dem som du vill. Alla klasser för att ändra dem finns i dokumentationen eller i själva CSS:en, men om du inte vill krångla till det och bara vill ändra storleken låter jag det vara här.

.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

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting