14 Naudingi kodai GeneratePress

 

Pateikiame keletą naudingų kodo dalių. Tai funkcijos, filtrai ir CSS, kuriuos naudoju arba kurių tam tikru metu prireikė GeneratePress šablonui, kurį naudoju ir rekomenduoju.

Kai kurie iš jų buvo gauti iš palaikymo forumo, kuris yra neišsenkantis sprendimų šaltinis, iš dokumentų, o kiti - iš palaikymo užklausų ir paieškų.

Rodyti atnaujinimo datą ir laiką prie įrašų, esančių šalia paskelbimo datos

Šis filtras rodo GeneratePress įrašų atnaujinimo datą ir laiką. Tai priklauso nuo to, kaip sukonfigūravote datą lange Nustatymai / Bendrosios nuostatos / Datos formatas / Pasirinktinis. Šiuo atveju ji atrodo taip: 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 );

Animuotos pabrauktos nuorodos

CSS, kad sukurtumėte animacinį teksto nuorodų efektą, panašų į tą, kuris matomas toliau pateiktame gifo paveikslėlyje:

14 Naudingi kodai GeneratePress 0

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

Fono paveikslėlyje ir apvado apačioje galite keisti spalvas.

Turėsite stebėti pastraipų, mygtukų ir kitų elementų, kuriuose yra nuorodų, elgseną, kad ją pakoreguotumėte taip, kad niekas nebūtų ne vietoje.

Kodą sukūrė Kyle Van Deusen, kuris, be " Admin Bar", turi įdomų tinklaraštį " Generatetweaks ", kuriame skelbia įvairias įdomias kodo dalis ir šablonus, skirtus "GeneratePress" ir "GenerateBloks", pavyzdžiui, šį tamsų GP ir GB režimą.

Pašalinti kablelius tarp žymų

Tai viskas.

Jei nenorite, kad tarp žymų būtų rodomi kableliai, naudojant šį filtrą jie nebus rodomi.

Tai labai naudinga, jei nuspręsite etiketes nuspalvinti arba jas atskirti kitu simboliu.

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

Pridėti kategorijų ir žymų fono spalvą

Naudodami šį CSS galite pridėti bet kokią norimą spalvą visoms kategorijoms ir (arba) visoms žymoms.

Pavyzdyje pateiktame CSS jie būtų rodomi taip:

14 Naudingi kodai GeneratePress 1
/* 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;
}

Kiekvienai kategorijai arba etiketeirodyti skirtingą fono spalvą

Naudodami šį CSS galėsite kiekvienai kategorijai suteikti skirtingą spalvą. Kad tai padarytumėte, turėsite parašyti tokį elementą kiekvienai kategorijai ar žymei, kurią norite pakeisti. Pirmajame pavyzdyje kategorijai"wordpress" naudojamas mėlynas fonas ir baltas tekstas. Antrajame pavyzdyje žyma"blog" naudojama su oranžiniu fonu ir baltu tekstu.

Ir štai rezultatas..:

14 Naudingi kodai GeneratePress 2
/* 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;
}

Archyvo valdiklyje rodyti tik metus

Naudojant šią funkciją archyvo valdiklio išskleidžiamajame lange bus rodomi tik metai, o ne mėnesiai. Ji veikia bet kokiame šablone, nes veikia "WordPress" valdiklį. Naudinga, jei jūsų tinklaraštis labai senas ir mėnesių išskleidžiamoji eilutė jau per ilga. Pavyzdyje jis rodomas su paskelbtų įrašų skaičiumi.

/* 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 Naudingi kodai GeneratePress

Paprasta skaitymo pažangos juosta be įskiepio

"WordPress" yra keletas įskiepių, skirtų skaitymo pažangos juostai pridėti, taip pat " Elementor" priedų, tačiau naudojant šiek tiek kodo ir "GeneratePress Elements" filtrą tai galima lengvai padaryti, kad jis būtų daug lengvesnis. Šį kodą sukūrė Somnath Sahu.

*Šiame pavyzdyje turite naudoti GeneratePress Premium versiją .

Pirmiausia sukuriame filtrą su elementais naudodami šį kodą.

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

Nustatome ją į wp_head poziciją ir rodome ją skiltyje Įrašai / Visi įrašai.

Norėdami jį rodyti, tiesiog pridėkite šį CSS į savo antrinę temą arba į pasirinktinę / papildomą CSS ir sukurkite tinklaraščio stilių.
/*** 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;
}

Štai kaip šis kodas rodomas pakeitus spalvą į žalią.

Pažangos juosta bus rodoma ekrano viršuje, o slinkdami žemyn ji bus rodoma kartu su jumis, o slinkdami aukštyn - mažės.

Pakeiskite logotipą tik tam tikrame puslapyje

Kartą man to prireikė ir radau tai Davido Lanau svetainėje.

Filtras rodo kitokį logotipą tik nurodytame puslapyje.

Jį naudojau norėdamas kategorijų puslapyje, kuriame sugrupuotas tam tikros temos turinys, uždėti kitą logotipą.

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;

 }

Mobiliojoje versijoje paslėpti sibebarą

Jei esate vienas iš tų, kurie vis dar naudoja šonines juostas ir atsisakė AMP puslapių, todėl naudojate "GeneratePress" vietinę mobiliąją versiją su šonine juosta, naudodami šį CSS galite ją paslėpti tik mobiliojoje versijoje.

Tokiu atveju galite jį įtraukti į savo antrinės temos stilių rinkinį arba į pasirinktinį / papildomą CSS.

Paslėpti dešinę šoninę juostą

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

Paslėpti kairę šoninę juostą

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

Paslėpti abu

Paslėpkite dvi šonines juostas.

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

Rodyti rodomus vaizdus kilpoje į kairę ir į dešinę

Jei naudojate tradicinį GeneratePress šabloną , pavyzdžiui, Marketer ar panašų, naudodami šį kodą galite rodyti rodomą paveikslėlį pakaitomis į kairę arba į dešinę kilpoje.

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

Radau šį kodą aquigeneratepress.com, kur galite rasti kitų naudingų gudrybių. Ir štai rezultatas:

14 Naudingi kodai GeneratePress 3

Pritaikykite mygtuką "Skaityti daugiau"

Kaip ir anksčiau, šis CSS skirtas mygtukui "Skaityti daugiau". Jį naudoju čia ir jis yra dešinėje pusėje po ištrauka pirmajame puslapyje.

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

Įrašo puslapiavimo stilius

Filtras ir šiek tiek CSS, kad gautumėte tokią įrašų puslapių išdėstymo tituliniame puslapyje išvaizdą. Toliau galite jį kurti pagal savo skonį.

14 Naudingi kodai GeneratePress 4

Pirmiausia reikia pakeisti žodžius Previous ir Next simboliais << ir >>, naudojant šį filtrą, kurį galite įtraukti į savo vaikiškos temos functions.php arba naudodami "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 '>>';
} );

Ir tada CSS, pridėtas tokiu pat būdu kaip ir ankstesniais atvejais

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

Paieškos variklio langelio centravimas

Gimtoji "GeneratePress" paieškos sistema yra šiek tiek atsilikusi, čia šiek tiek CSS, kad ji būtų pritaikyta įrenginiams ir centruota.

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

Kategorijų ir etikečių teksto dydis

Jei po pranešimais rodote kategorijas ir žymas, pridėję šį CSS galite keisti jų dydį ir toliau pridėti CSS, kad suteiktumėte jiems norimą stilių. Visas klases, skirtas joms keisti, rasite dokumentacijoje arba pačiame CSS, bet jei nenorite komplikuoti ir norite tik pakeisti dydį, čia jį palieku.

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

}

JRMora CC 1999 - 2024 - Licencija | Privatumas | Slapukai | Žemėlapis | Valstybė | Reklama | Veikla | Pakeitimų sąrašas | Prarastas?