WordPress'te Gönderi Meta Verileri Nasıl Görüntülenir ve Stillendirilir

Bir blog gönderisinde hiç bir tarih veya kategori fark ettiniz mi? Bu, bir blog gönderisinin önemli bir parçası olan "meta verisi gönder" olarak adlandırılan şeydir. Blogunuzun içerik parçalarıyla ilgili kısa ve öz meta veriler sağlamaya yardımcı olur.

Düzgün kullanılırsa meta sonrası kullanıcı deneyimini iyileştirebilir; bir ziyaretçinin yalnızca belirli bir konuyla ilgilendiğini varsayalım, o zaman kategori meta, tüm gönderileri görmek yerine belirli bir konudaki gönderileri görebilmeleri için kategoriye göre kısa gönderilere yardımcı olabilir. Veya yalnızca belirli bir yazarın gönderilerini görüntülemek istiyorsanız, post meta bunu yapmanıza yardımcı olabilir.

Bu yazıda, meta verilerinin nasıl görüntüleneceğini ve biçimlendirileceğini göstereceğim.

Meta Veri Gönderi Nedir ve Bloguma Nasıl Yardımcı Olabilir?

Post meta verileri bölümü, yayın tarihi, yazar adı, kategoriler, etiketler ve özel taksonomiler vb. gibi bir blog gönderisinin ilgili bilgilerini içerir.

Bir blogunuz varsa, gönderinizin meta verilerinin yerinde olduğundan emin olmalısınız, çünkü bu bilgiler bir ziyaretçinin gönderiyi daha iyi anlamasına yardımcı olabilir ve ayrıca sitenizde gezinmeyi kolaylaştırarak sayfa görüntülemelerinizi artırmaya yardımcı olabilir.

Ne Kadar Post Meta Verisi Görüntülemelisiniz?

Post meta veri konumu temadan temaya değişir. Bazıları bunu yazı başlığından önce, bazıları başlıktan sonra ve bazıları içeriğin hemen ardından gösterebilir.

Ancak çok fazla post meta parçası düzeni bozabilir. İdeal durum, yalnızca gerekli olduğunu düşündüğünüz bilgileri göstereceğiniz durumdur.

Şimdi post metayı nasıl özelleştirebileceğinizi ve ekleyebileceğinizi görelim.

Post Meta Verilerini Özelleştirme

Belirtildiği gibi, post meta konumu temadan temaya değişir. Burada belirli bir tema üzerinde çalışacağız – bu durumda varsayılan TwentySeventeen teması, bu nedenle kodun ve sayfaların temanızdan farklı olabileceğini unutmayın.

Modern temalarda post meta, şablon etiketleri sayfasında tanımlanır ve gerektiğinde çağrılır, ancak bazı temalarda post meta'nın doğrudan yazı başlığından önce veya sonra yerleştirildiğini görebilirsiniz.

Genel olarak, post meta etiketlerini index.php , single.php , arşiv.php ve içerik şablonu sayfalarında bulabilirsiniz.

Basit bir kod şöyle görünür:

Yayınlanan

 <?php the_time('F jS, Y'); ?> tarafından <?php the_author_posts_link(); ?> <?php edit_post_link(); ?>

Bu kod şuna benzer bir şey görüntüler : Yazar adına göre , düzenleme düğmesiyle (yalnızca kontrol panelinde oturum açtıysanız).

Ancak şimdi çoğu modern tema, meta sonrası işlemek için şablon etiketleri sayfasını kullanıyor. Nasıl çalıştığını görelim.

İlk olarak, herhangi bir değişiklik yapmadan önce bir alt tema oluşturmanız gerekir.

Tek bir gönderi sayfası üzerinde çalışacağız ve ön uçtan bu şekilde görünüyor.

Aşağıdakileri yapmak için yazar adından önce bir kullanıcı simgesi eklemek istediğimizi varsayalım:

TwentySeventeen temasında, tek bir gönderiyi görüntülemek için single.php şablonu kullanılır. Şimdi get_template_part'ı arayın ve oradaki şablon yoluna dikkat edin, bizim durumumuzda yol:

 get_template_part( 'şablon-parçaları/yazı/içerik', get_post_format());

Şimdi yola göre content.php dosyasını açın ve giriş-başlık bölümünü arayın.

 <header class="giriş-başlığı">

<?php

if ( 'post' === get_post_type() ) {

echo '<div class="giriş-meta">';

if ( is_single() ) {

yirmiyediteen_posted_on();

} başka {

yankı yirmiyediteen_time_link();

yirmiyediteen_edit_link();

};

echo '</div><!-- .entry-meta -->';

};

 

if ( is_single() ) {

the_title('<h1 class="entry-title">', '</h1>');

} elseif ( is_front_page() && is_home() ) {

the_title( '<h3 class="entry-title"><a href="' . esc_url( get_permalink() ) .'" rel="bookmark">', '</a></h3>' );

} başka {

the_title( '<h2 class="entry-title"><a href="' . esc_url( get_permalink() ) .'" rel="bookmark">', '</a></h2>' );

}

?>

</header>

<!-- .entry-header -->

yirmiseventeen_posted_on(); öğesini görebiliriz. post metayı görüntülemek için buraya fonksiyon çağrıldı, bu fonksiyonu düzenlememiz gerekiyor. Bu işlevi template-tags.php dosyasında bulacaksınız.

Bir ipucu: dosya adını ve yolunu almak için temanın function.php dosyasını kontrol edin.

Twentyseventeen_posted_on() öğesini arayın ve tüm işlevi kopyalayıp alt temanızın function.php dosyasına yapıştırın (alt temanızda function.php dosyanız yoksa aynı adla boş bir dosya oluşturun).

Burada harika yazı tipi simgelerini kullanacağız, WordPress'te harika yazı tipini kullanmanın en basit yolu Better Font Awesome eklentisini kurmaktır.

 if ( ! function_exists( 'twentyseventeen_posted_on' ) ) :

/**

* Geçerli post-tarih/saat ve yazar için meta bilgileri içeren HTML yazdırır.

*/

function yirmiyediteen_posted_on() {

// Yazar adını al; bir bağlantıya sarın.

$byline = sprintf(

/* çevirmenler: %s: yazar gönder */

__( '%s tarafından', 'yirmiyedi'),

'<span class="author vcard"><a class="url fn n" href="' . esc_url( get_author_posts_url( get_the_author_meta( 'ID' ) ) ) .'"><i class="fa fa-user" aria-hidden="true"></i>' . get_the_author() . '</a></span>'

);

// Son olarak tüm bunları sayfaya yazalım.

echo '<span class="posted-on">' . yirmiyediteen_time_link() . '</span><span class="byline"> ' . $byline . '</span>';

}

endif;

Artık yazar adının yanında bir kullanıcı simgesi görebilirsiniz.

Bir ipucu: Bu değişiklikleri doğrudan content.php dosyasında yapabilirsiniz ancak tema yapısını takip etmek iyi bir uygulamadır.

Post Meta Verileri Ekleme

Şimdiye kadar mevcut meta etiketleri özelleştirdik. Şimdi bir şeyler hazırlamak için – yazı başlığından sonra kategori ve etiketleri görüntülemek istediğimizi varsayalım.

Bunu yapmak için, ana temadan content.php dosyasını kopyalayın ve aynı dizin kalıbını koruyarak alt temanıza yapıştırın.

yirmiyedi > şablon bölümleri > gönderi > içerik.php'den yirmiyedi-çocuk'a > şablon bölümleri > gönderi > content.php

Şimdi yeni bir fonksiyon yazmanız gerekiyor.

Zor olduğunu mu düşünüyorsun? Aslında öyle değil, işte yapmanız gerekenler.

Çoğu tema, gönderide bir yerde kategori ve etiketler gösterir, sadece dosyayı bulmanız ve işlevinizde kodu kopyalamanız yeterlidir.

Örneğimizde, TwentySeventeen'de tema kategorisi ve etiketleri içerikten sonra yerleştirilir. Şimdi önceki iş akışımızı takip etmemiz gerekiyor.

content.php dosyasını açın ve kategori ve etiketler için hangi işlevin kullanıldığını görün.

 <?php

if ( is_single() ) {

yirmiyediteen_entry_footer();

}

?>

İşte yirmiyediteen_entry_footer().

Şimdi template-tags.php dosyasına gidin ve yirmiseventeen_entry_footer() dosyasını arayın.

if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :

/**

* Kategoriler, etiketler ve yorumlar için meta bilgileri içeren HTML yazdırır.

*/

işlev yirmiyediteen_entry_footer() {

 

/* çevirmenler: liste öğeleri arasında kullanılır, virgülden sonra boşluk bırakılır */

$separate_meta = __(',', 'yirmiyedi');

 

// Gönderiler için Kategoriler alın.

$categories_list = get_the_category_list( $separate_meta);

 

// Gönderiler için Etiketler alın.

$tags_list = get_the_tag_list('', $separate_meta);

 

// Eğer boş olacaksa .entry-footer çıktısını almak istemiyoruz, bu yüzden boş olduğundan emin olun.

if ( ( yirmiseventeen_categorized_blog() && $categories_list ) || $tags_list ) || get_edit_post_link() ) {

 

echo '<footer class="entry-footer">';

 

if ( 'post' === get_post_type() ) {

if ( ( $categories_list && yirmiseventeen_categorized_blog() ) || $tags_list ) {

echo '<span class="cat-tags-links">';

 

// Görüntülemeden önce birden fazla kategori olduğundan emin olun.

if ( $categories_list && yirmiseventeen_categorized_blog() ) {

echo '<span class="cat-links">' . yirmiseventeen_get_svg( dizi( 'icon' => 'klasör açık' ) ). '<span class="screen-reader-text">' . __( 'Kategoriler', 'yirmiyedi') . '</span>' . $categories_list . '</span>';

}

 

if ( $tags_list ) {

echo '<span class="tags-links">' . yirmiseventeen_get_svg( dizi( 'icon' => 'hashtag' ) ) . '<span class="screen-reader-text">' . __( 'Etiketler', 'yirmi onyedi' ) . '</span>' . $tags_list . '</span>';

}

 

yankı '</span>';

}

}

 

yirmiyediteen_edit_link();

 

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

Kategori ve etiketler için kodu bulun, ardından kodu kopyalayıp alt temanızın function.php dosyasına yeni bir işlev içinde yapıştırın, bunun gibi -

if ( ! function_exists( 'twentyseventeen_post_meta' ) ) ):

/**

* Geçerli post-tarih/saat ve yazar için meta bilgileri içeren HTML yazdırır.

*/

işlev yirmiyediteen_post_meta() {

/* çevirmenler: liste öğeleri arasında kullanılır, virgülden sonra boşluk bırakılır */

$separate_meta = __(',', 'yirmiyedi');

// Gönderiler için Kategoriler alın.

$categories_list = get_the_category_list( $separate_meta);

// Gönderiler için Etiketler alın.

$tags_list = get_the_tag_list('', $separate_meta);

echo '<span class="cat-tags-links">';

// Görüntülemeden önce birden fazla kategori olduğundan emin olun.

if ( $categories_list && yirmiseventeen_categorized_blog() ) {

echo '<span class="cat-links"><i class="fa fa-folder-open" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Kategoriler', 'yirmiyedi') . '</span>' . $categories_list . '</span>';

}

if ( $tags_list ) {

echo '<span class="tags-links"><i class="fa fa-tags" aria-hidden="true"></i><span class="screen-reader-text">' . __( 'Etiketler', 'yirmi onyedi' ) . '</span>' . $tags_list . '</span>';

}

yankı '</span>';

};

endif;

Hem kategoriler hem de etiketler için harika yazı tipi simgeleri kullandığımı görebilirsiniz.

Post Meta'nızı Şekillendirme

Meta etiketlerimizi istediğimiz yere yerleştirdiğimize göre, biraz stil ayarlamanın zamanı geldi.

CSS'nin temellerini biliyorsanız, çok basittir. Kategori ve etiketler bölümümüzü ayarlayalım.

 .entry-header .cat-tags-links {

yazı tipi boyutu: 14 piksel;

}

.entry-header .cat-links {

dolgu-sağ: 5px;

}

Şimdi farklı görünüyor.

Ancak, harika yazı tipi veya başka bir yazı tipi yerine kendi özel simgenizi göstermek istiyorsanız, resminizi CSS'de arka plan resmi olarak şu şekilde kullanabilirsiniz:

 .entry-header .cat-links {

arka plan: url(category-img.jpg) sol merkez tekrarsız;

dolgu-sol: 5px;

dolgu-sağ: 5px;

}

.entry-header .tags-links {

arka plan: url(tag-img.jpg) sol merkez tekrarsız;

dolgu-sol: 5px;

dolgu-sağ: 5px;

}

Bir kez bittiğinde, function.php dosyanızdan harika yazı tipi kodunu kaldırmayı unutmayın.

Herhangi Bir Gönderi Metasını Kaldır

Herhangi bir gönderi metasını kaldırmak çok basittir, sadece kodu bulun ve silin.

Örneğin, artık tek gönderi sayfamızı görüyorsanız, kategoriler ve etiketler artık iki bölümde görünmektedir. İçerikten sonra görüntülemek istemiyorsanız, o zaman sadece yirmiseventeen_entry_footer() işlevinden kategoriyi ve etiket kodunu silin.

Böylece yeni kod, alt temanızda böyle görünecektir.

 if ( ! function_exists( 'twentyseventeen_entry_footer' ) ) :

/**

* Kategoriler, etiketler ve yorumlar için meta bilgileri içeren HTML yazdırır.

*/

işlev yirmiyediteen_entry_footer() {

// Eğer boş olacaksa .entry-footer çıktısını almak istemiyoruz, bu yüzden boş olduğundan emin olun.

if ( get_edit_post_link() ) {

echo '<footer class="entry-footer">';

yirmiyediteen_edit_link();

echo '</footer> <!-- .entry-footer -->';

}

}

endif;

Çözüm

Görebildiğiniz gibi, post meta verileri birçok şekilde görüntülenebilir, ancak en iyisi, önce tema yapınız hakkında temel bir anlayış edinmeniz ve ancak mümkünse buna göre ayarlamalar yapmanızdır. Bu, temanızın bozulma olasılığını en aza indirir. PS bir yedekleme oluşturmayı unutmayın.

Umarım bu gönderi, meta verilerin nasıl çalıştığını anlamanıza yardımcı olmuştur, ancak ilgili sorularınız varsa, yorumlarınızı aşağıya gönderin.