Cara Membuat Tema Wordpress Menggunakan Bootstrap

1 Nov 2016 05:00 7281 Hits 0 Comments Approved by Plimbi
Pingin tau gimana caranya membuat template wordpress menggunakan Bootstrap ? Ikuti langkah-langkah ini.

Halo Sobat Plimbi, kali ini saya akan menjelaskan Cara Membuat Tema Wordpress Menggunakan Bootstrap. Kenapa sih harus wordpress ? Karena wordpress merupakan CMS (Content Management System) yang akan memudahkan kita dalam membuat website atau blog, membuat website atau blog dengan wordpress sangatlah simple karena kita cukup membuat theme atau tema wordpress dan akan lebih mudah lagi bila kita memadukannya dengan Bootstrap.

Bootstrap sendiri adalah sebuah framework HTML CSS yang dilengkapi komponen website sehingga sangat mudah membuat tampilan website dengan menggunakan bootstrap ini, disisi lain juga bootstrap telah beredar luas sehingga sudah ada beberapa template bootstrap yang bisa di unduh dengan gratis. Pada tutorial Cara Membuat Tema Wordpress Menggunakan Bootstrap kali ini pertama tama kita harus mendownload Bootstrap nya terlebih dahulu, kamu bisa mendownloadnya di  http://getbootstrap.com/

Persiapan Membuat Tema Wordpress

  1. Buat folder theme wordpress kita dengan nama “belajarwordpress” di wp-content\themes\ pada CMS wordpress sebelumnya. Bagi yang belum tau caranya bisa dilihat dalam video ini.


    dan akan tampak seperti gambar berikut :
  2. Jika sudah, dari framework Bootstrap yang sudah didownload sebelumnya, pindahkan css, font dan js ke dalam folder yang baru saja kita buat. Untuk folder css, yang dibutuhkan hanyalah file bootstrap.min.css dan bootstrap-theme.min.css. Untuk folder js, file yang dibutuhkan hanyalah boostrap.min.js. Buat folder baru yaitu img untuk menampung gambar yang mungkin kita gunakan di theme.

Membuat Tema Wordpress

  1. Buat file dengan nama style.css , File ini digunakan untuk menampung CSS utama yang digunakan oleh tema. Pada bagian paling atas dari file, masukan code berikut :

    Theme Name: belajarwordpress
    Theme URI: http://belajarwordpress.co.id
    Description: A starter theme for WordPress using Bootstrap framework
    Author: Syamsul
    Author URI: http://belajarwordpress.co.id
    Version: 0.1

    WordPress akan membaca code tersebut secara valid untuk menentukan jenis theme yang digunakan oleh sistem dan ditampilkan dalam menu Appearance > Theme di backend

  2. Buat file bernama index.php , index.php merupakan file dasar jika file di depannya tidak ditemukan dalam theme. Pada bagian index.php, hal yang paling dasar kamu bisa mengetikan code berikut ini :

    Beberapa code yang digunakan seperti the_title() dan the_content() adalah fungsi khusus yang telah disiapkan oleh WordPress untuk mempermudah developer dalam menampilkan informasi yang sesuai.
  3. Jika sudah, buat file bernama header.php dan isikan dengan code berikut :


    <!--[if (gte IE 9)|!(IE)]><!-->

  4. Terakhir buat file bernama footer.php , dan gunakan code berikut sebagai penutup dari halaman HTML :

     

<link href="" />/css/bootstrap.min.css" rel="stylesheet" />
Tags Teknologi

About The Author

Syamsul Ma'arief 35
Ordinary

Syamsul Ma'arief

Graphic Designer - Keep Farmed and Carry Hard.
Plimbi adalah tempat menulis untuk semua orang.
Yuk kirim juga tulisanmu sekarang
Submit Artikel