Jumat, 27 Januari 2017

Cara Membuat Tema WordPress Dengan Bootstrap Mudah


kita akan coba membahas gimana sih cara membuat template WordPress dengan Bootstrap. Sebenarnya membuat tema WordPress itu bisa dibilang agak rumit apabila kita mendesain tema wordpress dari awal alias from stratch.
Tapi kali ini, membuat tema WordPress pun kita bisa menggunakan framework Bootstrap sebagai kerangka desainnya, agar pembuatan desain bisa lebih cepat dan mudah.
Untuk membuat Tema WordPress, kita dapat menggunakan base template atau yang biasa disebut dengan template dasar. Dengan template dasar ini, struktur direktori sebuah template sudah disediakan secara langsung, kita cukup mendesainnya saja tanpa harus memikirkan struktur foldernya seperti apa.
Untuk itu, kodi memberikan beberapa rekomendasi base template yang bisa kamu gunakan untuk membuat template WordPress menggunakan Bootstrap, yuk langsung check aja!

Understrap


UnderStrap menggabungkan tema Underscore (yang dibuat oleh Automattic) yang sudah mendukung responsive web desain yaitu Bootstrap 4 (oleh Twitter) menjadi framework yang sempurna untuk proyek theme WordPress kamu.
Saya sendiri personally menggunakan base template ini karena sudah tersedia banyak fitur seperti :
  1. SASS
    Memanfaatkan tools SASS untuk mempermudah pembuatan stylesheet, yang membuat mengganti warna, font, stylings dll menjadi mudah
  2. NPM
    Dilengkapi dengan dukungan NPM untuk mengelola semua dependensi. Hanya satu perintah yang bisa kamu jalankan di terminal kamu untuk memperbarui semua aset.
  3. Gulp
    Dilengkapi dengan Gulp sebagai task runner dan satu file gulpfile.js dengan beberapa tugas default. Misalnya untuk mengkompilasi SASS ke CSS.
  4. Dan masih banyak lainnya
Kamu dapat melihat seluruh dokumentasi dan filenya pada website understrap.com

Sage


Sage, yang dibuat oleh Roots, merupakan base template kedua rekomendasi saya. Template ini hampir sama dengan Understrap, hanya saja template ini tidak berdasarkan oleh Underscore yang dibuat oleh WordPress. Ada beberapa fitur juga dalam base template Sage yang sangat membantu kita dalam proses development :
  1. Menulis stylesheet dengan Sass
  2. Secara otomatis memeriksa kode JavaScript kamu dari error
  3. Mengoptimalkan gambar, memungkinkannya pengujian browser tersinkronasi, dan lainnya dengan setup gulp yang disediakan oleh template
  4. Sage hadir dengan versi terbaru dari Bootstrap.
  5. Template didasarkan pada HTML5 Boilerplate.
Kamu bisa cek langsung di websitenya di roots.io/sage

Tidak ada komentar:

Posting Komentar

Pages