Online Kimya Özel Dersi Al

ÜCRET

600₺

KONU

KİMYA Dilediğin konu!

TARİH

Sen seç! Saat: Sen seç!

Hemen yer ayırt

4.1 Yönetim Panelinde Tema Ayarları İçin Menü Oluşturmak

wordpress tema yapımı

Her tema yazarı, temasının bazı ayarlarının değiştirebilmesini ister. WordPress’te bunu yapmanın iki yolu vardır:

  1. Yönetim paneline, tema ayarları için, yeni bir menü eklemek
  2. Yönetim panelinde zaten var olan, Görünüm->Özelleştir menüsünü geliştirmek (Customizer API)

Bu dersin konusu, 1. yol olarak bahsettiğimiz, yönetim paneline yeni bir menü eklemektir. Yönetim paneline ekleyeceğimiz menü, kullanacağımız fonksiyona göre bir ana menü de olabilir bir alt menü de.

Yönetim panelinde bir menü oluşturmadan önce, bir ana menü mü yoksa bir alt menü mü istediğimize karar vermeliyiz. Bir ana menü eklemek demek, menü listesine yeni bir menü daha eklemek demektir, bir alt menü eklemek ise, var olan ana menülerin birine yeni bir alt menü eklemek demektir. Aşağıda, ana menüleri ve Ayarlar ana menüsünün alt menülerini görmektesiniz.

Yönetim Panelinde Ana Menüler ve Alt Menüler

Ana Menüler İçin Kullanılan Fonksiyonlar

  • add_menu_page(): Yönetim paneline yeni bir ana menü ekler.
  • remove_menu_page(): Yönetim panelindeki bir ana menüyü siler.

add_menu_page() Fonksiyonu

Ana menü eklerken, add_menu_page() fonksiyonu kullanılır. Bu fonksiyon, şu parametreleri alır:

functions.php

add_menu_page( $sayfa_başlığı, $menü_texti, $minimun_yetki, $menu_link_adi, $fonksiyon= '', $ikon_url = '', $yerleşim= null )

Parametreleri daha yakından incelersek:

  • $sayfa_başlığı: (Zorunludur.) String türünde bir değişkendir. Menüye tıklandığında, açılan sayfanın, tarayıcı başlığıdır.
  • $menü_texti: (Zorunludur.) String türünde bir değişkendir. Menünün görünen adıdır.
  • $minimun_yetki: (Zorunludur.) String türünde bir değişkendir. Menüyü kullanmak için gereken en az yetkiyi ifade eder. Genelde manage_options seviyesinde ayarlanır.
  • $menu_link_adi: (Zorunludur.) String türünde bir değişkendir. Menüye başka bir fonksiyondan ulaşmak istersek bu adı kullanırız.
  • $fonksiyon: Menü sayfası için içerik eklemeye yarayan fonksiyondur.
  • $ikon_url: String türünde bir değişkendir. Menü için kullanılacak ikonun url adresidir.
    • Base64 formatında kodlanmış ve renk şemasına uygun olarak renklendirilmiş bir SVG dosyası olabilir. Şu şekilde başlamalıdır: ‘data:image/svg+xml;base64,‘
    • WordPress’in Dashiconları‘nı kullanabilirsiniz. Mesela ‘dashicons-chart-pie‘ gibi bir değer girebilirsiniz.’
    • Boş bırakmak istiyorsanız ‘none‘ değeri vermelisiniz. Boş iken de, div.wp-menu-image elemanına, CSS ile ulaşıp bir ikon ekleyebilirsiniz.
  • $yerleşim: Integer türünde bir değişkendir. Bu değişkene bir sayı girerek, eklenen menünün, nereye yerleştirileceğini tarif etmiş olursunuz. Yapmanız gereken şey, hangi iki menü arasını seçmek istiyorsanız, o iki menünün, yerleşim numaraları arasında bir sayı seçmektir. Aşağıda, yönetim panelinde bulunan, her menünün yerleşim numarası verilmiştir:
    • 2 – Başlangıç
    • 4 – ayraç
    • 5 – Yazılar
    • 10 – Ortam
    • 15 – Bağlantılar (Artık Yok)
    • 20 – Sayfalar
    • 25 – Yorumlar
    • 59 – ayraç
    • 60 – Görünüm
    • 65 – Eklentiler
    • 70 – Kullanıcılar
    • 75 – Araçlar
    • 80 – Ayarlar
    • 99 – ayraç
    • Eğer WordPress’i çok siteli olarak kullanıyor iseniz, Ağ Yöneticisi sayfasındaki menülerin yerleşim numaraları da şöyledir:
    • 2 – Başlangıç
    • 4 – ayraç
    • 5 – Siteler
    • 10 – Kullanıcılar
    • 15 – Temalar
    • 20 – Eklentiler
    • 25 – Ayarlar
    • 30 – Güncellemeler
    • 99 – ayraç
  • add_menu_page() fonksiyonu ile bir ana menü eklediğinizde, bu menüye bir alt menü eklemek için add_submenu_page() fonksiyonu kullanılır.

Alt Menü Eklemek İçin Kullanılan Fonksiyonlar

  • add_dashboard_page(): Yönetim panelindeki, “Başlangıç” menüsüne bir alt menü ekler.
  • add_posts_page(): Yönetim panelindeki, “Yazılar” menüsüne bir alt menü ekler.
  • add_media_page(): Yönetim panelindeki, “Ortam” menüsüne bir alt menü ekler.
  • add_links_page(): Yönetim panelindeki, “Bağlantılar” menüsüne bir alt menü ekler.
  • add_pages_page(): Yönetim panelindeki, “Sayfalar” menüsüne bir alt menü ekler.
  • add_comments_page(): Yönetim panelindeki, “Yorumlar” menüsüne bir alt menü ekler.
  • add_theme_page(): Yönetim panelindeki, “Görünüm” menüsüne bir alt menü ekler.
  • add_plugins_page(): Yönetim panelindeki, “Eklentiler” menüsüne bir alt menü ekler.
  • add_users_page(): Yönetim panelindeki, “Kullanıcılar” menüsüne bir alt menü ekler.
  • add_management_page(): Yönetim panelindeki, “Araçlar” menüsüne bir alt menü ekler.
  • add_options_page(): Yönetim panelindeki, “Ayarlar” menüsüne bir alt menü ekler.
  • add_submenu_page(): Bir ana menüye alt menü ekler.
  • remove_submenu_page(): Alt menü siler.

add_submenu_page() Fonksiyonu

Yönetim paneline, bir alt menü eklemenin iki yolundan biri, add_submenu_page() fonksiyonunu kullanmaktır. Bu fonksiyon şöyle tanımlanır:

funcitons.php

add_submenu_page( $ana_menüsünün_link_adi, $sayfa_başlığı, $menü_texti, $minimun_yetki, $menü_link_adı, $fonksiyon = '' )

Parametreleri daha yakından incelersek:

  • $ana_menüsünün_link_adı: (Zorunludur.) String türünde bir değişkendir. Alt menünün bağlı olacağı ana menünün link adıdır veya ana menünün dosya adıdır. Aşağıda, bu parametrenin, dosya adı olarak kullanımını görüyorsunuz:
    • Başlangıç menüsüne bir alt menü eklenecekse: add_submenu_page('index.php', ...)
    • Yazılar menüsüne bir alt menü eklenecekse: add_submenu_page('edit.php', ...)
    • Ortam menüsüne bir alt menü eklenecekse: add_submenu_page('upload.php', ...)
    • Sayfalar menüsüne bir alt menü eklenecekse: add_submenu_page('edit.php?post_type=page', ...)
    • Yorumlar menüsüne bir alt menü eklenecekse: add_submenu_page('edit-comments.php', ...)
    • Özel bir yazı tipine bir alt menü eklenecekse: add_submenu_page('edit.php?post_type=your_post_type', ...)
    • Görünüm menüsüne bir alt menü eklenecekse: add_submenu_page('themes.php', ...)
    • Eklentiler menüsüne bir alt menü eklenecekse: add_submenu_page('plugins.php', ...)
    • Kullanıcılar menüsüne bir alt menü eklenecekse: add_submenu_page('users.php', ...)
    • Araçlar menüsüne bir alt menü eklenecekse: add_submenu_page('tools.php', ...)
    • Ayarlar menüsüne bir alt menü eklenecekse: add_submenu_page('options-general.php', ...)
  • $sayfa_başlığı: (Zorunludur.) String türünde bir değişkendir. Menüye tıklandığında, açılan sayfanın, tarayıcıda görünen başlığıdır.
  • $menu_texti: (Zorunludur.) String türünde bir değişkendir. Menünün görünen adıdır.
  • $minimun_yetki: (Zorunludur.) String türünde bir değişkendir. Menüyü kullanmak için gereken en az yetkiyi ifade eder. Genelde manage_options seviyesinde ayarlanır.
  • $menu_link_adi: (Zorunludur.) String türünde bir değişkendir. Menüye başka bir fonksiyondan ulaşmak istersek bu adı kullanırız.
  • $fonksiyon: Menü sayfası için içerik eklemeye yarayan fonksiyondur.

add_options_page() Fonksiyonu ve Benzerleri

Yönetim paneline, bir alt menü eklemenin diğer yolu da, kurulum ile birlikte gelen ana menülere, bir alt menü eklemektir. Bunu için, add_submenu_page() fonksiyonunun dışında kalan alt menü ekleme fonksiyonları kullanılır. Bu fonksiyonların hepsi aynı parametreler ile çalışır, bu yüzden kullanımları aynıdır.

Alt menü ekleyen fonksiyonlardan, örnek olarak, add_options_page() fonksiyonunu açıklanacaktır.

add_options_page() fonksiyonu, yönetim panelinde bulunan ayarlar menüsüne bir alt menü ekler ve aşağıdaki parametreleri alır:

functions.php

add_options_page(
        $sayfa_başlığı, // Tarayıcıda görünen başlık
        $menü_texti,    // Menünün adı
        $minimun_yetki, // Menüyü kullanacak kişinin minimum yetkisi
        $menu_link_adi, // Diğer fonksiyonlardan bu menüye ulaşmak için gerekn isim
        $fonksiyon= ''  // Menü sayfasının içeriğini oluşturan fonksiyon
    );

Menü Ekleyen Fonksiyonların Kullanımı

Bir yönetim menüsü eklemek için, takip etmeniz gereken üç adım vardır. Bunlar:

  • Adım 1: Adını dilediğiniz gibi koyarak, bir fonksiyon oluşturun ve menü eklemek için kullanılan fonksiyonlardan hangisi ile çalışacaksanız onu, bu fonksiyonun içinde kullanın.
  • Adım 2: Oluşturduğunuz bu fonksiyonu, admin_menu kancasıyla çağırın. (Eğer ağ yöneticisi için bir menü ekliyorsanız da network_admin_menu kancasıyla çağırın):
    add_action('admin_menu', 'olusturdugunuz_foksiyonun_adi')
  • Adım 3: Menü eklemek için kullanılan fonksiyonların, parametrelerinden biri, yine bir başka fonksiyondur. Bu parametrede, dilediğiniz bir fonksiyon adı vermeniz gerekmektedir. İşte, adını verdiğiniz bu fonksiyon ile, eklediğiniz menünün sayfa içeriğini oluşturulacaksınız.

Temam İçin Bir Yönetim Menüsü Eklemeli Miyim?

Genel olarak, temalar için, yönetim panelinde bir ana menü oluşturmak tavsiye edilmez. Tabii temanız, alışılagelmişin dışında, farklı bir yaklaşım ile tasarlanmış ise, ve bir çok seçeneği var ise, bir ana menü açmak mantıklı olabilir.

Temanız için bir menü açmadan önce, WordPress’in size sunduğu menülerin ve tema yapılandırma seçeneklerinin yetersiz kaldığından emin olmalısınız. Eminim, WordPress’in zaten sunduğu bir tema ayarını, ikinci bir defa oluşturmak istemezsiniz. Mesela, yeni bir yazı tipi eklediğinizde, WordPress, bu yazı tipi için, yönetim panelinde, otomatik olarak bir ana menü oluşturur. Ayrıca, tema fonksiyonları ile, Yönetim paneli: Görünüm->Özelleştir menüsüne, bir çok standart tema kontrolünü zaten ekleyebiliyorsunuz.

Eğer bir ana menünün gerekli olmadığına karar verirseniz, o zaman alt menü ekleyen fonksiyonlardan hangisini kullanacağınızı düşünmeniz gerekecektir.

Yönetim Paneline Menü Ekleme Örnekleri

Bu derste vereceğimiz örnekleri, temanızın functions.php dosyasında deneyebilirsiniz. İsterseniz, daha düzenli olmak için, tema ayarlarını ilgilendiren bütün dosyaları ayrı bir klasörde de toplayabilirsiniz.

a) Bir Alt Menü Ekleme Örneği

Yukarıda bahsedilen 3 adımı uygulayarak, yönetim panelimizdeki Ayarlar menüsüne, “İlk Temam” adında bir alt menü ekleyeceğiz.

Ayarlar menüsü, bir alt menü eklemeden önce şu şekilde görünür:

Yönetim Paneli Ayarlar Menüsünün Doğal Hali

Yukarıdaki adımlara göre, ayarlar menüsüne bir alt menü ekliyoruz:

functions.php

<?php
/** Adım 2'de bahsedilen kodlar */
add_action( 'admin_menu', 'ilk_temamin_yonetim_menusu' );
 
/** Adım 1'de bahsedilen kodlar */
function ilk_temamin_yonetim_menusu() {
    add_options_page(
        'İlk Temam Ayarlar Sayfası',
        'İlk Temam',
        'manage_options',
        'ilk-temam-menusunun-link-adi',
        'ilk_temamin_ayarlari'
    );
}
 
/** Adım 3'de bahsedilen kodlar */
function ilk_temamin_ayarlari() {
    if ( !current_user_can( 'manage_options' ) ) { // Yönetici değilsen
        wp_die( __( 'Üzgünüm. Bu sayfaya sadece yöneticiler girebilir.' ) );
    }
    echo 'Yapmak istediğiniz ayarları bu fonksiyonu kullanarak yapacaksınız.';
}
?>

Bu kodlardan sonra, artık, İlk Temam adında bir alt menünüz var:

Yönetim Panelinde Ayarlar Menüsüne Bir Alt Menü Ekledik

Ve eklediğiniz alt menüye tıkladığınızda, şöyle bir sayfa göreceksiniz:

İlk Temam Adındaki Alt Menüye Tıkladığımızda Açılan Sayfa

functions.php

add_options_page(
        'İlk Temam Ayarlar Sayfası',
        'İlk Temam',
        'manage_options',
        'ilk-temam-menusunun-link-adi',
        'ilk_temamin_ayarlari'
    );

fonksiyonunu kullandığımız için, alt menü eklemiş ve bu alt menüyü de Ayarlar menüsünün altına eklemiş olduk. Bu fonksiyona girdiğimiz parametreleri, sırasıyla, şöyle açıklayabiliriz:

  • “İlk Temam Ayarlar Sayfası”: Sayfanın başlığıdır: <title>İlk Temam Ayarlar Sayfası</title>. Bu başlık, safa içeriğinizin değil sayfanızın başlığıdır ve tarayıcınızda görünür, sayfa içeriğinizde görünmez. Yani aşağıdaki gibi olur:
Menü Ekleyen Fonksiyonların Sayfa Başlığı Parametresi
  • “İlk Temam”: Menünün metnidir.
  • “manage_options”: Bu menüyü kullanabileceklerin sahip olması gereken en düşük yetkidir.
  • “ilk-temam-menusunun-link-adi”: Eklenen menünün kimliğidir. Bu menüyü, gerektiğinde, bu isimle çağırırız.
  • “ilk_temamin_ayarlari”: Eklediğiniz menüye tıklandığında açılan sayfanın, içeriğini oluşturmaya yarayan fonksiyonun adıdır. Bu fonksiyonun adını siz belirliyorsunuz. Verdiğiniz bu ad ile bir fonksiyon oluşturmazsanız, bir hata mesajı alırsınız.

Tercüme edilebilir şekilde istiyorsanız, aynı fonksiyonu şu şekilde de kullanabilirsiniz:

functions.php

add_options_page(
        __('İlk Temam Ayarlar Sayfası', 'textdomain'),
        __('İlk Temam', 'textdomain'),
        'manage_options',
        'ilk-temam-menusunun-link-adi',
        'ilk_temamin_ayarlari'
    );

b) Bir Ana Menü Ekleme Örneği

Bir ana menü ekliyoruz:

functions.php

<?php
/** Adım 2'de bahsedilen kodlar */
add_action( 'admin_menu', 'ilk_temamin_yonetim_menusu' );
 
/** Adım 1'de bahsedilen kodlar */
function ilk_temamin_yonetim_menusu() {
    add_menu_page(
        __('İlk Temam Ayarlar Sayfası', 'textdomain'),
        __('İlk Temam', 'textdomain'),
        'manage_options',
        'ilk-temam-ana-menu-baglanti-adi',
        'ilk_temamin_ayarlari',
	'dashicons-welcome-widgets-menus',
        3
    );
}
 
/** Adım 3'de bahsedilen kodlar */
function ilk_temamin_ayarlari() {
    if ( !current_user_can( 'manage_options' ) ) { // Yönetici değilsen
        wp_die( __( 'Üzgünüm. Bu sayfaya sadece yöneticiler girebilir.' ) );
    }
    echo 'Yapmak istediğiniz ayarları bu fonksiyonu kullanarak yapacaksınız.';
}
?>

Bu kodları ekledikten sonra, yönetim paneliniz şöyle görünecektir:

Yönetim Paneline Bir Ana Menü Ekledik

c) Bir Ana Menü ve Alt Menülerini Ekleme Örneği

Bir ana menü ve o ana menüye ait bir alt menü ekliyoruz:

functions.php

/** Adım 2'de bahsedilen kodlar
* Bu menüyü sadece yöneticiler görebilir.
* İsterseniz add_action() fonksiyonun önündeki koşulu kaldırabilirsiniz.
* Böylece yönetim paneline girebilen herkes bu menüyü görecektir.
*/
if ( !current_user_can( 'manage_options' ) ) { // Yönetici değilsen
   add_action( 'admin_menu', 'ilk_temamin_yonetim_menusu' );
}
 
/** Adım 1'de bahsedilen kodlar */
function ilk_temamin_yonetim_menusu() {
    add_menu_page(
        __('İlk Temam Ayarlar Sayfası', 'textdomain'),
        __('İlk Temam', 'textdomain'),
        'manage_options',
        'ilk-temam-ana-menu-baglanti-adi',
        'ilk_temamin_ayarlari',
	'dashicons-welcome-widgets-menus',
        3
    );
	
    add_submenu_page(
	'ilk-temam-ana-menu-baglanti-adi',
	__('Ayarlar Sayfası Başlığı', 'textdomain'),
        __('Ayarlar', 'textdomain'),
	'manage_options',
	'ayarlar-link-adi',
	'ayarlar_alt_menusu_fonksiyonu'
	);
	
}

/** Adım 3'de bahsedilen kodlar */
function ayarlar_alt_menusu_fonksiyonu(){
        echo "<br />";
	echo "Burası ayarlar alt menü sayfası";
}

/** Adım 3'de bahsedilen kodlar */
function ilk_temamin_ayarlari() {
    echo "<br />";
    echo 'Yapmak istediğiniz ayarları bu fonksiyonu kullanarak yapacaksınız.';
}

Yukarıdaki kodlar, yönetim paneline şu menüleri ekler:

Yönetim Paneline Alt Menüsü Olan Bir Ana Menü Ekledik

Dikkat ederseniz, “İlk Temam” ana menüsü, alt menü olarak da oluşmuştur. Bir alt menü oluşturduğunuzda, WordPress, ana menüyü ilk alt menü olarak kullanır. Bu özellik bazen hoşa gider bazen gitmez. Eğer bu durumdan hoşlanmadıysanız, aşağıdaki kodları kullanarak, ana menünün yinelenmesini engelleyebilirsiniz:

functions.php

/** Adım 2'de bahsedilen kodlar
* Bu menüyü sadece yöneticiler görebilir.
* İsterseniz add_action() fonksiyonun önündeki koşulu kaldırabilirsiniz.
* Böylece yönetim paneline girebilen herkes bu menüyü görecektir.
*/
if ( current_user_can( 'manage_options' ) ) {
   add_action( 'admin_menu', 'ilk_temamin_yonetim_menusu' );
}
 
/** Adım 1'de bahsedilen kodlar */
function ilk_temamin_yonetim_menusu() {

    // fonksiyon parametresini boş bıraktığımıza dikkat
    add_menu_page(
        __('İlk Temam Ayarlar Sayfası', 'textdomain'),
        __('İlk Temam', 'textdomain'),
        'manage_options',
        'ilk-temam-ana-menu-baglanti-adi',
        '',
	'dashicons-welcome-widgets-menus',
        3
    );
	
    add_submenu_page(
	'ilk-temam-ana-menu-baglanti-adi',
        __('Ayarlar Sayfası Başlığı', 'textdomain'),
        __('Ayarlar', 'textdomain'),
	'manage_options',
	'ayarlar-alt-menusu-link-adi',
	'ayarlar_alt_menusu_fonksiyonu'
   );
	
   // Ana menünün alt menüye dönüşmesini engeller
   remove_submenu_page(
	'ilk-temam-ana-menu-baglanti-adi',
	'ilk-temam-ana-menu-baglanti-adi'
   );
}

/** Adım 3'de bahsedilen kodlar */
function ayarlar_alt_menusu_fonksiyonu(){
	echo "<br />";
	echo "Burası ayarlar alt menü sayfası";
}

Artık, İlk Temam ana menüsüne tıklandığında Ayarlar alt menüsü sayfası açılacaktır:

Yönetim Paneline Alt Menüsü Olan Bir Ana Menü Ekledik

d) Ana Menü ve Çoklu Alt Menü Ekleme Örneği

functions.php

// Yönetim paneli menüsü için kanca
add_action('admin_menu', 'mt_add_pages');
 
// Yukarıdaki kancanın tetiklediği fonksiyon
function mt_add_pages() {

// Ayarlar menüsüne "Test Ayarlar" adına bir alt menü ekler:
add_options_page(__('Test Ayarlar Başlığı','textdomain'), __('Test Ayarlar','textdomain'), 'manage_options', 'test-ayarlar-link-adi', 'ilktemam_ayarlar_alt_menusu_fonksiyonu');
 
// Araçlar menüsüne "Test Araçlar" adına bir alt menü ekler:
add_management_page( __('Test Araçlar Başlığı','textdomain'), __('Test Araçlar','textdomain'), 'manage_options', 'test-araçlar-link-adi', 'ilktemam_araçlar_alt_menusu_fonksiyonu');
 
// "Test Anamenü" adında bir ana menü ekle (düşük tavsiye):
add_menu_page(__('Test Anamenü Sayfası Başlığı','textdomain'), __('Test Anamenü','textdomain'), 'manage_options', 'test-ana-menu-link-adi', 'ilktemam_test_anamenu_fonksiyonu' );
 
// "Test Anamenü" menüsüne, "Test Altmenü" adında bir alt menü ekler:
add_submenu_page('test-ana-menu-link-adi', __('Test Altmenü Sayfa Başlığı','textdomain'), __('Test Altmenü','textdomain'), 'manage_options', 'test-altmenu-likn-adi', 'test_alt_menu_fonskiyonu');
 
// "Test Anamenü" menüsüne, "Test Altmenü2" adında bir alt menü ekler:
add_submenu_page('test-ana-menu-link-adi', __('Test Altmenü-2 Sayfa Başlığı','textdomain'), __('Test Altmenü-2','textdomain'), 'manage_options', 'test-altmenu2-link-adi', 'test_alt_menu2_fonskiyonu');
}
 
// Test Ayarlar alt menüsünün sayfa içeriğini oluşturur.
function ilktemam_ayarlar_alt_menusu_fonksiyonu() {
    echo "</pre>
    <h2>" . __( 'Test Ayarlar Menüsü Sayfası', 'textdomain' ) . "</h2>
    ";
}
 
// Test Araçlar alt menüsünün sayfa içeriğini oluşturur.
function ilktemam_araçlar_alt_menusu_fonksiyonu() {
    echo "</pre>
    <h2>" . __( 'Test Araçlar Menüsü Sayfası', 'textdomain' ) . "</h2>
    <pre>
    ";
}
 
// "Test Anamenü" menüsünün sayfa içeriğini oluşturur.
function ilktemam_test_anamenu_fonksiyonu() {
    echo "</pre>
    <h2>" . __( 'Test Anamenü Sayfası', 'textdomain' ) . "</h2>
    <pre>
    ";
}
 
// "Test Altmenü" menüsünün sayfa içeriğini oluşturur.
function test_alt_menu_fonskiyonu() {
    echo "</pre>
    <h2>" . __( 'Test Altmenü Menüsü Sayfası', 'textdomain' ) . "</h2>
    <pre>
";
}
 
// "Test Altmenü-2" menüsünün sayfa içeriğini oluşturur.
function test_alt_menu2_fonskiyonu() {
    echo "</pre>
    <h2>" . __( 'Test Altmenü-2 Menüsü Sayfası', 'textdomain' ) . "</h2>
    <pre>
";
}

e) Çalışan Bir Ayar Menüsü Ekleme

Yönetim panelinde, Ayarlar menüsüne, temamız için bir alt menü ekliyoruz. “Tema Ayarları” adını verdiğimiz bu menü sayfasına, size ilham vermesi için, üç farklı form elemanı ekliyoruz. (Form elemanları, bir WordPress uygulaması olan Settings API kullanılarak eklenmiştir.) Aşağıda, bu işi yapan kodlar verilmiştir:

functions.php

// Bir alt menü ekliyoruz
add_action( 'admin_menu', 'ilk_temamin_ayarlar_menusu' );
function ilk_temamin_ayarlar_menusu() {
	
	/*
	* WordPress'in Ayarlar menüsüne "Tema Ayarları" adında bir alt menü ekledik
	* Sayfanın link adını "ayarlar-sayfasi" olarak belirledik.
	* Bu link adını, WordPress Settings API fonksiyonlarında kullanacağız ve bu sayede oluşturduğumuz form elemanlarının bu sayfada görünmesini sağlamış olacağız.
	* Sayfa link adının kullanılacağı Settings API fonksiyonları: add_settings_section(), add_settings_field(), register_setting(), settings_fields(), do_settings_sections()
	*/
	add_options_page(
	__('İlktemam Ayarları Yapılır', 'textdomain'),
        __('Tema Ayarları', 'textdomain'),
	'manage_options',
	'ayarlar-sayfasi',		 
        'tema_ayarlari_foksiyonu'
	);
}

// "Tema Ayarları" sayfasına, WordPress Settings API ile bir form ekliyoruz
function tema_ayarlari_foksiyonu(){
	?>
    <div class="wrap">
        <h2>Tema Ayarları</h2>
        <form action="options.php" method="POST">
            <?php settings_fields( 'ayarlar-sayfasi' ); //WordPress bir takım gizli alanlar ekledi ?>
            <?php do_settings_sections( 'ayarlar-sayfasi' ); // "ayarlar-sayfasi" adına kaydettiğimiz bütün ayar gruplarını, alanları ile birlikte getirdik ?>
            <?php submit_button(); // Bizim için bir "Değişiklikleri Kaydet" butonu ekler ?>
        </form>
    </div>
    <?php
	
}

 // ------------------------------------------------------------------
 // WordPress Settings API -Ayarlar Uygulaması- başlıyor.
 // ------------------------------------------------------------------
 
 // Ayarlarımızı bir fonksion içine aldık ve bu fonksiyonu "admin_init" kancası ile çalıştırdık
 add_action( 'admin_init', 'ilktemam_ayarlar_sayfasi' );
 function ilktemam_ayarlar_sayfasi() {
 	// "ayar_grubu_1" adıyla bir ayar grubu oluşturduk. Bu adı kullanarak bu gruba ayar alanları ekleyeceğiz
 	add_settings_section(
		'ayar_grubu_1',
		__('Ayar Grubu 1', 'textdomain'),
		'ilktemam_setting_section_1_fonksiyonu',
		'ayarlar-sayfasi'
	);
 	
 	// "ayar_grubu_1" grubuna bir "tema_ayarinin_adi" adında bir ayar alanı ekledik
 	add_settings_field(
		'tema_ayarinin_adi',
		__('Ayar 1', 'textdomain'),
		'tema_ayarinin_fonksiyonu',
		'ayarlar-sayfasi',
		'ayar_grubu_1'
	);
	
	// "ayar_grubu_1" grubuna "tema_ayarinin_adi2" adında bir ayar alanı ekledik
 	add_settings_field(
		'tema_ayarinin_adi2',
		__('Ayar 2', 'textdomain'),
		'tema_ayarinin_fonksiyonu2',
		'ayarlar-sayfasi',
		'ayar_grubu_1'
	);
	
	// "ayar_grubu_2" adıyla bir ayar grubu oluşturduk. Bu adı kullanarak bu gruba ayar alanları ekleyeceğiz
	add_settings_section(
		'ayar_grubu_2',
		__('Ayar Grubu 2', 'textdomain'),
		'ilktemam_setting_section_2_fonksiyonu',
		'ayarlar-sayfasi'
	);
	// "ayar_grubu_2" grubuna "tema_ayarinin_adi3" adında bir ayar alanı ekledik
	add_settings_field(
		'tema_ayarinin_adi3',
		__('Ayar 3', 'textdomain'),
		'tema_ayarinin_fonksiyonu3',
		'ayarlar-sayfasi',
		'ayar_grubu_2'
	);
 	
 	// Ayaraları teker teker kaydediyoruz.
 	register_setting( 'ayarlar-sayfasi', 'tema_ayarinin_adi' );
 	register_setting( 'ayarlar-sayfasi', 'tema_ayarinin_adi2' );
 	register_setting( 'ayarlar-sayfasi', 'tema_ayarinin_adi3' );
 } // ilktemam_ayarlar_sayfasi()
 
  
 // ------------------------------------------------------------------
 // add_settings_section() Fonksiyonunun Parametresindeki Fonksiyonlar (Callback Functions)
 // Bu fonksiyonlar, ayar gruplarının başlıklarının altına bilgi vermek için kullanılabilir.
 // ------------------------------------------------------------------
 
 // Ayar Grubu 1
 function ilktemam_setting_section_1_fonksiyonu() {
 	echo '<p>Burası temanın şu özelliklerini kontrol eder:</p>';
 }
 // Ayar Grubu 2
 function ilktemam_setting_section_2_fonksiyonu() {
 	echo '<p>Burası da temanın şu şu özelliklerini kontrol eder:</p>';
 }
 
 // ------------------------------------------------------------------
 // add_settings_field() Fonksiyonun Parametrelerindeki Fonksiyonlar (Callback Functions)
 // İşte asıl form elemanlarını bu fonksiyonlar ile oluşturuyoruz
 // ------------------------------------------------------------------
 
 //
 // Ayar 1: Bir checkbox true/false seçeneği oluşturduk
 //
 function tema_ayarinin_fonksiyonu() {
 	echo '<input name="tema_ayarinin_adi" id="tema_ayarinin_adi" type="checkbox" value="1" class="code" ' . checked( 1, get_option( 'tema_ayarinin_adi' ), false ) . ' /> Açıklama yazısı';
 }
 
 //
 // Ayar 2: Bir text alanı oluşturduk
 //
 function tema_ayarinin_fonksiyonu2() {
 	echo '<input name="tema_ayarinin_adi2" id="tema_ayarinin_adi2" type="text" value="'.get_option( 'tema_ayarinin_adi2' ).'" class="code" /> Bir başka açıklama yazısı';
 }
 
 //
 // Ayar 3: Bir selection alanı oluşturduk
 //
function tema_ayarinin_fonksiyonu3() {
	?>
        <select name="tema_ayarinin_adi3">
          <option value="secenek-1" <?php selected(get_option('tema_ayarinin_adi3'), "secenek-1"); ?>>Seçenek 1</option>
          <option value="secenek-2" <?php selected(get_option('tema_ayarinin_adi3'), "secenek-2"); ?>>Seçenek 2</option>
          <option value="secenek-3" <?php selected(get_option('tema_ayarinin_adi3'), "secenek-3"); ?>>Seçenek 3</option>
          <option value="secenek-4" <?php selected(get_option('tema_ayarinin_adi3'), "secenek-4"); ?>>Seçenek 4</option>
        </select>
	<br /><label for="tema_ayarinin_adi3">Bu ayar şu işe yarar...</label>
   <?php
 }

Bu kodlar ile şöyle bir sayfa ortaya çıkar:

WordPress Settings API ile Yönetim Panelinde Ayarlar Menüsüne Bir “Tema Ayarları” Alt Menüsü Ekledik

Peki yaptığımız ayarları, temamızda nasıl kullanacağız? Mesela, Ayar 2 için girilen metni bir değişkene aktarmak:

$ayar_2yi_getir = get_option('tema_ayarinin_adi2');

kodunu yazmak kadar basittir. Dikkat edin, ayarın adını parametre olarak girip, get_option() fonksiyonu ile istediğimiz ayarı getirebilir ve istediğimiz şablon dosyasında kullanabiliriz.

Sayfa Kancası Soneki

Menü eklemek için kullanılan fonksiyonlar, add_menu_page(), add_submenu_page(), add_options_page()… gibi, oluşturdukları sayfa için bir “sayfa kancası soneki” (page hook suffix) döndürürler. Bu özelliği, adında bu soneki taşıyan bazı kancalarda kullanarak, dinamik aksiyonlar (add_action()) oluşturabiliriz.

Mesela, load-{sayfa_kancası_soneki} kancası, bir fonksiyonun, sonekte belirtilen sayfa yüklendiğinde çalışmasını sağlar ve add_*_page() fonksiyonunun döndürdüğü eki, isminin sonuna alabilir. Aşağıda, buna örnek bir kodlama verilmiştir:

functions.php

<?php
 
// Burada, temanız ile ilgili bazı ayarların yapılıp yapılmadığını kontrol edebilir
// ve if( get_option('ayarin_adi') ) gibi koşullu bir ifade kullanabilirsiniz.
// Bu örnekte, 'admin_panelinde_gorunecek_notlar' fonksiyonu ile yönetim panelinde sabit olarak görünecek bir not oluşturduk.
add_action( 'admin_notices', 'admin_panelinde_gorunecek_notlar' );

// Admin panelinde bir not yazısının görünmesini istiyoruz
function admin_panelinde_gorunecek_notlar() {
    echo '
    <div class="updated fade" id="notice">
      Temanızda bazı ayarlar yapabilir ve temanızı kendinize uygun olarak şekillenedirebilirsiniz.
   </div>
    ';
}
 

// Temamız için, yönetim panelinde bir alt menü ekliyoruz.
add_action('admin_menu', 'ilktemam_bir_alt_menu_ekle');
function ilktemam_bir_alt_menu_ekle() {
    // Ayarlar menüsüne bir alt menü ekliyoruz. Aynı zamanda alt menü ekleyen fonksiyonun, eklediği sayfaya ait
    // son eki alıp $hook_suffix değişkenine atıyoruz.
    $hook_suffix = add_options_page('Sayfa Başlığı', 'Menu adı', 'manage_options', 'eklenen-sayfanin-link-adi', 'menu_sayfasi_icerigi_fonksiyonu');
    // Sadece eklediğimiz sayfa açıldığında çalışacak bir fonksiyon oluşturuyoruz: 
    add_action( 'load-' . $hook_suffix , 'ilktemam_admin_paneli_notlarini_sakla' );
}
 
function ilktemam_admin_paneli_notlarini_sakla() {
    // Ekranda, eklediğimiz menü sayfası açıksa bu notun görünmesine hiç gerek yok
    remove_action( 'admin_notices', 'admin_panelinde_gorunecek_notlar' );
}

function menu_sayfasi_icerigi_fonksiyonu() {
    if (!current_user_can('manage_options')) {
    wp_die( __('Bu sayfaya sadece yöneticiler girebilir.') );
    }
 
    echo '</pre>
    <div class="wrap">';
    echo 'İşte burada temanın ayarları yapılır.';
    echo '</div>
    <pre>
    ';
}
?>

DERSİN SONU

Kimya Özel Dersi Al

Yorum yaparak bize destek olabilirsiniz.

4 yorum “4.1 Yönetim Panelinde Tema Ayarları İçin Menü Oluşturmak”

  • Pingback: 1.0 WordPress Tema Yapımı Hakkında Herşey - Giriş - WordPress
  • anil says:

    çok yararlı site ama az bilenler için şu kodları nereye gireceğimizi de yazsaydınız biz de yapabilseydik keşke 🙂
    Bu kodları yazmayı bilenler zaten buraya bakmadan yapar. Bilmeyenler de nereye yazacağını bilemiyor. Bu harika site heba oluyor böyle. Lütfen düzeltin.

    • Gökalp AY says:

      Tavsiyeniz için çok teşekkür ederim. WordPress ayarları ile ilgili bütün kodlar functions.php dosyasına girilir. Tavsiyenizi dikkate alacağım.

  • Cihat Yiğit says:

    Üstad Harika bir çalışma yapmışsın. Sadece burada yazdıklarını videolarla da yapsan harika olur. Yani tema programlama eğiitim seti yapsan. önce burada ki fonksiyonların kullanımını gösterip ardından da A’dan Z’ye bir blog teması programlama yapsanız harika olur

Bir cevap yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Şu kadar HTML serbest:

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>