Chris sudah lama menulis tentang halaman “suka”. Idenya cukup sederhana: “Suka” suatu item di pembaca RSS Anda dan tampilkan di feed item lain yang Anda sukai. Contoh kecil yang diberikan Chris masih sangat bagus.
Ada dua hal yang Chris perhatikan saat itu. Salah satunya adalah dia menggunakan proxy CORS generik yang tidak akan dia gunakan di lingkungan produksi. Ide bagus untuk membatalkan itu, keamanan dan segalanya. Alasan lainnya adalah dia mempertimbangkan untuk menggunakan transien WordPress untuk mengambil dan menyimpan data dalam cache guna mengatasi CORS.
-Advertisement-.
Saya memutuskan untuk melakukannya! Hasilnya adalah blok WordPress yang bisa saya tempatkan di sini. Aku akan memasukkannya ke dalam <details> Agar semuanya tetap singkat.
Buka umpan yang berkilau bintangnya
Jangan membungkus bentuknya dengan pengikat
Dalam pesan saya Catatan singkat tentang bentuk dan dukungan Figcaption Saya akan menjelaskan bagaimana ketika Anda menemukan karakter menggunakan pembaca layar, Anda tidak akan mendengarnya <>Semuanya Umumkan secara bersamaan:
Tidak ada pembaca layar yang memperlakukan teks sebagai nama atau deskripsi yang dapat diakses, bahkan untuk…
Mempelajari HTML adalah investasi terbaik yang pernah Anda lakukan
Salah satu lelucon dan/atau diskusi yang membuat saya muak dan bosan adalah meremehkan orang HTML. Ya, HTML Ini bukan bahasa pemrograman. TIDAK, HTML Tujuan pengumpulannya tidak boleh hanya sebatas itu saja. untuk belajar HTML Ini adalah investasi yang solid dan tidak sulit dilakukan.
saya tidak…
Buka UI alat peraga
Memperkenalkan UI Alat Peraga Terbuka!…
Gotcha dalam memberi nama transisi tampilan CSS
Saya bermain-main dengan membuat transisi tampilan dokumen bersama berfungsi di blog ini.
Tidak ada yang mewah. Cara Dave Rupert melakukan hal ini sering kali disalin di situsnya di mana Anda mendapatkan animasi crosshair pada keseluruhan halaman secara umum, dan sedikit animasi posisi pada judul halaman secara khusus.
Kelas semu: kosong
Kita bisa menggunakan :empty Pseudoclass sebagai cara untuk menata elemen kosong di halaman web Anda.
Anda mungkin bertanya-tanya mengapa Anda ingin mendesain sesuatu yang kosong. Katakanlah Anda sedang membuat daftar tugas.
Anda ingin memasukkan hal-hal yang harus dilakukan ke dalam daftar, tetapi bagaimana jika Anda tidak…
Daftar Keinginan CSS 2025
Pada tahun 2023, saya baru-baru ini bergabung dengan sekelompok orang yang memposting daftar keinginan CSS mereka untuk tahun mendatang. Tahun ini saya melakukannya lagi, tetapi tidak terlalu terlambat! (Saya tidak melakukannya tahun lalu karena saya bahkan tidak bisa. Mengerti?)
Saya memulai posting ini dengan melihat…
Deskripsi lagu tidak diterjemahkan
Sebenarnya memang demikian. Di Firefox. Kadang-kadang.
Resiko utama penggunaan ARIA untuk menentukan isi teks adalah seringnya hal ini diabaikan dalam penerjemahan. Layanan terjemahan mesin sering kali tidak menjawabnya. Mereka yang membayar layanan terjemahan sering kali melewatkan konten dalam atribut ARIA saat mengirim string teks ke vendor terjemahan.
Konten terkubur…
Mari kita standarisasikan Async CSS!
6 tahun yang lalu, saya memposting cara paling sederhana untuk memuat CSS secara asinkron yang mendokumentasikan peretasan yang telah kami gunakan setidaknya selama 6 tahun sebelumnya. Kasus penggunaan peretasan ini adalah memuat file CSS secara asinkron, sesuatu yang tidak didukung oleh HTML itu sendiri, meskipun…
Mode sempit: Mengapa browser menghasilkan hasil kinerja yang berbeda
Artikel ini disponsori oleh DebugBear
Saya sedang mengobrol dengan Matt Zeunert dari DebugBear, dan dalam prosesnya, dia dengan santai menyebutkan hal yang disebut ini Modus sempit Saat menjelaskan cara browser mengambil dan memprioritaskan sumber daya. Aku ingin menganggukkan kepalaku seolah aku tahu apa yang dia bicarakan…
Mengapa saya tertarik dengan pemangkasan kotak teks sebagai seorang desainer
Saya sangat senang dengan kemungkinannya text-box-trim, text-edge Dan text-box sebentar. Saat ini masih dalam rancangan, namun ketika lebih banyak dukungan browser tersedia, kemampuan ini akan membuka beberapa kemungkinan menarik untuk meningkatkan penyusunan huruf dalam browser, serta memberi kita lebih banyak…
Ini sedikit berbeda. Pertama, saya hanya mengambil 10 item sekaligus. Kita dapat mendorongnya tanpa batas, tetapi hal itu disertai dengan pajak kinerja, belum lagi saya tidak punya cara untuk mengatur item yang akan dikelompokkan dan difilter. Mungkin itu akan menjadi dorongan di masa depan!
Demo tersebut menampilkan Chris Bones yang melakukan sebagian besar pekerjaan berat. Bagian “keras” mengikat benda itu tepat ke dalam struktur blok WordPress dan kemudian menjalankan transien. Ini adalah pertama kalinya saya bekerja dengan transien, jadi saya pikir saya akan membagikan kode yang relevan dan menguraikannya.
function fetch_and_store_data() {
$transient_key = 'fetched_data';
$cached_data = get_transient($transient_key);
if ($cached_data) {
return new WP_REST_Response($cached_data, 200);
}
$response = wp_remote_get('https://feedbin.com/starred/a22c4101980b055d688e90512b083e8d.xml');
if (is_wp_error($response)) {
return new WP_REST_Response('Error fetching data', 500);
}
$body = wp_remote_retrieve_body($response);
$data = simplexml_load_string($body, 'SimpleXMLElement', LIBXML_NOCDATA);
$json_data = json_encode($data);
$array_data = json_decode($json_data, true);
$items = [];
foreach ($array_data['channel']['item'] as $item) {
$items[] = [
'title' => $item['title'],
'link' => $item['link'],
'pubDate' => $item['pubDate'],
'description' => $item['description'],
];
}
set_transient($transient_key, $items, 12 * HOUR_IN_SECONDS);
return new WP_REST_Response($items, 200);
}
add_action('rest_api_init', function () {
register_rest_route('custom/v1', '/fetch-data', [
'methods' => 'GET',
'callback' => 'fetch_and_store_data',
]);
});Bisakah ini difaktorkan ulang dan ditulis dengan lebih efisien? Semua tanda menunjukkan ya. Tapi inilah cara saya mengganggunya:
function fetch_and_store_data() {
}Nama fungsinya bisa apa saja. Pemberian nama itu sulit. Dua variabel pertama:
$transient_key = 'fetched_data';
$cached_data = get_transient($transient_key);itu $transient_key Ini hanyalah sebuah nama yang mengidentifikasi transien ketika kita mengaturnya dan mendapatkannya. Pada kenyataannya, $cached_data Dia adalah resultannya sehingga bagian ini selesai. Memeriksa!
saya hanya ingin $cached_data Jika ada, ada ceknya:
if ($cached_data) {
return new WP_REST_Response($cached_data, 200);
}Ini juga menciptakan respons baru dari REST API WordPress, tempat data di-cache. Daripada menarik data langsung dari Feedbin, saya menarik dan menyimpannya dalam cache di REST API. Dengan cara ini, CORS tidak lagi menjadi masalah karena item yang berkilau bintangnya kini disimpan secara lokal di domain saya. Di sinilah wp_remote_get() Fungsi untuk mengonfigurasi respons tersebut berasal dari Feedbin sebagai induknya:
$response = wp_remote_get('https://feedbin.com/starred/a22c4101980b055d688e90512b083e8d.xml');Demikian pula, saya memutuskan untuk membuat kesalahan jika tidak ada $response. Artinya tidak ada yang segar $cached_data Ini adalah sesuatu yang ingin saya ketahui segera.
if (is_wp_error($response)) {
return new WP_REST_Response('Error fetching data', 500);
}Sebagian besar pekerjaannya hanyalah menguraikan data XML yang saya kembalikan dari Feedbin ke JSON. Ini memindai file XML dan mengulangi setiap item untuk mendapatkan judul, tautan, tanggal penerbitan, dan deskripsinya:
$body = wp_remote_retrieve_body($response);
$data = simplexml_load_string($body, 'SimpleXMLElement', LIBXML_NOCDATA);
$json_data = json_encode($data);
$array_data = json_decode($json_data, true);
$items = [];
foreach ($array_data['channel']['item'] as $item) {
$items[] = [
'title' => $item['title'],
'link' => $item['link'],
'pubDate' => $item['pubDate'],
'description' => $item['description'],
];
}“Deskripsi” adalah istilah yang sarat makna. Bisa berupa teks lengkap postingan atau kutipannya – kita tidak akan tahu sampai kita mendapatkannya! Jadi, saya mengikatnya dan memotongnya menjadi balok Edit dikonfigurasi untuk menghentikannya tidak lebih dari 50 kata. Ada sedikit risiko karena saya menampilkan HTML yang saya ambil dari API. Keamanan, ya. Namun ada juga peluang untuk menampilkan tag terbuka tanpa bagian penutupnya, sehingga menyebabkan penyembunyian skematis. Saya tahu ada perpustakaan untuk menangani hal ini tetapi saya menjaganya tetap sederhana untuk saat ini.
Sekarang saatnya menyetel pengatur waktu setelah Anda mengambil dan menguraikan sesuatu:
set_transient($transient_key, $items, 12 * HOUR_IN_SECONDS);Dokumen WordPress sangat bagus untuk menjelaskan set_transient() pekerjaan. Dibutuhkan tiga argumen, yang pertama adalah $transient_key Yang diberi nama sebelumnya untuk menentukan transien mana yang akan ditetapkan. Dua lainnya:
$value: Ini adalah objek yang kita simpan di nama transient. Ini dia$itemsObjek menangani semua analisis.$expiration: Berapa lama masa transisi ini harus berlangsung? Ini tidak akan bersifat sementara jika berlangsung selamanya, jadi kami menentukan jumlah waktu yang dinyatakan dalam detik. Milik saya tetap di tempatnya selama 12 jam sebelum habis masa berlakunya dan kemudian diperbarui saat pengunjung mengunjungi halaman berikutnya.
Nah, waktunya untuk return Elemen dari REST API sebagai respons baru:
return new WP_REST_Response($items, 200);Itu saja! Ya, setidaknya untuk penyiapan dan penyelesaiannya. Hal berikutnya yang saya sadari yang saya perlukan adalah titik akhir REST API khusus untuk memanggil data. Saya benar-benar harus bergantung pada dokumen WordPress untuk mewujudkan hal ini:
add_action('rest_api_init', function () {
register_rest_route('custom/v1', '/fetch-data', [
'methods' => 'GET',
'callback' => 'fetch_and_store_data',
]);
});Di sinilah saya paling berjuang dan merasa semuanya memakan terlalu banyak waktu. Ya, itu dan perdebatan dengan blok itu sendiri. Saya merasa sangat sulit untuk menyinkronkan komponen front-end dan back-end, dan sejujurnya, banyak dari kode ini yang tampaknya berlebihan jika Anda ingin menskalakannya. Itu cerita lain.
Selamat membaca apa yang kami baca! Saya telah menyusun halaman yang mencantumkan 10 item terbaru dengan link untuk berlangganan feed lengkap.
Membuat Umpan “Berbintang” awalnya diterbitkan di CSS-Tricks, bagian dari keluarga DigitalOcean. Anda harus mendapatkan buletin.
-Advertisement-.
