3 Tutorial Kustomisasi WordPress untuk Perubahan Design Sederhana

Cloud Hosting Terbaik Indonesia

Tutorial Kustomisasi WordPress kali ini sanat cocok jika kamu ingin mengadakan perubahan design sederhana pada WordPress. Nantinya akan ada 3 metode, yaitu bawaan WordPress yang saya tahu sudah ada dari versi sebelum rilis terbaru ini. Yang kedua adalah dengan plugin, lalu yang terakhir adalah dengan fitur tambahan theme Genesis Framework.

Untuk yang bawaan WordPress sebenarnya saya mau menulisnya beberapa waktu lalu, tapi syukur belum sempat, karena pada rilis WordPress 4.7 tampilannya di rubah. Ini adalah sebuah menu tool yang sangat handy kalau menurut saya, karena tidak diperlukan lagi child themes jika kita hanya sekedar ingin merubah sedikit tampilan themes.

Contoh Kustomisasi Design WordPress

Dalam beberapa kasus kita kadang ingin mengubah jenis font beserta ukuran, line height, atau warna dari menu, background sebuah section dan sejenisnya. Pada prinsipnya adalah kita menambahkan rule CSS baru pada eleme design tersebut. Namun kadang untuk themes yang ‘biasa’ tidak ada pilihan untuk ini. Walau kebanyakan themes gratis terbaru di direktori WordPress malah sudah ada berbagai menu kustomisasi sih.

Dalam tutorial ini nanti akan saya tampilkan beberapa kustomisasi yang saya terapkan dalam website-website saya beserta metode mana yang saya pakai.

Tutorial Kustomisasi WordPress dengan Fitur Bawaan WordPress

Saya menyadari fitur ini waktu merubah background header dari website terbaru saya, penyedia jasa transkrip wawancara. Untuk mengakses menu kustomisasi design WordPress yang bawaan ini, bisa dipilih dari menu Edit CSS.

Tutorial Kustomisasi WordPress - Bawaan WordPress

Dewaweb

Dari situ kita akan dibawa menuju halaman penyesuaian jika themes kita sudah support. Sebenarnya dari menu sesuaikan juga bisa, nantinya tampilannya akan jadi seperti ini;

Mengubah tampilan WordPress dengan Customizer

Disana di kotak bagian kiri terlihat saya mengadakan perubahan seperti background pada header, navigation dan juga footer dari website. Keunikan dari fitur ini adalah manakala kamu klik ‘see full history‘ maka akan muncul perubahan-perubahan yang kamu lakukan sebelumnya. Bahkan bisa dilihat per themes yang dipakai (ada Pique dan Altitute Pro dalam gambar berikut), jadi semisal kita mengaktifkan satu themes, menambahkan CSS, nanti setelah mengaktifkan themes lain bisa balik ke penambahan CSS sebelumnya.

Perbandingan Perubahan Design themes dengan CSS

Kustomisasi Design WordPress dengan Plugin

Banyak plugin yang menawarkan fitur ini, salah satunya adalah sebuah plugin yang saya benarma Simple CSS yang merupakan karya pembuat GeneratePress. Mengubah Design WordPress dengan Plugin Simple CSS

Selain mengganti design secara keseluruhan juga bisa menambahkan CSS untuk per halaman dan juga posting. So far tampilannya mirip sekali dengan pilihan pertama sebelum rilis WordPress 4.7. Saya tidak tahu apakah rilis ini mengadopsi apa yang ada dalam plugin ini sebelumnya. Kalau ingin menggunakan plugin lainnya bisa coba cari di direktori plugin dengan keyword “add CSS“.

Kustomisasi design dengan Theme Setting (Genesis Framework)

Bagi kamu yang menggunakan Genesis Framework seperti halnya saya, bisa memanfaatkan setting dari themes untuk menambahkan sebuah aturan (rule) CSS tambahan. Seperti misalnya yang saya lakukan di sini untuk menjadikan jasa buat website di navigasi berlatar belakang merah, sementara menu yang lainnya berwarna latar hitam.

Tutorial Kustomisasi WordPress dengan Genesis Framework

Dengan menambah style seperti di atas, maka navigasi akan memiliki warna background yang berbeda seperti yang bisa kamu lihat. Bagusnya lagi juga akan secara langsung masuk dalam file style.css yang di minify Autoptimize.

Recap; Tutorial Kustomisasi WordPress

Demikian tutorial kustomisasi WordPress yang saya sampaikan ini. Intinya adalah kita menambahkan sebuah rule CSS baru untuk menjadikan design website kita bisa sesuai dengan selera. Untuk memastikan selector CSS kita tepat, pastikan kita memilih secara detil, seperti yang saya lakukan dengan Genesis Framework seperti di atas.

Semoga bermanfaat, dan selamat sore.

Yuk Bagikan:

Tinggalkan komentar