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

Menggunakan Preprosesor CSS Dengan WordPress - LESS Structures

by
Difficulty:IntermediateLength:MediumLanguages:

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

Pada bagian pertama dari seri saya memberikan gambaran singkat tentang preprosesor populer LESS dan SASS. Saya juga membahas framework yang biasanya dikaitkan dengannya.

Pada bagian kedua dari seri saya melakukan penyelaman mendalam ke KURANG dan merinci beberapa fitur-fiturnya. Kita membahas variabel, bersarang, dan mixin.

Di bagian seri ini saya akan membahas bagaimana menyusun struktur file .less Anda. Saya juga akan membahas bagaimana menghubungkan mereka semua menggunakan impor, dan terakhir dengan cepat mencakup pembesaran.


Menggunakan LESS untuk Membuat Tema Dua Puluh Dua Belas Anak

Kita akan membuat tema turunan untuk tema Twenty Twelve default. Bagi Anda yang tidak terbiasa membuat tema turunan, satu-satunya hal yang kita butuhkan untuk membuat tema turunan adalah file style.css. Untuk info lebih lanjut, kunjungi WordPress Codex.

Pertama, kita ingin menavigasi ke folder tema di dalam wp-content. Anda harus melihat folder twentytwelve di dalam sini. Kita akan membuat folder baru dan beri nama lessbuilt. Buka folder itu.

Di dalam folder lessbuilt baru kita, kita akan membuat folder di sini dan beri nama css. Buka folder itu.

Di dalam folder css, buat folder lain dengan nama less dan buka juga. Di dalam folder ini kita ingin membuat file baru, style.less. Buka itu.

Untuk pemeriksaan spot, pastikan Anda memiliki jalur berikut sekarang ke file style.less Anda:

wp-content/themes/lessbuilt/css/less/style.less


Membuat Struktur File LESS

Sekarang kita memiliki lebih less folder yang dibuat. Kita akan menambahkan semua file .less di folder ini.

style.less

Hal pertama yang ingin kita lakukan dalam file style.less kita adalah menambahkan kode untuk memungkinkan kita menunjuk bahwa kita sedang membuat tema turunan. Silakan tambahkan yang berikut ini:

Hanya itu yang perlu kita mulai. Selanjutnya, kita akan membuat file .less lainnya dan kemudian mengikat semuanya bersama di sini di style.less.

variables.less

File pertama yang saya sarankan untuk kita buat adalah file variable.less. Di sinilah kita akan menyimpan semua variabel yang akan digunakan untuk tema turunan kita. Ini akan dapat diakses oleh semua file .less kita di folder yang less.

Buka file baru dan rekatkan pada yang berikut ini:

mixins.less

File selanjutnya yang akan dibuat adalah file mixins.less. Sebagian besar perubahan yang akan dilakukan adalah dengan warna tautan. Saya akan membuat mixin yang mengambil warna tautan dan warna tautan melayang. Ini akan mengembalikan gaya berdasarkan apa yang diteruskan ke dalamnya.

Pertama buat file mixins.less. Buka file itu dan rekatkan yang berikut ke dalamnya:

misc.less

File selanjutnya akan mengadakan stylings lain-lain seperti tubuh dan tautan. Buat file misc.less lalu tempel di yang berikut:

navigation.less

Disarankan untuk menjaga semua styling navigasi bersama sehingga kita dapat dengan cepat tahu ke mana harus pergi untuk mengedit menu.

Buat file navigation.less dan tambahkan yang berikut ke dalamnya:

header.less

Selanjutnya, kita akan menambahkan styling untuk judul situs dan deskripsi di header.

Buat file header.less dan tambahkan berikut ini ke dalamnya:

posts.less

Selanjutnya kita akan ingin menambahkan beberapa gaya untuk posting kita. Kita akan mengubah warna judul dan entri header dan warna tautan footer.

Buat file posts.less dan tambahkan yang berikut ke dalamnya:

pages.less

Kita ingin judul halaman menjadi putih juga. Saya juga menyarankan Anda menempatkan perbedaan gaya yang Anda inginkan untuk halaman versus posting di sini juga.

Buat file pages.less dan tambahkan berikut ini:

sidebar.less

Saya ingin menambahkan perbatasan di sebelah sidebar sisi, jadi saya akan menambahkan itu di file sidebar.less. Buat file itu dan tambahkan berikut ini:

widgets.less

Kita ingin membuat judul widget menjadi putih dan membuat tautan di widget cocok dengan tautan lain di tema turunan. Saya juga ingin mengubah warna formulir pencarian.

Disarankan untuk menempatkan penataan untuk widget di widgets.less. Tanpa dan simpan penataan untuk wadah di sekelilingnya di sidebar.less.

Buat file widgets.less dan tambahkan berikut ini ke dalamnya:

footer.less

File terakhir yang akan kita buat adalah footer.less. Ini akan berisi gaya apa pun untuk footer tema turunan.

Membuat footer.less file dan menambahkan berikut ini:


Menyatukan Semuanya

Jadi kita telah membuat semua file .less individu kita untuk memecah perubahan gaya kita menjadi struktur logis. Anda seharusnya melihat bahwa saat kita membuat file, kita menggunakan variabel yang dibuat dalam variabel.less dalam semua file .less yang lain. Kita juga telah menggunakan .links() mixin kita dari mixins.less banyak, juga.

Cara kita akan menghubungkan semua file .less ini bersama-sama adalah dengan menggunakan impor.

Import

Import dalam CSS dan LESS sama seperti dalam bahasa lain. Anda memberi tahu kompiler bahwa Anda ingin file Anda saat ini mengetahui dan menggunakan file lain. Ini seperti mengimpor pustaka atau framework yang Anda gunakan di .NET, Ruby gems, dll.

Sintaks untuk mengimpor file dengan LESS sama seperti CSS. Karena semua file .less kita berada di folder yang sama, kita akan menggunakan yang berikut:

Ini akan memberi tahu kompiler LESS kita bahwa ketika Anda mengkompilasi file ini, Anda juga harus menggunakan file lain ini.

Dalam file style.less, kita ingin menambahkan import untuk masing-masing file .less yang dibuat. Ini juga akan memastikan bahwa file .less yang Anda import dengan style.less akan terhubung juga.

Sebagai contoh, jika kita mengimpor variabel.less dan widgets.less dalam file style.less kita, variabel yang kita definisikan dalam variabel.less akan dapat diakses di widgets.less.

File style.css terakhir

Mengatur Jalur Output

Sekarang kita memiliki semua file .less kita dibuat dan semuanya diimpor ke file style.less kita, kita ingin mengatur path output dari style.less di CodeKit.

Kita membahas cara mengatur output file .less kita di posting sebelumnya.


Topping Off Dengan Minifikasi

Hal yang hebat tentang menggunakan LESS untuk membuat dan mengkompilasi CSS Anda adalah Anda dapat memilih format apa yang ingin Anda kompilasi. Ini berarti bahwa Anda dapat mengkompilasinya ke dalam bentuk reguler atau memperkecil file Anda.

Pasti disarankan untuk memperkecil semua file .css situs Anda. Semakin kecil file, semakin cepat situs Anda akan memuat. Anda menginginkan ukuran file terkecil karena setiap halaman tidak akan dimuat dan dilihat oleh pengguna hingga file .css dimuat. Kecepatan memuat halaman Anda juga memengaruhi SEO Anda.

Dengan CodeKit, mengubah pengaturan untuk diperkecilkan semudah mengubah Gaya Output ke Terkecil. Sekarang setiap kali Anda membuat perubahan pada file .less Anda, CodeKit akan secara otomatis mengkompilasinya dan mengecilkannya ke file style.css tema turunan Anda.


Kesimpulan

Saya telah membahas praktik terbaik untuk menyusun file .less Anda di tema atau tema turunan Anda. Saya juga berbicara tentang struktur folder dan di mana menempatkan file .less Anda.

Saya melangkahi Anda dengan membuat semua file .less dan berbicara tentang cara menghubungkan semuanya ke file style.less Anda menggunakan import. Terakhir saya berbicara tentang di mana mengatur jalur keluaran file style.less Anda dan bagaimana cara CodeKit memperkecil file .less Anda saat dikompilasi.

Saya juga telah menambahkan tema turunan lessbuilt ke GitHub sehingga Anda dapat menggunakan atau mengunduhnya.


Sumber

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.