WordPress Eklentisiz Gelişmiş Button Shortcode - Mehmet Kaplan

Bu Reklam Alanı Esnektir.

Bu Reklam Alanı Esnektir.

WordPress Eklentisiz Gelişmiş Button Shortcode

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 🙂

Bu Reklam Alanı Esnektir.

  • Paylaş
  • 0
gravatar

mehmetkpln18

Architect, Graphic Designer and Website Developer

Mehmet Kaplan, yeni mezun bir mimar, web ve grafik tasarımcısı, araştırmacı. Tasarım, programlama ve kodlama konusunda tutkusu olan biri.

Yorumlar Yorum Yok

Bilgi :Bu yazıya henüz yorum yapılmamıştır, yazı hakkındaki düşüncelerinizi paylaşmaktan çekinmeyin.

Bu Reklam Alanı Esnektir.

Bu Reklam Alanı Esnektir.