WordPress’teki bir yönetici kullanıcı, sayfalara, gönderilere, arşivlere veya özel kaynaklara bağlantılar ekleyerek gezinme menüleri oluşturabilir. Bu durum menü oluşturmak için ayrılmış özel bir yönetici sayfası olan Görünüm > Menüler bölümünde gerçekleştirilir. Kullanıcılar bu sayfada menü öğelerini sürükleyip bırakarak düzenleyebilir ve ekleyebilir, ayrıca menüyle ilgili önemli seçenekleri ve alanları doldurabilir.
Fakat yalnızca menü ekranının varsayılan işlevleri kullanılarak gerçekleştirilebileceklerin bir sınırı vardır. Neyse ki, bunları belirli WordPress menülerine özel öğeler ekleyerek genişletebilirsiniz. Örneğin menü öğelerinize koşullu mantık ekleyebilir veya bir menünün stilini veya işlevselliğini değiştiren ek özel alanlar oluşturabilirsiniz.
Bu yazıda, kod kullanarak bir menüye nasıl özel bir öğe ekleneceğini keşfedeceğiz. Bu makaledeki bilgiler, menülerinizi özel olarak oluşturmanıza izin vermenin yanı sıra, genel WordPress bilginizi genişletecek ve size benzer özel öğeleri nasıl uygulayacağınızı gösterecek. Özel öğe menüleri ekleme konusuna girerken aşağıdaki soruları yanıtlayacağız:
-
Belirli WordPress menülerine özel öğeler nasıl eklenir?
-
Mobil menüye arama formu ekleme
-
Özel bir menü öğesi açıklama alanı ekleme
Belirli WordPress menülerine özel öğeler nasıl eklenir?
Aşağıdaki bölümlerde, özel öğeler eklemenin iki farklı yolunu göstereceğiz. Biri yalnızca koda dayanırken, diğeri de WordPress kullanıcı arabiriminin kullanımını içerir. Lütfen bu makaledeki konuların orta ve ileri düzey WordPress kullanıcıları için en uygun olduğunu unutmayın. Ele alacağımız konulara ayak uydurmak için, HTML ve CSS’nin yanı sıra WordPress kancalarının ne olduğunu ve nasıl kullanıldığını anlamanız gerekir. Kodu ayrıntılı olarak açıklamak için elimizden gelenin en iyisini yapacağız, fakat bu konuyu tam olarak anlamak için yardıma ihtiyacınız varsa ek araştırma yapmalısınız.
Bu yazı için hazırladığımız örneklere geçmeden önce sitenizin yedeğini almanızı öneririz. Bu durum herhangi bir özel kod eklerken önemli bir güvenlik önlemidir. Kullanacağımız kod (ve buna benzer herhangi bir kod), FTP kullanarak alt temanızın functions.php dosyasına veya siteye özel bir eklentiye eklenmelidir. Bunu nasıl yapacağınızdan emin değilseniz, bağlantısını verdiğimiz kaynakları kontrol etmenizi ve emin olmadığınız noktaları gözden geçirmenizi öneririz.
Mobil menüye arama formu ekleme
Kod içeren WordPress menülerine özel öğeler eklemenin bir yolu, kodu doğrudan belirli bir WordPress menüsünün HTML’sine eklemektir. Bu durum WordPress 3.0’da tanıtılan wp_nav_menu_items filtre kancası kullanılarak yapılır. Özel bir özellik veya işlevsellik yalnızca kod kullanılarak eklendiğinden, bu yol WordPress’e yeni başlayanlar için biraz daha karmaşıktır. Nasıl kodlandığına bağlı olarak, tema içindeki tüm kayıtlı menü konumlarına veya tek başına belirli bir menü konumuna özel bir özellik veya işlevsellik eklenebilir.
Bu makale için oluşturulmuş basit bir kod parçasını kullanarak bunun nasıl yapıldığını size göstereceğiz. Bu snippet, mobil menünün sonuna özel bir arama formu eklemek için kullanılabilir. Kod aşağıda verilmiştir.
function qode_adding_a_search_form_to_the_mobile_menu( $items, $args ) {
if ( 'mobile-navigation' === $args->theme_location ) {
$items .= '<li class="qode-mobile-header-search">' . get_search_form() . '</li>';
}
return $items;
}
add_filter( 'wp_nav_menu_items', 'qode_adding_a_search_form_to_the_mobile_menu', 10, 2 );
Hadi parçalayalım.
Kod, wp_nav_menu_items filtre kancasına takılan qode_adding_a_search_form_to_mobile_menu() olarak adlandırdığımız bir işlevi temsil eder. Bu kodun amacı gerçekten çok basit. Temanızda mobile-navigation adlı kayıtlı bir menü konumunuz varsa, o konuma bağlı menüye ek bir menü öğesi eklenir. Bu menü öğesi, get_search_form() işlevini kullanan bir arama formu görüntüler.
get_search_form() işlevi, üst veya alt temanızda varsa, searchform.php dosyasının içeriğini arar ve görüntüler. Her iki konumda da yoksa, bunun yerine varsayılan bir arama formu görüntülenecektir. Bunun yanı sıra, bu özel kodu en iyi şekilde kullanabilmeniz için açıklamamız gereken iki şey daha var.
Öncelikle mobile-navigation diye bir menü konumu kullandık. Bu konum, kullandığımız Lekker temasına özeldir. Bu yüzden bu kod değiştirilmeden kopyalanıp yapıştırılmamalıdır. Bunun yerine, mobil gezinme bölümünü, kullandığınız tema içinde kayıtlı uygun bir menü konumu adıyla değiştirmeniz gerekecektir.
Bu görevde size yardımcı olması için, herhangi bir temanın kayıtlı menü konumu adını bulmak için kullanabileceğiniz basit bir numara var. Kendinizinkini bulmak için Görünüm > Menüler’e gidin ve sayfanın en altına gidin. Menü Ayarları bölümünde, belirli bir menü atayabileceğiniz mevcut tüm menü konumlarının etiketlerini göreceksiniz.
Fakat kayıtlı menü konum adlarını bulmak için bu etiketleri incelemeniz gerekecektir. Fare imlecinizi kullanmak istediğiniz menü konumunun üzerine getirin ve üzerine sağ tıklayın. Daha sonra beliren menüden İncele seçeneğini seçin.
Bu durum tarayıcınızın geliştirici araçlarını açacak ve sizi tam olarak sağ tıkladığınız HTML öğesinin üzerindeki Öğeler sekmesine yerleştirecektir. Daha sonra uygun menü konumu adını bulmak için sayfanın o bölümünün HTML yapısını incelemeniz gerekecektir. Neyse ki, aşağıdaki ekran görüntüsünden de görebileceğiniz gibi, uygun menü konumu adı üç yerde görüntüleneceğinden bu çok basittir.
Açıklığa kavuşturmak için, tarafınızda aynı işaretli kod bölümlerini göreceksiniz. Menü konumları biçiminde olacaklar[your-location-name] ve konumlar-konum-adınız. Lütfen dikkat, yer-adınız olan kısım uygun bir yedeğe sahip olacaktır. Bu yapının nedeni menü seçeneklerinin nasıl oluşturulduğudur. Bu durum WordPress çekirdek dosyalarından biri olan /wp-admin/nav-menus.php dosyasında bulunan kod sayesindedir.
Uygun bir menü konumu bulduktan sonra, kodun temanızda düzgün çalışması için kodumuzdaki mobil gezinme bölümünü uygun konumla değiştirmeniz gerekecektir.
Değinmek istediğimiz ikinci nokta, qode-mobile-header-search adlı özel CSS sınıfıyla ilgilidir. Bu CSS sınıfı, arama formunu görüntüledikten sonra stilize etmek için gereken CSS kodunu yapmamıza yardımcı olmak için eklenmiştir. Yeni oluşturduğunuz arama formunun stili büyük olasılıkla yalnızca kısmen olacak ve ek stilizasyon kodu gerektirecektir. Bunun gibi bir kod duruma göre yapıldığından, tüm web siteleri için geçerli olabilecek bir şey öneremeyiz. Fakat bu örneği göstermek için kullandığımız kodu paylaşacağız.
.qode-mobile-header-search{
margin-top: 20px !important;
position: relative;
}
.qode-mobile-header-search input {
width: 100%;
vertical-align: top;
padding-left: 20px;
padding-right: 78px;
font-size: 14px;
color: #333;
background-color: #fff;
border: 1px solid #000;
height: 50px;
line-height: 30px;
border-radius: 0;
outline: 0;
}
.qode-mobile-header-search button {
position: absolute;
top: 0;
right: 0;
width: 78px;
font-size: 15px;
padding: 10px 30px;
text-align: center;
color: #fff;
background-color: #000;
border: 0;
}
Bu stilizasyon kodunu ekledikten sonra aşağıdaki sonucu elde ettik (aşağıdaki ekran görüntüsünde gösterilmiştir). Arama formu, son mobil menü öğesinden sonra ilk kod parçacığı tarafından eklenir ve ikinci tarafından mobil menüde kullanılan görünümlerle eşleşecek şekilde stilize edilir.
Özel bir menü öğesi açıklama alanı ekleme
WordPress menülerine özel öğeler eklemenin ikinci yöntemi, tüm menü öğelerine bağlı özel alanlar oluşturmayı içerir. Daha sonra tek yapmanız gereken, belirli bir WordPress menüsündeki menü öğelerine ait özel alanları doldurmaktır ve bu, yalnızca o menüye özel bir öğe ekleyecektir.
Bir menüye özel öğeler eklemeye yönelik bu yaklaşım, temel oluşturduktan sonra çok daha kolaydır. Daha sonra yalnızca belirli bir menü öğesi alanını doldurmanız gerekecek ve özel içeriğiniz web sitesinde o özel alana bağlı yerde görüntülenecektir. Bununla birlikte kodlama açısından bu yöntem, daha önce tanımladığımızdan daha karmaşıktır. Karmaşıklığı, wp_nav_menu_item_custom_fields eylem kancasını tanıtan WordPress 5.4 güncellemesi ile kolaylaştırıldı. Size bu kancanın nasıl kullanılabileceğinin bir yolunu göstereceğiz.
Bu örnek için, herhangi bir menü öğesine Menü öğesi açıklaması adı verilen özel bir alan ekleyen bir kod parçacığı oluşturduk. Bu özel alana bir değer girilirse, alan web sitesinin ön yüzünde ilgili menü öğesi etiketinin altında görüntülenecektir. Bunu gerçekleştirmek için kullandığımız kodu aşağıda görebilirsiniz.
function qode_create_custom_menu_item_field( $item_id, $item ) {
$description_value = get_post_meta( $item_id, '_menu_item_description', true );
?>
<p class="description description-wide">
<label for="edit-menu-item-title-<?php echo esc_attr( $item_id ); ?>">
<?php _e( 'Menu item description' ); ?><br/>
<input type="text" id="edit-menu-item-description-<?php echo esc_attr( $item_id ); ?>"
class="widefat edit-menu-item-description"
name="menu_item_description[<?php echo esc_attr( $item_id ); ?>]"
value="<?php echo esc_attr( $description_value ); ?>"/>
</label>
</p>
<?php
}
add_action( 'wp_nav_menu_item_custom_fields', 'qode_create_custom_menu_item_field', 10, 2 );
function qode_save_custom_menu_item_field( $menu_id, $menu_item_db_id ) {
if ( isset( $_POST['menu_item_description'][ $menu_item_db_id ] ) && '' !== trim( $_POST['menu_item_description'][ $menu_item_db_id ] ) ) {
$sanitized_data = sanitize_text_field( $_POST['menu_item_description'][ $menu_item_db_id ] );
update_post_meta( $menu_item_db_id, '_menu_item_description', $sanitized_data );
} else {
delete_post_meta( $menu_item_db_id, '_menu_item_description' );
}
}
add_action( 'wp_update_nav_menu_item', 'qode_save_custom_menu_item_field', 10, 2 );
function qode_display_custom_menu_item_field( $title, $item ) {
if ( is_object( $item ) && isset( $item->ID ) ) {
$description = get_post_meta( $item->ID, '_menu_item_description', true );
if ( ! empty( $description ) ) {
$title .= '<p class="qode-mi-description">' . esc_html( $description ) . '</p>';
}
}
return $title;
}
add_filter( 'nav_menu_item_title', 'qode_display_custom_menu_item_field', 10, 2 );
Hadi parçalayalım.
Basitçe söylemek gerekirse, yukarıdaki kod, oluşturduğumuz ve daha sonra uygun WordPress kancalarına takılan üç işlevden oluşur. Bu işlevlerin her biri, belirli bir menü öğesine özel bir alan eklenmesinde önemli bir rol oynar. Bunları aşağıda birer birer tartışacağız.
qode_create_custom_menu_item_field() adlı ilk işlev, her menü öğesinde yeni seçenek alanını ve ayrıca web sitesinin arka ucundaki alanın değerini görüntülemek için kullanılır. Bu işlev, seçeneği arka uçta görüntülemeye hizmet eden HTML kodunu içerir. Bu kod iki şeyden oluşur. Biri, özel alanı açıklayan Menü öğesi açıklamasını belirten bir etiket, diğeri ise açıklamanın eklendiği bir giriş alanıdır. İkincisi, web sitenizin ön yüzünde seçilen menü öğesinin altında görüntülenecek açıklamayı ekleyeceğiniz yerdir. Ve get_post_meta() işlevinin kullanımı sayesinde, aynı etiket arka uçta seçenek değerini gösterecektir.
qode_create_custom_menu_item_field() işlevi daha sonra wp_nav_menu_item_custom_fields eylem kancasına bağlanır. Bu durum özel alanımızın tüm menü öğeleri için oluşturulmasını sağlar.
function qode_create_custom_menu_item_field( $item_id, $item ) {
$description_value = get_post_meta( $item_id, '_menu_item_description', true );
?>
<p class="description description-wide">
<label for="edit-menu-item-title-<?php echo esc_attr( $item_id ); ?>">
<?php _e( 'Menu item description' ); ?><br/>
<input type="text" id="edit-menu-item-description-<?php echo esc_attr( $item_id ); ?>"
class="widefat edit-menu-item-description"
name="menu_item_description[<?php echo esc_attr( $item_id ); ?>]"
value="<?php echo esc_attr( $description_value );...