WordPress Özel Bileşen Oluşturma

Merhaba arkadaşlar, bu dersimde sizlere nasıl özel bileşen (widget) oluşturulur bunu göstermek istiyorum.

Öncelikle WP_Widgets sınıfını genişleterek widget için bir class oluşturacağız.

class facebookLikeBox extends WP_Widget {

    public function __construct()
    {
    
    }
    
    // Yönetim panelindeki görülecek alanı burada hazırlayacağız
    public function form($instance)
    {
    
    }
    
    // Girilen değerleri burada kaydedeceğiz
    public function update($new_instance, $old_instance)
    {
    
    }
    
    // Tema alanında gözükecekleri buraya ekleyeceğiz
    public function widget($args, $instance)
    {
    
    }

}

__construct() Metodu
Bu metod, sınıf oluşturulduğunda çağırılacak ilk metoddur. Bu yüzden biz bu alanda üst sınıfın constuct metoduna bazı bilgiler göndereceğiz.

public function __construct()
{
    parent::__construct('widget_fblikebox', 'Facebook Likebox', [
        'classname' => 'Facebook Likebox',
        'description' => 'Facebook likebox oluşturmanızı sağlar'
    ]);
}

İlk parametrem ID, 2. parametrem başlık, 3. parametrem dizi olarak bir takım değerler göndermekti.form() Metodu
Bu kısımda yöneti panelinde bileşeni sürükleyip bırakınca gelecek olan form alanını hazırlayacağız.

public function form($instance)
{
    $fb_url = !empty($instance['fb_url']) ? $instance['fb_url'] : '';
    $fblikebox_title = !empty($instance['fblikebox_title']) ? $instance['fblikebox_title'] : '';
    ?>
    <p>
        <label for="<?php echo $this->get_field_id('fblikebox_title') ?>">Başlık:</label>
        <input type="text" id="<?php echo $this->get_field_id('fblikebox_title') ?>" name="<?php echo $this->get_field_name('fblikebox_title') ?>" value="<?php echo $fblikebox_title ?>">
    </p>
    <p>
        <label for="<?php echo $this->get_field_id('fb_url') ?>">Facebook Sayfa URL:
        <input type="text" id="<?php echo $this->get_field_id('fb_url') ?>" name="<?php echo $this->get_field_name('fb_url') ?>" value="<?php echo $fb_url ?>">
    </p>
    <?php
}

Burada get_field_id() ve get_field_name() metodları extend ettiğimiz sınıftan gelmektedir.update() Metodu
Bu kısımda form’dan gelen verileri kaydedeceğiz.

public function update($new_instance, $old_instance)
{
    $old_instance['fb_url'] = $new_instance['fb_url'];
    $old_instance['fblikebox_title'] = $new_instance['fblikebox_title'];
    return $old_instance;
}

widget() Metodu
Bu kısımda ise temada gözükmesini istediğimiz şeyleri ekleyeceğiz.

public function widget($args, $instance)
{
    $fb_url = $instance['fb_url'];
    $title = apply_filters('widget_title', $instance['fblikebox_title']);

    echo $args['before_widget']. $args['before_title']. $title .  $args['after_title'];
    ?>
    <div id="fb-root"></div>
    <script>(function(d, s, id) {
            var js, fjs = d.getElementsByTagName(s)[0];
            if (d.getElementById(id)) return;
            js = d.createElement(s); js.id = id;
            js.src = "//connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v2.10";
            fjs.parentNode.insertBefore(js, fjs);
        }(document, 'script', 'facebook-jssdk'));</script>
    <div class="fb-page" data-href="<?php echo $fb_url; ?>" data-width="200" data-small-header="false" data-adapt-container-width="true" data-hide-cover="false" data-show-facepile="true"></div>
    <?php
    echo $args['after_widget'];
}

Daha fazla bilgi için videoya gözatmayı unutmayın!

WordPress Dinamik Bileşen Kullanımı

Bu dersimizde dinamik bileşenleri nasıl oluşturuyoruz, nasıl kullanıyoruz bunu göstereceğim.

İlk olarak kullandığınız tema içerisindeki functions.php dosyanızı açın.

Dinamik Bileşen Nasıl Eklenir?

Bir fonksiyon oluşturarak register_sidebar() fonksiyonu ile bileşeni oluşturacağız. widgets_init fonksiyonuna da kancamızı atacağız.

function register_widgets()
{
    register_sidebar([
        'name' => 'Arşiv Sidebar Alanı',
        'id' => 'archive_sidebar',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'
    ]);
}

Dinamik Bileşen Tema İçinde Nasıl Kullanılır?

Göstermek istediğiniz sayfada aşağıdaki kodları yazmanız yeterli;

if (is_active_sidebar('archive_sidebar')){
    dynamic_sidebar('archive_sidebar');
}

WordPress Özel Profil Alanları Oluşturmak

Bu videomda sizlere profil için özel alanlar oluşturmayı ve bu alanları tema içerisinde kullanmayı gösterdim.

Not: Makale boyunca yazacağımız tüm fonksiyonları tema klasörümüz içerisinde functions.php dosyası içerisinde yazıyoruz.

Profil ve kullanıcı düzenleme sayfalarında özel alanların gösterilmesi

Bunun için bir fonksiyon yazmalı ve bu fonksiyonu önceden tanımlı 2 fonksiyona (show_user_profileedit_user_profile) kanca atmalıyız.

function show_extra_profile_fields($user)
{
    ?>
    <h2>Sosyal Hesaplar</h2>

    <table class="form-table">
        <tbody>
        <tr>
            <th>
                <label for="facebook">
                    Facebook Adresi
                </label>
            </th>
            <td>
                <input type="text" id="facebook" name="facebook" value="<?php echo esc_attr(get_the_author_meta('facebook', $user->ID)) ?>" class="regular-text">
            </td>
        </tr>
        <tr>
            <th>
                <label for="twitter">
                    Twitter Adresi
                </label>
            </th>
            <td>
                <input type="text" id="twitter" name="twitter" value="<?php echo esc_attr(get_the_author_meta('twitter', $user->ID)) ?>" class="regular-text">
                <p class="description">
                    Lütfen sadece twitter kullanıcı adınızı yazın!
                </p>
            </td>
        </tr>
        <tr>
            <th>
                <label for="instagram">
                    Instagram Adresi
                </label>
            </th>
            <td>
                <input type="text" id="instagram" name="instagram" value="<?php echo esc_attr(get_the_author_meta('instagram', $user->ID)) ?>" class="regular-text">
            </td>
        </tr>
        </tbody>
    </table>

    <?php
}

add_action('show_user_profile', 'show_extra_profile_fields');
add_action('edit_user_profile', 'show_extra_profile_fields');

esc_attr()
WordPress’in önceden tanımlı güvenlik için kullanılan fonksiyonudur.get_the_author_meta()
Özel alanların değerlerini almamız için kullanılan fonksiyondur. İlk parametre özel alanın ismi, ikinci parametre ise varsa üye id’sidir.

Özel alanların güncellenmesi

Bunun içinde bir fonksiyon yazmalı ve özel alanlarımızı güncellemeliyiz.

function update_extra_profile_fields($user_id)
{
    if (current_user_can('edit_user', $user_id)){
        update_user_meta($user_id, 'facebook', $_POST['facebook']);
        update_user_meta($user_id, 'twitter', $_POST['twitter']);
        update_user_meta($user_id, 'instagram', $_POST['instagram']);
    }
}

add_action('personal_options_update', 'update_extra_profile_fields');
add_action('edit_user_profile_update', 'update_extra_profile_fields');

current_user_can()
Mevcut kullanıcı için izin kontrolü yapan fonksiyondur. Burada edit_user yani bilgilerini düzenleme izninin olup olmadığını kontrol ettik.

Tema içerisinde kullanımı

Bunun için tema klasörümde author-bio.php dosyamı açıyorum. Ve uygun bir kısma, göstermek istediğim özel alanı şu şekilde yazıyorum;

<?php echo get_the_author_meta('facebook');

Burada facebook yerine siz kendi özel alan isminizi yazacaksınız. Benim örneğimde bu facebook, twitter ya da instagram olabilirdi 🙂

WordPress Özel Giriş Sayfası Hazırlamak

Bu dersimde, wordpress için özel giriş sayfası nasıl hazırlanır bundan bahsedeceğim. İşlemler çok kolay ve anlaşılır, anlamadığınız bir yer olursa sormayı unutmayın 🙂

Özel Sayfa Şablonu Oluşturma

wp-content > themes > tema_klasörü altında bir login.php dosyası oluşturun. Ve içerisine ilk olarak php’de şu açıklama satırlarını yazın;

<?php
/**
 * Template Name: Giriş Sayfası
 */

WordPress admin sayfasında sayfalar kısmından yeni sayfa oluştur deyin. Artık sağ kısımda sayfa şablonu diye bir alan çıktı. Oradan Giriş Sayfası olanı seçip Giriş ismiyle sayfanızı kaydedin.

Giriş Sayfasını Oluşturma

Tekrar tema klasörümüzdeki login.php‘ye dönüyoruz. Şimdi yapmamız gereken şey, temanın header ve footer‘larını yerleştirmek. Ardından giriş formunu wordpress’in wp_login_form() fonksiyonu ile oluşturmak.

<?php
/**
 * Template Name: Giriş Sayfası
 */

get_header();

wp_login_form([
    'redirect' => home_url()
]);

get_footer();

?>

Burada parametre olarak redirect değerine home_url() dedik. Yani anasayfaya gidecek giriş yaptığı zaman kullanıcı. Görüntü şöyle bir şey şuan bende;

İlgili Fonksiyonların Yazılması

Şimdi bazı kurallar ve işlemler için tema klasörünüzde bulunan functions.php dosyasına bazı fonksiyonlar yazacağız. Ve wp’nin fonksiyonlarına kancamızı atacağız.

Giriş Sayfasına Yönlendirme

Kullanıcı eğer doğrudan siteadi.com/wp-login.php sayfasına ulaşmaya çalışıyorsa kullanıcıyı kendi oluşturduğumuz giriş sayfasına yönlendirmemiz gerek.

function redirect_login_page()
{
    $login_page = home_url('giris');
    $param = basename($_SERVER['REQUEST_URI']);
    if ($param == 'wp-login.php' && $_SERVER['REQUEST_METHOD'] == 'GET') {
        wp_redirect($login_page);
        exit;
    }
}

add_action('init', 'redirect_login_page');

Şimdi burada önemli olan basename($_SERVER[‘REQUEST_URI’]) ile wp-login.php kısmını aldık. Ve karşılaştırıyoruz, eğer giriş sayfasında ise özel sayfamıza yönlendirme işlemini yapıyoruz ancak ek bir koşul belirttik. Sadece GET isteği olursa bunu yapıyoruz çünkü kullanıcı adı ve şifremizi yine aynı yere post edeceğiz o zaman çalışmaması gerek bu kodların.

Kullanıcı adı ya da şifre boş ise yönlendirme

Bunun için authenticate fonksiyonuna filtre ekleyeceğiz. Şu şekilde;

function verify_user($user, $username, $password)
{
    $login_page = home_url('giris?islem=bos');
    if ($username == '' || $password == '') {
        wp_redirect($login_page);
        exit;
    }
}

add_filter('authenticate', 'verify_user', 10, 3);

Bu seferde eğer değerler boş ise özel sayfamıza gönderiyoruz ancak ?islem=bos şeklinde. Bunu birazdan tema dosyamızda kontrol edip hataları göstermek için kullanacağız. Bu arada farklılık olarak add_filter() fonksiyonu 4 parametre aldı. 3. parametre öncelik sırası, default’y 10’dur yani işlem önceliğini belirtir önce hangisi çalışmalı gibisinden. 4. parametre ise fonksiyonun kaç parametre aldığıdır.

Kullanıcı adı ya da şifre hatalıysa yönlendirme

Bu işlem içinde wp_login_failed() fonksiyonuna kanca atıyoruz. Hemen görelim;

function login_failed()
{
    $login_page = home_url('giris?islem=basarisiz');
    wp_redirect($login_page);
    exit;
}

add_action('wp_login_failed', 'login_failed');

Burada da yönlendirme işleminde ?islem=basarisiz şeklinde kullandım.

Kullanıcı çıkış yaptığında yönlendirme

Diğerlerini yaptığımız için bunuda yapmak zorundayız. Kullanıcı çıkış yaptığında görüntülediği yere geri dönsün;

function logout_redirect()
{
    $redirect_url = $_SERVER['HTTP_REFERER'];
    wp_redirect($redirect_url);
    exit;
}

add_action('wp_logout', 'logout_redirect');

Kullanıcı giriş yapmışsa yönlendirme

Kullanıcı giriş yaptığında hala giriş sayfasına girmeye çalışıyorsa onu anasayfaya yönlendirmemiz gerek. Bunun içinde;

function redirect_home()
{
    if (is_user_logged_in() && is_page('giris')){
        wp_redirect(home_url());
        exit;
    }
}
add_action('template_redirect', 'redirect_home');

is_page() kısmında oluşturduğumuz sayfanın url’ni belirtmemiz gerek. Başka bir isim verdiyseniz, unutmayın 🙂

Hataların Gösterilmesi

Şimdi functions.php ile işimiz bitti. Tekrar tema klasörümüzde login.php dosyamızı açıp hatalar için bir switch-case yapısı kuruyoruz.

if (isset($_GET['islem'])){
    Switch ($_GET['islem']){
        case 'bos':
            $serror = 'Lütfen kullanıcı adı ya da şifrenizi yazın.';
            break;
        case 'basarisiz':
            $serror = 'Geçersiz kullanıcı adı ya da şifre girdiniz.';
            break;
    }
}

if (isset($serror)){
    echo $serror;
}

Bundan sonra güzel bir tasarım ile entegre ederek giriş ekranınızı kullanabilirsiniz, güle güle kullanın 🙂 Daha fazlası için videoya gözatmayı unutmayın.

WordPress’te Özel Alanların Kullanımı

İçerik eklerken ilginizi çeken bir bölüm var hemen yazı girdiğiniz bölümün alt tarafında.. Başlıkta Özel Alanlar yazıyor.. Hiç merak ettiniz mi bu özel alanların ne işe yaradığını? İçeriklerinize ait özel alanlar oluşturmak için kullanıyorsunuz.. Böylece kendinizi özel hissediyorsunuz 🙂

Şaka bir yana, wordpress’e ben gibi yeni başlamış arkadaşlarım için özel alanlardan bahsetmek istiyorum.

İlk olarak eğer sizin içerik ekleme bölümünde özel alanlar bölümünüz gözükmüyorsa sağ üstte bulunan “ekran tercihleri” bölümünden aktif edin.

wp-ekran-tercihleri

Daha sonra bir özel alanı olan içerik ekleyin.. Özel alan isminde mümkünse türkçe karakter kullanmayın. Oluyordur belki ama ben hiç denemedim, riske girmeyelim 🙂

wp-ozel-alanlar

Şimdi içeriği ekledik ama temada özel alanın değeri gözükmüyor değil mi? İşte sıra geldi işin kod kısmına..

sırasıyla şuraya girelim.. “wp-content > themes > tema klasörünüz” ve daha sonra content.php dosyasını düzenlemek için açalım.

Özel alanın değerini almak için wordpress’in bize sağlamış olduğu “get_post_meta()” fonksiyonunu kullanacağız.
http://codex.wordpress.org/Function_Reference/get_post_meta

Bu fonksiyon sırasıyla 3 parametre alıyor..

get_post_meta( get_the_ID(), 'ozel_alan_adiniz', true );

Burada ilk değer o anki konu id’niz.. Bunuda get_the_ID() fonksiyonu ile belirtebiliriz.
İkinci parametre özel alanınızın adı.. Ben örneğin “video” diye oluşturdum oraya video yazmam gerekir.
3. parametre ise belirtmek zorunda değilsiniz. Ancak true yaparsanız bir string ifade olarak alırsınız değeri. Belirtmezseniz dizi olarak almanız gerekir.

Şimdi şöyle bir kullanalım bakalım;

<?php $alan = get_post_meta(get_the_ID(), 'video', true); ?>
<?php if ( $alan && is_single() ): ?>
     <iframe width="420" height="315" src="//www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe>
<?php endif; ?>

burada “is_single()” fonksiyonunu kullanmamızın amacı, sadece içerik sayfasında gözükmesi içindir bilginiz olsun.

İşte bu kadar 🙂 Daha iyi anlamak için videoya göz atabilirsiniz.