Favicons Dinamis untuk WordPress

Biasanya, satu favicon digunakan di seluruh domain. Tetapi ada kalanya Anda ingin meningkatkannya dengan favicon yang berbeda tergantung pada konteksnya. Situs web mungkin mengubah favicon agar sesuai dengan konten yang sedang dilihat. Atau sebuah situs mungkin mengizinkan pengguna untuk mempersonalisasi warna tema mereka, dan preferensi tersebut tercermin dalam favicon. Mungkin Anda pernah melihat favicon yang mencoba memberi tahu pengguna tentang beberapa peristiwa.

Beberapa favicon secara teknis dapat dikelola dengan tangan — Chris telah menunjukkan kepada kita bagaimana dia menggunakan dua favicon berbeda untuk pengembangan dan produksi. Tetapi ketika Anda mencapai skala lusinan atau ratusan variasi, inilah saatnya untuk menghasilkannya secara dinamis.

Ini adalah situasi yang saya temui pada proyek WordPress baru-baru ini untuk direktori perguruan tinggi dan universitas. (Saya sebelumnya menulis tentang menanyakan lokasi terdekat untuk proyek yang sama.) Saat melihat profil sekolah, kami ingin favicon menggunakan warna sekolah daripada biru default kami, untuk memberikan sentuhan ekstra.

Dengan lebih dari 200 sekolah dalam direktori dan pendakian, kami harus menjadi dinamis. Untungnya, kami telah memiliki bidang meta khusus yang menyimpan data identitas visual setiap sekolah. Ini termasuk warna sekolah, yang digunakan dalam stylesheet. Kami hanya perlu cara untuk menerapkan warna meta kustom ini ke favicon dinamis.

Dalam artikel ini, saya akan memandu Anda melalui pendekatan kami dan beberapa hal yang harus diperhatikan. Anda dapat melihat hasilnya dengan melihat berbagai sekolah.

Setiap favicon memiliki warna yang berbeda di tab berdasarkan sekolah yang dipilih.

SVG adalah kuncinya

Berkat dukungan browser yang ditingkatkan untuk favicon SVG , menerapkan favicon dinamis jauh lebih mudah daripada beberapa hari yang lalu. Berbeda dengan PNG (atau format ICO kuno), SVG bergantung pada markup untuk menentukan bentuk vektor. Ini membuatnya ringan, dapat diskalakan, dan yang terbaik, dapat menerima semua jenis kesenangan .

Langkah pertama adalah membuat favicon Anda dalam format SVG. Tidak ada salahnya juga menjalankannya melalui pengoptimal SVG untuk menyingkirkan cruft setelahnya. Inilah yang kami gunakan di direktori sekolah:

Menghubungkan ke WordPress

Selanjutnya, kita ingin menambahkan markup tautan favicon di kepala HTML. Bagaimana melakukan ini sepenuhnya terserah Anda. Dalam kasus WordPress, itu bisa ditambahkan ke template header tema anak atau echo 'd melalui tindakan wp_head() .

 function ca_favicon() { if ( is_singular( 'school' ) ) { $post_id = get_the_ID(); $color = get_post_meta( $post_id, 'color', true ); if ( isset( $color ) ) { $color = ltrim( $color, '#' ); // remove the hash echo '<link rel="icon" href="' . plugins_url( 'images/favicon.php?color=' . $color, __FILE__ ) . '" type="image/svg+xml" sizes="any">'; } } } add_filter( 'wp_head' , 'ca_favicon' );

Di sini kami memeriksa apakah jenis posting adalah school , dan mengambil color sekolah yang sebelumnya telah kami simpan menggunakan get_post_meta() . Jika kami memiliki warna, kami meneruskannya ke favicon.php melalui string kueri.

Dari PHP ke SVG

Dalam favicon.php , kita mulai dengan mengatur tipe konten ke SVG. Selanjutnya, kita simpan nilai warna yang telah dilewatkan, atau gunakan warna default jika tidak ada.

Kemudian kami echo potongan besar, multiline markup SVG menggunakan sintaks heredoc PHP (berguna untuk templating ). Variabel seperti $color diperluas saat menggunakan sintaks ini.

Terakhir, kami membuat beberapa modifikasi pada markup SVG. Pertama, kelas ditugaskan ke elemen pengubah warna. Kedua, elemen gaya ditambahkan tepat di dalam elemen SVG, mendeklarasikan aturan CSS yang sesuai dan echo $color .

Alih-alih <style> , sebagai alternatif, kita dapat mengganti warna default dengan $color mana pun ia muncul jika tidak digunakan di terlalu banyak tempat.

 <?php header( 'Content-Type: image/svg+xml' ); $color = $_GET[ 'color' ] ?? '065281'; $color = sanitize_hex_color_no_hash( $color ); echo <<<EOL <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="1000" height="1000"> <style type="text/css"> <![CDATA[ .primary { fill: #$color; } .shield { stroke: #$color; } ]]> </style> <defs> <path id="a" d="M0 34L318 0l316 34v417.196a97 97 0 01-14.433 50.909C483.553 722.702 382.697 833 317 833S150.447 722.702 14.433 502.105A97 97 0 010 451.196V34z"/> </defs> <g fill="none" fill-rule="evenodd"> <g transform="translate(183 65)"> <mask id="b" fill="#fff"> <use xlink:href="#a"/> </mask> <use fill="#FFF" xlink:href="#a"/> <path class="primary" mask="url(#b)" d="M317-37h317v871H317z"/> <path class="primary" mask="url(#b)" d="M0 480l317 30 317-30v157l-317-90L0 517z"/> <path fill="#FFF" mask="url(#b)" d="M317 510l317-30v37l-317 30z"/> </g> <g fill-rule="nonzero"> <path class="primary" d="M358.2 455.2c11.9 0 22.633-.992 32.2-2.975 9.567-1.983 18.375-4.9 26.425-8.75 8.05-3.85 15.458-8.458 22.225-13.825 6.767-5.367 13.3-11.433 19.6-18.2l-34.3-34.65c-9.567 8.867-19.192 15.867-28.875 21-9.683 5.133-21.525 7.7-35.525 7.7-10.5 0-20.125-2.042-28.875-6.125s-16.217-9.625-22.4-16.625-11.025-15.167-14.525-24.5-5.25-19.25-5.25-29.75v-.7c0-10.5 1.75-20.358 5.25-29.575 3.5-9.217 8.4-17.325 14.7-24.325 6.3-7 13.825-12.483 22.575-16.45 8.75-3.967 18.258-5.95 28.525-5.95 12.367 0 23.508 2.45 33.425 7.35 9.917 4.9 19.658 11.667 29.225 20.3l34.3-39.55a144.285 144.285 0 00-18.2-15.4c-6.533-4.667-13.65-8.633-21.35-11.9-7.7-3.267-16.275-5.833-25.725-7.7-9.45-1.867-19.892-2.8-31.325-2.8-18.9 0-36.167 3.325-51.8 9.975-15.633 6.65-29.05 15.75-40.25 27.3s-19.95 24.967-26.25 40.25c-6.3 15.283-9.45 31.675-9.45 49.175v.7c0 17.5 3.15 33.95 9.45 49.35 6.3 15.4 15.05 28.758 26.25 40.075 11.2 11.317 24.5 20.242 39.9 26.775 15.4 6.533 32.083 9.8 50.05 9.8z"/> <path fill="#FFF" d="M582.35 451l22.4-54.95h103.6l22.4 54.95h56.35l-105-246.75h-49.7L527.4 451h54.95zM689.1 348.45H624L656.55 269l32.55 79.45z"/> </g> <path class="shield" stroke-width="30" d="M183 99l318-34 316 34v417.196a97 97 0 01-14.433 50.909C666.553 787.702 565.697 898 500 898S333.447 787.702 197.433 567.105A97 97 0 01183 516.196V99h0z"/> </g> </svg> EOL; ?>

Dengan itu, Anda memiliki favicon dinamis yang berfungsi di situs Anda.

Pertimbangan keamanan

Tentu saja, echo -ing membabi buta membuka Anda terhadap peretasan. Untuk mengurangi ini, kita harus membersihkan semua input kita.

Dalam hal ini, kami hanya tertarik pada nilai yang cocok dengan format warna heksagonal 3 digit atau 6 digit. Kita dapat menyertakan fungsi seperti sanitize_hex_color_no_hash() milik WordPress untuk memastikan hanya warna yang diteruskan.

 function sanitize_hex_color( $color ) { if ( '' === $color ) { return ''; } // 3 or 6 hex digits, or the empty string. if ( preg_match( '|^#([A-Fa-f0-9]{3}){1,2}$|', $color ) ) { return $color; } } function sanitize_hex_color_no_hash( $color ) { $color = ltrim( $color, '#' ); if ( '' === $color ) { return ''; } return sanitize_hex_color( '#' . $color ) ? $color : null; }

Anda ingin menambahkan cek Anda sendiri berdasarkan nilai yang ingin Anda berikan.

Caching untuk kinerja yang lebih baik

Browser menyimpan SVG dalam cache, tetapi manfaat ini hilang untuk file PHP secara default. Ini berarti setiap kali favicon dimuat, server Anda terkena.

Untuk mengurangi ketegangan server dan meningkatkan kinerja, Anda harus secara eksplisit menyimpan cache file ini. Anda dapat mengkonfigurasi server Anda, mengatur aturan halaman melalui CDN Anda, atau menambahkan header kontrol cache ke bagian paling atas favicon.php seperti:

 header( 'Cache-Control: public, max-age=604800' ); // 604,800 seconds or 1 week

Dalam pengujian kami, tanpa caching, file SVG 1,5 KB kami membutuhkan waktu sekitar 300 milidetik untuk diproses pada pemuatan pertama, dan sekitar 100 milidetik pada pemuatan berikutnya. Itu sangat buruk. Namun dengan caching, kami menurunkannya menjadi 25 mdtk dari CDN pada pemuatan pertama, dan 1 mdtk dari cache browser pada pemuatan berikutnya — sebaik SVG lama biasa.

Dukungan peramban

Jika kami selesai di sana, ini bukan pengembangan web. Kami masih harus berbicara tentang dukungan browser.

Seperti disebutkan sebelumnya, dukungan browser modern untuk favicons SVG solid , dan didukung penuh dalam versi Chrome, Firefox, dan Edge saat ini.

Favicon SVG telah tiba… kecuali di Safari.

Satu peringatan adalah bahwa Firefox memerlukan atribut type="image/svg+xml" di deklarasi favicon agar bisa berfungsi. Peramban lain lebih pemaaf, tetapi itu hanya praktik yang baik. Anda harus menyertakan sizes="any" saat Anda melakukannya.

 <link rel="icon" href="path/to/favicon.svg" type="image/svg+xml" sizes="any">

Safari

Safari belum mendukung favicon SVG, di luar fitur ikon topeng yang ditujukan untuk tab yang disematkan . Dalam eksperimen saya, ini bermasalah dan tidak konsisten. Itu tidak menangani bentuk atau warna yang kompleks dengan baik, dan menyimpan ikon yang sama di seluruh domain. Akhirnya kami memutuskan untuk tidak repot dan hanya menggunakan fallback dengan isi biru default sampai Safari meningkatkan dukungan.

mundur

Sekokoh dukungan favicon SVG, masih belum 100%. Jadi pastikan untuk menambahkan fallback. Kita dapat mengatur favicon tambahan ketika ikon SVG tidak didukung dengan atribut rel="alternative icon"

 <link rel="icon" href="path/to/favicon.svg" type="image/svg+xml" sizes="any"> <link rel="alternate icon" href="path/to/favicon.png" type="image/png">

Untuk membuat situs lebih antipeluru, Anda juga dapat favicon.ico abadi di root Anda.

Lebih jauh

Kami mengambil favicon yang relatif sederhana dan menukar satu warna dengan warna lain. Tetapi mengambil pendekatan dinamis ini membuka pintu untuk lebih banyak lagi: memodifikasi banyak warna, properti lain seperti position , bentuk yang sama sekali berbeda, dan animasi .

Misalnya, inilah demo yang saya beri nama Favicoin. Ini memplot harga cryptocurrency di favicon sebagai grafik mini.

Menerapkan favicon dinamis seperti ini tidak terbatas pada WordPress atau PHP; apa pun tumpukan Anda, prinsip yang sama berlaku. Heck, Anda bahkan dapat mencapai sisi klien ini dengan URL data dan JavaScript… bukan karena saya merekomendasikannya untuk produksi.

Tapi satu hal yang pasti: kita pasti akan melihat aplikasi kreatif dari favicon SVG di masa depan. Pernahkah Anda melihat atau membuat favicon dinamis Anda sendiri? Apakah Anda memiliki tips atau trik untuk dibagikan?


Postingan Dynamic Favicons for WordPress muncul pertama kali di CSS-Tricks .

Anda dapat mendukung Trik-CSS dengan menjadi Pendukung MVP .

May 28, 2021

codeorayo

Ampuh! Ini rahasia mengembangkan aplikasi secara instan, tinggal download dan kembangkan. Gabung sekarang juga! Premium Membership [PRIVATE] https://premium.codeorayo.com

Leave a Reply

Your email address will not be published. Required fields are marked *