14 Корисних кодів для GeneratePress

 

Ось кілька корисних фрагментів коду. Це функції, фільтри та CSS, які я використовую або які мені колись знадобилися для шаблону Згенерувати пресушаблон, який я використовую і рекомендувати.

Деякі з них вийшли зі своїх форум підтримкифорум, невичерпне джерело рішень, від вашого документація та інші із запитів і пошуків у системі підтримки.

Показувати дату і час оновлення в публікаціях поруч з датою публікації

Цей фільтр показує дату і час оновлення публікацій 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, щоб створити анімований ефект для ваших текстових посилань, як на зображенні нижче:

14 Корисних кодів для GeneratePress

/* 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 ви можете змінювати кольори.

Вам доведеться спостерігати за поведінкою абзаців, кнопок та інших елементів, які містять посилання, щоб налаштувати їх так, щоб вони не виглядали недоречно.

Код належить Кайлу Ван Деусену (Kyle Van Deusen ), який, окрім The Admin Bar, веде цікавий блог під назвою 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
/* 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
/* 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 Códigos útiles para GeneratePress

Простий індикатор прогресу читання без плагіна

Існує кілька плагінів для додавання індикатора прогресу читання в WordPress, а також аддони для Елементорале за допомогою невеликого коду і фільтра GeneratePress Elements його можна легко зробити набагато легшим. Цей код знаходиться за адресою Сомнат Саху.

*Для цього прикладу ми використовуємо версію 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.

14 Корисних кодів для GeneratePress
Щоб відобразити його, просто додайте цей CSS в тема вашої дитини або в Налаштувати / Додатковий 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;
}

А так цей код відображається після зміни кольору на зелений.

Індикатор виконання з'явиться вгорі, він буде супроводжувати нас під час читання і збільшуватиметься, коли ми прокручуватимемо сторінку вниз, і зменшуватиметься, коли ми прокручуватимемо вгору.

14 Корисних кодів для GeneratePress

Змінюйте логотип лише на певній сторінці

Одного разу мені це знадобилося, і я знайшов це на сторінці Девід Ланау.

Фільтр показує інший логотип лише на вказаній вами сторінці.

Я використовував його, щоб розмістити інший логотип на сторінці категорії, яка групує вміст певної теми.

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 ви можете приховати її лише для мобільної версії.

У цьому випадку ви можете додати його до таблиці стилів у вашій дочірній темі або з користувацького / додаткового 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;
    }
}

Показувати вибрані зображення в лівому та правому циклі

Якщо ви використовуєте шаблон шаблону, наприклад, 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

Налаштувати кнопку "Читати далі"

Як і вище, цей CSS призначений для кнопки "Читати далі". Це той, який я використовую тут, і розмістив його праворуч під уривком на першій сторінці.

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

Пост-стилізація пагінації

Фільтр і трохи CSS, щоб отримати такий вигляд для пагінації дописів на головній сторінці. Звідси ви можете налаштувати його на свій розсуд.

14 Корисних кодів для GeneratePress

Перше, що потрібно зробити, це замінити слова Previous і Next на символи << і >> за допомогою цього фільтра, який ви можете додати в functions.php вашої дочірньої теми або за допомогою фрагмента коду.

/* 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%)
    }
}
14 Корисних кодів для GeneratePress

Розмір тексту категорій і тегів

Якщо ви відображаєте категорії та теги під публікаціями, додавши цей 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;

}

Suscríbete por email para recibir las viñetas y los artículos completos y sin publicidad

Artículos relacionados

Este blog se aloja en LucusHost

LucusHost, el mejor hosting