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

Yorumlar, kullanıcıların web sitenizdeki içerikle etkileşim kurmasını sağlar. Bu nedenle, yorum düzeninizi ve yorum formunuzu kullanıcı dostu ve iyi görünecek şekilde stilize etmenin önemli olduğuna inanıyoruz. Yakın zamanda bir kullanıcı bize WordPress yorum formuna nasıl jQuery araç ipuçları ekleyebileceklerini sordu. Bunun başkaları için de faydalı olabileceğini düşündük. Bu eğitimde, WordPress yorum formuna nasıl jQuery araç ipuçları ekleyeceğinizi göstereceğiz.

Neden jQuery Araç İpuçları Eklemelisiniz?

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

jQuery araç ipuçları ekleyerek kullanıcı deneyimini geliştirebilirsiniz ve daha güzel görünür.

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

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

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

Bu dosyaları oluşturmak için Not Defteri gibi düz metin düzenleyici kullanın. Dosyaları oluşturduktan sonra, wpb-comment-tooltip.php dosyasını metin düzenleyicide açmanız gerekir. Bu kodu dosyaya kopyalayıp 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. Ardından JavaScript ve CSS dosyamızı yükledik (bkz. WordPress'e JavaScript ve Stiller Nasıl Eklenir rehberimiz).

Ayrıca, bu dosyaların yalnızca bir yorum formu görüntülendiğinde yüklendiğinden emin oluruz. Ardından varsayılan yorum formunu değiştirdik ve girdi alanlarına başlık özniteliğini ekledik. Bu başlık özniteliği, açıklama balonunda görüntülenmesini istediğimiz mesajı içerir. Örneğin, yazar alanında şunu kullandık:

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

Eklenti dosyasını oluşturduğunuza göre, biraz jQuery ekleme zamanı. wpb-tooltip.js dosyasını açın ve içine şu kodu ekleyin:

(function($) {
$( "#commentform" ).tooltip({ position: {
	my: "center bottom-10",
        at: "center top",
        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östereceği seçicidir ve .tooltip, araç ipuçları için konumu tanımladığımız içerik kısmıdır.

Şimdi son adım, wpb-tooltip.css dosyasına biraz CSS eklemek. Sadece bu kodu kopyalayıp yapıştırın:

.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;
  }

Bu CSS dosyasını ihtiyaçlarınıza göre değiştirmekten çekinmeyin.

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

Bu eğitimin, WordPress yorum formuna nasıl jQuery araç ipuçları ekleyeceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Bu kodu değiştirmeye ve araç ipuçlarını başka yerlere eklemeye çalışmanızı teşvik ediyoruz. Örneğin, sitemize araç ipucu referansları eklediğimizi kontrol edin. Geri bildirim ve sorularınız için lütfen aşağıya bir yorum bırakın.