Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

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.

Shortcake Bakery Plugin

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.

Inserting your shortcode in a post or page

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

User interface for a simple shortcode

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:

Call to action buttons created with shortcode

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.

Selecting post element or shortcode to insert

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.

Shortcode UI with a select field

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.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

3 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Waqar says

    hello, i want to modify my wordpress theme’s search box. because theme’s search box don’t search all over the place in website except title of post/product. please help me to get rid of this problem.

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.