- Girişlerde yayın tarihinin yanında güncelleme tarihi ve saatini gösterin
- Etiketler arasındaki virgülleri kaldırın
- Kategorilere ve etiketlere arka plan rengi ekleyin
- Her kategori veya etiket için farklı bir arka plan rengi gösterin
- Arşiv widget'ında yalnızca yılları göster
- Eklentisiz basit okuma ilerleme çubuğu
- Logoyu yalnızca belirli bir sayfada değiştirme
- Mobil sürümde sibebar'ı gizleme
- Öne çıkan görselleri sol ve sağ döngüde gösterme
- "Daha fazla oku" düğmesini özelleştirin
- Giriş sayfalama stili
- Arama motoru kutusunun ortalanması
- Kategori ve etiketlerin metin boyutu
İş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:
/* 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:
/* 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' );
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.
/*** 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.
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ç:
"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.
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%)
}
}
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;
}
