14 Полезни кодове за GeneratePress

 

Ето някои полезни части от кода. Това са функции, филтри и CSS, които използвам или са ми били необходими в даден момент за шаблона GeneratePress, който използвам и препоръчвам.

Някои от тях идват от форума за поддръжка, който е неизчерпаем източник на решения, от документацията, а други - от запитвания и търсения за поддръжка.

Показване на датата и часа на актуализация на вписванията до датата на публикуване

Този филтър показва датата и часа на актуализация на записите в GeneratePress. Това зависи от начина, по който сте конфигурирали датата в Настройки/Общо/Формат на датата/Настройки. В случая, използван тук, тя изглежда така: 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 );

Анимирани подчертани връзки

CSS, за да създадете анимиран ефект за текстовите си връзки, като този, който виждате в gif-а по-долу:

14 Полезни кодове за 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%;
}

Във функциите background-image и border-bottom можете да промените цветовете.

Ще трябва да наблюдавате поведението на параграфите, бутоните и другите елементи, които включват връзки, за да го коригирате така, че нищо да не е на място.

Кодът е дело на Кайл Ван Деусен, който освен администраторската лента има и интересен блог, наречен Generatetweaks, където публикува различни любопитни части от кода и шаблони за GeneratePress и GenerateBloks, като този тъмен режим за GP и GB.

Премахване на запетайките между таговете

Това е всичко.

Ако не искате запетаите да се показват между таговете, те няма да се показват с този филтър.

Това е много полезно, ако решите да оцветите етикетите или да използвате друг символ за разделянето им.

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

Добавяне на цвят на фона на категориите и етикетите

С този CSS можете да добавите какъвто искате цвят към всички категории и/или всички тагове.

CSS в примера ще ги покаже по следния начин:

14 Полезни кодове за 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;
}

Показване на различен цвят на фона за всяка категория или етикет

С този CSS ще можете да дадете различен цвят на всяка категория. За да направите това, ще трябва да напишете подобна част за всяка категория или таг, които искате да промените. В първия пример категорията"wordpress" се използва със син фон и бял текст. Във втория пример тагът"blog" се използва с оранжев фон и бял текст.

И ето го резултатът..:

14 Полезни кодове за 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;
}

Показване само на годините в уиджета на архива

Тази функция ще направи така, че падащото меню на джаджата за архив да показва само години вместо месеци. Тя работи за всеки шаблон, тъй като действа върху родна джаджа на WordPress. Полезна е, ако блогът ви е много стар и падащото меню с месеци вече е твърде дълго. В примера то се показва с броя на публикуваните публикации.

/* 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 Полезни кодове за GeneratePress

Проста лента за прочит на напредъка без плъгин

Съществуват няколко плъгина за добавяне на лента за напредъка на четенето в WordPress, както и добавки за Elementor, но с малко код и филтър GeneratePress Elements може лесно да се направи много по-лек. Този код е дело на Somnath Sahu.

*Затози пример трябва да използвате GeneratePress Premium версия.

Първо създаваме филтър с елементи с този код.

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

Настройваме го на позицията wp_head и го показваме в раздел Entries / All Entries.

За да го покажете, просто добавете този CSS в детската си тема или в Custom/Additional CSS и го оформете, както е подходящо за вашия блог.
/*** 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;
}

Ето как се показва този код след промяна на цвета на зелен.

Лентата за напредъка ще се появи в горната част на екрана, като ще ви придружава, докато превъртате надолу, и ще намалява, докато превъртате нагоре.

Промяна на логото само на определена страница

Имах нужда от това веднъж и го намерих веднъж на уебсайта на Дейвид Ланау.

Филтърът показва различно лого само на посочената от вас страница.

Използвах го, за да сложа различно лого на страница с категории, която групира съдържание на определена тема.

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;

 }

Скриване на лентата за прозорци в мобилната версия

Ако сте един от тези, които все още използват странични ленти и са се отказали от AMP страниците, така че използвате мобилната версия на GeneratePress със странична лента, с този CSS можете да я скриете само за мобилната версия.

В този случай можете да го добавите към набора със стилове в подрастващата тема или от Custom/Additional CSS.

Скриване на дясната странична лента

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

Скриване на лявата странична лента

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

Скрийте и двете

Скрийте двете странични ленти.

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

Показване на препоръчани изображения в цикъла вляво и вдясно

Ако използвате традиционен шаблон на GeneratePress като Marketer или подобен, с този код можете да покажете изображението, което се редува отляво или отдясно в цикъла.

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

Намерих този код на aquigeneratepress.com, където можете да намерите и други полезни трикове. И ето резултата:

14 Полезни кодове за GeneratePress 3

Персонализиране на бутона "Прочети повече"

Както и по-горе, този CSS е за бутона "Прочети повече". Той е този, който използвам тук, и го поставя вдясно под откъса на заглавната страница.

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

Стил на страниране на вписването

Филтър и малко CSS за получаване на този вид на странициране на статиите на заглавната страница. Оттук нататък можете да го направите по свой вкус.

14 Полезни кодове за GeneratePress 4

Първото нещо, което трябва да направите, е да замените думите Previous (Предишен) и Next (Следващ) със символите << и >> с помощта на този филтър, който можете да добавите във functions.php на вашата детска тема или с 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 '>>';
} );

И след това CSS, добавен по същия начин, както в предишните случаи

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

Центрирайте полето за търсачка

Родната търсачка на GeneratePress е малко неубедителна, тук има малко CSS, за да я адаптирате към устройствата и да я центрирате.

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

Размер на текста на категориите и етикетите

Ако покажете категориите и таговете под публикациите, като добавите този CSS, можете да промените размера им и да продължите да добавяте CSS, за да им придадете желания стил. Всички класове за промяната им можете да намерите в документацията или в самия CSS, но ако не искате да усложнявате и искате само да промените размера, тук го оставям.

.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 - Лиценз | Поверителност | Бисквитки | Карта | Държава | Реклама | Дейност | Changelog | Изгубен?