13 GeneratePress için faydalı kodlar

 
 

İşte bazı faydalı kod parçacıkları. Bunlar, şablon için kullandığım veya bir noktada ihtiyaç duyduğum işlevler, filtreler ve CSS’dir. GeneratePress, Ben kullanıyorum ve Tavsiye ederim.

Bazıları evlerinden çıkıp destek forumu, tükenmez bir çözüm kaynağıdır dokümantasyon ve destek sorguları ve aramaları için diğerleri.

Girişlerde yayın tarihinin yanında güncelleme tarihi ve saatini gösterin

Bu filtre, GeneratePress girişlerindeki güncelleme tarih ve saatini görüntüler. Bu, Ayarlar/Genel/Tarih Formatı/Özel bölümünde tarihi nasıl yapılandırdığınıza bağlıdır. Burada kullanılan durumda şu şekilde görünür: 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 );

Etiketler arasındaki virgülleri kaldırın

Hepsi bu kadar.

Etiketler arasında virgüllerin görüntülenmesini istemiyorsanız, bu filtre ile virgüller görüntülenmeyecektir.

Etiketleri renklendirmeye veya ayırmak için başka bir sembol kullanmaya karar verirseniz çok kullanışlıdır.

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

Kategorilere ve etiketlere arka plan rengi ekleyin

Bu CSS ile tüm kategorilere ve/veya tüm etiketlere istediğiniz rengi ekleyebilirsiniz.

Örnekteki CSS bunları şu şekilde görüntüleyecektir:

13 GeneratePress için faydalı kodlar
/* 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;
}

Her kategori veya etiket için farklı bir arka plan rengi gösterin

Bu CSS ile her kategoriye farklı bir renk verebileceksiniz. Bunu yapmak için, değiştirmek istediğiniz her kategori veya etiket için buna benzer bir parça yazmanız gerekecektir. İlk örnekte mavi arka plan ve beyaz metin eklediğimiz “wordpress” kategorisini kullanıyoruz. İkinci örnekte turuncu arka plan ve beyaz metin eklediğimiz “blog” etiketini kullanıyoruz.

Ve sonuç bu:

13 GeneratePress için faydalı kodlar
/* 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;
}

Arşiv widget’ında yalnızca yılları göster

Bu işlev, arşiv widget’ı açılır menüsünün aylar yerine yalnızca yılları göstermesine neden olur.

Yerel bir WordPress widget’ı üzerinde hareket ettiği için herhangi bir şablonla çalışır.

Blogunuz çok eskiyse ve aylık açılır menü zaten çok uzunsa kullanışlıdır. Örnekte, yayınlanan gönderi sayısı ile gösterilmektedir.

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

Eklentisiz basit okuma ilerleme çubuğu

WordPress’te okuma ilerleme çubuğu eklemek için birkaç eklenti ve ayrıca aşağıdakiler için eklentiler vardır Elementor, Ancak biraz kod ve GeneratePress Elements filtresi ile kolayca çok daha hafif hale getirilebilir. Bu kod Somnath Sahu.

*Bu örnek için GeneratePress’in GeneratePress sürümünü kullanmanız gerekiyor Premium .

İlk önce bir ile filtre Elements bu kodla.

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

Bunu wp_head konumuna ayarlıyoruz ve Entries / All entries altında gösteriyoruz.

13 GeneratePress için faydalı kodlar
Görüntülemek için şu CSS’yi eklemeniz yeterlidir çocuk temanız veya Özelleştir/ Ek CSS altında blogunuza uyacak şekilde şekillendirin.
/*** 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;
}

Ve bu kod, rengi yeşile değiştirdikten sonra bu şekilde görüntülenir.

İlerleme çubuğu ekranın üst kısmında görünecek, aşağı kaydırdıkça size eşlik edecek ve yukarı kaydırdıkça azalacaktır.

13 GeneratePress için faydalı kodlar

Logoyu yalnızca belirli bir sayfada değiştirme

Buna bir kez ihtiyacım oldu ve o sırada web sitesinde buldum. David Lanau.

Filtre yalnızca belirlediğiniz sayfada farklı bir logo gösteriyor ve ben bunu belirli bir temanın içeriğini gruplayan bir kategori sayfasına farklı bir logo koymak için kullandım.

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;

 }

Mobil sürümde sibebar’ı gizleme

Eğer hala kenar çubuğu kullananlardan biriyseniz ve AMP sayfaları, Bu nedenle, kenar çubuğuna sahip yerel GeneratePress mobil sürümünü kullanıyorsanız, bu CSS ile yalnızca mobil sürüm için gizleyebilirsiniz.

Bu durumda alt temanızdaki stil sayfasına veya Özel/Ek CSS’den ekleyebilirsiniz.

Sağ kenar çubuğunu gizle

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

Sol kenar çubuğunu gizle

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

İkisini de gizle

İki kenar çubuğunu gizleyin.

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

Öne çıkan görselleri sol ve sağ döngüde gösterme

Eğer bir şablon GeneratePress, Marketer veya benzeri gibi, bu kodla öne çıkan görüntüyü döngüde sola veya sağa dönüşümlü olarak görüntüleyebilirsiniz.

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

Bu kodu şurada buldum aquigeneratepress.com diğer yararlı ipuçlarını bulabileceğiniz yer. Ve işte sonuç:

13 GeneratePress için faydalı kodlar

“Daha fazla oku” düğmesini özelleştirin

Yukarıdaki gibi, bu CSS “Devamını oku” düğmesi içindir. Burada kullandığım bu ve ön sayfadaki alıntının sağ altına yerleştiriyor.

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

Giriş sayfalama stili

Ön sayfadaki girişlerin sayfalandırılması için bu görünümü elde etmek üzere bir filtre ve biraz CSS. Buradan sonra istediğiniz gibi yapabilirsiniz.

13 GeneratePress için faydalı kodlar

Yapmanız gereken ilk şey, alt temanızın functions.php dosyasına ya da Code Snippet ile ekleyebileceğiniz bu filtre ile Previous ve Next kelimelerini << ve >> sembolleri ile değiştirmek.

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

Ve sonra CSS, önceki durumlarda olduğu gibi aynı şekilde eklenir

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

Arama motoru kutusunun ortalanması

Yerel GeneratePress arama motoru biraz zayıf, burada cihazlara uyarlamak ve ortalamak için biraz CSS var.

/* 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%)
    }
}
13 GeneratePress için faydalı kodlar

Kategori ve etiketlerin metin boyutu

Kategorileri ve etiketleri yazıların altında gösterirseniz, bu CSS’yi ekleyerek boyutu değiştirebilir ve istediğiniz stili vermek için CSS eklemeye devam edebilirsiniz. Bunları değiştirmek için gerekli tüm sınıflar dokümantasyonda veya CSS’nin kendisinde bulunabilir, ancak karmaşıklaştırmak istemiyorsanız ve sadece boyutu değiştirmek istiyorsanız burada bırakıyorum.

.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