Unlimited WordPress themes, graphics, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. WordPress
Code

Kapan Menggunakan Bootstrap untuk Tema WordPress Anda (Dan Kapan Tidak)

by
Difficulty:IntermediateLength:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Zadip (you can also view the original English article)

Melakukan pencarian Google untuk 'WordPress Theme dengan Bootstrap' dan Anda akan mendapatkan ratusan hasil. Ini termasuk panduan yang memberitahu Anda bagaimana menggunakan Bootstrap untuk membangun tema serta yang tersedia secara komersial dan bebas menggunakan kerangka Bootstrap.

Pencarian untuk 'Bootstrap' di WordPress tema repositori dan Anda akan mendapatkan hasil 199. Itulah pilihannya.

Tampaknya mengembangkan tema WordPress menggunakan Bootstrap adalah semua kemarahan. Tapi apakah itu merupakan pendekatan yang terbaik untuk alur kerja pengembangan tema Anda?

Di sini saya akan melihat Pro dan kontra penggunaan Bootstrap untuk WordPress Tema, dan membantu Anda untuk mengidentifikasi ketika menggunakan Bootstrap akan membantu alur kerja Anda dan Kapan tidak.

Apa itu Bootstrap?

Bootstrap website menggambarkan Bootstrap sebagai:

HTML, CSS dan JS kerangka kerja yang paling popular untuk mengembangkan proyek pertama yang responsif, mobile di web.

Ini memberitahu Anda beberapa hal:

  • Bootstrap responsif dan mobile pertama.
  • Menggunakan HTML, CSS dan JavaScript.

Jika Anda perhatikan, Anda akan melihat bahwa itu tidak termasuk PHP. Sementara kerangka aplikasi Bootstrap, tidak seperti tema kerangka: itu tidak memberikan Anda salah satu file template tema yang Anda perlukan untuk membuat jika Anda akan untuk memanfaatkan dalam tema. Sebaliknya, apa yang memberi Anda adalah kerangka gaya dan skrip yang akan membuatnya lebih mudah bagi Anda untuk mendapatkan sebuah situs responsif dan berjalan dan menambahkan interaksi dan acara-acara yang membutuhkan JavaScript.

Bootstrap awalnya dirancang sebagai kerangka untuk membantu Twitter pengembang bekerja lebih efisien dan konsisten. Nama awal adalah Twitter Blueprint, yang diubah menjadi Bootstrap setelah banyak pengembangan menjadi terlibat dan proyek mulai tumbuh.

Ini dirilis sebagai kerangka sumber terbuka 2011 dan telah digunakan untuk berbagai aplikasi, termasuk WordPress tema.

Ketika saya pertama kali datang di Bootstrap, titik penjualan utama adalah respon yang pada suatu waktu ketika banyak pengembangan web (termasuk WordPress pengembangan) masih harus mengejar ketinggalan dengan desain web responsif. Bukan awalnya responsif: ini ditambahkan pada 2012 dan kerangka dibuat mobile-pertama pada tahun 2013.

Jika Anda mengunduh Bootstrap, Anda akan melihat bahwa itu terdiri dari serangkaian stylesheet (termasuk versi minified), file JavaScript dan glyphicons, yang termasuk dalam file font. Ini tidak mengganti file tema: malah Anda menghubungi mereka di stylesheet Anda dan fungsi file yang diperlukan.

Aku tidak akan memberikan penjelasan mendalam tentang bagaimana Anda menggunakan Bootstrap dengan tema WordPress Anda di sini: yang dibahas secara rinci dalam tutorial ini. Sebagai gantinya saya akan melihat bagaimana mungkin Bootstrap membantu atau menghalangi WordPress tema pembangunan alur kerja Anda dan situasi di mana Anda mungkin atau mungkin tidak menggunakannya.

Manfaat dari tema dengan Bootstrap

Popularitas Bootstrap sebagai kerangka kerja untuk WordPress tema menunjukkan bahwa hal itu jelas memiliki tempat. Jadi mari perhatikan mana saja yang cocok dari penggunaaan bootstrap.

Sangat responsif dan Mobile-pertama

Bootstrap secara otomatis memberikanmu responsif, merombak mobile-first untuk temamu. Jika Anda telah berjuang untuk sampai ke responsive theme development, itu akan menghemat kerja keras belajar bagaimana untuk membuat Anda sendiri stylesheet responsif dan tambahkan media queries.

Bootstrap menggunakan layout grid berbasis 12 kolom dengan kelas grid yang dapat Anda gunakan dengan unsur-unsur dalam file template Anda membuat konten Anda cocok ke dalam grid.

Manfaat dari pendekatan ini meliputi:

  • Jika Anda tidak akrab dengan query media, Anda tidak perlu menulis mereka sendiri.
  • Sistem grid berbasis menggunakan berorientasi objek CSS, memberikan banyak fleksibilitas untuk styling elemen tema Anda dan pada halaman Anda.
  • Pendekatan pertama mobile berarti CSS Anda lebih bersih dan lebih efisien daripada stylesheet desktop-pertama.

Menggunakan desain Modern, bersih dan menarik

Menurut pendapat saya, tata letak dan tipografi yang Anda dapatkan dengan Bootstrap adalah sangat bagus. Ia tidak akan memenangkan penghargaan desain apapun, tetapi ini akan membantu Anda membangun sebuah tema yang modern, mudah untuk berinteraksi dengan, dan dapat dibaca. Ada beberapa fitur styling saya terutama seperti:

  • penggunaan <small>elemen untuk sekunder teks dalam judul</small>
  • styling untuk blockquotes dan kutipan 
  • Tabel styling, yang jauh lebih menyenangkan daripada apa yang pernah kulihat dalam banyak tema-tema WordPress

Bermain dengan baik dengan HTML5

Serta memperkenalkan sendiri kelas untuk styling, Bootstrap juga termasuk styling untuk kisaran penuh HTML5 unsur-unsur yang dapat Anda harapkan untuk menggunakan tema Anda. Semua ini dari awal menata dapat sebuah kerumitan nyata, sehingga menghemat banyak pekerjaan, serta membuatnya lebih mudah bagi Anda untuk menggunakan markup semantik tema Anda.

Ini memberi Anda akses mudah ke script

Daripada harus menggunakan skrip plugin atau sumber dari tempat lain, Bootstrap menyediakan dengan baik berbagai skrip yang akan membantu Anda menambahkan yang paling umum menggunakan animasi dan interaksi ke situs Anda. Ini termasuk:

  • transisi
  • modal
  • dropdown
  • tooltips
  • popovers
  • tombol

... dan banyak lagi. Hal ini dapat mempercepat perkembangan Anda dan juga memastikan bahwa semua skrip Anda bermain dengan baik dengan satu sama lain. Jika Anda akan menggunakan lebih dari satu atau dua, Bootstrap dapat membuat pengembangan tema Anda lebih mudah; Namun, jika Anda hanya akan menggunakan satu atau dua mungkin, mungkin ada pendekatan yang lebih efisien dengan sedikit kode yang ditambahkan.

Kelemahan dari tema dengan Bootstrap

Bagaimanapun juga, saya tidak percaya bahwa Bootstrap adalah alat yang tepat untuk semua pengembang WordPress tema. Berikut adalah beberapa kerugian untuk menggunakan Bootstrap ketika mengembangkan tema Anda.

Banyak yang harus dipelajari

Aku sudah sudah mengacu pada sistem grid responsif yang digunakan dalam stylesheet Bootstrap's, dan banyak kelas-kelas yang dapat Anda gunakan untuk memanfaatkan ini tema Anda. Hal ini bagus jika Anda siap untuk membiasakan diri dengan kelas mereka dan bekerja keluar bagaimana untuk menggunakannya dalam tema Anda. Namun, jika Anda tidak perlu sebuah layout yang rumit dan hanya akan menggunakan beberapa gaya, Anda mungkin menemukan bahwa Anda menghabiskan jumlah yang tidak proporsional besar waktu bekerja melalui semua kelas dan bekerja keluar yang menggunakan.

Stylesheet meliputi 155 baris kode hanya untuk layout grid yang terkecil layar lebar: lama untuk pelajari jika Anda ingin mendapatkan hasil maksimal dari itu, dan tema-tema yang lebih daripada kebanyakan akan diperlukan.

Selain itu, ada kelas glyphicons, tombol, dan banyak lagi.

Jika tema Anda akan menggunakan proporsi yang signifikan dari styling ini (atau Anda akan menggunakan Bootstrap untuk mendukung banyak tema), maka ada baiknya meluangkan waktu untuk mempelajari cara kerja gaya Bootstrap.  Tetapi jika Anda hanya membutuhkan beberapa kolom dan desain yang responsif, mungkin hal ini berlebihan. 

Ini Menggunakan Query Media Tetap 

Queries media yang digunakan oleh Bootstrap didasarkan pada asumsi tentang lebar layar dan perangkat yang menjadi usang. 

Ini adalah pertanyaan media: 

Untuk tahun terakhir atau lebih, perkembangan responsif telah bergerak menjauh dari breakpoint yang telah ditentukan untuk permintaan media dan menuju breakpoint berbasis desain.   Meskipun queri media ini didasarkan pada dan tentu saja akan bekerja dengan desain Bootstrap (jadi tidak boleh menimbulkan masalah pada perangkat atau browser yang didukung, yang ada banyak), itu tidak memberikan fleksibilitas jika Anda mecodingnya sendiri.

Jika Anda memutuskan untuk menambahkan permintaan media perantara ke stylesheet Anda, maka Anda harus mengambil 155 garis tata-letak tata letak untuk sistem grid dan menyesuaikannya dengan titik istirahat baru Anda — bukan tugas yang akan saya irii! 

Ini Menambah Bloat 

Ya, saya kira Anda sedang menunggu yang satu ini — tanggapan stok dari setiap pengembang web yang skeptis terhadap kerangka kerja atau alat baru.  

Bootstrap tak dapat disangkal memberi Anda banyak fungsi dan gaya yang dapat Anda gunakan dalam tema Anda, dan itu hal yang hebat.   Namun, jika Anda hanya akan menggunakan sebagian kecil dari apa yang disediakan, itu berarti Anda menambahkan semua kode ekstra itu dengan percuma. 

File yang diperkecil, yang memang membantu, tetapi meski begitu, apakah Anda benar-benar membutuhkan semua kode yang tidak digunakan dalam tema Anda? 

Itu Dapat Menghalangi Desain Imajinatif  

Tambahkan Bootstrap ke tema Anda, ambil stylesheet dari stylesheet tema dan duar!  Anda memiliki tata letak yang siap pakai dan responsif yang terlihat baik-baik saja.  Sebagian besar dari kita akan tergoda untuk berhenti di situ, menambahkan beberapa tweak warna mungkin tetapi tidak banyak lagi. 

Ini berarti bahwa desain Anda akan didasarkan pada apa yang disediakan Bootstrap, dan bukan pada apa yang diperlukan untuk situs Anda.  Saya bekerja dengan banyak klien, dan bahkan sebelum kami mulai mendiskusikan desain situs mereka, saya mengajukan pertanyaan tentang tujuan situs mereka, pemirsa, dan banyak lagi.  Semua ini akan menginformasikan desain situs, baik dari segi visual dan dalam hal antarmuka pengguna.

Bahaya dari banyaknya tema menggunakan Bootstrap adalah begitu banyak tema yang pada dasarnya tampak sama.  Pengembang tema WordPress telah melakukan pekerjaan luar biasa untuk membuang pengaduan tema mereka 'tampak seperti WordPress' dalam beberapa tahun terakhir, jadi apakah kita ingin semua tema kami 'terlihat seperti Bootstrap'?

Bootstrap dan WordPress sangatlah berbeda.

Pada akhirnya saya pikir faktor yang paling signifikan mungkin membuat Anda tidak menggunakan Bootstrap merupakan fakta bahwa itu tidak pernah dirancang untuk bekerja dengan WordPress, dan itu bekerja dengan cara yang sangat berbeda. 

Kerangka tema WordPress sering memberikan Anda semua yang Anda dapatkan dari Bootstrap, dan dengan cara yang jauh lebih selaras dengan cara kerja para pengembang WordPress.  Hal ini tidak harus mahal atau memiliki basis kode yang besar: tema Wonderflux, misalnya, gratis dan sumber terbuka, dan termasuk sistem grid responsif (seperti Bootstrap tetapi kurang kembung) dan perpustakaan fungsi dan kait yang tidak Anda miliki ' dengan Bootstrap.

Contoh bagaimana Bootstrap dan WordPress tidak kompatibel adalah dalam desain menu navigasi. Menu WordPress Anda tidak akan bekerja di luar kotak dengan Bootstrap diaktifkan: alih-alih Anda harus membuat nav walker khusus. Ini tidak sulit dilakukan jika Anda merasa nyaman dengan kode itu, tetapi menambahkan langkah lain untuk pengembangan tema Anda. 

Ringkasan

Bootstrap pasti memiliki manfaatnya. Jika Anda membutuhkan tata letak yang menarik, bersih dan responsif untuk situs serta akses ke berbagai efek JavaScript, maka hal itu dapat membantu mempercepat proses pengembangan tema Anda. 

Namun, jika Anda ingin mendapatkan hasil maksimal dari Bootstrap, Anda harus meluangkan waktu untuk mempelajarinya. Ada banyak cara mempelajari Bootstrap, dan jika Anda tak terbiasa menggunakannya, hal itu mungkin tak akan berhasil.

Untuk menyimpulkan, saya akan merekomendasikan menggunakan Bootstrap dalam berbagai situasi:

  • jika Anda siap untuk berusaha mempelajari cara menggunakan Bootstrap
  • jika Anda akan menggunakan banyak fitur Bootstrap, seperti sistem grid dan skrip 
  • jika Anda tidak memiliki desainer yang bekerja dengan Anda (atau tidak sendiri) dan menginginkan desain siap pakai
  • jika Anda ingin mengembangkan tema responsif tetapi tidak tahu cara menulis querie media

Dan saya menyarankan untuk tidak menggunakannya dalam keadaan seperti ini: 

  • jika Anda ingin lebih banyak fleksibilitas berkaitan dengan breakpoint, desain atau tata letak 
  • jika Anda hanya akan menggunakan satu skrip, atau Anda tidak akan menggunakan sistem grid 
  • Jika Anda ingin perbaikan yang cepat-Bootstrap bukanlah pilihannya
  • jika ada kerangka tema WordPress atau tema starter yang melakukan pekerjaan yang Anda butuhkan dan memberi Anda lebih banyak, seperti fungsi dan pengait 

Pada akhirnya, keputusan itu milik Anda! 

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.