Keren! Cara Membuat Tema WordPress Dengan Bootstrap Mudah!

6

Halo sobat kodi šŸ™‚Ā ! Kali ini 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.

Kali ini untuk membuat tema WordPress kita dapat menggunakanĀ framework Bootstrap sebagai kerangka desainnya, agar dalam membuat 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


Berikut merupakan rekomendasi base template dari kodi untuk mempermudah kamu membuat template WordPress menggunakan Bootstrap.Ā Apakah kamu punya rekomendasi lain yang lebih keren atau lebih mudah? Atau kamu punya pertanyaan lain? Langsung aja komentar dibawah ini ya! Kodi tunggu šŸ˜‰

  • Ivan Setia

    mas blog nya keren, pake cms apa ini ? pasti rumit yah ?

    • Mirza Ardian Syah

      mau cms kayak itu ma gue ada dijual 45 $ aj bisa nego

      • iskrim kaskus

        bisa kurang gak? pm dong… šŸ˜‰

        • Mirza Ardian Syah

          Theme Features

          Responsive design
          Create your own shop – WooCommerce Compatible
          Stunning full-width slider
          3 Promo boxes below slider
          5 Different blog layouts (including full-width version of each layout)
          Classic Blog Layout
          Grid Layout
          1st Full Post then Grid Layout
          List Layout
          1st Full Post then List Layout
          Choose between full-width or standard post layout on a post-by-post basis
          Full-width Instagram feed in footer
          3 Column footer widget area
          Post Formats
          Standard Posts
          Video Posts
          Gallery Posts
          Music Posts
          Custom styling for MailChimp for WordPress so you can display a beautiful newsletter widget.
          Custom About Me widget
          Custom Facebook widget
          Custom Social widget
          Custom Latest Post
          Instagram Widget styling included
          Support for Contact Form 7
          Theme Options powered by WordPress’ Customizer
          Hide/Show most element
          Sticky navigation
          Full-width Page Template
          Full-width Page Template w/ Slider Promo Boxes
          Page Template w/ Slider Promo Boxes
          Tons of customizable color options
          Social media icons in header and footer
          Translation Ready
          Works with WP 4.4+
          WordPress 3.0 drop-down support

          Version 1.2

          Added support for latest WooCommerce 3.0
          Added Color options for Promo Boxes
          Added option to set a default post layout
          Added support for WordPress title tag

        • Mirza Ardian Syah

          theme legal and not nulled ,theme pro no crack

  • http://www.chairulrizky.com Rizky

    good artikel mas
    salam kenal ya, tp lebih baik di dalamartikelnya di jelaskan detil bgmana membuat theme karena di title cara membuat tema…tp good lah.. šŸ™‚