Bagaimana Cara Membuat Tema WordPress Yang Responsif

Posted on by

Bagaimana Cara Membuat Tema WordPress Yang Responsif – Ada saatnya Anda perlu memperbaiki semuanya. Dan apa cara yang lebih baik daripada melakukannya sendiri? Mari kita pikirkan tentang WordPress dan banyaknya jumlah tema yang ditawarkan baik gratis maupun premium.

thesimplexdesign

Bagaimana Cara Membuat Tema WordPress Yang Responsif

thesimplexdesign – Apakah mereka menawarkan fungsionalitas, keunikan, dan jenis tampilan yang sama yang Anda inginkan untuk dimiliki situs web Anda. Dengan demikian, Anda mungkin tergoda untuk membuat tema WordPress kustom Anda sendiri dari awal untuk meningkatkan pengalaman pengguna, daya tanggap , front-end, dan fungsionalitas situs web Anda . Sederhananya, tema khusus dapat membantu menentukan desain situs Anda.

Meskipun mengembangkan tema Anda sendiri mungkin tampak luar biasa terutama jika Anda seorang pemula, kabar baiknya adalah bahwa dengan pengetahuan teknis dasar dalam pengembangan web, mengembangkan tema khusus di WordPress cukup mudah. Berkat banyak alat platform dan keramahan pengguna yang melekat.

Dalam tutorial ini, kami akan memandu Anda tentang cara membuat tema WordPress responsif dari awal menggunakan CSS3 dan HTML5. Tapi sebelum kita mulai, mari kita jawab beberapa pertanyaan dasar.

Baca Juga : Cara Menggunakan SEO Untuk Membangun Kesadaran Merek Perusahaan

1. Mengapa Membuat tema WordPress Kustom?

Ada sejumlah alasan mengapa Anda memilih untuk membuat tema khusus di WordPress. Pertama, dengan tema khusus, postingan dan halaman web Anda dapat memiliki tata letak yang konsisten. Terlebih lagi, Anda dapat membuat situs Anda unik serta meningkatkan keseluruhan desainnya dan memiliki semua fungsi yang Anda butuhkan.

2. Apa itu Desain Tema WordPress Responsif?

Ketika kami berbicara tentang situs web yang tidak responsif, maksud kami adalah tata letak halaman tidak merespons ruang yang tersedia atau ukuran layar pengunjung.

Artinya, konten yang ditampilkan tampak meluap atau terputus-putus sehingga membuat situs web Anda terlihat berantakan. Namun, dengan desain responsif, halaman merespons terlepas dari ukuran layar pengunjung. Terlebih lagi, konten ditempatkan dengan tepat untuk memastikan tidak ada yang meluap, terputus, atau campur aduk.

Saat membuat tema WordPress, sangat penting untuk memastikan bahwa Anda menerapkan beberapa prinsip untuk memastikan bahwa Anda mendapatkan tema yang desainnya responsif.

Mari kita ambil contoh situs yang kontennya perlu dibagi menjadi empat elemen divisi (<div). Yaitu header, konten utama, sidebar, dan footer. Jadi apa yang Anda lakukan untuk memastikan bahwa desain Anda responsif dan selaras dengan tata letak situs web Anda?

Hal pertama adalah mempertimbangkan tata letak situs Anda dalam bentuk kisi, bukan piksel (px).

Kemudian bagi setiap bagian konten menjadi persentase (%), yaitu lebar kisi. Dalam kasus kami, misalnya, lebar setiap div mengambil 100 persen dari ruang yang tersedia. Jadi, Anda harus mengalokasikan 25% dari ruang yang tersedia untuk setiap div agar memiliki empat divisi.

Ini berlaku untuk konten, tetapi bagaimana dengan gambar? Untuk gambar , pastikan lebar maksimum diatur ke 100 persen dari ukuran sebenarnya (lebar maksimum: 100%) dan tinggi diatur ke otomatis. Ini akan memastikan bahwa tinggi gambar dan gambar akan menyesuaikan secara otomatis ketika ukuran wadah dipersempit.

Oleh karena itu, dengan asumsi Anda memiliki gambar dengan lebar 200 piksel dan Anda ingin memasukkannya ke dalam divisi yang mengambil 100 persen dari ruang yang tersedia, layar akan menampilkan lebar gambar yang sebenarnya.

Apa yang tersirat dari ini, seperti yang telah kami tunjukkan sebelumnya, adalah bahwa menggunakan lebar: 100% akan memastikan bahwa gambar mengambil semua ruang yang tersedia, bukan berhenti pada lebar aslinya dalam piksel.

3. Mengapa menggunakan HTML5 dan CSS3?

HTML5 adalah versi kelima dan paling disempurnakan dari bahasa markup web HTML.

Bahasa markup web baru hadir dengan atribut, elemen, dan rangkaian teknologi yang lebih beragam yang memungkinkan Anda membuat situs web yang lebih kuat dan responsif yang kontennya dapat ditampilkan di perangkat keluaran apa pun seperti ponsel cerdas, komputer, atau laptop.

Selain itu, ia hadir dengan fitur meta-tag yang memungkinkan Anda untuk mengontrol tampilan browser Anda di setiap viewport browser.

CSS3, di sisi lain, adalah versi terbaru dan tercanggih dari bahasa Cascading Style Sheets (CSS). Bahasa CSS3 membawa banyak hal baru seperti tata letak dan pemformatan baru. Ini juga memiliki fitur kueri media yang menggunakan aturan @media untuk menetapkan aturan tertentu atau menentukan apakah kondisi tertentu benar. Misalnya, kueri media dapat digunakan untuk:

  • Periksa kemampuan perangkat, bukan jenis perangkat.
  • Periksa tinggi dan lebar viewport.
  • Periksa tinggi dan lebar perangkat.
  • Seperti yang Anda lihat, dengan HTML5 dan CSS3 Anda dapat mengontrol perilaku situs web Anda dalam berbagai ukuran layar.

Dalam tutorial ini, kita akan menggunakan HTML5 dan CSS3 untuk membangun tema WordPress kustom pertama kita.

4. Langkah-langkah untuk Mengembangkan Tema WordPress Responsif Pertama Anda

Buat Lingkungan Lokal dan Instal WordPress

Sekarang setelah Anda terbiasa dengan apa yang akan kita lakukan, akhirnya saatnya untuk mulai membuat tema WordPress kustom pertama Anda.

Tetapi pertama-tama, Anda harus mengunduh dan menginstal WordPress secara lokal di komputer Anda . Untuk tujuan pembelajaran, lingkungan lokal akan membantu Anda menguji tema sebelum mengunggahnya ke server langsung.

Anda dapat menggunakan Server Desktop atau menginstal server WAMP dan menginstal WordPress. Kedua server gratis untuk digunakan. Baca artikel kami tentang cara menginstal dan mengkonfigurasi Server WAMP di Komputer Anda .

WAMP relatif mudah untuk pemula. Namun, itu hanya kompatibel dengan sistem operasi Windows sementara Desktop Server kompatibel dengan sistem operasi Windows dan Mac. Anda dapat memeriksa cara menginstal Server Desktop dari situs resminya.

Buat Folder untuk Menyimpan Tema Anda dan Filenya

Setelah Anda menginstal WordPress ke server lokal Anda, sekarang saatnya untuk memulai. Apa yang perlu Anda lakukan di sini menavigasi dari folder root WordPress dan kemudian ke wp-content lalu ke folder tema (- /wp-content/themes/). Ikuti langkah ini.

Buka File Manager Anda di cPanel atau hPanel Anda.

Lalu buka public_html/wp-content/themes, Anda akan melihat beberapa tema pra-instal.
Sekarang buat folder baru dan beri nama yang unik dan pendek seperti “mytheme”. Pastikan Anda tidak menggunakan spasi atau angka saat memberi nama.

Buat File Template WordPress Esensial dan CSS Style Sheet

Pada dasarnya, Anda memerlukan dua file template untuk membuat tema WordPress. Itu adalah file template style.css dan index.php . File-file ini sangat penting karena mereka akan menentukan tampilan keseluruhan dari semua konten di situs Anda.

Namun, agar Anda dapat membuat tata letak yang berbeda untuk halaman dan posting Anda, Anda harus memiliki template terpisah yang berisi PHP dan HTML5. Yang perlu diperhatikan adalah bahwa setiap template harus diberi nama sesuai dengan aturan WordPress.

Template ini meliputi:

  • header.php, berisi kode HTML untuk bagian header dari tema Anda. Dimulai dengan .
  • footer.php, yang template yang berisi kode HTML yang menangani bagian footer. Ini termasuk .
  • page.php, template untuk menampilkan hanya satu halaman blog dari situs web Anda.
  • single.php, ini adalah template khusus yang digunakan untuk menampilkan hanya satu posting, terlepas dari jenis posting.
  • comments.php, template yang menentukan bagaimana kotak teks komentar dan kiriman akan muncul.

Anda bisa mendapatkan seluruh daftar file template tema WordPress di sini. Namun, untuk jenis kiriman khusus, Anda dapat membuat templat khusus kiriman.

Untuk membuat file template WordPress, ikuti langkah-langkah di bawah ini:

  • Buka folder “mytheme” dan buat file PHP berikut: index.php, footer.php, header.php, page.php, sidebar.php, dan funtions.php.
  • Dari sana, buat file style.css .
  • Masukkan komentar yang diperlukan ke bagian atas file style.css . Ini agar WordPress tahu apa nama tema kita bersama dengan komentar opsional lainnya seperti URI tema, Penulis, Versi, Lisensi, dll.

Sangat penting untuk diingat bahwa informasi yang Anda masukkan harus dimulai dengan kata kunci dan setiap header harus berada di barisnya sendiri. Yang paling penting itu harus ditulis sebagai komentar CSS multi-baris.