WordPress Yorum Formu Nasıl Oluşturulur

Yorum Formu Nasıl Oluşturulur ,Web sitenizdeki WordPress yorum formunun stilini değiştirmek mi istiyorsunuz? Yorumlar, bir web sitesinde kullanıcı etkileşimi oluşturulmasında ö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. İşte bu yüzden, WordPress yorum formunu kolayca şekillendirmek için en iyi rehberi oluşturduk.

Başlamadan önce

WordPress temaları web sitenizin görünümünü kontrol eder. Her bir WordPress teması, şablon dosyaları, işlevler dosyası , JavaScripts ve stil sayfaları dahil olmak üzere birkaç dosya ile birlikte gelir .

Stil sayfaları , WordPress temanız tarafından kullanılan tüm öğeler için CSSkurallarını içerir . Temanı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 gerekebilir.

Bu, WordPress yorum formunu nasıl şekillendireceğimize bir bakalım.

WordPress’de Yorum Formu Stilini Değiştirme

Çoğu WordPress temasının içinde comments.php adlı bir şablon var. Bu dosya, blog gönderilerinizde yorumları ve yorum formunu görüntülemek için kullanılır. WordPress yorum formu işlevini kullanarak oluşturulur: <?php comment_form(); ?>.

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

Bu alanların her birini, varsayılan CSS sınıflarını basitçe değiştirerek kolayca değiştirebilirsiniz. Aşağıda, WordPress’in her bir 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 değiştirerek, WordPress yorum formunuzun görünümünü ve hissini tamamen değiştirebilirsiniz.

Hadi devam edelim ve birkaç şeyi değiştirmeye çalışalım, 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 aynı zamanda 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);
}

Formumuz, değişikliklerden sonra WordPress Twenty Sixteen temasında nasıl göründü?

Bu sınıfları kullanarak, giriş kutularında metnin nasıl göründüğünün davranışını değiştirebilirsiniz. Devam edip yazar isminin 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önderim kutusunun stilini de değiştirebilirsiniz. Varsayılan gönderme düğmesini kullanmak yerine, biraz CSS3 degrade ve kutu gölgesi verelim.