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

Wordpress Özel Bileşen Yapımı Ve Bileşene Ayar Ekleme

1.287
1 sene önce
 0

Herkese selamlar bu makalem de Wordpress Özel Bileşen Yapımı konusunu ele alacağım.

Lakin önemli olan nokta bu konu hakkın da bir sürü makale olmasına rağmen herkes sadece bileşenin nasıl yapılacağının anlatmış olması .

Ben ise diğer konulardan biraz farklı olarak bileşenleri nasıl yapacağımızı ve bileşen içine ayarlar ekleyip bu ayarları veritabanına nasıl kaydedeceğimizi anlatacağım. Let’s GO.

İlk önce yapmamız gereken temamıza bileşen desteği vermek aşağıda ki resimde gördüğünüz gibi görünüm menüsü altın da bileşenler adında bir menü çıkması lazım.

temaya-bilesen-destegi-verme

Temaya Bileşen Desteği Verme

Temamıza bileşen desteği vermek için aşağıdaki kodu kullanabilirsiniz.

function widgets_init() {
register_sidebar( array(
 'name' => 'Sidebar',
 'id' => 'sidebar',
 'description' => 'Sidebar Bileşen Alanı',
 'before_widget' => '<div class="widgetcontainer">',
 'after_widget' => '</div>',
 'before_title' => '<div class="widgettitle">',
 'after_title' => '</div>',
 ) );
}
add_action( 'widgets_init', 'widgets_init' );

Basit bir şekilde kodu anlatmam gerekirse name kısmı bileşeninizin ismi id kısmı ise bileşeni çağıracağımız kimlik description bileşenin açıklaması before widget ve after widget bileşenden önce ve sona eklemek istediğiniz etiketler before title ve after title da başlıktan önce veya sonra eklemek istediğiniz etiketler.

Temamıza bileşen desteği verdiğimize göre artık bileşen yapımıza göz atabiliriz.

Wordpress Özel Bileşen Yapımı

Öncelikle şunu belirtmek isterim wordpress-includes > widgets yolunu izlerseniz wordpress’in kendi temel bileşenleri vardır ve çoğu özellikleri bu bileşenlerde hazır bir şekilde bulabilirsiniz.

Örnek vermek gerekirse checkbox kaydetme ses dosyası kaydetme gibi vb şeyleri bu bu bileşenler’de bulabilirsiniz.

<?php
/*
 * Plugin Name: Multican sidebar yazarlar üyeler bileşeni
 * Description: Bu Bileşen Yazarlarınızı Üyelerinizi Listeleyebilirsiniz.
 * Version: 1.0
 * Author: Halil BEYCAN
 * Author URI: https://halilbeycan.com
 Burasıda bileşeninizin bilgileri kendinize göre editlersiniz
 */
add_action( 'widgets_init', 'sidebarwidget' );// buralarda sidebarwidget alanlarını diğer bileşenleri için düzenleyebilirsiniz örneğin sidbar_last_post_list gibi
function sidebarwidget() {
 register_widget( 'sidebarwidget' );
}
class sidebarwidget extends WP_Widget {
function sidebarwidget() {
 $widget_ops = array( 'classname' => 'sidebarwidget', 'description' => __('Sidebar Bileşen', 'sidebarwidget') );//burası açıklama bölümü
 
 $this->WP_Widget( 'sidebarwidget', __('Sidebar bileşen', 'sidebarwidget'), $widget_ops );//burasıda başlık bölümü
 }
function widget( $args, $instance ) {
 $title = $instance['title'];// burasının bir zorunluğu yok aslında ama $instance['title'] yerine $title olarak kullanmak kodu daha temiz gösterecektir burada ayarlarımızı bir değişkene aktarıyoruz
 echo $before_widget;
 ?>
<!-- bilesen kodları -->
<h2><a><?php echo $title; ?></a></h2>
<!-- bilesen kodları -->
<?php
echo $after_widget;
}
function update( $new_instance, $old_instance ) {
  $instance = $old_instance;
    $instance['title'] = $new_instance['title'];//burası aşağıdaki ayarlarımızı veritabanına kaydetmek için kullanacağımız alan yine bu örnekten yola çıkarak yapabilirsiniz
    return $instance;
    }
function form( $instance ) {
 $instance = wp_parse_args( (array) $instance, $defaults ); 
 ?>
      <p>
        <label for="<?php echo $this->get_field_id('title') ?>">Başlık:</label>
        <input type="text" id="<?php echo $this->get_field_id('title') ?>" name="<?php echo $this->get_field_name('title') ?>" class="widefat" value="<?php echo esc_attr($instance['title']); ?>" />
      </p>
      <!-- Burası ise bileşenler bölümünde bileşenleri eklerkenki ayarlamalar için öğeler ekleyebileceğiniz alan yukarıdaki örnekten yola çıkarak yapabileceğinizi umuyorum çünkü tamamen balık tutmak yerine balık tutmayı öğretmeye çalışıyorum umarım anlamışsınızdır :D -->
 <?php
 }
}
register_widget('sidebarwidget');
?>

Yukarıda ki kodu functions.php ye ekleyecekseniz baştaki ve sonraki php taglarını kaldırın.

Ama ben karmaşıklık olmaması için bileşenlerimi ayrı dosyalar halinde hazırlayıp functions.php ye include ediyorum sizde bu şekilde kullanabilirsiniz.

Yukarıda ki kodda önemli yerleri yorum satırları ile anlattım ve daha fazla anlatılacak bir şey olduğunu düşünmüyorum yani yeterli olduğunun kanaatindeyim.

Bu arada dediğim gibi wordpress-includes > widgets yolunu izleyerek wordpress’in bileşenlerine göz atın. Aradığınız her şeyi bulacağınıza eminim .

Eğer sorularınız merak ettikleriniz ve takıldığınız yerler olursa yorum yaparak belirtebilirsiniz cevaplamak’tan yardım etmekten çok onur duyarım.

Şimdilik bu kadar bir sonraki makalemde görüşmek üzere kendinize iyi bakın sağlıcakla kalın ve makalemi okuduğunuz için ayrıca teşekkür ederim.

Yazar
{halilbeycan0@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 (Toplam 2 Yorum)

  1. Profil Resim Yok
    İbrahim BOZKURT

    👍🙂Başarılarının devamını dilerim kardeşim. Güzel makale olmuş. Siteyi yayınladığını neden söylemedin daha önceden gelirdim bakardım. Rastgele denk geldi siten öyle gelmiş oldum.

    • Teşekkür ederim abim

    Bir cevap yazın

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