14 Užitečné kódy pro GeneratePress

Zobrazení data a času aktualizace v příspěvcích vedle data zveřejnění

Zde jsou užitečné úryvky kódu. Jedná se o funkce, filtry a CSS, které používám nebo jsem někdy potřeboval pro šablonu GeneratePressšablonu, kterou používám a doporučujeme.

Někteří z nich vyšli ze svých fórum podporyfórum, nevyčerpatelný zdroj řešení, od vašeho dokumentace a další z dotazů a vyhledávání podpory.

Zobrazení data a času aktualizace v příspěvcích vedle data zveřejnění

Tento filtr zobrazuje datum a čas aktualizace příspěvků v GeneratePress. Záleží na tom, jak máte nastaveno datum v Nastavení/Obecné/Formát data/Vlastní. V tomto případě to vypadá 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é podtržené odkazy

CSS vytvořit animovaný efekt pro textové odkazy, jako je ten, který vidíte na gifu níže:

/* 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 změnit barvy.

Budete muset sledovat chování odstavců, tlačítek a dalších prvků, které obsahují odkazy, a upravit je tak, aby nevypadaly nepatřičně.

Autorem kódu je Kyle Van Deusen, který má kromě Admin Baru také zajímavý blog Generatetweaks, kde publikuje několik zajímavých kusů kódu a šablon pro GeneratePress a GenerateBloks, jako je například tento tmavý režim pro GP a GB.

Odstranění čárek mezi značkami

To je vše.

Pokud nechcete mít mezi značkami čárky, tento filtr je nezobrazí.

Je velmi užitečné, pokud se rozhodnete značky barevně odlišit nebo použít jiný symbol k jejich oddělení.

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

Přidání barvy pozadí do kategorií a značek

Pomocí tohoto CSS můžete přidat libovolnou barvu všem kategoriím a/nebo všem značkám.

Příklad CSS by je zobrazil 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;
}

Zobrazení jiné barvy pozadí pro každou kategorii nebo označit

Pomocí tohoto CSS můžete každé kategorii přiřadit jinou barvu. Za tímto účelem budete muset napsat takovýto kus pro každou kategorii nebo značku, kterou chcete upravit. V prvním příkladu použijeme kategorii"wordpress", které přidáme modré pozadí a bílý text. Ve druhém příkladu použijeme značku"blog", které přidáme oranžové pozadí a bílý text.

A toto je výsledek..:

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

Zobrazení pouze let ve widgetu archivu

Tato funkce způsobí, že se v rozbalovacím seznamu widgetu archivu budou zobrazovat pouze roky místo měsíců. Funguje pro jakoukoli šablonu, protože funguje jako nativní widget WordPressu. Užitečné, pokud je váš blog velmi starý a rozbalovací seznam měsíců je již příliš dlouhý. V příkladu je zobrazen počet zveřejněných příspěvků.

/* 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ý ukazatel průběhu čtení bez zásuvného modulu

Existuje několik pluginů pro přidání panelu průběhu čtení ve WordPressu a také doplňky pro Elementorale s trochou kódu a filtrem GeneratePress Elements jej lze snadno upravit tak, aby byl mnohem lehčí. Tento kód je od Somnath Sahu.

*Pro tento příklad použijeme verzi GeneratePress Premium .

Nejprve vytvoříme filtr s prvky Elements s tímto kódem.

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

Nakonfigurujeme ji s pozicí wp_head a že se zobrazí v položce Položky / Všechny položky.

14 Užitečné kódy pro GeneratePress 4 — Pro jeho zobrazení stačí přidat tento CSS do **vaše podřízené téma** nebo v části Přizpůsobit / Další CSS a nastavte styl, který nejlépe vyhovuje vašemu blogu.

/*** 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 se tento kód zobrazí po změně barvy na zelenou.

V horní části se objeví ukazatel průběhu, který nás bude provázet během čtení a bude se zvětšovat, když budeme rolovat dolů, a zmenšovat, když budeme rolovat nahoru.

Změna loga pouze na určité stránce

Jednou jsem to potřeboval a jednou jsem to našel na stránce David Lanau.

Filtr zobrazí jiné logo pouze na zadané stránce.

Použil jsem ji k umístění jiného loga na stránku kategorie, která seskupuje obsah určitého tématu.

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;

 }

Skrytí sourozeneckého panelu v mobilní verzi

Pokud patříte k těm, kteří stále používají postranní panel a upustili jste od používání stránky AMPstránky, takže používáte nativní mobilní verzi GeneratePress s postranním panelem, pomocí tohoto CSS jej můžete skrýt pouze pro mobilní verzi.

V takovém případě jej můžete přidat do souboru stylů v podřízeném tématu nebo z Vlastní / Další CSS.

Skrýt pravý postranní panel

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

Skrýt levý postranní panel

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

Skrýt obojí

Skrýt oba postranní panely.

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

Zobrazení doporučených obrázků v levé a pravé smyčce

Pokud používáte šablona šablony, jako je Marketer nebo podobná, můžete pomocí tohoto kódu zobrazovat ve smyčce střídavě levý a pravý obrázek.

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

Tento kód jsem našel na adrese aquigeneratepress.com kde najdete další užitečné triky. A zde je výsledek:

Přizpůsobení tlačítka "Přečíst více"

Stejně jako výše, toto CSS je určeno pro tlačítko "Přečíst více". Je to ten, který používám zde a umístí se vpravo pod výpis na titulní stránce.

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

Stylování stránkování příspěvků

Filtr a trocha CSS pro získání tohoto vzhledu pro stránkování příspěvků na titulní stránce. Odtud ji můžete upravit podle svých představ.

Nejdříve je třeba nahradit slova Předchozí a Další symboly << a >> pomocí tohoto filtru, který můžete přidat do souboru functions.php vašeho podřízeného tématu nebo pomocí 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 pak CSS, přidané stejným způsobem jako v předchozích případech

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

Vystředění vyhledávacího pole

Nativní vyhledávač GeneratePressu je poněkud chabý, zde trochu CSS, aby se přizpůsobil zařízením a vycentroval.

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

Velikost textu kategorií a značek

Pokud zobrazujete kategorie a značky pod příspěvky, můžete přidáním tohoto CSS změnit jejich velikost a dále přidávat CSS, abyste je nastylovali podle svých představ. Všechny třídy pro jejich úpravu najdete v dokumentaci nebo v samotném CSS, ale pokud to nechcete komplikovat a chcete jen změnit velikost, nechám to zde.

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

}