- Zobrazenie dátumu a času aktualizácie pri položkách vedľa dátumu uverejnenia
- Animované podčiarknuté odkazy
- Odstránenie čiarok medzi značkami
- Pridanie farby pozadia do kategórií a značiek
- Zobrazenie inej farby pozadia pre každú kategóriu alebo štítok
- Zobrazenie iba rokov vo widgete archívu
- Jednoduché čítanie panela priebehu bez zásuvného modulu
- Zmena loga len na konkrétnej stránke
- Skrytie súrodeneckého panela v mobilnej verzii
- Zobrazenie zobrazených obrázkov v slučke vľavo a vpravo
- Prispôsobenie tlačidla "Čítať viac"
- Štýl stránkovania záznamu
- Vycentrovanie poľa vyhľadávača
- Veľkosť textu kategórií a štítkov
Tu je niekoľko užitočných častí kódu. Sú to funkcie, filtre a CSS, ktoré používam alebo som niekedy potreboval pre šablónu GeneratePress, ktorú používam a odporúčam.
Niektoré z nich pochádzajú z fóra podpory, ktoré je nevyčerpateľným zdrojom riešení, z jeho dokumentácie a iné z dotazov a vyhľadávania podpory.
Zobrazenie dátumu a času aktualizácie pri položkách vedľa dátumu uverejnenia
Tento filter zobrazuje dátum a čas aktualizácie záznamov GeneratePress. Závisí to od toho, ako ste nastavili dátum v Nastavenia/Všeobecné/Formát dátumu/Vlastné. V tomto prípade to vyzerá takto: 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 );Animované podčiarknuté odkazy
CSS na vytvorenie animovaného efektu pre textové odkazy, ako vidíte na nasledujúcom obrázku:
/* 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%;
}V položkách background-image a border-bottom môžete zmeniť farby.
Budete musieť sledovať správanie odsekov, tlačidiel a iných prvkov, ktoré obsahujú odkazy, aby ste ich upravili tak, aby nič nebolo na svojom mieste.
Autorom kódu je Kyle Van Deusen, ktorý má okrem Admin Baru aj zaujímavý blog s názvom Generatetweaks, kde publikuje rôzne zaujímavé časti kódu a šablóny pre GeneratePress a GenerateBloks, ako napríklad tento tmavý režim pre GP a GB.
Odstránenie čiarok medzi značkami
To je všetko.
Ak nechcete, aby sa medzi značkami zobrazovali čiarky, nebudú sa s týmto filtrom zobrazovať.
Je to veľmi užitočné, ak sa rozhodnete štítky farebne odlíšiť alebo použiť iný symbol na ich oddelenie.
/* QUITA LAS COMAS EN LAS ETIQUETAS */
add_filter('generate_term_separator', function($separator, $tags){
return " ";
}, 10, 2);Pridanie farby pozadia do kategórií a značiek
Pomocou tohto CSS môžete pridať ľubovoľnú farbu všetkým kategóriám a/alebo všetkým značkám.
CSS v príklade by ich zobrazilo takto:
/* 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;
}Zobrazenie inej farby pozadia pre každú kategóriu alebo štítok
Pomocou tohto CSS budete môcť každej kategórii priradiť inú farbu. Aby ste to mohli urobiť, budete musieť napísať takýto kúsok pre každú kategóriu alebo značku, ktorú chcete upraviť. V prvom príklade je použitá kategória"wordpress" s modrým pozadím a bielym textom. V druhom príklade je použitá značka"blog" s oranžovým pozadím a bielym textom.
A toto je výsledok..:
/* 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;
}Zobrazenie iba rokov vo widgete archívu
Táto funkcia spôsobí, že rozbaľovací zoznam widgetu archívu bude zobrazovať iba roky namiesto mesiacov. Funguje pre akúkoľvek šablónu, pretože pôsobí na natívny widget WordPress. Užitočné, ak je váš blog veľmi starý a rozbaľovací zoznam mesiacov je už príliš dlhý. V príklade sa zobrazuje s počtom uverejnených príspevkov.
/* 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' );
Jednoduché čítanie panela priebehu bez zásuvného modulu
Existuje niekoľko pluginov na pridanie lišty priebehu čítania vo WordPress a tiež doplnkov pre Elementor, ale s trochou kódu a filtrom GeneratePress Elements sa to dá ľahko urobiť oveľa ľahšie. Autorom tohto kódu je Somnath Sahu.
*Pretento príklad musíte použiť verziu GeneratePress Premium.
Najprv vytvoríme filter s prvkami pomocou tohto kódu.
<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>Nastavíme ju na pozíciu wp_head a zobrazíme ju v časti Záznamy / Všetky záznamy.
/*** 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;
}A takto sa tento kód zobrazí po zmene farby na zelenú.
V hornej časti obrazovky sa zobrazí ukazovateľ priebehu, ktorý vás bude sprevádzať pri posúvaní nadol a klesať pri posúvaní nahor.
Zmena loga len na konkrétnej stránke
Raz som to potreboval a raz som to našiel na webovej stránke Davida Lanaua.
Filter zobrazí iné logo len na stránke, ktorú určíte.
Použil som ho na umiestnenie iného loga na stránku kategórie, ktorá zoskupovala obsah konkrétnej témy.
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;
}Skrytie súrodeneckého panela v mobilnej verzii
Ak patríte k tým, ktorí stále používajú bočné panely a upustili od stránok AMP, takže používate natívnu mobilnú verziu GeneratePress s bočným panelom, pomocou tohto CSS ho môžete skryť len pre mobilnú verziu.
V takom prípade ho môžete pridať do súboru štýlov v detskej téme alebo z Vlastné / Ďalšie CSS.
Skryť pravý bočný panel
@media(max-width: 768px) {
#right-sidebar {
display: none;
}
}Skryť ľavý bočný panel
@media(max-width: 768px) {
#left-sidebar {
display: none;
}
}Skryť oboje
Skryte dva bočné panely.
@media(max-width: 768px) {
#right-sidebar, #left-sidebar {
display: none;
}
}Zobrazenie zobrazených obrázkov v slučke vľavo a vpravo
Ak používate tradičnú šablónu GeneratePress, napríklad Marketer alebo podobnú, pomocou tohto kódu môžete zobrazovať zobrazený obrázok striedavo vľavo alebo vpravo v slučke.
.post-image-aligned-left .type-post:nth-child(even) .inside-article .post-image {
margin-left: 2em;
float: right;
text-align: right;
}Tento kód som našiel na stránke aquigeneratepress.com, kde nájdete aj ďalšie užitočné triky. A tu je výsledok:
Prispôsobenie tlačidla "Čítať viac"
Podobne ako vyššie, toto CSS je určené pre tlačidlo "Čítať viac". Je to ten, ktorý tu používam a umiestňuje ho napravo pod úryvok na titulnej stránke.
a.read-more {
display: inline-block;
color: white !important;
padding: 10px;
border-radius: 10px;
float:right
}Štýl stránkovania záznamu
Filter a trochu CSS na získanie tohto vzhľadu pre stránkovanie záznamov na titulnej stránke. Odtiaľto si ho môžete upraviť podľa svojich predstáv.
Najprv je potrebné nahradiť slová Previous a Next symbolmi << a >> pomocou tohto filtra, ktorý môžete pridať do súboru functions.php vašej detskej témy alebo pomocou 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 '>>';
} );A potom CSS, pridané rovnakým spôsobom ako v predchádzajúcich prípadoch
/* 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;
}Vycentrovanie poľa vyhľadávača
Natívny vyhľadávač GeneratePress je trochu chabý, tu trochu CSS na prispôsobenie zariadeniam a jeho vycentrovanie.
/* 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%)
}
}
Veľkosť textu kategórií a štítkov
Ak zobrazíte kategórie a značky pod príspevkami, pridaním tohto CSS môžete zmeniť veľkosť a pokračovať v pridávaní CSS, aby ste im dali požadovaný štýl. Všetky triedy na ich úpravu nájdete v dokumentácii alebo v samotnom CSS, ale ak to nechcete komplikovať a chcete len zmeniť veľkosť, tu to nechám.
.entry-meta .cat-links a {
padding: 3px 5px;
font-size: 20px;
}
.entry-meta .tags-links a {
padding: 3px 1px;
font-size: 20px;
}
