WordPress Yorum Formu Nasıl Şekillendirilir (Nihai Kılavuz)

Web sitenizdeki WordPress yorum formunun stilini değiştirmek mi istiyorsunuz? WPBeginner’da, kullanıcı etkileşimini artırmanın farklı yollarını denemek için yıllar harcadık ve iyi görünümlü, kullanıcı dostu bir yorum formunun büyük bir fark yaratabileceğini gördük.

Yorumlar, bir web sitesinde kullanıcı etkileşimi oluşturmada önemli bir rol oynar. Kullanıcıların yorum bırakmasını kolay ve görsel olarak çekici hale getirdiğinizde, web sitenizde daha fazla tartışma ve etkileşimi teşvik edersiniz.

Bu makalede, web sitenizdeki etkileşimi artırmak için WordPress yorum formunu nasıl kolayca şekillendireceğinizi göstereceğiz.

Başlamadan Önce

WordPress temaları web sitenizin görünümünü kontrol eder. Her WordPress teması, şablon dosyaları, işlev dosyaları, JavaScripts ve stil sayfaları dahil olmak üzere çeşitli dosyalarla birlikte gelir.

Stil sayfaları, WordPress temanız 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.

Bunu daha önce yapmadıysanız, yeni başlayanlar için WordPress’te özel CSS ekleme hakkındaki makalemize bakın.

CSS’nin yanı sıra, WordPress yorum formunuzun varsayılan görünümünü değiştirmek için bazı işlevler eklemeniz de gerekebilir. Bunu daha önce yapmadıysanız, lütfen WordPress’te kod kopyalama ve yapıştırma hakkındaki makalemize bakın.

Bununla birlikte, WordPress yorum formunun nasıl şekillendirileceğine bir göz atalım.

Bu oldukça kapsamlı bir kılavuz olduğundan, kolay gezinme için bir içerik tablosu oluşturduk:

SeedProd Tema Oluşturucu Kullanarak WordPress Yorum Formunu Şekillendirme

Bu yöntem, piyasadaki en iyi WordPress sayfa ve tema oluşturucu eklentisi olan SeedProd ‘u gerektirir.

Kodlama deneyimi olmayan yeni başlayanlar için tavsiye edilir. Ancak bu yöntemin dezavantajı, mevcut WordPress temanızı özel bir tema ile değiştirecek olmasıdır.

Öncelikle SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Not: Tema oluşturucu özelliğine erişmek için en az PRO planına ihtiyacınız olacaktır.

Etkinleştirmenin ardından, özel WordPress temanız için şablonlar oluşturmanız gerekecektir. SeedProd, yerleşik temalarından birini kullanarak bu şablonları kolayca oluşturmanıza olanak tanır.

Ayrıntılı talimatlar için kodlama yapmadan özel bir WordPress temasının nasıl oluşturulacağına ilişkin eğitimimize bakın.

Tema şablonlarınızı oluşturduktan sonra, Tek Gönderi şablonunun altındaki ‘Tasarımı Düzenle’ bağlantısını tıklamanız gerekir.

Bu, SeedProd tema oluşturucu arayüzünde tek gönderi önizlemesini yükleyecektir. Önizlemenin alt kısmında yorum formu bloğunu göreceksiniz.

Yorum formuna tıkladığınızda sol panelde formun özelliklerini göreceksiniz.

Buradan bir yorum notu veya gizlilik politikası ekleyebilir, ayrıca herhangi bir CSS kodu yazmadan yorum formu stilini düzenlemek için ‘Gelişmiş’ sekmesine geçebilirsiniz.

İşiniz bittiğinde, değişikliklerinizi yayınlamak için ‘Kaydet’ düğmesine tıklamayı unutmayın.

SeedProd, web sitenizdeki herhangi bir öğenin stilini kod yazmadan değiştirmeyi çok kolay hale getirir.

Ancak, bu bir tema oluşturucudur ve zaten beğendiğiniz bir WordPress teması kullanıyor olabilirsiniz. Bu durumda, aşağıdaki ipuçları WordPress’te yorum formu stillerini manuel olarak değiştirmenize yardımcı olacaktır.

WordPress’te Yorum Formu Stilini Değiştirme

Çoğu WordPress temasının içinde comments.php adında bir şablon 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 fonksiyon kullanılarak oluşturulur: <?php comment_form(); ?>.

Bu işlev varsayılan olarak yorum formunuzu üç metin alanı (Ad, E-posta ve Web Sitesi), yorum metni için bir metin alanı, GDPR uyumluluğu için bir onay kutusu ve gönder düğmesi ile oluşturur.

Varsayılan CSS sınıflarını değiştirerek bu alanların her birini kolayca değiştirebilirsiniz. Aşağıda WordPress’in her yorum formuna eklediği varsayılan CSS sınıflarının bir listesi bulunmaktadı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

Sadece bu CSS sınıflarını değiştirerek WordPress yorum formunuzun görünümünü ve hissini tamamen değiştirebilirsiniz.

Devam edelim ve birkaç şeyi değiştirmeyi deneyelim, böylece bunun nasıl çalıştığına dair iyi bir fikir edinebilirsiniz.

İlk olarak, aktif form alanını vurgulayarak başlayacağız. O anda etkin olan alanı vurgulamak, formunuzu özel ihtiyaçları olan kişiler için daha erişilebilir hale getirir ve ayrıca yorum formunuzun daha küçük cihazlarda daha güzel görünmesini sağlar.

#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 formumuz WordPress Twenty Sixteen temasında bu şekilde görünüyordu:

Bu sınıfları kullanarak, giriş kutularının içinde metnin nasıl görüneceğine ilişkin davranışı değiştirebilirsiniz. Devam edip yazar adı ve URL alanlarının metin stilini değiştireceğiz.

#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 yakından bakarsanız, ad ve e-posta alanı yazı tipinin web sitesi URL’sinden farklı olduğunu görürsünüz.

WordPress yorum formu gönder düğmesinin stilini de değiştirebilirsiniz. Varsayılan gönder düğmesini kullanmak yerine, ona biraz CSS3 gradyanı ve kutu gölgesi verelim.

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

WordPress Yorum Formlarını Bir Sonraki Seviyeye Taşımak

Bunun çok basit olduğunu düşünüyor olabilirsiniz. Herkesin takip edebilmesi için buradan başlamalıyız.

Ancak, form alanlarını yeniden düzenleyerek, sosyal giriş, yorum abonelikleri, yorum yönergeleri, hızlı etiketler ve daha fazlasını ekleyerek WordPress yorum formunuzu bir sonraki seviyeye taşıyabilirsiniz.

WordPress Yorumlarına Sosyal Giriş Ekleme

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

Yapmanız gereken ilk şey Super Socializer eklentisini kurmak ve etkinleştirmektir. Daha fazla ayrıntı için, bir WordPress eklentisinin nasıl kurulacağına ilişkin adım adım kılavuzumuza bakın.

Etkinleştirmenin ardından, Super Socializer ” Sosyal Giriş’i ziyaret etmeniz ve ardından ‘Sosyal Girişi Etkinleştir’ yazan kutuyu işaretlemeniz gerekir.

Bu, sosyal oturum açma seçenekleri panelini getirir. İlk olarak, ‘Gelişmiş Yapılandırma’ sekmesine tıklayın.

Ardından, ‘Yorum formunda etkinleştir’ kutusunun işaretli olduğundan emin olun.

Ardından, ‘Temel Yapılandırma’ sekmesine tıklayın. Burada, ‘Sosyal Ağları Seçin’ bölümündeki kutuları işaretleyerek eklemek istediğiniz sosyal ağları seçebilirsiniz.

Bunun altında, eklenti sosyal platformlarla bağlantı kurmak için API anahtarlarına ihtiyaç duyacaktır. Her platform için bunun nasıl alınacağına ilişkin talimatları görüntülemek için ‘Soru İşareti’ simgesine tıklamanız yeterlidir.

İşiniz bittiğinde, sosyal giriş ayarlarınızı kaydetmek için ‘Değişiklikleri Kaydet’ düğmesine tıklayın.

Artık web sitenizi ziyaret ederek yorum formunuzun üzerindeki sosyal giriş düğmelerini görebilirsiniz.

Yorum Formundan Önce veya Sonra Yorum Politikası Metni Ekleme

Tüm kullanıcılarımızı seviyoruz ve sitemize yorum bırakmak için birkaç dakikalarını ayırmalarını gerçekten takdir ediyoruz. Ancak, sağlıklı bir tartışma ortamı yaratmak için yorumları denetlemek önemlidir.

Tam şeffaflığa sahip olmak için bir yorum politikası sayfası oluşturduk, ancak bu bağlantıyı altbilgiye koyamazsınız.

Yorum politikamızın yorum bırakan tüm kullanıcılar için belirgin ve görünür olmasını istedik. Bu nedenle yorum politikasını WordPress yorum formumuza eklemeye karar verdik.

Bir yorum politikası sayfası eklemek istiyorsanız, yapmanız gereken ilk şey bir WordPress sayfası oluşturmak ve yorum politikanızı tanımlamaktır ( bizimkini çalabilir ve ihtiyaçlarınızı karşılayacak şekilde değiştirebilirsiniz).

Bundan sonra, aşağıdaki kodu temanızın functions.php dosyasına veya bir kod parçacıkları eklentisine ekleyebilirsiniz.

function wpbeginner_comment_text_before($arg) {
    $arg['comment_notes_before'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_before');

Yukarıdaki kod, notlardan önceki varsayılan yorum formunu bu metinle değiştirecektir. Ayrıca koda bir CSS sınıfı ekledik, böylece CSS kullanarak bildirimi vurgulayabiliriz. İşte kullandığımız örnek CSS:

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 sitemizde bu şekilde görünüyordu:

Bağlantıyı yorum metni alanından sonra görüntülemek istiyorsanız, aşağıdaki kodu kullanın.

function wpbeginner_comment_text_after($arg) {
    $arg['comment_notes_after'] .= '<p class="comment-policy"">We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our <a href="http://www.example.com/comment-policy-page/">comment policy</a>.</p>';
    return $arg;
}

add_filter('comment_form_defaults', 'wpbeginner_comment_text_after');

URL’yi uygun şekilde değiştirmeyi unutmayın, böylece example.com yerine yorum politikası sayfanıza gider.

Yorum Metin Alanını Alta Taşı

WordPress yorum formu varsayılan olarak önce yorum metni alanını, ardından ad, e-posta ve web sitesi alanlarını görüntüler. Bu değişiklik WordPress 4.4’te tanıtıldı.

Bundan önce WordPress web sitelerinde önce ad, e-posta ve web sitesi alanları, ardından da yorum metin kutusu görüntüleniyordu. Kullanıcılarımızın yorum formunu bu sırada görmeye alışkın olduğunu düşündük, bu nedenle WPBeginner’da hala eski alan sırasını kullanıyoruz.

Bunu yapmak istiyorsanız, tek yapmanız gereken aşağıdaki kodu temanızın functions.php dosyasına veya bir kod parçacıkları eklentisine eklemektir.

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');

WordPress’e her zaman WPCode gibi bir kod parçacıkları eklentisi kullanarak kod eklemenizi öneririz. Bu, functions.php dosyanızı düzenlemeden özel kod eklemeyi kolaylaştırır, böylece sitenizi bozma konusunda endişelenmenize gerek kalmaz.

Başlamak için ücretsiz WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Talimatlar için bir WordPress eklentisinin nasıl kurulacağına ilişkin bu kılavuza bakın.

Etkinleştirmenin ardından WordPress panosundan Code Snippets ” + Add Snippet seçeneğine gidin.

Buradan, ‘Özel Kodunuzu Ekleyin (Yeni Snippet)’ seçeneğini bulun ve altındaki ‘Snippet Kullan’ düğmesine tıklayın.

Ardından, sayfanın üst kısmına snippet’iniz için bir başlık ekleyin, bu kodun ne için olduğunu hatırlamanıza yardımcı olacak herhangi bir şey olabilir.

Ardından, yukarıdaki kodu ‘Kod Önizleme’ kutusuna yapıştırın ve sağdaki açılır listeden kod türü olarak ‘PHP Snippet’i seçin.

Bundan sonra, anahtarı ‘Etkin Değil’den ‘Etkin’e getirin ve ‘Snippet’i Kaydet’ düğmesine tıklayın.

Bu kod sadece yorum metin alanı alanını en alta taşır.

WordPress Yorum Formundan Web Sitesi (URL) Alanını Kaldırma

Yorum formundaki web sitesi alanı çok sayıda spamcının ilgisini çekmektedir. Bu alanı kaldırmak spam göndericileri durdurmayacak ve hatta spam yorumları azaltmayacak olsa da, sizi yanlışlıkla kötü yazar web sitesi bağlantısı içeren bir yorumu onaylamaktan kesinlikle kurtaracaktır.

Ayrıca yorum formundaki bir alanı azaltarak daha kolay ve kullanıcı dostu hale getirecektir. Bu konu hakkında daha fazla bilgi için WordPress yorum formundan web sitesi url alanını kaldırma makalemize bakın.

Yorum formundan URL alanını kaldırmak için aşağıdaki kodu functions.php dosyanıza veya bir kod parçacıkları eklentisine eklemeniz yeterlidir.

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

WPCode eklentisini kullanarak bu kodu WordPress’e güvenli bir şekilde eklemek için önceki bölümdeki adımları takip edebilirsiniz.

WordPress’te Yorumlara Abone Ol Onay Kutusu Ekleme

Kullanıcılar web sitenizde bir yorum bıraktıklarında, birisinin yorumlarına yanıt verip vermediğini görmek için o konuyu takip etmek isteyebilirler. Yorumlara abone ol onay kutusu ekleyerek, kullanıcıların gönderide yeni bir yorum göründüğünde anında bildirim almalarını sağlarsınız.

Bu onay kutusunu eklemek için yapmanız gereken ilk şey Subscribe to Comments Reloaded eklentisini yüklemek ve etkinleştirmektir. Etkinleştirmenin ardından, eklenti ayarlarını yapılandırmak için StCR ” Comment Form sayfasını ziyaret etmeniz gerekir.

Adım adım ayrıntılı talimatlar için WordPress’te kullanıcıların yorumlara abone olmasına nasıl izin vereceğinize ilişkin makalemize bakın.

WordPress Yorum Formuna Ekstra Alanlar Ekleme

WordPress yorum formunuza ekstra alanlar eklemek ister misiniz? Örneğin, kullanıcıların Twitter adreslerini ekleyebilecekleri isteğe bağlı bir alan?

WordPress Comments Fields eklentisini kurun ve etkinleştirin. Etkinleştirdikten sonra, ‘Yorum Alanları’ sayfasına gidin ve ‘Yorum Alanları’ sekmesine geçin.

Özel bir alanı sürükleyip bırakmanız ve ona bir başlık, açıklama ve veri adı vermeniz yeterlidir.

Alanları eklemeyi tamamladıktan sonra, ‘Tüm değişiklikleri kaydet’ düğmesine tıklamayı unutmayın.

Artık eylemlerdeki özel alanları görmek için yorum formunuzu görüntüleyebilirsiniz.

Özel alanlar daha sonra yorum moderasyonunda ve yorum içeriğinin altında görüntülenir.

Daha fazla ayrıntı için WordPress’te yorum formuna özel alanların nasıl ekleneceğine ilişkin eğitimimize bakın.

Umarız bu makale WordPress yorum formunu kullanıcılarınız için daha eğlenceli hale getirmeyi öğrenmenize yardımcı olmuştur. WordPress blog yazılarınıza daha fazla yorum almak için ipuçlarımızı ve WordPress için en iyi sosyal medya eklentileri uzman seçimlerimizi de görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.