Web sitenizdeki WordPress yorum formunun stilini değiştirmek ister misiniz? Yorumlar, bir web sitesinde kullanıcı katılımı oluşturmada önemli bir rol oynar. İyi görünümlü, kullanıcı dostu bir yorum formu, kullanıcıları tartışmaya katılmaya teşvik eder. Bu nedenle, WordPress yorum formunu nasıl kolayca düzenleyeceğinize dair nihai kılavuzu oluşturduk.

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 birkaç dosyayla birlikte gelir .

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

CSS dışında, WordPress yorum formunuzun varsayılan görünümünü değiştirmek için bazı işlevler eklemeniz de gerekebilir.

Olduğu söyleniyor, hadi WordPress yorum formunun nasıl düzenleneceğine bir göz atalım.

WordPress’te Yorum Formu Stilini Değiştirme

WordPress temalarının çoğu içinde comments.php adında bir şablon vardır. Bu dosya blog yayınlarınızdaki yorumları ve yorum formlarını görüntülemek için kullanılır. WordPress yorum formu, işlevi kullanılarak oluşturulur <?php comment_form(); ?>.

Varsayılan olarak, bu işlev, 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üğmesiyle 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 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ı değiştirerek, WordPress yorum formunuzun görünümünü ve izlenimini tamamen değiştirebilirsiniz.

Hadi devam edelim ve birkaç şeyi değiştirmeye çalışalım, böylece bunun nasıl çalıştığı hakkında iyi bir fikir edinebilirsiniz.

İlk önce aktif form alanını vurgulayarak başlayacağız. Halen aktif olan alanı vurgulamak, formunuzu özel ihtiyaçları olan kişiler için daha erişilebilir kılar ve yorum formunuzu 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); }

Bu, formumuzun WordPress Yirmi Onaltı temadaki değişikliklerden sonraki haliyle nasıl göründüğü:

Bu sınıfları kullanarak, metnin giriş kutularında nasıl göründüğünün davranışını değiştirebilirsiniz. Devam edeceğiz ve 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, 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 Almak

Bunun çok temel olduğunu düşünüyor olabilirsiniz. Oradan başlamalıyız, böylece herkes takip edebilir.

Form alanlarını yeniden düzenleyerek, sosyal giriş yaparak, yorumlara abone olarak, yorum kılavuzlarına, hızlı etiketlere ve daha pek çok şeye WordPress yorum formunuzu bir üst seviyeye alabilirsiniz.

WordPress Yorumlar Sosyal giriş ekle

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

Yapmanız gereken ilk şey, WordPress Sosyal Giriş eklentisini yüklemek ve etkinleştirmek .

Etkinleştirmeden sonra, eklenti ayarlarını yapılandırmak için Ayarlar »WP Sosyal Giriş sayfasını ziyaret etmeniz gerekir .

Eklenti, sosyal platformlara bağlanmak için API anahtarları gerektirecektir. Her platform için bu bilgilerin nasıl alınacağına dair talimatları içeren bağlantıları göreceksiniz.

API anahtarlarınızı girdikten sonra, değişikliklerinizi saklamak için ayarları kaydet düğmesine tıklayın.

Artık yorum formunuzun üzerindeki sosyal giriş butonlarını görmek için web sitenizi ziyaret edebilirsiniz.

Yorum Formundan Önce veya Sonra Yorum Politikası Metni Ekleme

Tüm kullanıcılarımızı seviyoruz ve sitemize yorum yapmak için birkaç dakikanızı ayırmalarını gerçekten takdir ediyoruz. Bununla birlikte, sağlıklı bir tartışma ortamı oluşturmak için yorumları ortada tutmak önemlidir .

Yorum politikamızın, yorum yapan tüm kullanıcılar için belirgin ve görünür olmasını sağlamak 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.

Bundan sonra, aşağıdaki kodu temanızın functions.php dosyasına veya siteye özgü bir eklentiye ekleyebilirsiniz .

function wpbeginner_comment_text_before($arg) { $arg[‘comment_notes_before’] = ”

We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy.

“; return $arg; } add_filter(‘comment_form_defaults’, ‘wpbeginner_comment_text_before’);

Yukarıdaki kod, bu metinle ilgili notlardan önceki varsayılan yorum formunun yerini alacaktır. Ayrıca CSS kullanarak bildirimi vurgulayabilmemiz için koda bir CSS sınıfı ekledik. İş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 sitemize şöyle baktı:

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’] = ”

We are glad you have chosen to leave a comment. Please keep in mind that comments are moderated according to our comment policy.

“; return $arg; } add_filter(‘comment_form_defaults’, ‘wpbeginner_comment_text_after’);

URL’yi uygun şekilde değiştirmeyi unutmayın, bu nedenle example.com yerine yorum politikası sayfanıza gider. :)

Yorum Metni Alanını Dibe Taşı

Varsayılan olarak, WordPress yorum formu ö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 siteleri önce ad, e-posta ve web sitesi alanlarını, ardından yorum metin kutusunu görüntüler. Kullanıcılarımızın yorum formunu bu sırada görmeye alıştığını düşündük, bu yüzden hala WPBeginner’deki eski alan siparişini kullanıyoruz.

Bunu yapmak istiyorsanız, yapmanız gereken tek şey, kendi işlevler.phpdosyasına veya siteye özgü bir eklentiye aşağıdaki kodu 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’

Bu kod sadece yorum metni alanını aşağıya doğru hareket ettirir.

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

Yorum formundaki web sitesi çok fazla sayıda spamcı çekiyor. Bunu kaldırmak spam göndericileri durduramaz veya spam yorumlarını azaltamazken, kesinlikle kötü yazar web sitesi bağlantısına sahip bir yorumu yanlışlıkla onaylamaktan kurtarır.

Ayrıca, yorum alanından bir alanı azaltacak, daha kolay ve daha kullanıcı dostu hale getirecektir.

URL alanını yorum formundan çıkarmak için, aşağıdaki kodu functions.php dosyasına veya siteye özgü bir eklentiye eklemeniz yeterlidir.

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

WordPress’teki Yorumlar Onay Kutusuna Abone Ol

Kullanıcılar web sitenize yorum yaptığında, birisinin yorumuna cevap verip vermediğini görmek için o konuyu takip etmek isteyebilirler. Yorumlara abone olma onay kutusunu ekleyerek, kullanıcıların yayınlarda 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, Yüklenilen Yorumlar’a abone olmak ve Reloaded eklentisine abone olmak . Etkinleştirmeden sonra eklenti ayarlarını yapılandırmak için Ayarlar »Yorumlara Abone Olmanız gerekir.

Yorum Formuna Hızlı Etiket Ekleme

Hızlı etiketler, kullanıcıların yorumlarını kolayca stillendirmelerine olanak tanıyan düğmeler biçimlendirir. Bunlar arasında koyu, italik hale getirmek, bağlantı eklemek veya blok alıntı yapmak için düğmeler bulunur.

Hızlı etiket eklemek için, Temel Yorum Hızlı Etiket eklentisini kurmanız ve etkinleştirmeniz gerekir . Ayrıntılar için, WordPress yorum formunda hızlı etiketlerin nasıl kolayca ekleneceği ile ilgili makalemize bakın .

Bu, yorum formunuzun hızlı etiketler ekledikten sonra nasıl görüneceğine ilişkindir.

Umarız bu makale, kullanıcılarınız için daha eğlenceli hale getirmek için WordPress yorum formunu nasıl düzenleyeceğinizi öğrenmenize yardımcı olmuştur.

Bir önceki yazımız olan Yeni Tema: Yirmi Ondokuz başlıklı makalemizi de okumanızı öneririz.