Pernahkah Anda menemukan situs web yang menerbitkan artikelnya secara berbeda di blog?
Beberapa situs web telah menampilkan artikel yang disorot dengan latar belakang khusus sementara yang lain mungkin memiliki setiap posting kategori dengan tampilan yang unik. Jika Anda selalu ingin mempelajari cara menyesuaikan setiap posting WordPress, Anda telah datang ke tempat yang tepat.
Dalam tutorial ini, kami akan menunjukkan kepada Anda bagaimana membentuk setiap artikel WordPress secara berbeda.
Tetapi, jika Anda belum pernah menginstal WordPress, temukan Bagaimana menginstal sebuah blog WordPress langkah 7 et Bagaimana menemukan, menginstal dan mengaktifkan tema WordPress di blog Anda
Lalu kembali ke mengapa kita ada di sini.
Ucapan: Tutorial ini mengharuskan Anda menambahkan CSS khusus di WordPress. Anda juga perlu menggunakan alat Inspect. Diperlukan beberapa pengetahuan CSS dan HTML.
Berikan gaya individu pada item WordPress
WordPress menambahkan kelas CSS default ke berbagai elemen situs web Anda. SEBUAH tema WordPress standar yang kompatibel harus memiliki kode yang diperlukan oleh WordPress untuk menambahkan kelas CSS untuk badan, posting, halaman, widget, menu, dan lainnya.
Temukan juga panduan kami di Permalinks: Bagaimana untuk menyesuaikan link blog Anda
Fungsi utama WordPress disebut " post_class () Digunakan oleh tema untuk memberi tahu WordPress tempat menambahkan kelas CSS default ini pada artikel.
Jika Anda mengunjungi situs web Anda dan menggunakan alat Inspeksi di browser Anda, Anda akan dapat melihat kelas-kelas ini ditambahkan untuk setiap posting.
Berikut adalah kelas-kelas CSS yang ditambahkan secara default berdasarkan halaman yang ditampilkan oleh pengguna.
- .post-id
- .poster
- .attachement
- .gluant
- .hentry
- .category ID
- .category-nama
- .tag-nama
- .format- {size-nama}
- {.type- pasca-jenis-nama}
- .Has pasca-thumbnail
- .post-sandi-diperlukan
- .protected-by-a-sandi
Contoh tampilan akan terlihat seperti ini:
Anda dapat menyesuaikan setiap publikasi WordPress secara berbeda dengan menggunakan kelas CSS masing-masing.
Baca juga: Bagaimana meningkatkan WordPress Anda blog akhir pekan ini
Misalnya, jika Anda ingin mengedit publikasi individual, Anda dapat menggunakan kelas post-id di CSS khusus Anda.
.post-412 {background-color: #FF0303; Warna: #FFFFFF; }
Ingatlah untuk mengubah ID Posting agar sesuai dengan ID posting Anda.
Mari kita lihat contoh lainnya.
Kali ini, kami akan membahas semua artikel yang diposting dalam kategori tertentu yang disebut "berita".
Temukan panduan kami di Bagaimana cara menambahkan CSS khusus ke blog WordPress Anda
Kita dapat melakukan ini dengan menambahkan CSS khusus berikut ke tema kita.
.category-berita {font-size: 18px; font-style: italic; }
CSS ini akan memengaruhi semua item dalam kategori " aktualitas '.
Fungsi post_class ()
Pengembang tema menggunakan fungsi ini post_class () untuk memberi tahu WordPress tempat menambahkan kelas posting. Biasanya ada di tag "artikel".
fungsi post_class () tidak hanya memuat kelas CSS yang dibuat oleh WordPress secara default, tetapi juga memungkinkan Anda untuk menambahkan kelas Anda sendiri.
Temukan juga Bagaimana melindungi pencakar konten blog Anda
Menurut Anda tema WordPress, Anda akan menemukan fungsi post_class() di file single.php Anda atau di file template. Biasanya kode akan terlihat seperti ini:
" >
Anda dapat menambahkan kelas CSS kustom Anda sendiri dengan atribut seperti ini:
" >
Kelas post_class akan mencetak masing-masing kelas CSS default dengan kelas CSS kustom Anda.
Jika Anda ingin menambahkan beberapa kelas CSS, Anda bisa mendefinisikannya sebagai array dan menggunakannya dalam fungsi post-class ().
" >
Tampilkan artikel dengan gaya yang berbeda menurut penulis
Kelas CSS default yang dihasilkan oleh fungsi posts_class tidak menyertakan nama penulis sebagai kelas CSS.
Jika Anda ingin menyesuaikan gaya setiap posting berdasarkan pembuatnya, Anda perlu menambahkan nama penulis sebagai kelas CSS terlebih dahulu.
Baca juga: Bagaimana menambahkan CSS animasi WordPress
Anda dapat melakukannya menggunakan cuplikan berikut:
" >
Kode ini akan menambahkan nama pengguna sebagai kelas CSS. Nama pengguna adalah nama yang kompatibel dengan URL yang digunakan oleh WordPress. Tidak memiliki spasi dan semua karakter menggunakan huruf kecil, yang membuatnya sempurna untuk digunakan sebagai kelas CSS.
Lihat juga panduan kami di Bagaimana cara menambahkan CSS khusus ke blog WordPress Anda
Kode di atas kemungkinan akan ditampilkan seperti ini:
Sekarang Anda dapat menggunakan ".peter" di CSS khusus Anda untuk mengubah semua posting oleh penulis tertentu sehingga muncul secara berbeda.
.peter {background-color: #EEE; border: padat 1px # ccc; }
Kustomisasi posting artikel berdasarkan komentar
Anda mungkin telah melihat situs web dengan widget dengan artikel populer yang terkadang diberi peringkat berdasarkan komentar. Dalam contoh ini, kami akan menunjukkan kepada Anda cara membuat gaya yang berbeda menggunakan jumlah komentar.
Temukan kami 10 plugin WordPress premium untuk mengelola komentar Anda
Pertama, kita perlu mendapatkan jumlah komentar dan mengaitkan kelas.
Untuk mendapatkan jumlah komentar, Anda perlu menambahkan kode berikut di file Anda tema WordPress. Kode ini masuk ke loop WordPress, Anda dapat menambahkannya tepat sebelum tag .
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'; }?>
Kode ini memeriksa jumlah komentar untuk publikasi yang diposting dan memberikan mereka nilai berdasarkan akun. Misalnya, pesan dengan kurang dari komentar 10 mendapatkan kelas yang disebut " yang baru Kurang dari 20 dipanggil muncul ", Dan semua yang menyangkut lebih dari komentar 20 adalah" populer '.
Maka Anda perlu menambahkan kelas CSS ke fungsi post_class.
" >
Ini akan menambahkan kelas CSS baru, baru muncul dan populer ke semua artikel berdasarkan jumlah komentar di setiap posting.
Kami juga mengundang Anda untuk membaca artikel kami di Plugin 6 WordPress untuk menandatangani dokumen secara online
Anda juga dapat menambahkan CSS khusus ke publikasi gaya berdasarkan popularitas:
.new {border: padat 1px #FFFF00;} .emerging {border: putus-putus 1px #FF9933;} .popular {border: putus-putus 1px #CC0000;}
Kami baru saja menambahkan batas, tetapi Anda dapat menambahkan aturan CSS yang Anda inginkan.
Temukan juga beberapa plugin WordPress premium
Anda dapat menggunakan yang lain plugin WordPress untuk memberikan tampilan modern dan mengoptimalkan koneksi ke blog atau situs web Anda.
Kami menawarkan kepada Anda beberapa plugin WordPress premium yang akan membantu Anda melakukannya.
1. Keanggotaan Ultimate Pro
Ultimate Membership Pro sangat bagus WordPress Plugin premium berlangganan dan pembatasan konten. Hal ini memungkinkan pengguna untuk dikelola sesuai dengan paket mereka (gratis atau berbayar) dengan membuat tingkat akses eksklusif.
Karena itu akan dimungkinkan untuk lindungi semua konten situs web Anda, atau hanya sebagian saja. Ini akan menjadi contoh kursus, pelajaran, halaman, produk, kategori, gambar, dll ...
Baca juga artikel kami di Plugin WordPress premium 4 untuk membuat thumbnail
Fitur utamanya adalah antara lain: perlindungan konten, berbagai tingkat akses, dukungan untuk beberapa gateway pembayaran - PayPal, Otorisasi.net, Garis, 2CheckOut, Transfer Bank-, perlindungan parsial atas konten, Dan banyak lagi…
Download | Demo | Hébergement Web
2. Bagaimana Slider untuk Facebook
Bagaimana Slider untuk Facebook adalah WordPress Plugin premium yang menawarkan pengunjung pilihan untuk meninggalkan komentar di situs web Anda. Dengan kotak komentar modern dan tidak mengganggu ini, ini WordPress Plugin menyediakan fitur Like Box dan Fan Page Wall yang akan memperluas integrasi situs web Anda dengan jejaring sosial Facebook.
Plugin ini juga menyediakan berbagai fungsi untuk memperluas kapasitas situs web Anda: Misalnya saja bagian Suka ("Like Box") atau halaman yang didedikasikan untuk penggemar ("Fan Page Wall).
Temukan juga Bagaimana cara memuat komentar Facebook dan Disqus secara bertahap
Anda tidak perlu menyematkan tombol "Suka" dan "Bagikan" pada postingan atau halaman, karena Slider Komentar Facebook sudah memilikinya dan dapat muncul di postingan atau halaman mana pun. Pengunjung akan menemukan tombol "Suka", tombol "Bagikan" dan kotak komentar slider Facebook. Mereka jelas akan menggunakan akun Facebook mereka.
Selain itu, Anda dapat menyalakan, mematikan dan mengatur waktu efek goyang.
Download | Demo | Hébergement Web
3. Login Ninja
Plugin WordPress premium ini memungkinkan Anda untuk menyesuaikan halaman login Anda. Ini lebih dari sekedar menyesuaikan formulir login Anda. Anda dapat menyesuaikan seluruh halaman, dengan mengubah warna halaman, menambahkan gambar latar belakang, menambahkan logo, dan lainnya.
Fitur lainnya adalah: perlindungan formulir login dan pendaftaran dengan captcha, pelarangan otomatis dan manual dari IP yang menyerang Anda dengan kekerasan, log mendetail dari semua aktivitas terkait koneksi, pengalihan pengguna berdasarkan peran dan nama pengguna, menerima pemberitahuan email untuk semua acara koneksi, antarmuka grafis yang mudah digunakan, dokumentasi terperinci dan banyak lagi.
Download | Demo | Hébergement Web
Sumber Daya yang Direkomendasikan
Cari tahu tentang sumber daya lain yang direkomendasikan untuk membantu Anda membangun dan mengelola situs web Anda.
- Plugin 9 WordPress untuk mengelola pembayaran PayPal di Blognya
- 10 plugin WordPress penting untuk dipasang di blog Anda
- 10 plugin WordPress untuk digunakan untuk mengelola iklan
- Plugin 10 WordPress untuk membuat atribut untuk produk variabel Anda
Kesimpulan
Disini adalah ! Itu saja untuk tutorial ini, saya harap ini akan memungkinkan Anda untuk menyesuaikan tampilan artikel di blog WordPress Anda. Jika Anda memiliki masalah atau saran di bidang ini, mari cari tahu bagian komentar untuk didiskusikan.
Namun, Anda juga akan dapat berkonsultasi dengan kami ressources, jika Anda memerlukan lebih banyak elemen untuk melaksanakan proyek pembuatan situs Internet Anda, dengan membaca panduan kami di Pembuatan blog WordPress atau yang di Divi: tema WordPress terbaik sepanjang masa.
Namun sementara itu, bagikan artikel ini di berbagai jejaring sosial Anda.
...
