WordPress yorum formu nasıl tasarlanır (Kesin kılavuz)

Sitenizdeki WordPress yorum formunun stilini değiştirmek ister misiniz? Yorumlar, bir web sitesinde kullanıcı etkileşimi oluşturmada önemli bir rol oynar. Çekici ve kullanımı kolay bir yorum formu, kullanıcıları tartışmaya katılmaya teşvik eder. Bu nedenle, WordPress yorum formunu kolayca tasarlamak için son kılavuzu oluşturduk.

Başlamadan önce

WordPress temaları sitenizin görünümünü kontrol eder. Her WordPress teması, şablon dosyaları, özellik dosyaları, JavaScripts ve stil sayfaları dahil olmak üzere farklı dosyalar içerir.

Stil sayfaları, WordPress düzeniniz tarafından kullanılan tüm öğeler için CSS kurallarını içerir. Temanızın stil kurallarını geçersiz kılmak için kendi özel CSS'nizi ekleyebilirsiniz.

Henüz yapmadıysanız, yeni başlayanlar için WordPress'e özel CSS ekleme hakkındaki makalemize göz atın.

CSS'ye ek olarak, WordPress yorum formunuzun varsayılan görünümünü değiştirmek için bazı işlevler eklemeniz gerekebilir. Henüz yapmadıysanız, WordPress'e kod kopyalama ve yapıştırma ile ilgili makalemizi okuyun.

Bununla birlikte, WordPress yorum formunun nasıl tasarlandığına bakalım.

Bu oldukça kapsamlı bir rehber olduğundan, gezinmenize yardımcı olacak bir içindekiler tablosu oluşturduk:

  • WordPress yorumlarını standart CSS sınıflarıyla değiştirme
  • WordPress yorum formuna sosyal giriş yapma
  • WordPress yorum formuna yorum ilkesi metni ekleme
  • Yorum metin kutusunu aşağı taşıma
  • Site çubuğunu (URL) WordPress yorum formundan kaldırma
  • WordPress'e Yorumlara Abone Ol onay kutusunu ekleme
  • WordPress yorumlarına hızlı etiketler ekleme

Çoğu WordPress temasının comment.php adlı bir şablonu vardır. Bu dosya, blog yazılarınızdaki yorumları ve yorum formlarını görüntülemek için kullanılır. WordPress yorum formu şu işlevle oluşturulur:

Varsayılan olarak, bu özellik geri bildirim formunuzu üç metin alanı (ad, e-posta ve web sitesi), bir geri bildirim metin kutusu, bir GDPR uyumluluğu onay kutusu ve Gönder düğmesi ile oluşturur.

Standart CSS sınıflarını özelleştirerek bu alanlardan birini kolayca değiştirebilirsiniz. WordPress'in her yorum formuna eklediği standart CSS sınıflarının listesi aşağıdadır.

#respond { } 
 #reply-title { } 
 #cancel-comment-reply-link { }
 #commentform { } 
 #author { } 
 #email { } 
 #url { } 
 #comment 
 #submit
 .comment-notes { } 
 .required { }
 .comment-form-author { }
 .comment-form-email { } 
 .comment-form-url { }
 .comment-form-comment { } 
 .comment-form-cookies-consent { }
 .form-allowed-tags { } 
 .form-submit
 

Bu CSS sınıflarını özelleştirerek WordPress yorum formunuzun görünümünü tamamen değiştirebilirsiniz.

Nasıl çalıştığına dair iyi bir fikir vermek için birkaç şeyi değiştirelim.

İlk olarak, aktif form alanını seçiyoruz. Şu anda etkin olan alanı vurgulayarak, formunuza özel ihtiyaçları olan kişiler için daha erişilebilir ve yorum formunuz daha küçük cihazlarda daha iyi görünür.

	
 #respond { 
 background: #fbfbfb;
 padding:0 10px 0 10px;
 }
  
 /* Highlight active form field */
  
 #respond input(type=text), textarea {
   -webkit-transition: all 0.30s ease-in-out;
   -moz-transition: all 0.30s ease-in-out;
   -ms-transition: all 0.30s ease-in-out;
   -o-transition: all 0.30s ease-in-out;
   outline: none;
   padding: 3px 0px 3px 3px;
   margin: 5px 1px 3px 0px;
   border: 1px solid #DDDDDD;
 }
   
   
 #respond input(type=text):focus,
 input(type=email):focus, 
 input(type=url):focus,
 textarea:focus {
 box-shadow: 0 0 5px rgba(81, 203, 238, 1);
 margin: 5px 1px 3px 0px;
 border: 2px solid rgba(81, 203, 238, 1);
 }
 
 

Değişikliklerden sonra WordPress Yirmi Onaltı temasında formumuz böyle görünüyordu:

Etkin yorum formunun kutusunu işaretleyin

Bu sınıflar, giriş alanlarında metin görüntüleme davranışını değiştirmenize olanak tanır. Yazarın adı ve URL alanları için metin biçimini değiştirdik.

 #author, #email { 
 font-family: "Open Sans", "Droid Sans", Arial;
 font-style:italic;
 color:#1d1d1d; 
 letter-spacing:.1em;
 } 
  
 #url  { 
 color: #1d1d1d;
 font-family: "Luicida Console", "Courier New", "Courier", monospace; 
 } 
 
 

Aşağıdaki ekran görüntüsüne daha yakından bakarsanız, e-posta alanının adı ve kaynağı site URL'sinden farklıdır.

Yorum formunun giriş biçimini değiştirme

Ayrıca, WordPress yorum formundaki gönder düğmesinin stilini de değiştirebilirsiniz. Varsayılan "Gönder" düğmesini kullanmak yerine, ona bir CSS3 gradyanı ve bir kutu gölgesi veriyoruz.

#submit {
 background:-moz-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-webkit-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-o-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:-ms-linear-gradient(top, #44c767 5%, #5cbf2a 100%);
 background:linear-gradient(to bottom, #44c767 5%, #5cbf2a 100%);
 background-color:#44c767;
 -moz-border-radius:28px;
 -webkit-border-radius:28px;
 border-radius:28px;
 border:1px solid #18ab29;
 display:inline-block;
 cursor:pointer;
 color:#ffffff;
 font-family:Arial;
 font-size:17px;
 padding:16px 31px;
 text-decoration:none;
 text-shadow:0px 1px 0px #2f6627;
 } 
  
 #submit:hover {
 background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #5cbf2a), color-stop(1, #44c767));
 background:-moz-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
 background:-webkit-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
 background:-o-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
 background:-ms-linear-gradient(top, #5cbf2a 5%, #44c767 100%);
 background:linear-gradient(to bottom, #5cbf2a 5%, #44c767 100%);
 background-color:#5cbf2a; 
 }
 #submit:active { 
 position:relative;
 top:1px;
 }
 

Düğme stili yorumları

WordPress yorum formlarını bir üst seviyeye taşıyın

Belki çok kolay olduğunu düşünüyorsun. Herkesin bizi takip edebilmesi için oradan başlamalıyız.

Form alanlarını yeniden düzenleyerek, sosyal oturum açma bilgileri ekleyerek, yorumlara abone olma, yorum yönergeleri, hızlı etiketler ve daha fazlasını yaparak WordPress yorum formunuzu bir sonraki seviyeye taşıyabilirsiniz.

WordPress yorumlarına sosyal giriş ekleme

WordPress yorumlarına sosyal girişler ekleyerek başlayalım.

İlk olarak, WordPress sosyal giriş eklentisini yükleyin ve etkinleştirin. Daha fazla bilgi için, bir WordPress eklentisi yükleme adım adım kılavuzumuza bakın.

Aktivasyon ziyaretinden sonra Ayarlar »WP Sosyal Giriş Eklenti yapılandırma sayfasını yapılandırın.

WP Sosyal Giriş Ayarları

Eklenti, sosyal platformlara bağlanmak için API anahtarları gerektirir. Bu bilgilerin her platforma nasıl getirileceğine ilişkin talimatların bağlantılarını göreceksiniz.

API anahtarlarınızı girdikten sonra, değişikliklerinizi kaydetmek için Ayarları Kaydet düğmesini tıklayın.

Artık yorum formunuzun üzerindeki sosyal giriş düğmelerini görmek için sitenizi ziyaret edebilirsiniz.

Yorum formuna sosyal giriş düğmeleri ekleyin

Tüm kullanıcılarımızı seviyoruz ve web sitemize yorum yapmak için zaman ayırdığınız için teşekkür ederiz. Bununla birlikte, sağlıklı bir tartışma ortamı oluşturmak için yorumların denetlenmesi önemlidir.

Tam şeffaflık için bir yorum politikası sayfası oluşturduk. Ancak, bu bağlantıyı altbilgiye ekleyemezsiniz.

Yorum politikamızın, yorum bırakan tüm kullanıcılar tarafından ön plana çıkmasını ve görünür olmasını istiyoruz. Bu nedenle, yorum politikasını WordPress yorum formumuza dahil etmeye karar verdik.

Bir yorum ilkesi sayfası eklemek için önce bir WordPress sayfası oluşturun ve yorum politikanızı tanımlayın (bizimkini çalabilir ve ihtiyaçlarınıza göre özelleştirebilirsiniz).

Daha sonra aşağıdaki kodu temanızın features.php dosyasına veya siteye özgü bir eklentiye yapıştırabilirsiniz.

 function wpbeginner_comment_text_before($arg) {
     $arg('comment_notes_before') = "";
     return $arg;
 }
  
 add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');
 
 

Yukarıdaki kod, notlardan önceki standart yorum formunu bu metinle değiştirir. Ayrıca koda CSS sınıfı ekledik, böylece uyarıyı vurgulamak için CSS kullanabilirsiniz. İşte kullandığımız CSS örneği:

p.comment-policy {
     border: 1px solid #ffd499;
     background-color: #fff4e5;
     border-radius: 5px;
     padding: 10px;
     margin: 10px 0px 10px 0px;
     font-size: small;
     font-style: italic;
 }
 

Test sayfamızda böyle görünüyor:

Yorum politikası hakkında yorumlar

Bağlantıyı yorum metni alanına göre görüntülemek için aşağıdaki kodu kullanın.

 function wpbeginner_comment_text_after($arg) {
     $arg('comment_notes_after') = "";
     return $arg;
 }
  
 add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');
 

URL'yi buna göre değiştirmeyi unutmayın. Ardından example.com yerine yorum politikası sayfanıza gidin :) :)

Varsayılan olarak, WordPress yorum formunda önce yorumlar alanı alanı, ardından Ad, E-posta ve Web Sitesi alanları görüntülenir. Bu değişiklik, WordPress 4.4'te tanıtıldı.

Daha önce, WordPress siteleri önce Ad, E-posta ve Web Sitesi alanlarını ve ardından Yorumlar metin kutusunu görüntülüyordu. Kullanıcılarımızın yorum formunu bu sırayla göstermeye alışık olduklarına inanıyoruz, bu nedenle WPBeginner'daki eski saha sırasını kullanmaya devam ediyoruz.

İsterseniz, temanızın file.php dosyasına veya siteye özgü bir eklentiye aşağıdaki kodu eklemeniz yeterlidir.

function wpb_move_comment_field_to_bottom( $fields ) {
 $comment_field = $fields('comment');
 unset( $fields('comment') );
 $fields('comment') = $comment_field;
 return $fields;
 }
  
 add_filter( 'comment_form_fields', 'wpb_move_comment_field_to_bottom'); 
 

Bu kod, alanı yorum metni alanında aşağı taşır.

Sondaki yorumun metin alanı

Site alanını (URL) WordPress yorum formundan kaldır

Yorum kutusundaki site alanı birçok spam göndericiyi çekiyor. Kaldırma işlemi spam göndericileri durdurmaz veya spam yorumlarını azaltmaz, ancak yanlışlıkla yanlış yazarın sitesine bağlantı içeren bir yorumu onaylamanızı kesinlikle engeller.

Ayrıca, yorum formundaki bir alanı daraltarak daha kolay ve daha kullanıcı dostu hale getirir. Bu konu hakkında daha fazla bilgi için, site URL alanının WordPress yorum formundan nasıl kaldırılacağı ile ilgili makalemize bakın.

URL alanını yorum formundan kaldırmak için features.php dosyanıza veya siteye özgü bir eklentiye aşağıdaki kodu eklemeniz yeterlidir.

function wpbeginner_remove_comment_url($arg) {
     $arg('url') = '';
     return $arg;
 }
 add_filter('comment_form_default_fields', 'wpbeginner_remove_comment_url');
 

URL alanını yorum formundan silin

Kullanıcılar sitenize bir yorum bırakırsa, birisinin yorumunuza yanıt verip vermediğini belirlemek için bu konuyu takip edebilirler. Yorumlara abone olmak için bir onay kutusu ekleyerek, gönderide yeni bir yorum göründüğünde kullanıcılar hemen bilgilendirilebilir.

Bu onay kutusunu eklemek için, önce yorumların yeniden yüklenmesini yeniden yüklemeli ve etkinleştirmelisiniz. Etkinleştirdikten sonra, eklenti ayarlarını yapılandırmak için Ayarlar »Yorumlara abone olun bölümüne gidin.

Ayrıntılı adım adım talimatlar için, kullanıcıların WordPress'teki yorumlara nasıl abone olabileceğiyle ilgili makalemize bakın.

Yeni yüklenen yorumlara abone olun

Hızlı etiketler, kullanıcıların yorum yapmasını kolaylaştıran biçimlendirme düğmeleridir. Bu, kalın veya italik düğmeleri içerir, bir bağlantı veya bir blok alıntı ekler.

Hızlı etiketler eklemek için temel etiket eklentilerini yükleyin ve etkinleştirin. Daha fazla bilgi için WordPress yorum formuna kolayca hızlı etiket ekleme hakkındaki makalemize bakın.

Hızlı etiketler eklediğinizde yorum formunuz böyle görünür.

Yorum formundaki hızlı etiketler

Bu makalenin, kullanıcılarınız için daha eğlenceli hale getirmek için WordPress yorum formunu tasarlamanıza yardımcı olduğunu umuyoruz. WordPress blog yayınlarınızla ilgili daha fazla yorum için ipuçlarımızı da okuyabilirsiniz.

Bu makaleyi beğendiyseniz, kanalımıza abone olun YouTube WordPress öğretici videolarını izlemek için. Bizi şu adreste de bulabilirsiniz: Twitter ve Facebook.