WordPress'te Shortcode Kullanıcı Arayüzü Nasıl Eklenir (Shortcake ile)

Bir müşteri için bir WordPress sitesi geliştiriyorsanız, muhtemelen müşterilerinizin kullanması için kısa kodlarınız olacaktır. Sorun şu ki, birçok acemi kısa kodların nasıl ekleneceğini bilmiyor ve karmaşık parametreler söz konusuysa, bu daha da zordur. Shortcake, kısa kodlar için bir kullanıcı arayüzü ekleyerek bir çözüm sunar. Bu makalede, Shortcake ile WordPress'te kısa kodlar için bir kullanıcı arayüzünün nasıl ekleneceğini göstereceğiz.

Shortcake Nedir?

WordPress, yazılar ve sayfalar içine çalıştırılabilir kod eklemenin daha kolay bir yolunu kısa kodlar kullanarak sunar. Birçok WordPress teması ve eklentisi, kullanıcıların kısa kodlar kullanarak ek işlevsellik eklemesine olanak tanır. Ancak, bazen bir kullanıcı özelleştirme için parametre girmesi gerektiğinde bu kısa kodlar karmaşık hale gelebilir.

Örneğin, tipik bir WordPress temasında bir düğme eklemek için bir kısa kod varsa, kullanıcı muhtemelen en az iki ila beş parametre eklemesi gerekecektir. Şöyle ki:

[themebutton url="http://example.com" title="Şimdi İndir" color="purple" target="newwindow"]

Shortcake, bir WordPress eklentisi ve gelecekteki bir WordPress özelliğidir. Bu değerleri girmek için bir kullanıcı arayüzü sağlayarak bu sorunu çözmeyi amaçlar. Bu, kısa kodların kullanımını çok daha kolay hale getirecektir.

Başlarken

Bu eğitim, WordPress geliştirmeye yeni başlayan kullanıcılar için tasarlanmıştır. WordPress temalarını düzenlemeyi seven başlangıç seviyesindeki kullanıcılar da bu eğitimi faydalı bulacaktır.

Bunu söyledikten sonra, başlayalım.

Yapmanız gereken ilk şey, Shortcake (Shortcode UI) eklentisini yüklemek ve etkinleştirmektir.

Artık kullanıcı girdisinin birkaç parametresini kabul eden bir kısa koda ihtiyacınız olacak. Küçük bir hatırlatmaya ihtiyacınız varsa, WordPress'e kısa kod ekleme burada.

Bu eğitim kapsamında, kullanıcıların WordPress yazılarına veya sayfalarına bir düğme eklemelerine olanak tanıyan basit bir kısa kod kullanacağız. Kısa kodumuz için örnek kod aşağıdadır ve bunu temanızın functions dosyasına veya siteye özel bir eklentiye ekleyerek kullanabilirsiniz.

add_shortcode( 'cta-button', 'cta_button_shortcode' );

function cta_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="cta-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Düğmenizi biçimlendirmek için bazı CSS eklemeniz de gerekecektir. Bu CSS'yi temanızın stil sayfasında kullanabilirsiniz.

.cta-button {
padding: 10px;
font-size: 18px;
border: 1px solid #FFF;
border-radius: 7px;
color: #FFF;
background-color: #50A7EC;
}

Bir kullanıcının kısa kodu gönderilerinde ve sayfalarında kullanma şekli şöyledir:

[cta-button title="Şimdi İndir" url="http://example.com"]

Artık parametre kabul eden bir kısa kodumuz olduğuna göre, onun için bir kullanıcı arayüzü oluşturalım.

Shortcode Kullanıcı Arayüzünüzü Shortcake ile Kaydetme

Shortcake API, kısa kodunuzun kullanıcı arayüzünü kaydetmenize olanak tanır. Kısa kodunuzun kabul ettiği öznitelikleri, giriş alanı türlerini ve kısa kod UI'sinin hangi gönderi türlerinde görüneceğini açıklamanız gerekecektir.

Kısa kodumuzun kullanıcı arayüzünü kaydetmek için kullanacağımız örnek bir kod parçacığı aşağıdadır. Her adımı satır içi yorumlarla açıklamaya çalıştık. Bunu temanızın functions dosyasına veya siteye özel bir eklentiye yapıştırabilirsiniz.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'cta-button',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add Button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-lightbulb',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),
),
),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

Hepsi bu kadar, artık bir yazıyı düzenleyerek kısa kod kullanıcı arayüzünü çalışırken görebilirsiniz. Yazı düzenleyicisinin üzerindeki Ortam Ekle düğmesine tıklamanız yeterlidir. Bu, ortam yükleyiciyi açacaktır ve burada sol sütunda yeni bir öğe olan 'Yazı Öğesi Ekle'yi fark edeceksiniz. Buna tıklamak, kodunuzu eklemek için bir düğme gösterecektir.

Ampul simgesini ve kısa kod etiketini içeren küçük resme tıklamak, kısa kod UI'sini gösterecektir.

Birden Fazla Girişli Kısa Kod Ekleme

İlk örnekte çok temel bir kısa kod kullandık. Şimdi bunu biraz daha karmaşık ve çok daha kullanışlı hale getirelim. Kullanıcıların bir düğme rengi seçmesine olanak tanıyan bir kısa kod ekleyelim.

İlk olarak kısa kodu ekleyeceğiz. Neredeyse aynı kısa kod, ancak şimdi renk için kullanıcı girdisini kabul ediyor.

add_shortcode( 'mybutton', 'my_button_shortcode' );

function my_button_shortcode( $atts ) {
       extract( shortcode_atts(
               array(
                       'color' => 'blue',
                       'title' => 'Title',
                       'url' => ''
               ),
               $atts
       ));
       return '<span class="mybutton ' . $color . '-button"><a href="' . $url . '">' . $title . '</a></span>';
}

Kısa kodumuz farklı renklerde düğmeler göstereceği için CSS'imizi de güncellememiz gerekecek. Bu CSS'i temanızın stil sayfasında kullanabilirsiniz.

.mybutton {
    padding: 10px;
    font-size: 18px;
    border: 1px solid #FFF;
    border-radius: 7px;
    color: #FFF;
}

.blue-button  {
    background-color: #50A7EC;
}
.orange-button { 
background-color:#FF7B00;
} 

.green-button { 
background-color:#29B577;
}

Düğmeler şöyle görünecektir:

Kısa kodumuz hazır olduğuna göre, bir sonraki adım kısa kod kullanıcı arayüzünü kaydetmektir. Bu sefer renk için başka bir parametremiz olacak ve kullanıcılara mavi, turuncu veya yeşil düğmeler arasından seçim yapma olanağı sunacağız, ancak temelde aynı kodu kullanacağız.

shortcode_ui_register_for_shortcode(

/** Your shortcode handle */
'mybutton',

/** Your Shortcode label and icon */
array(

/** Label for your shortcode user interface. This part is required. */
'label' => 'Add a colorful button',

/** Icon or an image attachment for shortcode. Optional. src or dashicons-$icon.  */
'listItemImage' => 'dashicons-flag',

/** Shortcode Attributes */
'attrs'          => array(

/**
* Each attribute that accepts user input will have its own array defined like this
* Our shortcode accepts two parameters or attributes, title and URL
* Lets first define the UI for title field. 
*/

array(

/** This label will appear in user interface */
'label'        => 'Title',

/** This is the actual attr used in the code used for shortcode */
'attr'         => 'title',

/** Define input type. Supported types are text, checkbox, textarea, radio, select, email, url, number, and date. */
'type'         => 'text',

/** Add a helpful description for users */
'description'  => 'Please enter the button text',
),

/** Now we will define UI for the URL field */

array(
'label'        => 'URL',
'attr'         => 'url',
'type'         => 'text',
'description'  => 'Full URL',
),

/** Finally we will define the UI for Color Selection */ 
array(
'label'		=> 'Color',
'attr'      => 'color',

/** We will use select field instead of text */
'type'		=> 'select',
    'options' => array(
        'blue'		=> 'Blue',
        'orange'	=> 'Orange',
        'green'		=> 'Green',
    ),
),

),

/** You can select which post types will show shortcode UI */
'post_type'     => array( 'post', 'page' ), 
)
);

Hepsi bu kadar, artık bir yazı veya sayfayı düzenleyebilir ve Ortam Ekle düğmesine tıklayabilirsiniz. Yeni eklediğiniz kısa kodu 'Yazı Öğeleri Ekle' altında göreceksiniz.

Yeni oluşturduğunuz kısa koda tıklamak, değerleri basitçe girebileceğiniz kısa kod kullanıcı arayüzünü açacaktır.

Bu eğitimde kullanılan kodu bir eklenti olarak indirebilirsiniz.

wpb-shortcake-tutorial

CSS'yi ekledik, böylece onu inceleyebilir veya daha kolay bir kullanıcı arayüzü kullanarak WordPress'e kendi harekete geçirici mesaj düğmelerinizi eklemek için kullanabilirsiniz. Kaynağı değiştirmekten ve onunla oynamaktan çekinmeyin.

Umarım bu makale, Shortcake ile WordPress'te kısa kodlar için bir kullanıcı arayüzü eklemeyi öğrenmenize yardımcı olmuştur. Ayrıca şu WordPress'te kısa kod kullanmak için 7 temel ipucuna da göz atmak isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.