Refleksi membangun situs WordPress dari awal (tanpa kode)

Selama dekade terakhir, saya telah bekerja dengan WordPress (hampir) setiap hari. Ini adalah solusi pilihan saya untuk membuat situs web untuk klien dari semua ukuran.

Dan, karena saya mendapatkan lebih banyak pengalaman dengan CMS yang sangat populer, saya menganjurkan untuk membuat tema WordPress dari awal. Hari-hari ini, saya menggunakan tema pemula berbasis garis bawah yang cukup mendasar. Ini diatur seperti yang saya suka dan membuat saya memulai proyek baru dengan cepat.

Namun, seperti semua hal lain di ekosistem WordPress, ada banyak opsi untuk cara kami melakukan sesuatu. Pendekatan yang saya suka bukan untuk semua pengembang. Ini juga tidak selalu merupakan solusi paling praktis untuk pelanggan tertentu (terutama mereka yang memiliki anggaran terbatas).

Hari ini, saya ingin berbagi pengalaman saya dalam membangun situs web dengan cara yang berbeda: menggunakan plugin pembuat halaman WordPress dan tema starter “kosong” tambahan. Saya akan menjelaskan pro dan kontra dari proses tersebut, bersama dengan beberapa tip untuk mendapatkan hasil maksimal darinya. Mari kita mulai!

latar belakang proyek

Saya dihubungi oleh klien seumur hidup yang ingin mendesain ulang situs web HTML mereka sebelumnya. Mereka menginginkan manfaat menggunakan WordPress, tetapi mereka tidak memiliki anggaran untuk membangun kustom penuh.

Gagasan untuk membeli tema bisnis WordPress khusus industri telah dibahas. Sekarang, tidak ada salahnya membeli tema dan menambahkan konten ke dalamnya. Dalam banyak kasus itu akan bekerja dengan baik.

Tetapi tampaknya ada biaya tambahan yang terlibat dalam pengerjaan ulang tampilan dan/atau fungsionalitas agar sesuai dengan spesifikasi pelanggan (atau lebih buruk, harapan saya). Meski begitu, Anda hanya dapat melakukan begitu banyak tanpa benar-benar menghancurkan tema, anggaran klien, atau keduanya.

Dengan pemikiran itu, saya mulai mencari alternatif. Saya baru-baru ini mulai bermain-main dengan Beaver Builder, plugin pembuat halaman WordPress yang populer (Pengungkapan penuh: Saya tidak membayar untuk mengatakan ini, itu hanya alat yang saya gunakan. Ada produk yang tersedia. Analog lain di pasar juga layak mempertimbangkan.)

Mereka menyertakan tema kerangka kerja (dan tema anak terkait) dengan beberapa paket komersial mereka, yang memungkinkan Anda untuk membangun situs web lengkap (header, footer, dan konten) secara esensial menggunakan cara menggunakan kombinasi WordPress Customizer dan pembuat halaman.

Cara kerjanya Lanjutkan membaca untuk menemukan…

Titik pangkal

Langkah pertama dalam proses ini harus familier bagi siapa saja yang telah membuat situs web WordPress:

• Buat instalasi WordPress baru;
• Instal dan aktifkan tema;
• Instal dan aktifkan plugin pembuat halaman;

Dari sana, Anda mendapatkan papan tulis kosong dasar. Sebenarnya, itu tidak jauh berbeda dari apa yang saya lihat saat mengaktifkan tema starter berbasis garis bawah saya sendiri.

Keuntungan dari ini adalah bahwa tema tidak memiliki banyak prasangka tentang apa yang ingin Anda buat. Ini berarti bahwa seorang desainer secara teoritis dapat membuat mockup desain dan kemudian menghidupkannya. Selama mereka mengerti apa yang bisa dan tidak bisa dilakukan oleh utas, itu saja.

Namun, seperti yang akan kita lihat, ada beberapa opsi bagi mereka yang menginginkan sesuatu yang lebih cerdas.

Menggunakan Penyesuai WordPress

WordPress Customizer adalah alat bawaan yang memungkinkan Anda untuk menyesuaikan berbagai pengaturan terkait tema dan melihat hasilnya secara real time. Ini dimaksudkan untuk menghadirkan antarmuka pengguna universal ke pengaturan tema, tidak seperti panel opsi karena banyak tema sudah diterapkan.

Di sini tema Beaver Builder memanfaatkan penyesuaian dan menawarkan banyak opsi. Di antara yang menarik:

Preset

Pilih dari pilihan skema warna yang telah dibuat sebelumnya. Gaya ini dapat diganti melalui CSS atau opsi penyesuaian lainnya.

Judul

Berikut adalah banyak pengaturan untuk desain, penempatan logo, dan navigasi. Opsi untuk tajuk “lengket” disertakan, yang merupakan sentuhan yang bagus. Desainnya mencakup beberapa skenario umum.

Isi

Pilih warna latar belakang dan tata letak halaman untuk blog WooCommerce, postingan individual, arsip postingan, dan template.

catatan kaki

Footer situs web dapat dirancang dan ditambahkan widget untuk menangani berbagai jenis konten. Secara default, ada beberapa batasan di sini. Misalnya, saya ingin menempatkan tautan profil media sosial yang disematkan di area widget footer (diatur agar muncul di bawah widget), yang tidak didukung. Untungnya, sepotong kode yang saya temukan melakukan ini melalui kode pendek WordPress.

Kode

Jika Anda ingin menyuntikkan CSS, JavaScript, atau kode spesifik lainnya ke situs web Anda, Anda dapat melakukannya di sini. Ini dapat berguna jika Anda ingin menambahkan Google Analytics atau kode pelacakan piksel.

Dakwaan

Secara keseluruhan, Customizer memiliki opsi yang cukup untuk membantu saya membuat tampilan dan nuansa dasar situs saya. Ini tidak sekuat yang biasa saya gunakan dengan tema khusus, tapi itulah yang diharapkan. Poin utama di sini adalah mengembangkan dengan cepat dan menghindari kode.

Tema Beaver Builder melakukan hal itu, karena saya dapat mengatur segalanya seperti yang saya inginkan dalam waktu setengah jam atau lebih. Setiap kekurangan adalah jenis harga yang Anda bayar dengan proyek anggaran yang lebih rendah.

Halaman konstruksi

Saya tidak akan menghabiskan banyak waktu untuk membahas detail di sini, karena dua alasan. Pertama, kebutuhan saya akan halaman situs yang berbeda tidak terlalu rumit. Kedua, pembuat halaman itu sendiri adalah sekunder dari tema. Tetapi masih ada beberapa faktor yang layak disebutkan.

Beranda dibuat cukup cepat dan tidak dari awal. Klien saya menyukai salah satu templat halaman pra-bangun Beaver Builder. Menyiapkannya hanyalah masalah mengimpor template dan kemudian meretas untuk menyesuaikan hal-hal yang ingin kita simpan dan membuang yang tidak kita inginkan. Selain itu, ada beberapa modul tambahan untuk ditambahkan melalui pembuat halaman. Fitur seperti korsel belakang dan animasi gulir menambahkan beberapa kepribadian.

Subhalamannya sangat sederhana. Saya telah membuat modul header halaman yang menggunakan latar belakang gambar dan menyimpannya untuk digunakan berulang kali di halaman lain. Dari sana, tinggal menambahkan sisa konten dan memformatnya dengan baik.

Satu-satunya masalah yang saya miliki adalah integrasi Gravity Forms. Karena pembuat halaman tidak menggunakan editor blok Gutenberg WordPress atau Editor Klasik (yang mendukung plugin formulir populer), saya harus memasukkan kode pendek secara manual ke modul Editor Teks. Ini bukan masalah besar, tetapi bisa menakutkan bagi pelanggan yang tidak terbiasa dengan prosesnya.

Dakwaan

Pembuatan halaman kurang lebih seperti yang diharapkan. Kemudahan penggunaan adalah nilai jual aksesoris ini dan sangat cocok. Beberapa modul mudah diseret dan dilepaskan di halaman, dan tata letak multi-kolom mudah dikonfigurasi. Semuanya responsif dan juga dapat disesuaikan secara khusus berdasarkan ukuran layar.

Jumlah modul yang disertakan padat dan praktis mencakup semua yang dibutuhkan proyek. Jika beberapa fitur yang lebih canggih diperlukan, ada sejumlah paket plugin pihak ketiga yang tersedia yang dapat membantu.

Kesan umum

Secara keseluruhan, saya harus mengatakan ini adalah pengalaman yang lebih baik daripada yang biasanya saya miliki dengan tema yang sudah dibuat sebelumnya. Fakta bahwa saya dapat memulai dari sesuatu yang mendasar dan membangun untuk memenuhi kebutuhan proyek lebih sesuai dengan alur kerja pilihan saya.

Sejujurnya, saya harus melakukan beberapa potongan kode tambahan untuk mendapatkan semua yang saya inginkan. Kode pendek yang disebutkan di atas untuk tautan profil media sosial dan sedikit tambahan JavaScript membantu saya menyelesaikan situs. Keduanya diantrekan melalui file .php tema anak, memungkinkan mereka untuk menghindari ditimpa dalam pembaruan tema mendatang.

Saya menemukan ini pilihan yang layak untuk proyek-proyek sederhana. Ada beberapa situasi, seperti menggunakan bidang khusus atau konten bersyarat, yang lebih masuk akal dengan tema khusus sepenuhnya. Tetapi jenis fitur ini biasanya untuk anggaran yang lebih besar.

Jadi, jika Anda seorang pengembang yang ingin mengembangkan situs web baru yang murah dengan cepat, tetapi tanpa jebakan tema pihak ketiga, ini mungkin cara yang harus dilakukan. Akui saja bahwa Anda harus hidup dalam parameter apa adanya. Jika tidak, saatnya untuk mengaktifkan editor kode itu.

*Catatan: Gambar dalam artikel ini hanya untuk ilustrasi: tidak mencerminkan proyek sebenarnya yang digambarkan.