Tabii ki bu temayı da güzelleştirmenin (hızdan kesmeden) yolları mevcut.
İşte bu hususta sizlere Generate Press temasını nasıl daha güzel bir hale getirebileceğinizi gösteren bir seriye başladık sizlerle.
Bugün sizlere Entry Meta bölümünü özelleştiren bir kod yapısı paylaşacağım.
Hemen before afterimizi ekleyelim.
Before:
After:
Görünüm olarak çok daha modern, güncel ve tatlı görünüme sahip bu bölümü nasıl yapabileceğimiz konusuna değinelim.
İlk olarak bize gereken ekstra bir eklenti mevcut buda Code Snippets. Bu eklenti sayesinde HTML ve PHP scriptlerini sitenizin belirlediğiniz alanlarında çalıştırabilirsiniz.
Bu eklentiyi kurduktan sonra bir kenarda dursun şuanlık buraya geri döneceğiz.
Şimdi Wordpress panelimizden Görünüm > Özelleştir > Yerleşim > Blog kısmına gelelim.
Burada Single sekmesini seçerek aşağıdaki seçenekleri açalım ve yayınlayalım.
Daha sonrasında before'daki görüntüyü elde etmiş olacağız içeriklerimizde.
Şimdi ise geri gelelim Code Snippets eklentisine.
Code Snippets eklentisini açtıktan sonra sizlere vereceğim kodları yerleştirin.
Gereken kodlar:
// Generate author image and link in separate containers
add_filter( 'generate_post_author_output', function() {
return sprintf( ' <div class="author vcard">%4$s</div><div class="author-wrap"><span class="label">Yazar</span><a href="%1$s" title="%2$s" rel="author"><span class="author-name" itemprop="name">%3$s</span></a></div>',
esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ),
esc_attr( sprintf( __( 'View all posts by %s', 'generatepress' ), get_the_author() ) ),
esc_html( get_the_author() ),
get_avatar( get_the_author_meta( 'ID' ) )
);
} );
// Filter meta items to display date and author
add_filter( 'generate_header_entry_meta_items', function() {
return array(
'date',
'author',
);
} );
// Filter post date to display latest date
add_filter( 'generate_post_date_output', function( $output, $time_string ) {
$time_string = '<span class="label">Son güncelleme: </span><time class="entry-date published" datetime="%1$s" itemprop="datePublished">%2$s</time>';
if ( get_the_time( 'U' ) !== get_the_modified_time( 'U' ) ) {
$time_string = '<span class="label">Son güncelleme: </span><time class="entry-date updated-date" datetime="%3$s" itemprop="dateModified">%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( '<div class="posted-on">%s</div> ',
$time_string
);
}, 10, 2 );Olması gereken görüntü:
Sonrasında Save and Active seçeneğine basınız.
Bu kısımı tamamladıktan sonra yeterli mi? Tabii ki değil.
Görünüm > Özelleştir > Ek CSS bölümüne giriş yapıyoruz.
Ek CSS kodlarımıza şu kodları ekleyelim:
.entry-meta:not(footer),
.entry-meta .posted-on,
.entry-meta .author-wrap {
display: flex;
}
.entry-meta {
align-items: center;
justify-content: center;
}
.entry-meta .posted-on,
.entry-meta .author-wrap {
flex-direction: column;
font-size: 16px;
padding: 0 25px;
flex: 1;
}
.entry-meta .posted-on {
text-align: right;
}
.entry-meta .label {
font-size: 14px;
color: #aaa;
margin-bottom: 0.25em;
}
.author img {
width: 60px;
height: 60px;
border-radius: 50%;
vertical-align: middle;
}Kaydedip yayınladıktan sonra işlemlerimiz tamamlanmıştır ve meta entry bölümünüz after kısmındaki gibi şaşalı bir hal almıştır.Hayırlı olsun
Profil fotoğrafı eklemek isterseniz ekstra eklenti kullanmanız gerekmekte ben kolay ve basit olduğu için WP User Profile Avatar eklentisini kullanıyorum kurcalayabilirsiniz.
Bu yazımızda kullandığımız kodlar benim eserim değil Generate Press'in kendi forumu üzerinden almış olduğum kodlardır:
https://generatepress.com/forums/top...ng-entry-meta/
Umuyorum ilginizi çeken, işinize yarayan bir içerik olmuştur.
Şuradan da asıl içeriğe erişebilirsiniz: GeneratePress Teması Nasıl Özelleştirilir?
İyi forumlar dilerim esen kalın
Serinin diğer içerikleri:
- FAQ Bölümü Rank Math
- İçerik & Makale Gölgesi
- Alıntılar
- Navigasyon Barı
