Dengan begitu banyak perangkat dengan resolusi, ukuran layar, dan sistem operasi yang berbeda, situs web dan aplikasi yang responsif telah menjadi persyaratan penting untuk kehadiran online suatu merek.
Lebih dari 52% dari semua lalu lintas web berasal dari perangkat seluler dan jumlahnya terus meningkat. Pengembang web, pemasar, dan perancang memahami potensi besar jika situs web responsif dan dapat dilihat, dinavigasi, dan dijelajahi dengan mudah di perangkat apa pun, terlepas dari resolusi dan rasio aspek apa pun
Tema responsif adalah pendekatan untuk mendesain web di mana elemen situs web menyesuaikan diri sesuai dengan ukuran layar dan browser untuk keterbacaan, pengalaman pengguna, dan waktu muat yang lebih baik. Pengembang dan perancang tema menguangkan konsep situs web responsif. Banyak merek semakin mempekerjakan Pengembang WordPress juga untuk membuat situs web mereka responsif dan ramah seluler
Kembali pada November 2013, Matt Cutts, kepala tim webspam Google, merilis video yang menjelaskan bahwa desain responsif tidak akan berdampak negatif pada Anda di SERP. Selanjutnya, Google juga telah menerbitkan panduannya tentang situs web ramah seluler yang berisi detail tentang bagaimana Google memperlakukan situs web yang responsif
Dengan maraknya smartphone dan perangkat serupa lainnya, penggunaan desktop dan laptop mengalami penurunan (lambat). Ini berarti orang-orang menggunakan smartphone mereka untuk mencari apa saja. dari berita hingga toko lokal, dari pertanyaan penerbangan hingga film terbaru. Tren yang meningkat ini menghadirkan peluang bisnis yang besar bagi komunitas online
WordPress dan Web Responsif
WordPress adalah CMS paling populer yang memberdayakan sebagian besar Internet. Itu menikmati dukungan dari komunitas pengembang dan desainer sumber terbuka yang kuat. Dengan munculnya desain web responsif, banyak pengembang tema terkenal beralih ke desain responsif dan memperkenalkan kerangka kerja yang mudah dipahami, seperti Redux Framework, Carrington Core, dan Bootstrap, yang ideal untuk membuat tema WordPress responsif dari awal.
Apa itu Bootstrap?
Bootstrap adalah kerangka kerja open source yang digunakan untuk pengembangan web ujung depan ramah seluler. Ini berarti dapat digunakan untuk membuat tema WordPress yang responsif melalui template desain berbasis CSS dan Java Script
Bootstrap adalah toolkit yang menyederhanakan proses dev untuk aplikasi web yang kompleks. Ini adalah gagasan dari tim pengembang Twitter dan tersedia untuk komunitas sumber terbuka. Framework ini menjadi populer karena strukturnya yang ringan karena dikodekan dalam LessCSS
Dengan menambahkan Bootstrap ke situs web Anda, Anda dapat memanggil kelasnya untuk menambahkan elemen yang dibuat sebelumnya seperti tombol, kisi, tabel, menu, dll. Demikian pula, Anda dapat membuat elemen yang sudah ada menjadi responsif, tanpa menambahkan kueri media yang rumit
Buat Tema Bootstrap WordPress
Membuat tema bootstrap WordPress sebenarnya adalah proses 8 langkah. Kabar baiknya – membangun tema bertenaga Bootstrap itu mudah
Hosting WordPress Terkelola Mulai dari $10/bulan
Peningkatan yang dijamin dalam skor Data Web Inti. uji coba gratis 3 hari
Langkah 1. Buka kemasan Bootstrap
- Pilih penyedia hosting WordPress yang andal, dan instal WordPress di domain Anda
- Unduh dan unzip Bootstrap
- Setelah selesai, sambungkan Menggunakan klien FTP seperti FileZilla
- Arahkan ke konten-wp> tema
- Buat folder baru di folder Themes dan beri nama BootSTheme. Unggah konten Bootstrap yang sudah di-unzip ke folder ini
- Hampir setiap instalasi WordPress berisi file-file berikut
- footer. php
- tajuk. php
- indeks. php
- gaya. css
Sekarang, buat empat file kosong dengan nama di atas di folder BootSTheme
Langkah 2. Konfigurasi Bootstrap
Di folder BootSTheme, buka file style. css dan rekatkan kode berikut
/* Theme Name: MyTheme Theme URI: //cloudways.com Description: Mytheme Built on bootstrap Version:1.1 Author: Ahsan Parwez Author URI: //cloudways.com */Ini pada dasarnya adalah komentar yang memberikan deskripsi dan detail tentang tema. Saya sangat menyarankan Anda mengubah komentar ini untuk mencerminkan detail tema Anda
Langkah 3. Menyalin Kode
Untuk tutorial ini, saya tidak akan menggunakan semua file CSS dan JS yang disediakan dalam paket Bootstrap. Untuk memulai proses dev, salin kode di bootstrap. min. file css dan rekatkan dalam gaya. file css. Pada titik ini, gaya. file css akan terlihat seperti ini
Catatan. Anda bisa mendapatkan kode CSS minified lengkap dari website Bootstrap
Pembuat Halaman Memungkinkan Anda Mengembangkan Situs Web Tanpa Kode
Cari tahu pembuat halaman mana yang berkinerja terbaik dan fitur apa yang Anda perlukan untuk membuat situs web
Langkah 4. Menyiapkan Template HTML
Saya perlu memiliki template HTML dasar untuk digunakan. Untuk mempermudah, saya akan menggunakan tema HTML ini. Saya sarankan Anda mengunduhnya untuk melanjutkan tutorial
WordPress memiliki fungsi bawaan get_header() dan get_footer() yang secara default memanggil header file. php dan footer. php masing-masing
Mulailah dengan memotong kode HTML dari atas hingga div kontainer pertama dan menempelkannya ke header. file php. File akan terlihat seperti
Catatan kaki. php file akan berisi sisa kode
Pada titik ini, jika Anda mengunggah tema Bootstrap WordPress dan mengaktifkannya, Anda tidak akan melihat apa pun karena file index. php tidak mengandung apa-apa
Untuk memuat header dan footer, saya akan menggunakan fungsi bawaan WordPress untuk memanggil elemen-elemen ini. Untuk ini, rekatkan kode berikut di index. php
_Sekarang elemen header dan footer akan dimuat di situs web kami, tetapi kami akan mendapatkan halaman dasar tanpa gaya apa pun
Langkah 5. Mengatur Header dan Footer
Di tajuk. php, saya akan mengimpor Bootstrap stylesheet dengan menggunakan fungsi WordPress echo get_stylesheet_uri() (baca lebih lanjut fungsinya di Codex WordPress). Th akan mengimpor gaya. css ke situs web dan Anda akan melihat bilah menu teratas sekarang
Anda juga dapat menambahkan gaya. css dengan menambahkan kode berikut di bagian atas header. file php
Tapi ini belum semuanya, fitur JavaScript di halaman kami masih tidak berfungsi, dan kami tidak akan melihat menu drop-down. Untuk mengaktifkan ini, kita akan mengimpor file js kita dengan langsung mengimpor file dengan URL di footer. php. Paste kode berikut sebelum tag body penutup
WordPress is known for its customization and plugins. To tell WordPress where to place the plugins hooks, we are going to paste and in header.php and footer.php files. Also, to set dynamic titles of the website, we are going to use wp_title(); function in the header.php file between the tags.