Akses secara langsung: CSS-Tricks Almanak mendapat pembaruan besar minggu ini!
Saya pikir Anda sudah akrab dengan bagian lama Trik CSS yang disebut Kalender. Di sinilah kami memposting referensi ke pemilih CSS dan propertinya. Hanya ini yang kami keluarkan sejak awal waktu… atau setidaknya sejak 2009 ketika sebagian besar pekerjaan asli telah selesai dilakukan. Ini mungkin juga merupakan permulaan waktu dalam tahun-tahun web. Bahkan kita mungkin menyebutnya 1 BR, atau 1 tahun <>sebelum responsif.
Anda tidak perlu saya memberi tahu Anda betapa berbedanya penulisan CSS saat ini di AR versi 14. Almanak tidak mengikuti CSS yang melampaui properti dan penyeleksi. Sebenarnya kami tidak benar-benar ingin menyentuh Almanak karena konfigurasinya di bagian belakang dan saya cukup yakin saya melihat satu atau dua hantu di sana ketika saya memeriksanya.
Saat Anda mengunjungi Alamanc sekarang, Anda akan menemukan berbagai informasi CSS, termasuk bagian yang didedikasikan untuk penyeleksi kelas semu, fungsi, dan aturan serta bagian tentang properti dan penyeleksi yang ada. Kami masih memiliki banyak pekerjaan yang harus dilakukan untuk mengisinya (Anda harus membantu!) tetapi strukturnya sudah ada dan ada ruang untuk sedikit meningkatkannya jika perlu.
Pekerjaan itu ternyata tidak sepele dan menakutkan seperti yang saya bayangkan. Biarkan saya memandu Anda melalui beberapa hal yang telah saya lakukan.
situasinya
Kami bangga menjalankan WordPress sejak hari pertama. Banyak sekali manfaatnya, terutama mengenai template. Ini mungkin bukan selai favorit semua orang, tapi saya sangat puas dan langsung terjun ke dalamnya — <>Sialan torpedonya!
Jika Anda familiar dengan WordPress, Anda pasti tahu bahwa konten dibagi menjadi dua jenis: Halaman Dan MendukungPerbedaan antara keduanya cukup kecil – dan hampir mustahil untuk membedakan keduanya karena keduanya menggunakan antarmuka pengeditan yang sama. Tentu saja ada beberapa perbedaan, tetapi halaman-halamannya sangat berbeda karena bersifat hierarkis, yang berarti halaman-halaman tersebut paling baik untuk menciptakan hubungan antara halaman induk dan halaman anak dari peta situs yang terorganisir dengan baik. Pada saat yang sama, postingan lebih mengandalkan definisi deskriptif dalam arti bahwa kita dapat mengatur berbagai hal dengan menandainya atau memasukkannya ke dalam grup kategori atau label khusus apa pun yang mungkin kita miliki.
Kalender dibuat berdasarkan halaman, bukan postingan. Halaman adalah yang utama dalam hierarki, dan kalender adalah area yang sangat terorganisir dengan alur seperti peta situs, yang mengikuti urutan abjad. Misalnya, entri untuk properti CSS, katakanlah aspect-ratiosebagai berikut: Kalender → Properti → A → Rasio Aspek.
Sepertinya itu bukan hal yang buruk, bukan? Memang tidak, tapi lebih sulit untuk menanyakan halaman di template dibandingkan postingan, yang memiliki banyak metadata yang bisa kita gunakan untuk memfilter dan sebagainya. Namun, tidak demikian halnya dengan halaman. (Yah, tentu saja tidak.) Mereka biasanya dikembalikan sebagai objek terstruktur karena, Anda tahu, ini adalah hierarki. Namun ini juga berarti kita harus membuat semua halaman ini secara manual, tidak seperti tag dan kategori yang menghasilkan arsip secara otomatis. Tampaknya sangat konyol untuk membuat halaman kosong untuk huruf “A” yang merupakan cabang dari halaman “Properti” – yang merupakan cabang dari kalender itu sendiri – hanya agar ada tempat yang logis untuk membuat daftar properti yang dimulai dengan huruf A. Ini harus terjadi pada properti dan penyeleksi.
Masalah sebenarnya adalah kalender tidak lagi berfungsi. Kami ingin mempublikasikan hal-hal terkait CSS lainnya di dalamnya, seperti fungsi dan aturan, namun kalender hanya dirancang untuk menampilkan dua grup. Itu sebabnya kami tidak mempublikasikan apa pun. Ini juga alasan mengapa determiner global dan determiner semu berada dalam kelompok yang sama.
Memperluas ruang untuk menampung lebih banyak konten adalah ruang lingkup saya bekerja, mengetahui bahwa saya akan memiliki beberapa peluang untuk memformat berbagai hal selama proses tersebut.
Satu template untuk mengatur semuanya
Begitulah cara yang dilakukan. Kesepakatan aslinya adalah templat tunggal yang digunakan untuk indeks kalender dan halaman alfabet yang mencantumkan penyeleksi dan properti. Itu sangat keren. Halaman tersebut pertama-tama memeriksa apakah halaman saat ini adalah halaman kalender di bagian atas hierarki halaman. Jika ini adalah halamannya, templat akan menampilkan hasil penyeleksi dan properti pada halaman yang sama, dalam dua kolom berbeda.
Pertanyaan mengenai hal tersebut sangat menarik.
<?php
function letterOutput($letter, $selectorID, $propertyID) {
$selector_query = new WP_Query(array(
'post_type' => 'page',
'post_status' => 'publish',
'post_parent' => $selectorID,
'posts_per_page' => -1,
'orderby' => 'title',
'order' => "ASC"
));
$html="<div class="almanac-group">";
$html .= '<div class="group-letter"><a id="letter-' . $letter . '">' . $letter . '</a></div>';
$html .= '<div class="group-list">';
while ($selector_query->have_posts()) : $selector_query->the_post();
$html .= '<details id="post-' . get_the_id() . '" class="link-item"><summary>';
$html .= '<h2><code>';
$html .= get_the_title();
$html .= '</code></h2>';
$html .= '</summary>';
$html .= get_the_excerpt();
$html .= '<pre rel="CSS" class="almanac-example"><code class="language-css">';
$html .= get_post_meta(get_the_id(), 'almanac_example_code', true);
$html .= '</code></pre>';
$html .= '<a class="button" href="' . get_the_permalink() . '">Continue Reading</a>';
$html .= '</details>';
endwhile;
$html .= "</div>";
$html .= "</div>";
return $html;
}Ini sebenarnya setengah bagiannya. Perhatikan bahwa itu baru saja ditandai $selector_query. Hal ini terjadi lagi untuk sementara waktu $property_query.
Dari sana, fungsi tersebut harus dipanggil 26 kali: satu kali untuk setiap huruf alfabet. Dibutuhkan tiga parameter, yaitu karakter (mis A) dan ID halaman untuk halaman “A” (mis 14146, 13712) yang merupakan anak dari determinan dan properti.
<?php
echo letterOutput("A", 14146, 13712);
// B, C, D, E F, G, etc.
?>Jika saat ini kita tidak berada di halaman indeks, templat hanya akan menampilkan daftar subhalaman berdasarkan abjad untuk bagian tertentu, seperti Properti. Satu template sudah cukup untuk semua ini.
Pertanyaan tentang halaman anak-anak
Saya bisa saja berubah letterOutput() Berfungsi untuk mengambil lebih banyak ID halaman untuk menampilkan halaman surat untuk bagian lain. Tapi sejujurnya, saya tidak ingin pergi ke sana. Saya memilih untuk mengurangi fungsi menjadi satu argumen ID halaman, bukan dua, dan kemudian membagi template: satu untuk indikator utama dan satu lagi untuk “subbagian”. Ya, ini berarti saya mendapatkan lebih banyak tema di direktori tema WordPress saya, tapi itu sebagian besar untuk saya dan saya tidak keberatan. Saya dapat memeriksa subhalaman mana yang saya gunakan (apakah itu indeks properti, indeks tertentu, indeks sesuai aturan, dll.) dan hanya mendapatkan subhalaman tersebut satu per satu.
Masalah lain dengan fungsi ini adalah semua tag yang dihasilkan terkurung di dalamnya while()Meskipun saya ingin mengurai kueri per bagian untuk mempertahankan struktur templat tunggal, saya tidak mungkin gagal if() pernyataan di mana pun saya inginkan di sana tanpa menyebabkan kesalahan fatal atau pemberitahuan PHP. Sekali lagi, saya tidak tertarik untuk mengatur ulang seluruh fungsi.
Arsip pesan
Memposting semua subhalaman kosong untuk setiap huruf bagian dan kemudian menghubungkannya ke halaman utama yang benar membutuhkan banyak pekerjaan manual. Saya tahu ini karena saya sendiri yang melakukannya. Tidak diragukan lagi ada cara yang lebih baik, bahkan perangkat lunak, tapi saya tidak suka mengubah sesuatu dari halaman menjadi postingan dan bekerja dari sudut itu dan saya bekerja sepanjang waktu. Kita tidak selalu bisa menemukan cara yang “sempurna” dalam melakukan sesuatu.
Menyebut salah satu halaman surat ini sebagai “arsip” dalam terminologi WordPress adalah istilah yang keliru, tapi begitulah cara saya melihat sub-halaman dari bagian yang berbeda – dan itulah yang akan terjadi jika semuanya diatur sebagai posting, bukan Dari halaman. Jika saya memiliki bagian Pseudo-Selectors, saya akan memerlukan halaman individual untuk huruf A hingga Z yang pada gilirannya berfungsi sebagai halaman master untuk masing-masing pseudoletter. Tiga bagian baru dengan masing-masing 26 karakter berarti saya telah membuat 78 halaman baru. luar biasa.
Anda dapat mengakses halaman pesan melalui remah roti di halaman kalender (seperti halaman ini untuk aspect-ratio Properties) atau dengan mengklik huruf kapital di salah satu bagian (seperti bagian ini untuk properti).
Kami tidak pernah menganggap serius halaman-halaman ini. Mereka ada di sana untuk struktur, tetapi tidak banyak orang yang menemukannya. Itu pada dasarnya hanyalah barang sementara. Berguna, ya, tapi tetap saja barang sementara. Kami tidak terlalu serius dengan halaman-halaman ini sehingga kami tidak mendesainnya secara resmi. Ini adalah bentuk warisan CSS, beri tahu Anda.
Saya mengambil kesempatan ini untuk menambahkan beberapa bakat visual. Saya telah mengerjakan hal-hal besar dalam desain sejak kembali ke pekerjaan ini beberapa bulan yang lalu. Hal-hal seperti judul besar dan bayangan tebal yang Anda lihat.
Ini bukan selera alami saya, tapi menurut saya ini berfungsi baik dengan CSS-Tricks… dan mungkin, mungkin saja, ada air mata kebahagiaan mengalir di wajah Chris Cowher karenanya. Mungkin.
Navigasi
Peningkatan lainnya telah ditambahkan pada navigasi yang ditampilkan pada halaman indeks utama. Saya telah mengganti navigasi alfabet di bagian atas dengan navigasi yang membawa Anda ke setiap bagian, dan sekarang kita dapat mengedit halaman langsung di WordPress tanpa memerlukan pengembangan apa pun.
Satu-satunya hal yang mengganggu saya adalah saya mengkodekan hal ini alih-alih menjadikannya menu WordPress yang tepat yang dapat saya kelola dari admin. <>[Adds a TODO to his list.]
Karena saya membebaskan Indeks Alamanc dari menampilkan seluruh daftar penyeleksi dan properti, saya benar-benar dapat menggunakannya sebagai indeks untuk semakin banyak bagian yang kita tambahkan.
Mungkin ada saatnya kita ingin membuat konten halaman beranda tidak terlalu berulang melalui navigasi, namun menurut saya ini adalah awal yang baik yang dapat kita kembangkan. Selain itu, sekarang lebih konsisten dengan halaman “tingkat atas” lainnya yang tertaut ke menu utama situs dalam hal judul, dan itu tidak buruk.
Oh ya, dan sementara kita berbicara tentang navigasi, bagian baru telah ditambahkan ke sidebar kiri pada halaman kalender individual untuk membantu menavigasi ke entri lain di bagian mana pun tanpa harus kembali ke indeks.
Menunjukkan semuanya dengan cepat
Peningkatan terakhir yang akan saya tunjukkan memang kecil, namun menurut saya ini memberikan perbedaan yang positif. Jika Anda membuka subhalaman mana pun dari indeks—yaitu, penyeleksi, properti, elemen semu, fungsi, dan Aturan—Anda akan menemukan cuplikan dan definisi tingkat tinggi untuk setiap elemen yang siap digunakan tanpa harus menavigasi ke halaman penuh.
Kami selalu tertarik untuk “mendapatkan contoh dengan cepat” dan menurut saya ini sangat membantu masalah ini.
“Kamu juga bisa melakukan itu [x]…”
Ya, ada banyak peluang untuk memperbaiki keadaan. Satu-satunya tujuan yang ada dalam pikiran saya adalah mengubah banyak hal agar mencakup kalender di luar penyeleksi dan properti, dan mungkin mengambil kebebasan desain di sana-sini. Ada banyak hal yang ingin saya lakukan dan mungkin kita akan mencapainya, meski secara bertahap.
Hal-hal apa saja? Nah, navigasikan melalui indeks yang telah diprogram sebelumnya. Namun lebih dari itu, saya ingin terus mengerjakan halaman beranda. Itu memiliki tujuan yang besar sebelumnya dan saya hampir menghapusnya. Akan menyenangkan jika menemukan cara untuk membuat daftar semua entri – untuk semua bagian – seperti yang kita lakukan saat hanya terdiri dari dua bagian. Ini adalah sesuatu yang saya rencanakan untuk diperiksa.
Dan ya, kami bahkan ingin meliputnya <>lagi Ada elemen yang terkait dengan CSS, seperti istilah umum, pertanyaan media, preferensi pengguna, mungkin spesifikasi… Anda mengerti. Kalender adalah sumber daya bagi kami di tim ini dan juga bagi Anda, dan kami merujuknya setiap hari. Kami ingin itu penuh dengan informasi berguna.
Itu saja.
Anda dapat berhenti membaca sekarang dan membuka kalender untuk mengikuti tur virtual.
Mengparafrasekan Almanak CSS Awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.