Ziyaretçilerin dikkatini çeken ve web sitenizde kalmalarını ve içeriğinizi görüntülemelerini sağlayan genellikle web sitenizdeki küçük şeylerdir. Bunlar nefes kesici bir görsel, orijinal bir başlık veya akılda kalıcı bir alt yazı kadar basit şeyler olabilir. Ziyaretçilere hitap eden ve ilgilerini uyandıran içerik, daha fazla olası satış ve yeni okuyucular, aboneler, satışlar veya dönüşümler elde etme olasılığının artması anlamına gelir. Bu yüzden bu makalede, sayfalarınıza ve yayınlarınıza WordPress altyazılarını nasıl ekleyeceğinizi göstereceğiz.
Fakat bu göründüğü kadar basit değil. WordPress web yöneticileri, sayfalara veya gönderilere altyazı eklemekte her zaman sorun yaşamıştır. Bunun nedeni, resimlerden ve başlıklardan farklı olarak, kullanabileceğiniz varsayılan bir WordPress işlevinin bulunmamasıdır. Bu engeli aşmak için bazı web yöneticileri altyazıları destekleyen temalar kullanırken diğerleri üçüncü taraf eklentileri ve/veya özel kod içeren çözümleri tercih etti.
Potansiyeli ve ziyaretçiler için çekiciliği göz önüne alındığında, bu konunun WordPress topluluğunda yeterince temsil edilmediğini düşünüyoruz, bu nedenle bu makaleyi oluşturmaya karar verdik. İçinde, bu konuyu daha küçük, daha yönetilebilir kavramlara bölerek WordPress sayfalarınıza ve yayınlarınıza nasıl altyazı ekleyeceğinizi göstereceğiz:
-
Altyazı seçeneği oluşturma
-
Altyazı gösteriliyor
-
Ek adımlar
Sayfalarınıza ve Gönderilerinize Altyazı Nasıl Eklenir?
WordPress sayfalarına ve gönderilerine altyazı eklemek için kullanacağımız yaklaşım, özel kod kullanmaktır. Altyazı eklemeye yönelik bu yaklaşımın, nesne yönelimli programlamada kullanılan kavramları içerdiğinden ileri düzey WordPress kullanıcıları için en uygun olduğunu lütfen unutmayın. Yine de, genel amacının herkes tarafından anlaşılması için bu makale için oluşturduğumuz kodun her bir bölümünü ayrıntılı olarak açıklayacağız. Sonunda hala derinlikte hissetmiyorsanız, sitenize WordPress altyazıları eklemeye çalışmadan önce biraz daha araştırma yapmanızı öneririz.
Kodu, hizmet ettikleri amaca göre iki bölüme ayırdık. Her iki kısmı da açıkladıktan sonra, kodu sitenize nasıl ekleyebileceğinizi ve hangi stilizasyon ayarlamalarını gerektirebileceğini tartışacağız. Hadi başlayalım.
Altyazı Seçeneğini Oluşturma
Kodun ilk kısmı, yeni seçenekler için özel bir bölüm ve bu bölüm içinde bir altyazı seçeneği oluşturmaya yarar. Bu kod aynı zamanda altyazı seçeneğinin sayfaların ve gönderilerin arka yüzünde görüntülenmesinden de sorumludur ve seçeneğin değerinin veri tabanına düzgün bir şekilde kaydedilmesini sağlar.
/**
* Calls the class on the post edit screen.
*/
function call_CustomOptions() {
new CustomOptions();
}
if ( is_admin() ) {
add_action( 'load-post.php', 'call_CustomOptions' );
add_action( 'load-post-new.php', 'call_CustomOptions' );
}
class CustomOptions {
/**
* Hook into the appropriate actions when the class is constructed.
*/
public function __construct() {
add_action( 'add_meta_boxes', array( $this, 'custom_options_add_meta_box' ) );
add_action( 'save_post', array( $this, 'save' ) );
}
/**
* Adds the meta box container.
*/
public function custom_options_add_meta_box( $post_type ) {
// Limit meta box to certain post types.
$post_types = array( 'post', 'page' );
if ( in_array( $post_type, $post_types ) ) {
add_meta_box(
'qodef_custom_options_meta_box',
__( 'Custom Options', 'textdomain' ),
array( $this, 'render_meta_box_content' ),
$post_type,
'advanced',
'high'
);
}
}
/**
* Save the meta when the post is saved.
*
* @param int $post_id The ID of the post being saved.
*/
public function save( $post_id ) {
// Check if our nonce is set.
if ( ! isset( $_POST['qodef_custom_box_nonce'] ) ) {
return $post_id;
}
$nonce = $_POST['qodef_custom_box_nonce'];
// Verify that the nonce is valid.
if ( ! wp_verify_nonce( $nonce, 'qodef_custom_box' ) ) {
return $post_id;
}
/*
* If this is an autosave, our form has not been submitted,
* so we don't want to do anything.
*/
if ( defined( 'DOING_AUTOSAVE' ) && DOING_AUTOSAVE ) {
return $post_id;
}
// Check the user's permissions.
if ( 'page' == $_POST['post_type'] ) {
if ( ! current_user_can( 'edit_page', $post_id ) ) {
return $post_id;
}
} else {
if ( ! current_user_can( 'edit_post', $post_id ) ) {
return $post_id;
}
}
// Sanitize the user input.
$mydata = sanitize_text_field( $_POST['qodef_new_field'] );
// Update the meta field.
update_post_meta( $post_id, '_subtitle_value', $mydata );
}
/**
* Render Meta Box content.
*
* @param WP_Post $post The post object.
*/
public function render_meta_box_content( $post ) {
// Add a nonce field so we can check for it later.
wp_nonce_field( 'qodef_custom_box', 'qodef_custom_box_nonce' );
// Use get_post_meta to retrieve an existing value from the database.
$value = get_post_meta( $post->ID, '_subtitle_value', true );
// Display the form using the current value.
?>
<label for="qodef_new_field">
<?php _e( 'Insert a custom subtitle: ', 'textdomain' ); ?>
</label>
<input type="text" id="qodef_new_field" name="qodef_new_field" value="<?php echo esc_attr( $value ); ?>"
size="45"/>
<?php
}
}
Bu kodu daha detaylı açıklayalım.
Basitleştirilmiş versiyonunu gözlemleyerek başlayacağız.
function call_CustomOptions() {
new CustomOptions();
}
if ( is_admin() ) {
add_action( 'load-post.php', 'call_CustomOptions' );
add_action( 'load-post-new.php', 'call_CustomOptions' );
}
class CustomOptions {
public function __construct() {
// Code goes here
}
public function custom_options_add_meta_box( $post_type ) {
// Code goes here
}
public function save( $post_id ) {
// Code goes here
}
public function render_meta_box_content( $post ) {
// Code goes here
}
}
Kodun bu sürümünden de görebileceğimiz gibi, CustomOptions adında oluşturduğumuz bir sınıfa işaret ediyor. Bu sınıfın dört yöntemi vardır: __construct, custom_options_add_meta_box, save ve render_meta_box_content. Daha sonra call_CustomOptions() işlevini kullanarak o sınıfın bir örneğini oluşturduk. Son olarak is_admin() koşulunun karşılanması şartıyla add_action() işlevini kullanarak call_CustomOptions() işlevini load-post.php ve load-post-new.php kancalarına bağladık. Yani, WordPress yönetim sayfalarından birindeyseniz, CustomOptions sınıfının bir örneği oluşturulacaktır.
Açıklanan kodun arkasındaki ana fikirle, CustomOptions sınıfına ait yöntemlerin her birinin amacını kısaca açıklayacağız.
custom_options_add_meta_box() işlevi, adından da anlaşılacağı gibi, Özel Seçenekler adında bir meta kutusu ekler, fakat bunu yalnızca sayfalar ve gönderiler için yapar. Bu durum içeriği işlemek için aşağıdaki yöntemi çağıran add_meta_box() işlevi kullanılarak yapılır.
Bu yöntem, render_meta_box_content() yöntemidir. Bunun amacı, get_post_meta() işlevini kullanarak veritabanından altyazı değerini almak ve onu, yanında oraya eklenen içeriği açıklayan bir etiket bulunan bir metin alanında görüntülemektir. Özel bir altyazı ekle: etiketinden bahsediyoruz. Ek olarak bu işlev, kaydetme işlemi sırasında doğrulama için kullanılan bir nonce alanı ekler.
save() yönteminin amacı, nonce doğrulamayı gerçekleştirmek ve ardından uygun veritabanı alanını eklenen altyazı ile güncellemektir. Esasen, eklenen altyazıyı kaydeder.
WordPress, her kullanıcı için ayrı ayrı oluşturulan ve yalnızca belirli bir süre için geçerli olan şifreli bir sayı ve harf kombinasyonunu temsil eden, nonces adı verilen güvenlik belirteçlerini kullanır. Bu boşluklar, güvenlik kontrollerini gerçekleştirmek için kullanılır ve ardından kodun ana kısmı yürütülür.
Bizim durumumuzda, yerine getirildiğinde, save() işlevine zaten sağlanan $post_id değişkeninin değerini döndüren koşullar ekledik. Bu durum kodun ana kısmına ulaşılmadığından hiçbir şey yapmamakla eşdeğerdir. Eklediğimiz koşullar şunlardır: düzgün ayarlanmaması, geçerli olmaması, geçerli sayfanın veya gönderinin otomatik kaydedilmesi ve mevcut kullanıcının o sayfayı veya gönderiyi düzenleme ayrıcalıklarına sahip olmaması. Tüm bu onaylanmamış kontrolleri geçtikten sonra, eklenen altyazıyı kaydetme kodu yürütülür.
Fakat altyazı değerini veri tabanına kaydetmeden önce temizlemeyi unutmamalısınız. Bunu yapmayı unutursanız, bir kullanıcının altyazı yerine veritabanına ve dolayısıyla web sitenize zarar verebilecek bir kod eklemesine izin vermiş olursunuz. Bu yüzden eklenen altyazının değerini önce sanitize_text_field() işlevini kullanarak sterilize ettik ve ardından update_post_meta() işlevini kullanarak kaydettik.
Son olarak __construct() yöntemi, CustomOptions sınıfımızın yapıcı yöntemidir. Amacı, sınıfın bir örneği oluşturulduğunda uygun yöntemleri çağırmaktır. Bu durumda, add_action() işlevini kullanarak iki yöntemi (custom_options_add_meta_box ve save) karşılık gelen kancalara kancalar.
Bu durum kodun ilk bölümünün açıklamasını sonlandırır.
Kodun bu kısmı ile yaptığımız şey, Özel Seçenekler adı verilen yeni bir seçenekler bölümü ve bu bölüm içinde bir altyazı seçeneği alanı oluşturmaktır. Ayrıca altyazı değerinin yalnızca sayfaların ve gönderilerin arka ucunda düzgün bir şekilde görüntülenmesini ve temizlemeden sonra veritabanında doğru bir şekilde saklanmasını sağladık. Daha doğrusu save() ve render_meta_box_content() metotları sayesinde altyazı değeri veritabanına kaydedilecek ve sayfa güncellemelerinden sonra alanda düzgün bir şekilde görüntülenecektir.
Kodu ekledikten, altyazıyı ekledikten ve ardından değişikliği kaydettikten sonra sayfalarınızın ve gönderilerinizin arka ucunun nasıl görüneceği aşağıda açıklanmıştır. Kodun nasıl ekleneceğiyle ilgili ayrıntılar için Ek adımlar başlıklı alt bölüme geçebilirsiniz.
Altyazıyı Görüntüleme
Kodun ikinci kısmı, daha önce oluşturulan metin alanının değerini almak ve ön uçta uygun yerde doğru şekilde görüntülemekle ilgilidir.
function display_custom_subtitle() {
/**
* Getting the current page id
* Additional conditional is to check if the current page belongs to any of the wp archive pages
* (archive, category, tag, date, etc.) and returns null
*/
$page_id = get_queried_object_id();
if ( is_archive() || is_search() || is_404() || ( is_front_page() && is_home() ) ) {
$page_id = null;
}
// Get the subtitle from the page, if that page has an existing page ID
if ( ! empty( $page_id ) ) {
$subtitle = get_post_meta( $page_id, '_subtitle_value', true );
// Display the subtitle, if inserted
if ( ! empty( $subtitle ) ) {
echo '<div class= "-page-subtitle">' . $subtitle . '</div>';
}
}
}
add_action( 'lekker_action_after_page_title_inner', 'display_custom_subtitle' );
Kodun bu bölümünün bileşimine daha yakından bakalım.
Ayrıştırıldığında, add_action() işlevi kullanılarak lekker_action_after_page_title_inner kancasına bağlanan display_custom_subtitle() adlı tek bir işlevi temsil ettiğini görebiliriz.
function display_custom_subtitle() {
// Some code goes here.
}
add_action( 'lekker_action_after_page_title_inner', 'display_custom_subtitle' );
Kodun çok önemli bir parçası olduğu için bu kancaya daha sonra döneceğiz. Fakat şimdilik, display_custom_subtitle() işlevinin içeriğini ayrıntılı olarak ele alacağız.
İlk olarak, geçerli sayfanın kimliğini depolayacağız veya şu anda sorgulanan nesnenin kimliğini alan get_queried_object_id() işlevini kullanarak $page_id değişkeni içinde yayınlayacağız. Bununla birlikte bu işlev, ihtiyaç duyduğumuzdan daha geniş bir vaka kümesindeki kimlikleri aldığından (sadece sayfalar ve gönderilerden daha fazla), hariç tutmak istediğimiz vakaları kontrol eden bir koşul ekledik. Ayrıca kimliği, yani $page_id değişkenini manuel olarak null (var olmayan anlamına gelir) olarak ayarlar. Hariç tutmayı seçtiğimiz durumlar, bir WordPress arşivi (kategori, etiket, tarih vb.) olan sayfa, arama sayfası, 404 sayfası ve En son gönderileriniz sayfasıdır (ana sayfa görüntülenecek şekilde ayarlandığında durum budur Ayarlar > Okuma bölümündeki son gönderileriniz).
$page_id = get_queried_object_id(); if ( is_archive() || is_search() || is_404() || ( is_front_page() && is_home() ) ) { $page_id =...