Mesin pencari WordPress menyebalkan
Saya tidak mengenal siapa pun yang menggunakan WordPress yang berbicara dengan baik tentang mesin pencarinya dan saya masih tidak mengerti bahwa mesin pencarinya nyaris tidak berkembang sejak versi pertama.
Tidak hanya primitif dalam hal cara kerjanya, mesin pencari ini juga tidak menawarkan konfigurasi apa pun. Bahkan tampilan halaman hasilnya pun masih banyak yang perlu diperbaiki. Tergantung pada templat yang Anda gunakan, mungkin memiliki desain yang sedikit lebih baik, tetapi secara umum masih prasejarah
Tampilan hasil dapat ditingkatkan sedikit dengan CSS dan daya tanggap dengan pengaya gratis (dengan versi berbayar) seperti Relevanssi (meskipun akan melipatgandakan bobot basis data Anda) atau pengaya lain yang terhubung dengan layanan eksternal Algolia (gratis hingga 10.000 permintaan pencarian per bulan).
Tetapi saya akan meninggalkan masalah kinerja untuk hari lain karena saya masih bergulat dengan hal itu dan saya akan menangani reformasi estetika murni menggunakan GeneratePress (GP) dan GenerateBlocks (GB).
GeneratePress dan GenerateBlocks
GP dan GB masih merupakan dua alat dari sebuah proyek yang masih muda dengan banyak kegunaan yang harus ditingkatkan, GB tidak menawarkan kurva pembelajaran yang sama seperti yang Anda harapkan jika Anda terbiasa menggunakan pembangun seperti Elementor atau yang serupa.
Seperti yang akan kita lihat dalam contoh ini, beberapa proses untuk membangun hal-hal tertentu dengan GenerateBlocks jauh lebih lama dan lebih melelahkan dan bisa jadi sedikit putus asa pada percobaan pertama. Ketika Anda menambahkan lebih banyak blok, semuanya akan menjadi lebih rumit.
Di sisi lain, setelah Anda memahami cara kerjanya dan menguasainya, Anda memiliki lebih banyak kontrol atas tampilan dan nuansa setiap elemen.
kesulitan ini diimbangi dengan dokumentasi dan dukungan yang sempurna di mana penciptanya bahkan membantu dengan masalah desain spesifik yang bukan kompetensi mereka, jadi ini masih merupakan alternatif yang bagus untuk dipertimbangkan karena mereka tetap setia pada filosofi mereka; kode yang adil, bersih, dan ringan.
Elemen Blok
Blok Elemen, selanjutnya disebut Elemen, ditambahkan pada bulan Juli 2020 di GeneratePress Premium versi 1.11.0. Elemen ini dapat digunakan sebagai pengait biasa untuk menyisipkan konten hampir di mana saja di blog Anda tanpa harus mengutak-atik kode.
Ketika dikombinasikan dengan GenerateBlocks, ini memungkinkan Anda untuk menggunakan editor blok WordPress untuk membuat pengait, header, footer, bilah sisi, halaman "Pahlawan", templat konten, dll.
Mari kita mulai bekerja.
Templat struktur
Hal pertama yang akan kita lakukan adalah membuat apa yang kita sebut sebagai "template struktur". Langkah ini bersifat opsional, tetapi tidak ada salahnya untuk membuatnya jika suatu saat kita ingin mengubah sesuatu dengan beberapa klik.
Saya menamainya demikian karena template ini hanya akan mendefinisikan aspek struktural dan bukan kontennya. Artinya, jika kita ingin menampilkan atau tidak header, footer atau widgetnya, bilah sisi atau menentukan lebarnya, dll., dan agar kita tidak bingung dengan nama-nama blok pada langkah-langkah selanjutnya.
Dari menu utama Appearance/Elements atau dari atas, kita dapat mengakses pembuatan dan pengelolaan elemen.
Untuk penggunaan khusus yang menjadi perhatian kami, saat menambahkan elemen baru, kami memilih Desain dan tekan buat.
Kemudian kami memberi tahu elemen di halaman mana kami ingin diterapkan. Untuk melakukan ini, kita pindah ke tab "Aturan untuk ditampilkan" dan pada posisinya kita pilih "hasil pencarian" dari menu tarik-turun.
Elemen menawarkan banyak kemungkinan penyesuaian. Seperti yang akan Anda lihat, di menu tarik-turun itu Anda dapat memilih sebagian besar posisi blog Anda untuk menerapkan pengaturan ini di sana.
Kita juga bisa memutuskan elemen mana yang ingin kita sembunyikan. Dalam kasus saya, saya hanya akan menggunakan satu opsi untuk tampil tanpa bilah sisi, jadi saya memilih"Konten (Tanpa bilah sisi)".
Ada cara lain untuk menyembunyikan bilah sisi, tetapi cara ini, selain paling mudah dan cepat, juga memungkinkan kita untuk mengembalikan perubahan apa pun hanya dengan kembali ke sini atau langsung "membatalkan penerbitan" elemen/template ini ke status "Konsep", sehingga mengembalikan halaman ke tampilan aslinya.
Selain itu, di tab"Nonaktifkan Elemen" Anda dapat membiarkan halaman tetap bersih. Anda bisa mengatakan bahwa ini setara dengan templat halaman "Kanvas" dari Elementor, bahkan sedikit lebih baik dan lebih mudah digunakan.
Praktik yang baik, yang juga direkomendasikan di salah satu tab konfigurasi, adalah mendokumentasikan apa yang dilakukan oleh setiap Elemen dengan catatan internal jika judulnya kurang deskriptif atau kita tidak ingin judulnya terlalu panjang.
Saya sudah terbiasa menambahkan catatan dan komentar pada semua hal karena ketika Anda melakukan banyak modifikasi dan seiring waktu, tidak dapat dihindari bahwa Anda akan lupa di mana dan/atau bagaimana modifikasi itu dibuat. Jadi, dalam catatan internal Anda akan selalu memiliki semua informasi yang Anda butuhkan untuk menelusuri kembali langkah-langkah Anda jika terjadi kesalahan atau jika Anda ingin membuat modifikasi baru.
Dengan menerbitkan template ini, kita sudah memiliki halaman hasil yang dikonfigurasi sesuai dengan keinginan kita, tetapi, tentu saja, sekarang halaman tersebut akan kosong ketika melakukan pencarian karena kita perlu membuat dan menerbitkan elemen baru yang akan menentukan tampilan pencarian tersebut.
Anda dapat membiarkan template ini dalam bentuk draf untuk sementara waktu sementara kita melakukan hal ini dan mempublikasikannya ketika semuanya sudah siap.
Templat penampilan
Meskipun ini hanyalah sebuah Elemen, saya menyebutnya "templat tampilan" untuk panduan kecil ini karena pada saat itu saya sedikit bingung dengan nomenklaturnya dan kemungkinan penggunaannya yang berbeda.
Di sinilah pekerjaan kustomisasi yang sesungguhnya dimulai.
Kita membuat elemen baru, kali ini sebuah Block dan memberinya nama deskriptif.
Kita tambahkan kontainer GenerateBlocks dan di dalam kontainer tersebut kita letakkan blok Query Loop.
Dan inilah yang akan kita lihat.
Saya telah memilih"Start blank" untuk meniru struktur asli hasil, tetapi Anda dapat memilih salah satu template yang ditawarkan blok ini.
Hal terbaik yang harus dilakukan adalah mencobanya sebelum Anda memutuskan karena begitu Anda mulai mengerjakan salah satunya, Anda tidak akan dapat menerapkan yang lain dan Anda harus memulai seluruh proses dari awal jika Anda ingin mengubahnya (sesuatu yang seharusnya menyelesaikan GB).
Setelah memilih templat, pilih blok perulangan kueri (1 ) dan Anda akan melihat tab "Blok" di sebelah kanan (2). Klik di atasnya dan centang opsi"Mewarisi kueri dari templat" (3) di bawah "Parameter kueri". Terakhir, di bagian bawah, di bawah "Aturan Tampilan"/"Posisi" (4) kami mencari dan mengatur "Hasil Pencarian" dan menyimpannya sebagai draf.
Ketika kita membuka loop kueri, kita akan melihat ini:
Kita tambahkan blok kisi lain di dalam "Query Template" dan pilih struktur yang kita inginkan.
Untuk contoh ini kita akan menggunakan salah satu dari dua wadah yang akan bertindak sebagai kolom. Kolom kiri akan menjadi tempat untuk gambar yang ditampilkan dan kolom kanan akan menampilkan kutipan entri.
Anda juga bisa bermain dengan tiga buah kontainer dan mengonfigurasikan kontainer tengah sebagai spasi. Saya tegaskan, kemungkinannya sangat banyak dan hal terbaik yang bisa dilakukan adalah bermain-main dengannya.
Seperti yang mungkin telah Anda perhatikan, kami membangun hampir dari awal sebuah wadah dengan semua bagian yang akan membentuk aspek akhir dari apa yang ingin kami tampilkan. Dalam hal ini hasil pencarian, tetapi Anda dapat melakukannya dengan konten lainnya.
Sekarang mari kita kosongkan kedua wadah tersebut.
Kita pilih wadah pertama dan atur lebarnya menjadi 33 (yang sebenarnya diatur menjadi 33,33) seperti yang akan Anda lihat jika Anda menggulir ke bawah ke opsi pengubahan ukuran.
Kami melakukan hal yang sama dengan wadah kedua dan memilih 66 (yang secara otomatis akan diatur ke 66,66). Jelas, intinya adalah bahwa semua kontainer yang Anda gunakan berjumlah 100 sehingga tidak keluar dari ruang horizontal halaman dan ditampilkan pada baris yang sama.
Sekarang, dengan kontainer pertama yang dipilih, kita tambahkan blok gambar GenerateBlocks di dalamnya.
Apa yang akan terjadi kemudian adalah ruang gambar yang berbeda akan muncul. Jangan panik, itu karena blok tersebut mendeteksi Loop dan membuat ulang perilakunya. Jika mesin pencari Anda menampilkan sepuluh hasil, maka itulah spasi yang akan muncul. Teruslah bekerja pada wadah gambar, lewati sisanya, yang tidak lebih dari pratinjau halaman hasil.
Kami memilih lagi wadah yang berisi gambar (1). Di menu blok di sebelah kanan kita turun ke "Aktifkan data dinamis dan aktifkan (2). Pilih "Gambar yang ditampilkan" di Sumber gambar latar belakang (3 ) dan gambar akan muncul di editor.
Di sumber tautan kami memilih "Tautan individual" (4 ) sehingga setiap gambar ditautkan ke pos yang sesuai dan kami simpan lagi sebagai draf.
Sekarang kita pergi ke wadah kedua, pilih dan tambahkan blok "Headline" dari GenerateBlocks.
Pilih blok "Headline" (1) dengan data dinamis diaktifkan (2 ) dan ulangi proses sebelumnya (3), tetapi kali ini pilih "Judul" sebagai sumber konten (4 ) dan entri individual di sumber tautan (5)
Terakhir, kita akan menambahkan blok "Judul" lainnya di bawah ini, yang akan digunakan untuk menampilkan ekstrak entri dengan mengikuti langkah-langkah berikut.
Setelah ditambahkan, kita ulangi proses yang sama sekali lagi. Dengan memilih blok baru ini (1) kita mengaktifkan data dinamis (2 ) dan sebagai sumber data (3) entri saat ini dan sumber konten "Ekstrak" (4). Sekarang Anda juga dapat mengatur panjang ekstrak dalam kata-kata (5).
Terakhir, kita akan menambahkan paginasi, yang akan muncul di bawah hasil. Untuk melakukan ini, pilih blok perulangan kueri (1) dan klik simbol + kecil dengan titik-titik yang akan Anda temukan di bilah edit (2).
Penomoran halaman dibuat dengan blok tombol yang harus Anda berikan format, warna, dan bentuk yang sesuai dengan tampilan yang Anda cari. Semua konfigurasi yang mungkin, yang tidak sedikit, ada di menu blok di mana Anda akan selalu memiliki opsi untuk menyempurnakan setiap blok untuk seluler, tablet, dan desktop.
Saya akan meninggalkannya di sini agar tidak memperpanjang posting ini terlalu banyak.
Saya menyarankan Anda untuk melakukan semua ini terlebih dahulu di lingkungan pengujian untuk melihat bagaimana cara kerjanya di luar pratinjau yang ditawarkan oleh editor dan mempublikasikannya ketika Anda yakin bahwa tampilannya sudah sesuai dengan yang seharusnya.
Ingat juga bahwa jika Anda melakukan blok desain yang diusulkan di awal dan yang kita sebut Templat Struktur yang kita tinggalkan dalam bentuk draf, Anda harus mempublikasikannya.
Ini akan menjadi titik awal untuk menyesuaikan lebih lanjut tampilan halaman hasil tergantung pada preferensi estetika Anda.
Banyak kemungkinan untuk kustomisasi
Anda bisa terus mengedit atau menambahkan apa pun yang Anda inginkan, seperti blok kisi dengan dua wadah di antara judul dan kutipan dan menambahkan di sana tanggal penerbitan, nomor penulis entri atau apa pun yang Anda suka.
Jika Anda mau, Anda bahkan bisa membuat templat lain untuk halaman default yang hambar ketika WordPress tidak menemukan hasil ketika melakukan pencarian dan menambahkan tombol bantuan atau elemen lain yang membantu pengunjung.
Anda dapat mengubah jenis dan ukuran font, meratakannya ke satu sisi atau sisi lain, menyesuaikan jarak dan dimensi elemen, bermain dengan warna latar belakang dengan menambahkan gambar dan bentuk, menambahkan ikon, garis tepi, efek melayang pada tautan, bayangan pada wadah, dll.
Semua ini tanpa harus keluar dari editor dan tanpa harus mengutak-atik CSS atau menyentuh berkas templat Anda.
Di sini Anda bisa mencoba tata letak dasar hasil pencarian saya yang masih harus saya sempurnakan beberapa hal seperti menambahkan waktu membaca dan jumlah kunjungan, menulis kutipan kosong dan menambahkan gambar unggulan yang hilang.
Bola bonus: Jika Anda perlu menambahkan tipikal"Menampilkan hasil (angka) untuk: (kata yang dicari)" ke hasil, di sini Anda dapat menemukan kode yang diperlukan kode dan instruksi untuk membuatnya bekerja dengan blok Query Loop Anda, terima kasih kepada David dari dukungan GB
