WordPress scripti kullanılan sitelerde metinlerin bazılarını (göster/gizle olarak bildiği) spoiler uygulaması ile nasıl gizleriz? Yani normalde olmayan bu özelliği eklenti kullanmadan nasıl gerçekleştirebiliriz? Yapılacak işlemler gayet basit ama tabiki çalışan kodları bulmak epey zordu. İşte bu yazımda sizleri zahmetten kurtarıyor ve bir araya getirilmiş, denenmiş spoiler kodlarını aşağıda paylaşıyorum. Uygulamayı dikkatle takip ederseniz temanıza spoiler uyarlamasını sorunsuz tamamlayabilirsiniz.
Yazılarda spoiler için;
1. Yöntem;
Aşağıdaki kodları temanızın functions.php dosyasında en sona ekleyin.
/**
* Adds a spoiler shortcode to WordPress.
*
* @return none outputs HTML
*/
function dag_spoiler_func( $atts, $content = null ) {
$default_title = __('Spoiler alert!');
$helptext_show = __('fa-plus');
$helptext_hide = __('fa-minus');
extract( shortcode_atts( array(
'title' => 'Spoiler Göster',
), $atts ) );
$spoiler =
/*'<style>'.
'.dag_spoiler .dag_spoiler_header::before {'.
'data-dag-spoiler-show="'. $helptext_show .'" '.
'data-dag-spoiler-hide="'. $helptext_hide.'" '.
'}'.
'</style>'.*/
'<div class="dag_spoiler">' .
'<p class="dag_spoiler_header" ' .
'data-dag-spoiler-show="' . $helptext_show .'" '.
'data-dag-spoiler-hide="' . $helptext_hide . '">' . $title . '</p>' .
'<div class="dag_spoiler_content">' .
/*'<p class="dag_spoiler_header">'. $title . '</p>' .
'<div class="dag_spoiler_content">' .*/
do_shortcode($content) .
'</div>' .
'</div>';
return $spoiler;
}
add_shortcode( 'dag_spoiler', 'dag_spoiler_func' );
/*EOF*/
/**
* Enqueue plugin css and javascript
*/
add_action( 'wp_enqueue_scripts', 'dag_enqueue' );
function dag_enqueue() {
wp_register_style( 'dag-spoiler-style', get_template_directory_uri().'/spoiler.css' );
wp_enqueue_style( 'dag-spoiler-style' );
/*wp_enqueue_script( 'jquery' );*/
wp_register_script( 'dag-spoiler-js', get_template_directory_uri().'/spoiler.js' );
wp_enqueue_script( 'dag-spoiler-js' );
}
add_action( 'wp_enqueue_scripts', 'dag_enqueue' );
Aşağıdaki kodları boş bir belgeye yapıştırıp spoiler.js adıyla kayıt edin ve kullandığınız temanın klasörüne gönderin.
jQuery(document).ready( jQuery(function( $ ) {
$(".dag_spoiler_header").each(function(){
$(this).click( function() {
var help_text_span = $(this).children('span.dag_spoiler_help_text');
$(this).siblings('.dag_spoiler_content').slideToggle( "slow", function() {
help_text_span.html(
help_text_span.html() == '<i class="fa '+hide_text+'"></i>' ? '<i class="fa '+show_text+'"></i>' : '<i class="fa '+hide_text+'"></i>'
);
});
});
var show_text = $(this).attr('data-dag-spoiler-show');
var hide_text = $(this).attr('data-dag-spoiler-hide');
$(this).prepend(' <span class="dag_spoiler_help_text" style="margin-right: 15px; margin-left: 5px; font-size: 14px;"> <i class="fa '+show_text+'"></i></span>');
});
}));Aşağıdaki kodları boş bir belgeye yapıştırıp spoiler.css adıyla kayıt edin ve kullandığınız temanın klasörüne gönderin.
.dag_spoiler {
margin: .1em 0 .1em 0;
}
.dag_spoiler .dag_spoiler_header {
cursor: pointer;
font-size: 13px;
font-weight: bold;
line-height: 1px;
min-height: 1px;
padding-bottom: 3px;
padding-left: 0;
padding-right: 7px;
position: relative;
font-weight: bold;
}
.dag_spoiler .dag_spoiler_header::before {
font-family: FontAwesome;
font-weight: normal;
margin-left: 5px;
margin-right: 5px;
}
.dag_spoiler div.dag_spoiler_content {
padding-left: 7%;
padding-right: 7%;
display: none;
}
Spoiler içine alınacak yazılar içinde yazının başına [spoiler] ve sonuna [/spoiler] kısa kodunu ekleyin.
2. Yöntem:
Eğer temanıza 1 adet ek css, 1 adet ek js atmak istemiyorsanız; yukarıdaki anlatımda ufak bir değişime gidin ve şu şekilde uygulayın.
Aşağıdaki kodu functions.php’de en alta ekleyin.
/**
* Adds a spoiler shortcode to WordPress.
*
* @return none outputs HTML
*/
function dag_spoiler_func( $atts, $content = null ) {
$default_title = __('Spoiler alert!');
$helptext_show = __('fa-plus');
$helptext_hide = __('fa-minus');
extract( shortcode_atts( array(
'title' => 'Spoiler Göster',
), $atts ) );
$spoiler =
/*'<style>'.
'.dag_spoiler .dag_spoiler_header::before {'.
'data-dag-spoiler-show="'. $helptext_show .'" '.
'data-dag-spoiler-hide="'. $helptext_hide.'" '.
'}'.
'</style>'.*/
'<div class="dag_spoiler">' .
'<p class="dag_spoiler_header" ' .
'data-dag-spoiler-show="' . $helptext_show .'" '.
'data-dag-spoiler-hide="' . $helptext_hide . '">' . $title . '</p>' .
'<div class="dag_spoiler_content">' .
/*'<p class="dag_spoiler_header">'. $title . '</p>' .
'<div class="dag_spoiler_content">' .*/
do_shortcode($content) .
'</div>' .
'</div>';
return $spoiler;
}
add_shortcode( 'dag_spoiler', 'dag_spoiler_func' );
(Dikkat ederseniz js ve css dosyalarını çağıran komutları çıkardık.)
Aşağıdaki kodları temanızın style.css dosyasında en alta ekleyin.
.dag_spoiler {
margin: .1em 0 .1em 0;
}
.dag_spoiler .dag_spoiler_header {
cursor: pointer;
font-size: 13px;
font-weight: bold;
line-height: 1px;
min-height: 1px;
padding-bottom: 3px;
padding-left: 0;
padding-right: 7px;
position: relative;
font-weight: bold;
}
.dag_spoiler .dag_spoiler_header::before {
font-family: FontAwesome;
font-weight: normal;
margin-left: 5px;
margin-right: 5px;
}
.dag_spoiler div.dag_spoiler_content {
padding-left: 7%;
padding-right: 7%;
display: none;
}
Aşağıdaki kodları da temanızın header.php dosyasında </head> öncesine ekleyin.
<script type="text/javascript">
<!--
jQuery(document).ready( jQuery(function( $ ) {
$(".dag_spoiler_header").each(function(){
$(this).click( function() {
var help_text_span = $(this).children('span.dag_spoiler_help_text');
$(this).siblings('.dag_spoiler_content').slideToggle( "slow", function() {
help_text_span.html(
help_text_span.html() == '<i class="fa '+hide_text+'"></i>' ? '<i class="fa '+show_text+'"></i>' : '<i class="fa '+hide_text+'"></i>'
);
});
});
var show_text = $(this).attr('data-dag-spoiler-show');
var hide_text = $(this).attr('data-dag-spoiler-hide');
$(this).prepend(' <span class="dag_spoiler_help_text" style="margin-right: 15px; margin-left: 5px; font-size: 14px;"> <i class="fa '+show_text+'"></i></span>');
});
}));
//--></script>
Ve şimdi yine yazılarda spoiler geçecek metinler için, metin başına [spoiler] ve sonuna [/spoiler] kullanın.
Ne yazık ki bu yöntem için editöre buton eklemeyle alakalı bir paylaşım yapamıyorum. Kısa kod gayet basit ve akılda kalıcı. Ancak illaki buton olsun derseniz WordPress eklenti sayfasından shortcode eklentileri indirip onlar üzerinden spoiler kısayolu oluşturmayı deneyebilirsiniz. Veya WordPress destek sayfalarından da editöre istediğin butonu eklemenin yollarını araştırabilirsiniz. Ama benim bildiğim epey bir zahmetli ve uzunca kodlar kullanmamızı gerektiriyor.
Ayrıca bir hatırlatma da yapayım!
Masaüstü temanız ile mobil temanız farklıysa spoiler çalışmayacaktır ve tabiki AMP uyarlamasıda kullanıyorsanız AMP sayfalarında da spoiler çalışmayacaktır. Spoiler’ın mobil temada çalışması için mobil temanın style.css dosyasına ve header.php dosyasına da aynı yukarıdaki gibi ekleme yapmanız gerekiyor. Ancak AMP eklentisinde üçüncü parti js dosyası çalıştıramadığımızdan, yani Google bunu sevmediğinden AMP sayfalarında spoiler kullanmamak daha mantıklı. Zaten AMP sayfalarını sadece internetinin çok çok yavaş olduğu kişiler görecek.
Sorularınız olursa konu altından yorum olarak yazabilirsiniz.