https://www.halilbeycan.com/274.gif

Wordpress Eklenti Geliştirme Dersleri Serisi | DERS #2

300
7 ay önce
 0

Selaam Wordpress Eklenti Geliştirme derslerimizin ikincisi serisinde eklentimiz için ayar paneli yapacağız. Buradan Bi Önceki Dersime Ulaşabilirsiniz.

1 – Wordpress Eklenti Geliştirme Hazır Framewok İle Yönetim Paneli Yapımı

Bir önceki dersimizde eklentimizi tanıtmayı ve panel eklemeyi göstermiştim bu dersimizde ise ayar bölümlerini oluşturacağız.

İlk önce bunun iki yolu var ya kendimiz yazacağız ya da redux, option tree ve codestar gibi framework’ları kullanarak yapacağız.

Ben ilk önce size option tree kullanarak yani hazır bir framework kullanarak nasıl eklenti panel yapacağız onu göstereceğim.

2 – Option Tree İle Yönetim Paneli Yapalım

Önce option treenin dosyalarını eklentimiz içinde admin adında bir klasör oluşturarak klasörün için atalım. Sonra option treenin çalıştırma komutlarını index.php dosyamıza ekleyelim.

Ayrıca bu adresi kullanarak option tree yi indirebilirsiniz.

Eğer dosyalarımı attıysak assets/theme-mode/ yolunu izleyelim ve demo-theme-options.php dosyasını açalım burada demo ayarlar gözükmekte .

Bunun settings arrayinden sonraki bölümünü silip kendi ayarlarınızı ekleyebilirsiniz.

Aşağıdaki resimde ok ile gösterdiğim array ile silmeye başlayabilirsiniz.

Sildikten sonra aşağıda ki gibi olacak ve settingsin üsünteki option types panel menüsü oluyor onun ismini de değiştirebilirsiniz.

ve define plugin_dir_path methodu ile option tree yi çalıştıralım burada iki dosyayı include edeceğiz biri ot-loader diğer demo-theme-mode.

Adını istediğiniz gibi değiştirebilirsiniz tabi ki.

Yukarıdaki kodda aşağıda bırakıyorum kolayca alın diye iki dosyamızı include ettik ve bağzı parametreler ekledik bu parametreleri.

Yine assets/theme-mode/ yolunu izleyerek demo-functions.php dosyası içinde bulabilirsiniz ben burada option tree yi anlatan bağzı sayfaları kapattım parametreler ile.

define( 'ilk_eklentim_inc', plugin_dir_path( __FILE__ ) );
include( ilk_eklentim_inc . 'admin/ot-loader.php');
include( ilk_eklentim_inc . 'admin/assets/theme-mode/demo-theme-options.php');
add_filter('ot_show_new_layout','__return_false');
add_filter( 'ot_show_options_ui', '__return_false' );
add_filter( 'ot_show_docs', '__return_false' );
add_filter( 'ot_show_pages', '__return_false' );

Ekledik mi eklediysek kaydedelim ve sayfamızı yenileyelim ve option tree paneli karşımıza gelsin. Göremediniz değil mi 😀 çünkü görünüm menüsünün alt menüsü olarak theme options olarak geldi.

3 – Panelimizin İsmini Ve Konumunu Ayarlayalım

Şimdi gelin onu ana menü gibi yapalım ve ismini değiştirelim.

Bu kez includes klasörüne girip ot-functions-admin.php adlı dosyayı açacağız ve karşımıza böyle bir ekran gelicek.

Burdan menu_title page_title dizelerinin değerlerini değiştireceğiz Theme Options Yazan Yerleri Eklenti İsminiz İle Değiştirin. Sonra parent_slug un themes.php değerini silin ve ana menü olarak gözüksün.

Çark option tree paneli diğeri ise bir önceki ders oluşturduğumuz panel ona daha sıra gelecek sanırım başka bir derse kalacak.

4 – Panelimize Ayar Ekleyelim

Neyse bunları yaptıysak tekrar demo-theme-options.php dosyasını açalım ve settings arrayinden sonra bir ayar dizesi ekleyelim text olsun tipide.

array(
     'id'          => 'buayarid',// buda ayarı yani içindeki yazıyı çekmek için kullanacağımız id
     'label'       => __( 'Buradan isim soy isim vb text değerleri çekebilirsiniz ', 'theme-text-domain' ),
     'type'        => 'text',
     'section'     => 'option_types',//bu hangi tab menüsünde gözükmesini istiyorsak onun id sini yazıyoruz
     'operator'    => 'and'
),

Yukarıdaki kodu eklediyseniz kaydedin ve option tree panelini açın ve karşınıza bir yazı kutusu gelecektir oraya bir şeyler yazın kaydedin.

Ettiniz mi hadi geçelim bunu bir short code haline getirelim ve her hangi bir sayfada çağıralım.

5 – Bu Ayarımızı Short Code Haline Getirelim Ve Tema İçinde Kullanalım

Şimdi bir fonksiyon oluşturalım function eklenticode(){} olsun tamam mı bunuda bir short code haline getirelim. Başka bir fonksiyon oluşturalım.

Ve adına function eklenticode_ex(){} diyelim tabi ben şimdilik öylesine koyuyorum bu isimleri ama karmaşık olmaması için düzgün ve görevine göre isimler koymalısınız.

Şimdi bu eklenticode_ex fonksiyonunu add_action ile wordpress init bölümüne kancalayalım

add_action('init', 'eklenticode_ex');

Kancaladık mı? Sonra eklenticode_ex fonksiyonumuzun içine add_shortcode fonksiyonu ile shortcode haline getireceğimiz fonksiyonu tanıtalım.

add_shortcode('burasıshortcodeismi', 'eklenticode'); 

Yukarıda ki kodda burasıshortcodeismi yazan yere shortcode ismimizi koyacağız ve en son nasıl bir hal alacak işte böyle.

add_action('init', 'eklenticode_ex');
function eklenticode_ex(){    
  add_shortcode('eklenticode', 'eklenticode');    
}
 
function eklenticode(){
   
 }

Şimdi yukarıdaki fonksiyonumuzun içine option tree ayar çağırma komutu ile eklediğimiz ayarın id sini yazarak çağıralım. Aşağıda ki şekilde.

echo ot_get_option("buayarid");

Bunuda Eklediysek [eklenticode] her hangi bir sayfaya kısa kod olarak ekleyelim ve yazdığımız metni çağıralım.

Ve Gördüğünüz üzere bu şekilde option tree ile eklentiniz için ayar paneli yapabilirsiniz bir sonraki dersimde kendimiz basit bir panel yapacağız.

Merak ettiklerinizi ve sorularınızı yorum yaparak belirtebilirsiniz. Sağlıcakla kalın.

Yazar
{beycan1532@gmail.com}

Merhaba ben Halil Front-end developer ve wordpress tema geliştiricisiyim bilgisayara olan ilgim 10. yaşlarıma dayanmakta. 15-16 yaşlarımda bilgisayar kullanmayı iyice çözdüm ve programlamaya ilgi duymaya başladım ilk olarak visualbasic.net ile kendi çapımda kendim için programlar geliştirdim zamanla web'e ilgi duydum ve internet sitesi kurmak istedim tabi hosting domain bilmediğim için bedavasitem ve wix gibi siteler ile yapmıştım bunu ama sürekli araştıran öğrenen ve kendini geliştiren biri olduğum için kısa süre sonra domain ve hosting'in ne olduğunu öğrendim sonra ilk .com'lu sitemi açtım o sırada wordpress ile tanıştım zaten programlamaya ilgimin olması sayesinde wordpress için tema geliştirmek istedim ve ilk wordpress temamı hazır bir html şablonu wordpress'e entegre ederek hazırlamıştım sonrasında ise html, css ve js öğrenerek kendimi geliştirdim ve şuan müşterilim için front-end development ve wordpress tema geliştirme işleri yapıyorum.

Yorumlar (Yorum yapılmamış)

    Yorum Yapmak İstemezmisiniz.

Bir cevap yazın

Zorunlu Alanlar "*" İle İşaretlenmiştir