# 108: Membuat Halaman Cuplikan Individual - Trik CSS

Anonim

Kami mulai dengan melihat beberapa pekerjaan kasar yang saya lakukan di belakang layar menyempurnakan beberapa hal yang perlu dilakukan. Seperti menambahkan di sisa panggilan wp_list_pages () untuk mengeluarkan sisa daftar cuplikan untuk setiap kategori. Dan juga menambahkan CSS untuk mengubah warna bilah yang memisahkan kategori dan daftar cuplikan. Kami juga mengubah hover kategori untuk meringankan warna alih-alih batas putih bodoh yang sementara kami miliki di sana. Secara harfiah, kami menggunakan lighten()fungsi di Sass untuk melakukan pekerjaan untuk kami.

Namun, tujuan dalam screencast ini adalah untuk mengatur gaya tampilan untuk satu cuplikan. Jika saya baru-baru ini membuat area situs ini, cuplikan mungkin merupakan jenis posting kustom (seperti screenshot galeri tunggal), tetapi cuplikan tersebut tidak ada saat saya mulai melakukan ini. Karena itu, semuanya hanyalah "Halaman" dan semuanya menggunakan template halaman kustom. Bukan masalah besar, sungguh, terutama sekarang karena memiliki banyak halaman bukanlah masalah kinerja.

Halaman potongan individu akan sangat mirip dengan posting blog. Struktur kisi standar 2/3 1/3 dan bilah sisi normal. Namun ada beberapa perbedaan. Ada hierarki yang jelas untuk cuplikan, misalnya

Beranda »Cuplikan Kode» Kategori Cuplikan »Nama Cuplikan

Ini sempurna untuk sub navigasi "bilah hitam" yang berkembang di situs ini. Plugin Yoast SEO kami menyediakan fungsionalitas runut tautan jadi ini mudah - hanya dengan memanggil suatu fungsi.

Perbedaan lainnya adalah bahwa kami mengeluarkannya dan the_modified_time()bukan tanggal publikasi. Dengan cara itu, orang-orang mengetahui tanggal terakhir cuplikan diperbarui, yang lebih relevan daripada saat cuplikan itu diterbitkan. Ini juga memberi saya motivasi untuk mengunjungi kembali cuplikan secara teratur.

Kami pergi sedikit ke samping memperbarui cuplikan lama hanya untuk bersenang-senang.

Kami menyelesaikannya dengan menulis sedikit JavaScript yang akan membuat tampilan sub-kategori kami berfungsi. Tampilan tersebut pada dasarnya terlihat seperti beranda Cuplikan kami, hanya jika Anda berada di / snippet / javascript /, maka cuplikan JavaScript akan ditampilkan secara default dan kategori JavaScript disorot. Percaya atau tidak, hanya beberapa baris kode JavaScript yang memuncak dari URL yang mungkin seharusnya menjadi cuplikan itu sendiri.