Shortcake ile WordPress’te Kısa Kod Kullanıcı Arayüzü Nasıl Eklenir

Bir müşteri için WordPress sitesi geliştiriyorsanız, müşterilerinizin kullanması için kısa kodlara sahip olmanız muhtemeldir. Sorun şu ki, yeni başlayanların çoğu kısa kodların nasıl ekleneceğini bilmiyor ve karmaşık parametreler söz konusu olduğunda bu daha da zorlaşıyor. 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 nasıl bir kullanıcı arayüzü ekleyeceğinizi göstereceğiz.

Shortcake nedir?

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

Örneğin, tipik bir WordPress temasında bir düğme girmek için bir kısa kod varsa, kullanıcının muhtemelen en az iki ila beş parametre eklemesi gerekecektir. Bunun gibi:

[themebutton url=”http://example.com” title=”Download Now” color=”purple” target=”newwindow”]

Shortcake bir WordPress eklentisi ve önerilen bir gelecek WordPress özelliğidir. Bu değerleri girmek için bir kullanıcı arayüzü sağlayarak bu sorunu çözmeyi amaçlamaktadır. 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ılara yöneliktir. WordPress temalarında ince ayar yapmaktan hoşlanan 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ştirmek.

Şimdi kullanıcı girdisinin birkaç parametresini kabul eden bir kısa koda ihtiyacınız olacak. Küçük bir tazelemeye ihtiyacınız varsa, WordPress’te nasıl kısa kod ekleyeceğinizi burada bulabilirsiniz.

Bu eğitimde, 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. İşte kısa kodumuz için örnek kod ve bunu temanızın işlevler 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>';
}

Ayrıca düğmenizi şekillendirmek için bazı CSS’ler eklemeniz 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ı kısa kodu yazılarında ve sayfalarında bu şekilde kullanacaktır:

[cta-button title="Download Now" url="http://example.com"]

Artık parametre kabul eden bir kısa kodumuz olduğuna göre, bunun 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 hangi nitelikleri kabul ettiğini, giriş alanı türlerini ve hangi gönderi türlerinin kısa kod kullanıcı arayüzünü göstereceğini açıklamanız gerekecektir.

İşte kısa kodumuzun kullanıcı arayüzünü kaydetmek için kullanacağımız örnek bir kod parçacığı. Her adımı satır içi yorumlarla açıklamaya çalıştık. Bunu temanızın functions dosyasına ya da 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 gönderiyi düzenleyerek kısa kod kullanıcı arayüzünü çalışırken görebilirsiniz. Bir yazı editörünün üzerindeki Medya Ekle düğmesine tıklamanız yeterlidir. Bu, sol sütunda yeni bir ‘Yazı Öğesi Ekle’ öğesi göreceğiniz medya yükleyiciyi getirecektir. Buna tıkladığınızda kodunuzu eklemek için bir düğme göreceksiniz.

Ampul simgesini ve shortcake etiketinizi içeren küçük resme tıkladığınızda size kısa kod kullanıcı arayüzü gösterilecektir.

Birden Fazla Girişle Kısa Kod Ekleme

İlk örnekte çok basit 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 artık 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 düğmeleri farklı renklerde göstereceği için CSS’mizi de güncellememiz gerekecek. Bu CSS’yi 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 bu şekilde görünecektir:

Artık kısa kodumuz hazır olduğuna göre, bir sonraki adım kısa kod kullanıcı arayüzünü kaydetmektir. Temelde aynı kodu kullanacağız, ancak bu sefer renk için başka bir parametremiz var ve kullanıcılara mavi, turuncu veya yeşil düğmelerden birini seçmelerini öneriyoruz.

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 gönderiyi veya sayfayı düzenleyebilir ve Medya 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ıkladığınızda, değerleri kolayca girebileceğiniz kısa kod kullanıcı arayüzü açılacaktır.

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

wpb-shortcake-tutorial

CSS’yi dahil ettik, böylece çalışmak için kullanabilir veya daha kolay bir kullanıcı arayüzü kullanarak WordPress’te kendi harekete geçirici mesaj düğmelerinizi eklemek için kullanabilirsiniz. Kaynağı değiştirmekten ve üzerinde oynamaktan çekinmeyin.

Umarız bu makale Shortcake ile WordPress’te kısa kodlar için nasıl kullanıcı arayüzü ekleyeceğinizi öğrenmenize yardımcı olmuştur. WordPress’te kısa kod kullanmak için bu 7 temel ipucuna da göz atmak isteyebilirsiniz.

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