Pernahkah Anda menemukan situs yang menawarkan gaya berbeda untuk setiap item? Beberapa situs memiliki artikel yang berbeda « en avant Disorot sementara yang lain memiliki setiap kategori dengan warna berbeda, terkadang beberapa bahkan mungkin memiliki perspektif yang sangat unik.
Nah, itulah yang akan kita bahas dalam tutorial ini. Kami akan membagikan kepada Anda berbagai metode yang dapat Anda gunakan untuk memberikan gaya unik pada artikel Anda di WordPress.
Jadi apa yang akan kita gunakan? Kami akan menggunakan fungsi yang disebut " post_class ". Fungsi ini mencetak kelas yang berbeda pada penampung artikel (tag HTML), biasanya di index.php, single.php, dan file lain yang menampilkan " loop artikel "(Dengan mengacu pada" WordPress Loop ").
Ucapan: Tutorial ini mengharuskan Anda terbiasa dengan desain tema WordPress dan menguasai beberapa HTML/CSS.
Saat Anda membuka file "index.php", atau file lain yang memiliki loop, biasanya Anda akan melihat " div "Dengan kelas" post- {id} ", tetapi mungkin juga penggunaan fungsi" post_class ".
" >
Menambahkan fungsi ini dalam tag " div », Setiap artikel Anda akan memiliki kelas berikut, ditambahkan oleh WordPress. Kelas-kelas berikut ditambahkan secara default:
- .post-id
- .post
- .attachment
- .sticky
- .hentry (halaman microformat hAtom)
- .category ID
- .category-nama
- .tag-nama
Berikut adalah contoh tag dengan kelas.
Jadi, jika Anda membuka file "style.css" dan menambahkan kelas "menari kategori", Anda akan dapat menyesuaikan tampilan artikel dalam kategori "menari".
Tarian kategori {background: #97c3e1; Perbatasan: 1px solid #84aac4;}
Di atas akan memberikan artikel dalam kategori "menari" memiliki latar belakang biru. Anda dapat melanjutkan dengan menambahkan kelas lain untuk kelas "tari-kategori" dll. Anda dapat menggunakan teknik yang sama untuk memberikan tampilan unik pada item yang memiliki label tertentu.
Tetapi bagi seseorang yang benar-benar ingin menyesuaikan tampilan situsnya, mereka mungkin memerlukan beberapa kontrol tambahan dalam hal kelas. Nah, Anda bisa menentukan kelas yang ingin Anda gunakan sebagai berikut:
Tapi, bagaimana cara kerjanya pada platform dinamis seperti WordPress? Jadi mari kita lihat beberapa contoh tentang cara menambahkan kelas ke artikel Anda di WordPress.
Gaya menurut penulis
Seringkali Anda akan melihat bahwa beberapa blog menggunakan gaya yang berbeda tergantung pada penulisnya. Untuk blog-blog ini, ada baiknya memberi setiap artikel gaya yang unik menurut penulisnya. Jadi dalam contoh ini kita akan memberikan gaya masing-masing posting berdasarkan nama penulisnya. Jadi di file "index.php" Anda atau file lain (archive.php / category.php dll), kami akan mendapatkan kembali nama pembuat artikel:
Kode di atas mengambil nama "yang ditampilkan" dari seorang penulis, dan itu menugaskan variabel $ author. Sekarang kita memiliki nilai, kita dapat menambahkannya ke kode post_class kita seperti ini:
Catatan: Anda tidak harus mempertahankan kelas 1 dan kelas 2. Ini hanya jika Anda ingin menambahkan kelas statis.
Contoh kita akan terlihat seperti ini:
Nama akan berbeda pada setiap artikel tergantung pada variabel nama publik dari seorang penulis. Anda kemudian dapat menambahkan gaya pilihan Anda seperti ini:
.Herve {border: padat 1px #000;} .Thierry {border: padat 1px #d88b3d;} .Franklin {border: padat 1px #4781a8;}
Kemudian setiap item dalam loop akan memiliki kelas yang berbeda dan karenanya akan diterapkan gaya yang berbeda.
Gaya sesuai dengan jumlah komentar
Anda telah melihat situs dengan artikel populer di widget, yang sebagian besar didasarkan pada jumlah komentar. Nah, dalam contoh ini kami akan menunjukkan kepada Anda bagaimana gaya posting bervariasi tergantung pada jumlah komentar. Hal pertama yang perlu kita lakukan adalah mendapatkan jumlah komentar dan mengaitkan kelas dengannya. Untuk mendapatkan jumlah komentar, kita membutuhkan kode berikut di loop:
disetujui; if ($ my_comment_count <10) {$ my_comment_count = 'new'; } elseif ($ my_comment_count> = 10 && $ my_comment_count <20) {$ my_comment_count = 'ermerging'; } elseif ($ my_comment_count> = 20) {$ my_comment_count = 'populer'; }?>
Dalam kode di atas, kami menambahkan kelas sesuai dengan skala tertentu. Jika sebuah artikel kurang dari komentar 10, maka kelasnya " yang baru Akan ditambahkan. Jika artikel memiliki lebih dari 10 komentar dan kurang dari 20 komentar, maka kelas "ermergingAkan ditambahkan. Jika artikel memiliki lebih dari komentar 20, maka kelas 'Populer' akan ditambahkan. Anda dapat mengubah skala ini berdasarkan tingkat rata-rata ulasan situs Anda.
Jadi kode artikel akan mirip dengan ini:
Pastikan Anda menempelkan kode di atas dalam loop. Kemudian Anda akan menambahkan variabel $ custom_values ke fungsi post_class.
.new {border: padat 1px #FFFF00;} .emerging {border: putus-putus 1px #FF9933;} .popular {border: putus-putus 1px #CC0000;}
Sejauh ini, ini adalah cara terbaik untuk menyesuaikan gaya artikel di WordPress. Tetapi kadang-kadang, Anda ingin memiliki lebih banyak kontrol. Kelas CSS memberi Anda kemampuan untuk mengedit pratinjau, tetapi tidak mengubah struktur.
Itu saja untuk tutorial ini. Saya harap Anda akan berhasil menciptakan gaya khusus untuk artikel di WordPress.
