WordPress Eklentisiz Gelişmiş Button Shortcode

• Mehmet Kaplan
• 6 yıl önce
• 910
• 4 Dakika

Gelişmiş Button Shortcode WordPress’te HTML editörü ile çalışmanın büyük bir hayranı değilseniz size seçenek sunar ya da premium temalarınız için harika geliştirmeler yapmak istiyorsanız, kısa kodlar post editörünüzün yeteneklerini arttırırken mükemmel bir çözüm sunar.

Ücretsiz dosyalara veya diğer sitelere bağlantılar sağlarken (tabii ki kısa kodlar kullanarak) temanın link paylaşımlarınında dikkat çekici olması gerektiğini düşünüyorum.

Öncelikle ;

Shortcode nedir?

Kısa kodlar tekrar WordPress 2.5’te tanıtıldı ve post içerikte kullanılmak üzere makro kodları oluşturmanıza izin veriyorlar. Basit bir kısa kod şuna benzer:

[shortcode] 

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 Buton Kısa Kodu Eklemek

Yapmanız gereken ilk şey, kısa kodunuzun php kodunu temanıza eklemektir. Aşağıdaki kod sitenize basit bir düğme eklemek için kullanılabilir. Bu kod functions.php dosyasına yerleştirilebilir.

function mkseo_button_shortcode( $atts, $content = null ) {

	// Kısa kod özniteliklerini çıkart
	extract( shortcode_atts( array(
		'url'    => '',
		'title'  => '',
		'target' => '',
		'text'   => '',
		'color'  => 'green',
	), $atts ) );
	
	// İçeriği olmayan öğeler için metin değeri kullan
	$content = $text ? $text : $content;
	
	// Bağlantılı dönüş butonu
	if ( $url ) {
		$link_attr = array(
			'href'   => esc_url( $url ),
			'title'  => esc_attr( $title ),
			'target' => ( 'blank' == $target ) ? '_blank' : '',
			'class'  => 'mkseo-button color-' . esc_attr( $color ),
		);
		$link_attrs_str = '';
		foreach ( $link_attr as $key => $val ) {
			if ( $val ) {
				$link_attrs_str .= ' ' . $key . '="' . $val . '"';
			}
		}
		return '<a' . $link_attrs_str . '><span>' . do_shortcode( $content ) . '</span></a>';
	}

	// Bağlantı tanımlanmadı, bu yüzden yayılma buton olarak dön
	else {
		return '<span class="mkseo-button"><span>' . do_shortcode( $content ) . '</span></span>';
	}
}
add_shortcode( 'button', 'mkseo_button_shortcode' );

Kısayol Kodunu Kullanma

Artık bir kısa kodumuz olduğuna göre, yeni “buton” (stil oluşturmadığımızdan düz bir bağlantı gibi görünecek) yazı düzenleyicinize ekleyebilirsiniz.

// Örnek 1
[button href="Link Adresi" target="nitelik"]Buton Yazı[/button]

// Örnek 2
[button href="Link Adresi" target="nitelik" text="Buton Yazı"]

Düğmeyi Şekillendirme

Sadece düz bir bağlantıya benzeyecekse, bir kısa kod oluşturmanın amacı nedir? Hiçbir şey değil. Bu nedenle, indirme düğmesine stil vermek ve onu daha özel görünmesi için nasıl harika bir CSS3 ekleyeceğinizi göstereceğim.

Kısa kodda fark ettiğiniz gibi ‘mkseo-button‘ sınıfını ekledim, böylece style.css dosyanız üzerinden kolayca şekillendirebilirsiniz. Resimdeki gibi güzel bir mavi düğme yapmak için aşağıdaki kodu style.css sayfanıza ekleyin.

.mkseo-button {
  cursor: pointer;
  display: inline-block;
  overflow: hidden;
  background-color: #b74337;
  margin: auto;
  color: #fff;
  overflow: hidden;
  border-radius: 5px;
  text-decoration: none;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.3);
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}
.mkseo-button:hover {
  background-color: #c0392b;
}
.mkseo-button span {
  display: block;
  font-weight: bold;
  font-size: 1em;
  padding: 6px 12px;
  width: 100%;
  text-transform: uppercase;
  left: 0;
  transition: all 0.25s cubic-bezier(0.31, -0.105, 0.43, 1.4);
}

Çoklu Renk Desteği

Eğer fark ederseniz, shortcode farklı düğme renkleri için CSS stilleri eklemek için kullanabileceğiniz bir ‘color’ parametresini eklemiştik fonksiyonumuza. Örneğin, bu ekstra CSS’yi ekleyerek kırmızı renk seçeneği ekleyebilirseniz:

/* Mavi Button */
.mkseo-button.color-blue { background:#2981e4 }
.mkseo-button.color-blue:hover { background:#2575cf }
.mkseo-button.color-blue:active { background:#0760AD }

Şimdi renk parametresini kısa kodda kullanalım ;

[button href="Link Adresi" target="nitelik" color="blue"]Button Yazı[/button]

Araştırmamı, paylaşmamı, bilgilendirmemi istediğiniz ve anlatılan konularda sormak istediğiniz bir şey olursa benimle iletişime geçebilir veya yorum kısmına mesajınızı bırakabilirsiniz. İyi çalışmalar iyi kodlamalar 🙂

Eklentisiz Shortcode Wordpress wordpress eklentisiz gelismis button shortcode