Yorum tasarımı çok basit görünebilir. Ve budur! Ama bence bu durumda basit etkili. Yorumlar CSS-Püf Noktalarının o kadar önemli bir parçası ki, çok okunabilir ve rahat olmasını istiyorum.
Şimdi WordPress'e atlayacağız ve bu yorum dizisini gerçeğe dönüştüreceğiz. Yaptığımız ilk şey, yorumları göstereceğimiz bir şablon bulmaktır. single.phpmuhtemelen en önemlisidir (bireysel blog gönderileri). Bu şablonda comments_template(), tüm yorumlar alanını almak için aramamız gereken tek şeyin işlev olduğunu görüyoruz. Esasen bu işlevin yaptığı şey, dosyayı comments.phpalıp oraya yerleştirmektir. Böylece ona bakmaya başladık.
O dosyadaki kod ile başlar . Bu çok uygun. Yorumlar kesinlikle bir bölümdür ve bir tanımlayıcıya sahip olmalıdır. Kimliklere dayalı herhangi bir stil yapmadığımızı unutmayın, ancak yorumlarınızın bir yorum kimliği ile bir öğeye sarılması iyi çünkü:
- URL'ye # yorum ekleyerek yorumlara her zaman karma bağlantı oluşturabilirsiniz.
- Yorumlardan nefret eden kişiler, tahmin edilebilir bir kimlikle kullanıcı stil sayfalarında bunları gizleyebilir.
Bu dosyadaki kodu incelemeye devam ediyoruz. Kullanmayacağımızdan oldukça emin olduğumuz bazı şeyleri siliyoruz. Bazı şeyleri Photoshop'ta tasarladıklarımıza uyacak şekilde değiştiriyoruz.
Ardından wp_list_comments(), tüm yorum dizisini yaymaktan sorumlu işlev olan işleve rastlarız. Ardından yorum formu gibi şeyler tükürmeye devam ediyor. Her zaman, farklı durumlarda, örneğin yorumların kapalı olduğu veya yorumların açık olduğu ancak hiç olmadığı zaman, şeyleri göstermek için bir mantık vardır.
cancel_comment_reply_link()Baktığımız ve bir Yanıtla bağlantısının tıklanması ve formun yukarı taşınması durumunda yorum formunu tekrar alt kısma taşıma işlevini işlediğini gördüğümüz küçük tuhaf bir işlev buluyoruz , ancak istemedik için.
Sonra aldığımız HTML'yi araştırıyoruz wp_list_comments(). Hiçbir şey yapmadan, bu işlevden tamamen makul olan HTML elde edeceğiz. Ama aynı zamanda ne olduğu ve olası her tasarıma uymayacak. Şahsen, işaretleme üzerinde tam kontrole sahip olmayı tercih ederim. Dolayısıyla, bize verdiğini almak yerine, functions.phpdosyamızda varsayılan işaretlemeyi geçersiz kılan özel bir işlev kullanarak kontrolü ele alıyoruz .
Artık HTML kontrolümüz olduğuna göre, CSS ve HTML arasında gidip geldiğimiz bir tür "tasarım moduna" geçebiliriz ve tasarımımızı tamamlayabiliriz. Yorumlar CSS, bu projedeki diğer küçük modüler CSS bitleri gibi, global olarak ekleyebileceğimiz bir _comments.scss dosyasına aktaracağız. CSS'yi kendi dosyasına ayırmanın mantıklı olduğu mükemmel durum. Yine de, elimizden geldiğince çok sayıda global stil kullanmalıyız. Örneğin, her yorum kesinlikle bir .module, başlık stilleri burada isimler için mükemmel olmalı ve genel olarak tipografi sadece küresel tipografi stillerinden gelmelidir.
Her yorum esasen iki sütunlu bir ızgara olduğundan, yorumlarda ızgara sistemimizi bile kullanıyoruz. Yanıt bağlantılarını nerede ve nasıl konumlandırdığımız gibi diğer küçük şeyler, yorumlara tamamen özeldir.
Ekran video kaydının sonunda Photoshop tasarımımızın ölümcül bir kusuru olduğunu anlıyoruz. İç içe geçmiş yorumlar bir üst yorum içinde yaşar ve iç içe yerleştirilmiş modüllerimizin ayrı gibi görünmesini sağlamak oldukça zordur. Burada bazı tavizler vermemiz gerekebilir.