WordPress Yorum Formuna jQuery Araç İpuçları Nasıl Eklenir

Yorumlar, kullanıcıların web sitenizdeki içerikle etkileşime geçmesini sağlar. Bu nedenle, yorum düzeninizi ve yorum formunuzu iyi görünmesinin yanı sıra kullanıcı dostu olacak şekilde şekillendirmenin önemli olduğuna inanıyoruz. Yakın zamanda bir kullanıcı bize WordPress yorum formuna nasıl jQuery araç ipuçları ekleyebileceklerini sordu. Bunu başkalarının da yararlı bulabileceğini düşündük. Bu eğitimde, WordPress yorum formuna jQuery araç ipuçlarını nasıl ekleyeceğinizi göstereceğiz.

Neden jQuery Araç İpuçları Eklemelisiniz?

Araç ipuçları, kullanıcı faresini bir öğenin üzerine getirdiğinde görünür ve genellikle o öğe hakkında açıklama sağlar. Bu eğitimde, yorum formu alanlarında lütfen gerçek adınızı kullanın gibi ipuçları göstermek için jQuery araç ipuçları ekleyeceğiz.

JQuery araç ipuçları ekleyerek kullanıcı deneyimini geliştirebilir ve daha güzel görünmesini sağlayabilirsiniz.

jQuery Araç İpuçları Nasıl Eklenir

Yapmanız gereken ilk şey, masaüstünüzde bir klasör oluşturmak ve adını wpb-comment-tooltips koymaktır. Bu klasörün içinde şu üç dosyayı oluşturmanız gerekir:

• wpb-comment-tooltips.php
• wpb-tooltip.css
• wpb-tooltip.js

Bu dosyaları oluşturmak için Notepad gibi düz bir metin düzenleyici kullanın. Dosyaları oluşturduktan sonra, metin düzenleyicide wpb-comment-tooltip.php dosyasını açmanız gerekir. Bu kodu kopyalayın ve dosyaya yapıştırın:

<?php
/** 
Plugin Name: WPBeginner's Comment Form Tool Tips
Description: A jQuery powered comment form tool tips plugin based on a tutorial by WPBeginner
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
*/

// Only load our scripts and style when a comment form is displayed

add_action( 'comment_form_before', 'wpb_comment_tooltips' );

function wpb_comment_tooltips() { 
wp_enqueue_script('wpb-tooltip-jquery', plugins_url('/wpb-tooltip.js', __FILE__ ), array('jquery-ui-tooltip'), '', true);
wp_enqueue_style('wpb-tooltip-css', plugins_url('/wpb-tooltip.css', __FILE__), false, null);
}

// Modify comment form fields and add title attribute to form input fields
 
function alter_comment_form_fields($fields){
    $fields['email'] =  '<p class="comment-form-email"><label for="email">' . __( 'Email', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="email" title="Your email is safe with us, see our privacy policy." name="email" type="text" value="' . esc_attr(  $commenter['comment_author_email'] ) .
      '" size="30"' . $aria_req . ' /></p>';  
    $fields['url'] = '<p class="comment-form-url"><label for="url">' .
      __( 'Website', 'twentythirteen' ) . '</label>' .
      '<input id="url" name="url" title="Your website or any social media profile URL" type="text" value="' . esc_attr( $commenter['comment_author_url'] ) .
      '" size="30" /></p>';  
	  $fields['author'] = '<p class="comment-form-author">' .
      '<label for="author">' . __( 'Name', 'twentythirteen' ) . '</label> ' .
      ( $req ? '<span class="required">*</span>' : '' ) .
      '<input id="author" title="Please use your real name, no keywords." name="author" type="text" value="' . esc_attr( $commenter['comment_author'] ) .
      '" size="30"' . $aria_req . ' /></p>';
    return $fields;
}
add_filter('comment_form_default_fields','alter_comment_form_fields');
?>

Yukarıdaki kodda, önce bir eklenti başlığı oluşturduk, bu eklentiye bir ad ve açıklama verdik. Daha sonra JavaScript ve CSS dosyamızı yükledik ( WordPress’te JavaScript ve Stillerin nasıl ekleneceğine ilişkin kılavuzumuza bakın).

Ayrıca bu dosyaların yalnızca bir yorum formu görüntülendiğinde yüklendiğinden emin oluyoruz. Bundan sonra varsayılan yorum formunu değiştirdik ve giriş alanlarına başlık niteliği ekledik. Bu başlık niteliği, araç ipucunda görüntülenmesini istediğimiz mesajı içerir. Örneğin, yazar alanında kullandık:

title="Lütfen gerçek adınızı kullanın, anahtar kelime kullanmayın."

Artık eklenti dosyasını oluşturduğunuza göre, biraz jQuery eklemenin zamanı geldi. wpb-tooltip.js dosyasını açın ve bu kodu içine ekleyin:

(function($) {
$("#commentform" ).tooltip({ position: {
	benim: "orta alt 10",
        at: "orta üst",
        using: function( position, feedback ) {
          $( this ).css( position );
          $( "<div>" )
            .addClass( "arrow" )
            .addClass( feedback.vertical )
            .addClass( feedback.horizontal )
            .appendTo( this );
        } } });
})(jQuery);

Bu kodda, #commentform jQuery’nin araç ipuçlarını görüntüleyeceği seçici ve .tooltip araç ipuçlarının konumunu tanımladığımız içerik kısmıdır.

Şimdi son adım wpb-tooltip.css dosyasına küçük bir CSS eklemektir. Bu kodu kopyalayıp yapıştırmanız yeterlidir:

.ui-tooltip, .arrow:after {
    background: #356aa0;
    border: 2px solid white;
  }
  .ui-tooltip {
    padding: 10px 20px;
    color: white;
    border-radius: 20px;
    font: bold 14px "Helvetica Neue", Sans-Serif;
    text-transform: uppercase;
    box-shadow: 0 0 7px #356aa0;
	max-width:350px;
  }
  .arrow {
    width: 70px;
    height: 16px;
    overflow: hidden;
    position: absolute;
    left: 50%;
    margin-left: -35px;
    bottom: -16px;
  }
  .arrow.top {
    top: -16px;
    bottom: auto;
  }
  .arrow.left {
    left: 20%;
  }
  .arrow:after {
    content: "";
    position: absolute;
    left: 20px;
    top: -20px;
    width: 25px;
    height: 25px;
    box-shadow: 6px 5px 9px -9px #356aa0;
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    tranform: rotate(45deg);
  }
  .arrow.top:after {
    bottom: -20px;
    top: auto;
  }

İhtiyaçlarınızı karşılamak için bu CSS dosyasını değiştirmekten çekinmeyin.

Hepsi bu kadar. Artık WordPress yorum formunuza jQuery araç ipuçları ekleyen bir eklentiyi başarıyla oluşturdunuz. Tek yapmanız gereken Filezilla gibi bir FTP istemcisi kullanarak wpb-comment-tooltips klasörünü masaüstünüzden web sunucunuzdaki /wp-content/plugins/ dizinine yüklemektir. Eklentiyi yükledikten sonra, WordPress yönetici alanındaki Eklentiler sayfasına gidin ve eklentiyi etkinleştirin.

Umarız bu eğitim WordPress yorum formuna jQuery araç ipuçlarını nasıl ekleyeceğinizi öğrenmenize yardımcı olmuştur. Bu kodu değiştirmenizi ve başka yerlere araç ipuçları eklemeyi denemenizi öneririz. Örneğin, sitemize araç ipucu referanslarını nasıl eklediğimize göz atın. Geri bildirim ve sorularınız için lütfen aşağıya yorum bırakın.