Cara Membuat Tema Responsif WordPress Berdasarkan Bootstrap

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 sendiri sesuai dengan ukuran layar dan browser untuk keterbacaan yang lebih baik, pengalaman pengguna, dan waktu buka. Pengembang dan perancang tema memanfaatkan 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 sebuah video yang menjelaskan bahwa desain responsif tidak akan berdampak negatif pada Anda di SERPs. Lebih lanjut, Google juga telah menerbitkan pedomannya di situs web ramah seluler yang berisi detail tentang bagaimana Google memperlakukan situs web responsif.

Dengan maraknya smartphone dan perangkat sejenis lainnya, penggunaan desktop dan laptop menurun (lambat). Ini berarti orang menggunakan ponsel cerdas 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 mendukung sebagian besar Internet. Ini 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 sumber terbuka yang digunakan untuk pengembangan web ujung depan yang 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. Kerangka kerja menjadi populer karena strukturnya yang ringan seperti yang dikodekan dalam LessCSS.

Dengan menambahkan Bootstrap ke situs web Anda, Anda dapat memanggil kelasnya untuk menambahkan elemen bawaan seperti tombol, kisi, tabel, menu, dll. Demikian pula, Anda dapat membuat elemen yang ada menjadi responsif, tanpa menambahkan kueri media yang rumit.

Buat Tema Bootstrap WordPress

Membuat tema bootstrap WordPress sebenarnya adalah proses 8 langkah. Kabar baiknya – mudah untuk membangun tema yang didukung Bootstrap.

Langkah 1: Buka paket Bootstrap

1. Pertama-tama, instal WordPress di domain Anda.
2. Unduh dan unzip Bootstrap.
3. Setelah selesai, hubungkan Menggunakan klien FTP seperti FileZilla.
4. Arahkan ke wp-content > themes .
5. Buat folder baru di folder Tema dan beri nama BootSTheme . Unggah konten Bootstrap yang tidak di-zip ke folder ini.
6. Hampir setiap instalasi WordPress berisi file-file berikut:

• footer.php
• header.php
• index.php
• style.css

Sekarang, buat empat file kosong dengan nama di atas di folder BootSTheme .

Langkah 2: Konfigurasi Bootstrap

Di folder BootSTheme, buka style.css dan paste kode berikut.

 /*
Nama Tema: MyTheme
URI Tema: https://cloudways.com
Deskripsi: Mytheme Dibangun di atas bootstrap
Versi: 1.1
Pengarang: Ahsan Parwez
Penulis URI: https://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, copy kode di file bootstrap.min.css dan paste di file style.css . Pada titik ini, file style.css akan terlihat seperti ini.

Catatan: Anda bisa mendapatkan kode CSS lengkap yang diperkecil dari situs web Bootstrap.

Langkah 4: Menyiapkan Template HTML

Saya perlu memiliki template HTML dasar untuk digunakan. Untuk mempermudah, saya akan menggunakan tema HTML ini. Saya sarankan Anda mengunduh untuk melanjutkan tutorial.

WordPress memiliki fungsi bawaan get_header() dan get_footer() yang secara default memanggil masing-masing file header.php dan footer.php .

Mulailah dengan memotong kode HTML dari atas hingga div wadah pertama dan tempelkan ke file header.php . File akan terlihat seperti:

File footer.php akan berisi sisa kode:

Pada titik ini, jika Anda mengunggah tema Bootstrap WordPress dan mengaktifkannya, Anda tidak akan melihat apa pun karena index.php tidak berisi apa pun.

Untuk memuat header dan footer, saya akan menggunakan fungsi bawaan WordPress untuk memanggil elemen-elemen ini. Untuk ini, rekatkan kode berikut di index.php :

 <?php get_header(); ?>

<?php get_footer(); ?>

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

Pada file header.php , saya akan mengimport stylesheet Bootstrap dengan menggunakan fungsi WordPress echo get_stylesheet_uri() (baca selengkapnya fungsi di Codex WordPress ). Th akan mengimpor style.css ke situs web dan Anda akan melihat bilah menu atas sekarang.

Anda juga dapat menambahkan style.css dengan menambahkan kode berikut di bagian atas file header.php .

 <link rel="stylesheet" type="text/css" href="<?php echo get_stylesheet_directory_uri(). '/style.css' ?>"> 

Tapi ini belum semuanya, fitur JavaScript di halaman kami masih tidak akan berfungsi, dan kami tidak akan melihat menu drop-down. Untuk mengaktifkan ini, kita akan mengimpor file js kita dengan mengimpor file secara langsung dengan URL di footer.php . Tempelkan kode berikut sebelum tag body penutup.

 <script src="../wp-content/themes/MyBSTheme/js/bootstrap.min.js"></script>

WordPress dikenal dengan kustomisasi dan pluginnya. Untuk memberitahu WordPress di mana menempatkan pengait plugin, kita akan menempelkan <?php wp_head(); ?> dan <?php wp_footer(); ?> pada file header.php dan footer.php . Juga, untuk mengatur judul dinamis situs web, kita akan menggunakan wp_title(); berfungsi di file header.php di antara tag <title> .

 <title><?php wp_title(' | ',benar,'benar'); ></judul>

Kode di atas akan memanggil judul posting yang dipisahkan oleh '|' daripada nama situs. Boolean true akan menampilkan judul. Jika Anda menyetelnya ke false , itu hanya akan mengembalikan nilai dan tidak menampilkannya. 'right' mendefinisikan lokasi judul posting berada di sebelah kanan pemisah.

Langkah 6: Menampilkan Postingan Unggulan

Selanjutnya, saya akan memanggil posting secara dinamis ke beranda (seperti yang ditampilkan oleh ) dan menampilkannya di bagian atas (mirip dengan posting unggulan yang kita lihat di banyak situs bertenaga WordPress).

Tulis kode berikut ke dalam index.php Anda :

 <?php

query_posts('posts_per_page=1');

while(have_posts()) : the_post(); ?>
<div>
<h2><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h2>
<p><?php the_excerpt(); ?>&lt;/p>
</div>

<?php akhir; wp_reset_query(); ?>

Seperti yang Anda lihat, saya menggunakan loop sementara dan mengatur jumlah posting menjadi satu dengan menggunakan post_per_page. Baris ini hanya akan menampilkan posting blog terbaru di bagian atas halaman, dan setelah loop ditutup, query_posts direset.

Kelas jumbotron didefinisikan dalam file bootstrap.min.css . Saya akan menggunakannya untuk menata posting unggulan dengan menggunakan tag <h2> dan the_permalink(); fungsi. Hyperlink dibuat pada judul posting, dan the_permalink(); link fungsi ke URL dari seluruh posting. Untuk menampilkan kutipan posting, saya telah menggunakan fungsi WordPress bawaan lainnya , the_excerpt();.

Langkah 7: Cantumkan Kategori Anda

Sekarang saya akan membuat daftar kategori di sebelah kiri beranda. Saya akan membuat beberapa contoh div yang ditata dengan kelas Bootstrap dan fungsi WordPress wp_list_categories(); .

Paste kode berikut di index.php :

 <div class="panel panel-default panel-body">
<div>
<div>

<ul>
<?php wp_list_categories('orderby=name&title_li='); ?>
</ul>

</div>
</div>
</div>

Ini akan mencantumkan kategori berdasarkan nama dengan efek hover yang bagus.

Langkah 8: Tampilkan Postingan dan Penulis Terbaru

Akhirnya, kami akan menampilkan posting blog terbaru di beranda. Kita akan memulai tag div lain dan di bawah div ini, kita akan menggunakan teknik while loop yang serupa dengan yang kita gunakan di postingan unggulan, tetapi kita tidak akan membatasinya dengan query_posts(); .

 <div>

<?php while(have_posts()) : the_post(); ?>

<h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
<p><?php the_excerpt(); ?></p>
<p> diposting oleh <?php the_author(); ?>

<?php akhir; wp_reset_query(); ?>

</div>

WordPress berfungsi the_author() ; dan ambil nama pengguna penulis posting. Kita dapat menggunakannya untuk menampilkan nama penulis secara dinamis di setiap postingan.

Setelah Anda menyelesaikan semuanya dengan sukses, Anda akan memiliki halaman seperti yang Anda lihat pada gambar di atas.

Menambahkan Bootstrap di Tema WordPress yang Ada

Jika Anda menggunakan tema WordPress yang tidak responsif, Anda dapat menambahkan Bootstrap agar mobile-friendly. Anda dapat menggunakan WordPress dan Bootstrap dengan dua cara berbeda.

Menambahkan Bootstrap Menggunakan CDN

Anda dapat mulai menggunakan elemen Bootstrap hanya dengan menambahkan CDN-nya ke file header.php Anda.

Catatan: Metode ini dapat menyebabkan masalah kompatibilitas, oleh karena itu, pastikan untuk mengambil cadangan penuh sebelum menambahkan kode berikut.

 <!-- CSS terbaru yang dikompilasi dan diperkecil -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">

<!-- JavaScript terbaru yang dikompilasi dan diperkecil -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>

Anda dapat mengakses file header.php baik dengan menggunakan FTP atau menggunakan plugin. Kode di atas berisi versi file CSS dan JS yang diperkecil yang menawarkan kinerja lebih baik.

Menambahkan Bootstrap di dalam functions.php

Dalam metode ini, Anda perlu mengunduh pustaka Bootstrap. Unggah file Bootstrap.min.css dan file Bootstrap-theme.min.css ke folder CSS tema Anda dan unggah file Bootstrap.js ke folder tema yang disebut “js” dari tema WordPress Anda.

Sekarang, akses file functions.php Anda untuk mengantrekan skrip ini.

Tambahkan kode berikut di dalam file functions.php Anda.

 fungsi reg_scripts() {
    wp_enqueue_style( 'bootstrapstyle', get_template_directory_uri() . '/css/bootstrap.min.css' );
    wp_enqueue_style( 'bootstrapthemestyle', get_template_directory_uri() . '/css/bootstrap-theme.min.css' );
    wp_enqueue_script( 'bootstrap-script', get_template_directory_uri() . '/js/bootstrap.min.js', array(), true );
}
add_action('wp_enqueue_scripts', 'reg_scripts');

Anda juga dapat melewati bagian pengunggahan dan langsung mengantrekan CDN bootstrap seperti itu.

 fungsi my_scripts_enqueue() {
    wp_register_script( 'bootstrap-js', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js', array('jquery'), NULL, true );
    wp_register_style( 'bootstrap-css', '://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css', false, NULL, 'all' );

    wp_enqueue_script('bootstrap-js');
    wp_enqueue_style('bootstrap-css');
}
add_action( 'wp_enqueue_scripts', 'my_scripts_enqueue' );

Simpan file dan unggah kembali ke server.

Apa berikutnya?

Tutorial ini terutama berfokus pada pembuatan tema WordPress dasar dari template HTML dan membuatnya responsif dengan menggunakan Bootstrap 3.x. Dalam posting mendatang, saya akan membuat lebih banyak halaman seperti single.php, front-page.php, dan functions.php. Saya juga akan menjelaskan cara mengimpor stylesheet dan JavaScript dari file functions.php.

Jika Anda memerlukan bantuan, cukup kirim komentar di bawah ini dan saya akan menghubungi Anda kembali.