14 Przydatne kody dla GeneratePress

Pokaż datę i godzinę aktualizacji w postach obok daty publikacji

Oto kilka przydatnych fragmentów kodu. Są to funkcje, filtry i CSS, których używam lub które w pewnym momencie były potrzebne dla szablonu GeneratePressszablon, którego używam i polecam.

Niektórzy z nich wyszli ze swoich forum wsparciaforum, niewyczerpane źródło rozwiązań, od Pana dokumentacja i inne z zapytań i poszukiwań pomocniczych.

Pokaż datę i godzinę aktualizacji w postach obok daty publikacji

Ten filtr pokazuje datę i czas aktualizacji na postach GeneratePress. To zależy od tego, jak skonfigurował Pan datę w Ustawieniach/Ogólne/Format daty/Zwykłe. W zastosowanym tu przypadku wygląda to następująco: 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 );

Animowane podkreślone linki

CSS, aby stworzyć efekt animacji dla Państwa linków tekstowych, tak jak to widać na poniższym gifie:

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

W background-image i border-bottom można zmienić kolory.

Trzeba obserwować zachowanie akapitów, przycisków i innych elementów zawierających linki, aby dostosować je tak, aby nie wyglądały nie na miejscu.

Autorem kodu jest Kyle Van Deusen, który oprócz The Admin Bar prowadzi ciekawy blog Generatetweaks, gdzie publikuje kilka ciekawych fragmentów kodu i szablonów dla GeneratePress i GenerateBloks, jak np. ten tryb ciemny dla GP i GB.

Usuwanie przecinków między znacznikami

To wszystko.

Jeżeli nie życzą sobie Państwo przecinków między tagami, ten filtr nie będzie ich pokazywał.

Jest to bardzo przydatne, jeżeli zdecydują się Państwo na pokolorowanie znaczników lub zastosowanie innego symbolu do ich oddzielenia.

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

Dodanie koloru tła do kategorii i tagów

Za pomocą tego CSS można dodać dowolny kolor do wszystkich kategorii i/lub wszystkich tagów.

Przykład CSS pokazywałby je w ten sposób:

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

Pokaż inny kolor tła dla każdej kategorii lub tag

Dzięki temu CSS można nadać każdej kategorii inny kolor. W tym celu trzeba będzie napisać taki fragment dla każdej kategorii lub tagu, który chce się zmodyfikować. W pierwszym przykładzie używamy kategorii"wordpress", do której dodajemy niebieskie tło i biały tekst. W drugim przykładzie używamy tagu"blog", do którego dodajemy pomarańczowe tło i biały tekst.

A oto wynik..:

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

Pokazać tylko lata w widżecie archiwum

Ta funkcja spowoduje, że w widżecie archiwum będą pokazywane tylko lata zamiast miesięcy. Działa dla każdego szablonu, ponieważ działa na zasadzie natywnego widgetu WordPress. Przydatne, jeśli Państwa blog jest bardzo stary, a rozwijana lista miesięcy jest już zbyt długa. W przykładzie jest to pokazane za pomocą liczby opublikowanych postów.

/* 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' );

Prosty pasek postępu czytania bez wtyczki

Istnieje kilka wtyczek do dodania paska postępu czytania w WordPressie, a także dodatki do Elementorale dzięki odrobinie kodu i filtrowi GeneratePress Elements można go łatwo uczynić znacznie lżejszym. Ten kod jest przez Somnath Sahu.

*Do tego przykładu używamy wersji Premium GeneratePress .

Najpierw tworzymy filtr z elementami z tym kodem.

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

Konfigurujemy go z pozycją wp_head i aby był widoczny w Wpisy / Wszystkie wpisy.

14 Przydatne kody dla GeneratePress 4 — Aby go wyświetlić, wystarczy dodać ten CSS w **państwa motyw dziecięcy** lub w Dostosuj / Dodatkowe CSS i nadać mu styl, który najlepiej pasuje do Państwa bloga.

/*** 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 tak wygląda ten kod po zmianie koloru na zielony.

Pasek postępu pojawi się u góry, będzie nam towarzyszył podczas czytania i będzie rósł, gdy będziemy przewijać w dół, a malał, gdy będziemy przewijać w górę.

Zmiana logo tylko na określonej stronie

Potrzebowałem tego raz i znalazłem to na stronie David Lanau.

Filtr pokazuje inne logo tylko na określonej przez Państwa stronie.

Wykorzystałem go do umieszczenia innego logo na stronie kategorii, która grupowała treści o określonej tematyce.

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;

 }

Ukryć sibebar w wersji mobilnej

Jeżeli jest Pan jednym z tych, którzy nadal używają sidebaru i zrezygnował Pan z strony AMPstron, więc używa Pan natywnej wersji mobilnej GeneratePress z paskiem bocznym, za pomocą tego CSS może Pan go ukryć tylko dla wersji mobilnej.

W tym przypadku można go dodać do arkusza stylów w motywie potomnym lub z Custom / Additional CSS.

Ukryj prawy pasek boczny

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

Ukryj lewy pasek boczny

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

Ukryj oba

Ukryć oba paski boczne.

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

Pokaż wyróżnione zdjęcia w lewej i prawej pętli

Jeśli używają Państwo szablon szablon taki jak Marketer lub podobny, za pomocą tego kodu można pokazać w pętli obrazek wyróżniony na przemian z lewej i prawej strony.

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

Znalazłem ten kod na stronie aquigeneratepress.com gdzie można znaleźć inne przydatne sztuczki. A oto wynik:

Dostosowanie przycisku "Czytaj więcej"

Podobnie jak powyżej, ten CSS jest przeznaczony dla przycisku "Czytaj więcej". Jest to ten, którego używam tutaj i umieszczam go po prawej stronie pod fragmentem na stronie głównej.

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

Stylizacja paginacji postów

Filtr i trochę CSS, aby uzyskać taki wygląd paginacji postów na stronie głównej. Od tego momentu może Pan dopasować go do swoich potrzeb.

Pierwszą rzeczą, którą należy zrobić, jest zastąpienie słów Previous i Next symbolami << i >> za pomocą tego filtra, który można dodać w pliku functions.php Państwa motywu dziecięcego lub za 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 następnie CSS, dodany w taki sam sposób jak w poprzednich przypadkach

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

Wyśrodkowanie pola wyszukiwania

Natywna wyszukiwarka GeneratePress jest trochę kiepska, tutaj trochę CSS, aby dostosować ją do urządzeń i wyśrodkować.

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

Wielkość tekstu kategorii i tagów

Jeżeli wyświetlają Państwo kategorie i tagi pod postami, to dodając ten CSS można zmienić ich rozmiar i dalej dodawać CSS, aby nadać im pożądany styl. Wszystkie klasy do ich modyfikacji można znaleźć w dokumentacji lub w samym CSS, ale jeżeli nie chce Pan komplikować, a chce Pan tylko zmienić rozmiar, to zostawiam to tutaj.

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

}