WordPress’te Serin CSS3 Düğmesi Kısa Kodu Nasıl Eklenir

WordPress’te HTML düzenleyicisiyle çalışmak için büyük bir hayran değilseniz veya premium temalarınız için bazı harika geliştirmeler sağlamak istiyorsanız, kısa kodlar, işleri basit tutarken yazı düzenleyicinizin yeteneklerini genişletmek için harika bir çözümdür.


Ücretsiz dosyalara veya diğer sitelere (elbette kısa kodlar kullanarak) bağlantılar sağlarken siteme bir çeşit düğme eklemenin harika olacağını düşünüyordum, bu yüzden temam için kısa kod ekledikten sonra kodu burada paylaşacağımı düşündüm blog’unun sitelerine düğme kısa kodları eklemek isteyen diğer kişilerin kodumu temalarına kopyalayıp yapıştırabilmeleri ve kısa kodu yapmak ve düğmeyi şekillendirmek için çok fazla zaman harcamak zorunda kalmamaları.

Kısa Kodlar Nedir?

Kısa kodlar WordPress 2.5’te yeniden tanıtıldı ve yazı içeriğinde kullanmak için makro kodları oluşturmanıza izin veriyorlar. Basit bir kısa kod şöyle görünecektir:

[kısa kod]

Hangi yazı editörüne eklendiğinde tema dosyalarınızda tanımlandığı gibi kısa kodun değerini döndürür. Size herhangi bir koda dokunmadan yazı düzenleyicinize kolayca düğme eklemenizi sağlayacak bir kısa kod oluşturmayı göstereceğim..

Özel bir “düğme” Kısa Kodu Ekleme

Yapmanız gereken ilk şey, kısa kodunuz için php kodunu temanıza eklemektir. Aşağıdaki kod, sitenize basit bir düğme eklemek için kullanılabilir. Bu kod, function.php dosyasına yerleştirilebilir. 3. taraf bir tema kullanıyorsanız, bu en iyi WordPress Çocuk Teması ile yapılır.

işlev myprefix_button_shortcode ($ atts, $ content = null) {

// Kısa kod niteliklerini ayıkla
ayıkla (shortcode_atts (dizi (
'url' => '',
'title' => '',
'target' => '',
'text' => '',
'renk' => 'yeşil',
), $ atts));

// İçeriği olmayan öğeler için metin değerini kullan
$ content = $ text? $ text: $ içerik;

// Bağlantılı dönüş düğmesi
if ($ url) {

$ link_attr = dizi (
'href' => esc_url ($ url),
'title' => esc_attr ($ title),
'target' => ('boş' == $ hedef)? '_blank': '',
'class' => 'myprefix-button color-'. esc_attr ($ renk),
);

$ link_attrs_str = '';

foreach ($ link_attr olarak $ key => $ val) {

if ($ val) {

$ link_attrs_str. = ''. $ anahtarı. '= "'. $ val. '"';

}

}


dönüş ''. do_shortcode ($ content). '';

}

// Bağlantı tanımlanmadı, bu nedenle dönüş düğmesi bir span olarak
Başka {

dönüş ''. do_shortcode ($ content). '';

}

}
add_shortcode ('düğme', 'myprefix_button_shortcode');

Yazı Düzenleyicinizde Kısa Kodu Kullanma

Artık bir kısa kodunuz olduğuna göre, yeni “düğme” yi (stilize olmadığımızdan beri artık düz bir bağlantıya benziyor) yazı düzenleyicinize ekleyebilirsiniz.

// Örnek kullanım 1
Düğme Metni [/ düğme] // Örnek kullanım 2

Düğmeyi Şekillendirin

Sadece düz bir bağlantıya benziyorsa kısa kod oluşturmanın anlamı nedir? Hiçbir şey değil. Bu nedenle, indirme düğmesini şekillendirmek ve seksi görünmesini sağlamak için nasıl havalı CSS3 ekleyeceğinizi göstereceğim..

Kısa kodda fark ettiğiniz gibi “myprefix-button” sınıfını ekledim, böylece style.css dosyanız aracılığıyla kolayca stil oluşturabilirsiniz. Resimdeki gibi güzel bir mavi düğme yapmak için stil sayfanıza aşağıdaki kodu ekleyin.

/ * Ana Düğme Stili * /
.myprefix-button {arka plan: # 65A343; metin gölgesi: 1 piksel 1 piksel 1 piksel # 000; -webkit-sınır-yarıçapı: 5px; -moz-sınır-yarıçapı: 5px; sınır yarıçapı: 5px; -webkit-kutu-gölge: 1px 2px 1px rgba (0, 0, 0, 0.1); -moz-kutusu-gölge: 1px 2px 1px rgba (0, 0, 0, 0.1); kutu gölgesi: 1 piksel 2 piksel 1 piksel rgba (0, 0, 0, 0.1); imleç: işaretçi; ekran: satır içi blok; taşma: gizli; dolgu: 1 piksel; dikey hizalama: orta; }

.myprefix-düğme açıklığı {border-top: 1px solid rgba (255, 255, 255, 0.25); -webkit-kenarlık yarıçapı: 5 piksel; -moz-sınır yarıçapı: 5 piksel; sınır yarıçapı: 5 piksel; renk: #fff; Ekran bloğu; yazı tipi ağırlığı: kalın; yazı tipi boyutu: 1em; dolgu: 6 piksel 12 piksel; metin gölgesi: 1 piksel 1 piksel 1 piksel rgba (0, 0, 0, 0.25); }

/ * Fareyle üzerine gelin * /
.myprefix-button: üzerine gelin {background: # 558938; text-decoration: none; }

/* Aktif */
.myprefix-button: active {arka plan: # 446F2D; }

Yeşil Kısa Kod Düğmesi

Çoklu Renk Desteği

Kısa kodun farklı düğme renkleri için CSS stilleri eklemek için kullanabileceğiniz bir renk parametresi olduğunu fark ettiyseniz. Örneğin, bu ekstra CSS’yi ekleyerek mavi renk seçeneği ekleyebiliyorsanız:

/ * Mavi Düğme * /
.myprefix-button.color-blue {arka plan: # 2981e4}

/ * Mavi Düğme Fareyle Üzerine Gelme * /
.myprefix-button.color-blue: üzerine gelin {background: # 2575cf}

/ * Mavi Düğme Aktif * /
.myprefix-button.color-blue: active {arka plan: # 0760AD}

Şimdi kısa koddaki color parametresini kullanın:

Düğme Metni [/ düğme]

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map