WordPress Yorum Formu Nasıl Stillenir (Nihai Kılavuz)

Web sitenizdeki WordPress yorum formunun stilini değiştirmek ister misiniz? WPBeginner'da, kullanıcı etkileşimini artırmanın farklı yollarını yıllarca denedik ve iyi görünümlü, kullanıcı dostu bir yorum formunun çok büyük bir fark yaratabileceğini bulduk.

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şim teşvik edersiniz.

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

Başlamadan Önce

WordPress temaları web sitenizin görünümünü kontrol eder. Her WordPress teması, şablon dosyaları, functions dosyası, JavaScript'ler 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. Tema stil kurallarınızı geçersiz kılmak için kendi özel CSS'nizi ekleyebilirsiniz.

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

CSS'ye ek olarak, 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'e kod kopyalayıp yapıştırma hakkındaki makalemize bakın.

Bununla birlikte, WordPress yorum formunu nasıl stilize edeceğimize bir göz atalım.

Bu oldukça kapsamlı bir rehber olduğu için, kolay gezinme amacıyla bir içindekiler tablosu oluşturduk:

• SeedProd Tema Oluşturucu Kullanarak WordPress Yorum Formunu Stilize Etme
• Change WordPress Comments with Default CSS Classes
• WordPress Yorumlarına Sosyal Giriş Ekleme
• WordPress Yorum Formuna Yorum Politikası Metni Ekleme
• Yorum Metin Alanını Alt Kısma Taşı
• WordPress Yorum Formundan Web Sitesi (URL) Alanını Kaldırın
• WordPress'e Yorumlara Abone Olma Onay Kutusu Ekleme
• WordPress Yorum Formuna Özel Alanlar Ekleme

SeedProd Tema Oluşturucu Kullanarak WordPress Yorum Formunu Stilize Etme

Bu yöntem SeedProd gerektirir, ki bu da piyasadaki en iyi WordPress sayfa ve tema oluşturucu eklentisidir.

Kodlama deneyimi olmayan yeni başlayanlar için önerilir. Ancak, bu yöntemin dezavantajı, mevcut WordPress temanızı özel bir tema ile değiştirmesidir.

Öncelikle, SeedProd eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Daha fazla ayrıntı için, WordPress eklentisi nasıl kurulur hakkındaki adım adım kılavuzumuza bakın.

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

Etkinleştirdikten sonra, ö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.

Kodlama yapmadan özel bir WordPress teması oluşturma konusunda ayrıntılı talimatlar için, özel bir WordPress teması oluşturma konusundaki eğitimimize bakın.

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

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

Yorum formuna tıklamanız yeterlidir ve sol panelde özelliklerini göreceksiniz.

Buradan bir yorum notu ekleyebilir veya gizlilik politikası ekleyebilirsiniz, ayrıca 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, kod yazmadan web sitenizdeki herhangi bir öğenin stilini değiştirmenizi çok kolaylaştırır.

Ancak, bu bir tema oluşturucudur ve muhtemelen zaten beğendiğiniz bir WordPress teması kullanıyorsunuzdur. 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

Inside most WordPress themes there is a template called comments.php. This file is used to display comments and comment forms on your blog posts. The WordPress comment form is generated by using the function: <?php comment_form(); ?>.

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

Bu alanların her birini varsayılan CSS sınıflarını ayarlayarak 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

Bu CSS sınıflarını basitçe ayarlayarak WordPress yorum formunuzun görünümünü ve hissini tamamen değiştirebilirsiniz.

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. Şu anda aktif olan alanı vurgulamak, formunuzu özel ihtiyaçları olan kişiler için daha erişilebilir hale getirir ve ayrıca yorum formunuzun 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 böyle görünüyordu:

Bu sınıfları kullanarak, metnin giriş kutularının içinde nasıl görüneceğini değiştirebilirsiniz. yazar adının 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ı tipi web sitesi URL'sinden farklıdır.

Ayrıca WordPress yorum formu gönder düğmesinin stilini de değiştirebilirsiniz. Varsayılan gönder düğmesini kullanmak yerine, ona bazı CSS3 gradyanları 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şıma

Bunun çok temel olduğunu düşünmüş olabilirsiniz. Herkesin takip edebilmesi için oradan 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 ekleyerek başlayalım.

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

Etkinleştirdikten sonra, Süper Sosyal Paylaşım » Sosyal Giriş'i ziyaret etmeniz ve ardından 'Sosyal Girişi Etkinleştir' seçeneğini işaretlemeniz gerekir.

Bu, sosyal giriş seçenekleri panelini açar. İ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ç’ 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ı gerektirecektir. Her platform için bunları nasıl alacağınıza dair talimatları getirmek için 'Soru İşareti' simgesine tıklamanız yeterlidir.

Once you’re done, click the ‘Save Changes’ button to save your social login settings.

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

Yorum Politikası Metnini Yorum Formundan Önce veya Sonra Ekleme

Tüm kullanıcılarımızı seviyoruz ve sitemize yorum bırakmak için birkaç dakikalarını ayırdıkları için gerçekten minnettarız. Ancak, sağlıklı bir tartışma ortamı oluşturmak için yorumları moderasyon yapmak önemlidir.

Tam şeffaflık sağlamak için bir yorum politikası sayfası oluşturduk, ancak bu bağlantıyı alt bilgiye koyamazsınız.

Yorum politikamızın, yorum yapan tüm kullanıcılar için belirgin ve görünür olmasını istedik. Bu nedenle yorum politikamızı 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 (ihtiyaçlarınıza göre uyarlamak için bizimkini çalabilirsiniz).

Ardından, aşağıdaki kodu temanızın functions.php dosyasına veya bir kod parçacığı 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, varsayılan yorum formunu notlardan önce bu metinle değiştirecektir. Ayrıca, CSS ile bildirimi vurgulayabilmemiz için koda bir CSS sınıfı ekledik. Kullandığımız örnek CSS şudur:

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 böyle görünüyordu:

Bağlantıyı yorum metin alanından sonra görüntülemek isterseniz, 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 buna göre değiştirmeyi unutmayın, böylece örneğin.com yerine yorum politikası sayfanıza gider.

Yorum Metin Alanını Alt Kısma Taşı

Varsayılan olarak, WordPress yorum formu önce yorum metin 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 siteleri önce ad, e-posta ve web sitesi alanlarını, ardından yorum metin kutusunu görüntülüyordu. Kullanıcılarımızın yorum formunu bu sırayla görmeye alıştığını hissettik, bu yüzden 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ığı 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'te kod eklemeyi her zaman WPCode gibi bir kod parçacığı eklentisi kullanarak eklemenizi öneririz. Bu, functions.php dosyanızı düzenlemeden özel kod eklemeyi kolaylaştırır, böylece sitenizi bozma endişesi taşımanıza 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 dair bu kılavuza bakın.

Etkinleştirdikten sonra, WordPress kontrol panelinden Kod Parçacıkları » + Parçacık Ekle bölümüne gidin. 

Oradan, 'Özel Kodunuzu Ekleyin (Yeni Parça)' seçeneğini bulun ve altındaki '+ Özel Parça Ekle' düğmesine tıklayın.

Bundan sonra, ekranda beliren seçenekler listesinden kod türü olarak ‘PHP Snippet’i seçmeniz gerekir.

Ardından, sayfanın üst kısmına kod parçacığınız için bir başlık ekleyin, bu, kodun ne işe yaradığını hatırlamanıza yardımcı olacak herhangi bir şey olabilir.

Ardından, yukarıdaki kodu 'Kod Önizleme' kutusuna yapıştırın.

Son olarak, anahtarı 'Etkin Değil'den 'Aktif'e getirin ve 'Kod Parçasını Kaydet' düğmesine tıklayın.

Bu kod, yorum metin alanı alanını basitçe alta taşır.

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

Yorum formundaki web sitesi alanı birçok spam göndericisini cezbeder. Kaldırmak spam göndericilerini durdurmayacak veya spam yorumlarını azaltmayacak olsa da, kötü yazar web sitesi bağlantısına sahip bir yorumu yanlışlıkla onaylamaktan sizi kesinlikle kurtaracaktır.

Bu aynı zamanda yorum formundan bir alanı kaldırarak 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 hakkındaki 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ığı eklentisine eklemeniz yeterlidir.

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

Bu kodu WordPress'e WPCode eklentisini kullanarak güvenli bir şekilde eklemek için önceki bölümdeki adımları izleyebilirsiniz.

WordPress'e Yorumlara Abone Olma Onay Kutusu Ekleme

When users leave a comment on your website, they might want to follow up on that thread to see if someone has replied to their comment. By adding a subscribe to comments checkbox, you enable users to receive instant notifications whenever a new comment appears on the post.

Bu onay kutusunu eklemek için yapmanız gereken ilk şey, Subscribe to Comments Reloaded eklentisini kurmak ve etkinleştirmektir. Etkinleştirdikten sonra, eklenti ayarlarını yapılandırmak için StCR » Comment Form sayfasına gitmeniz gerekir.

Ayrıntılı adım adım talimatlar için, kullanıcılarınızın WordPress'te yorumlara abone olmasına izin verme konusundaki makalemize bakın. kullanıcıların WordPress'te yorumlara abone olmasına izin verme.

WordPress Yorum Formuna Ek Alanlar Ekleme

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

Sadece WordPress Yorum Alanları 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ırakın ve ona bir başlık, açıklama ve veri adı verin.

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

Özel alanları görebilmek için yorum formunuzu şimdi görüntüleyebilirsiniz.

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

Daha fazla ayrıntı için, WordPress'te yorum formuna özel alan ekleme konusundaki eğitimimize bakın. WordPress'te yorum formuna özel alanlar ekleme.

Umarım bu makale, kullanıcılarınız için daha eğlenceli hale getirmek üzere WordPress yorum formunu nasıl stilize edeceğinizi öğrenmenize yardımcı olmuştur. Ayrıca 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 hakkındaki uzman seçimlerimizi de görmek isteyebilirsiniz.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.