Modifikasi Theme WordPress Dengan Bantuan Firefox

Modifikasi theme WordPress dapat dilakukan dengan sangat mudah. Apapun pilihan theme WordPress anda, seringkali anda merasa kurang cocok pada beberapa elemen. Misalnya jenis huruf yang dipakai. WordPress membuka lebar semua kemungkinan modifikasi theme. Dengan bantuan browser Mozilla Firefox, kita dapat melakukan modifikasi tampilan tema dengan mudah.


Disclaimer modifikasi theme dengan Firefox:

  1. Artikel ini memberikan gambaran bagaimana cara modifikasi theme WordPress pilihan Anda. WordPress dalam hal ini adalah CMS (content management system) dari WordPress.org atau self hosted WordPress, bukan blogging platform dari WordPress.com.
  2. Artikel ini memberi contoh cara memodifikasi tema default WordPress yaitu Twenty Seventeen. Prinsip yang sama dapat anda gunakan untuk memodifikasi tema lain pilihan anda.
  3. Anda memerlukan browser dengan fasilitas developer tools. Anda dapat menggunakan Google Chrome atau Mozilla Firefox. Keduanya memiliki fasilitas developer tools yang sama. Dalam proses modifikasi yang dijelaskan di artikel ini, digunakan Mozilla Firefox.
  4. Dalam melakukan modifikasi ini, tidak ada tuntutan bahwa sebelumnya anda harus memahami bahasa CSS. Justru dengan cara ini anda dapat belajar CSS sambil melakukan modifikasi. Menyenangkan bukan?
  5. Proses modifikasi ini sangat menyenangkan. Anda dapat mengembangkan tampilan situs atau blog WordPress anda sesuai kebutuhan. Karena proses ini sangat menyenangkan, anda disarankan untuk memahami kebutuhan tampilan situs atau blog anda supaya anda memiliki batas tertentu.

Apa itu CSS?

Modifikasi theme (selanjutnya saya sebut tema) WordPress dilakukan dengan merekayasa berkas CSS. CSS adalah bahasa yang mengatur bagaimana sebuah situs web disajikan atau ditampilkan. Pengaturan ini meliputi warna, tata letak, dan huruf. CSS memungkinkan sebuah situs web dapat tampil sempurna dalam beberapa perangkat baik layar besar, layar kecil, atau bahkan cetak.

CSS menjadi bahasa yang paling berguna bagi desainer situs web atau seseorang yang sekedar ingin melakukan modifikasi theme. Modifikasi theme WordPress pun dilakukan dalam berkas CSS.

Baiklah tanpa penjelasan panjang lebar, mari kita mulai proses modifikasi theme WordPress.

  1. Log in ke dasbor WordPress anda dengan Mozilla Firefox.
  2. Sorot ke nama situs anda di ujung atas kiri, dan klik kunjungi situs. Setelah Situs WordPress dengan tema Twenty Seventeen ditampilkan, anda dapat segera mulai melakukan modifikasi.
Modifikasi theme wordpress - Klik kunjungi situs
Klik untuk memperbesar gambar.

Dalam artikel ini anda akan mengubah tampilan default tema Twenty Seventeen ini:

Modifikasi theme wordpress - Anda akan mengubah ini
Klik untuk memperbesar gambar

Menjadi ini:

Modifikasi theme wordpress - Menjadi ini
Klik untuk memperbesar gambar.

Dalam artikel ini anda akan melakukan modifikasi pada:

  1. Jenis huruf.
  2. Ukuran huruf.
  3. Pemberian warna pada menu bar.

Mengubah jenis huruf tema Twenty Seventeen

Tema Twenty Seventeen menggunakan jenis huruf yang sama dalam seluruh situs. Tema ini menentukan jenis huruf yang dipakai langsung pada tag <body>. Sehingga ketika anda melakukan modifikasi theme atau mengganti jenis huruf yang dipakai tema ini, anda harus mencari tag <body> dan mengganti value dari properti font-family. Caranya:

Klik Toggle Developer Toolpick element from the page, lalu sorot dan klik pada salah satu area teks. Misalnya pada salah satu paragraf.

mogamogaku.com/blog - Klik dev tools
Klik untuk memperbesar gambar.
mogamogaku.com/blog - Ubah menjadi Georgia
Klik untuk memperbesar gambar.

Perhatikan panel Rules. Scroll ke bawah sampai anda menemukan tag body dengan properti font-family. Setelah menemukannya anda dapat mengganti jenis huruf dengan jenis huruf yang lain. Sebagai contoh, saya menggantinya menjadi huruf Georgia. Anda bisa langsung mengetikkan “Georgia” setelah properti font-family. Seketika huruf lama akan digantikan huruf baru yaitu Georgia.

mogamogaku.com/blog - Huruf awal adalah Libre Franklin
Klik untuk memperbesar gambar.
mogamogaku.com/blog - Dapat diganti dengan Georgia
Klik untuk memperbesar gambar

Mudah bukan? Sampai di sini anda telah mengerti cara mengubah jenis huruf yang dipakai tema Twenty Seventeen. Masalahnya apa yang anda lakukan baru saja hanya berlaku sementara dan hanya berlaku di browser yang anda pakai. Begitu anda refresh halaman anda, jenis huruf yang telah anda ganti akan kembali seperti semula. Dan pengguna lain yang mengakses situs anda di lain tempat tidak menemukan perubahan apapun.

Modifikasi tema secara permanen dan berlaku daring.

Lantas bagaimana supaya modifikasi yang anda lakukan bersifat permanen dan dapat tayang secara daring? Anda dapat melakukan dengan cara sebagai berikut:

  1. Lakukan refresh halaman situs anda supaya browser melakukan reset dan meniadakan modifikasi sementara yang baru saja anda lakukan.
  2. Klik Toggle developer toolsStyle Editor Create and append a new stylesheet to the document
mogamogaku.com/blog - Membuat style sheet baru
Klik untuk memperbesar gambar.

Sekarang anda telah memiliki style sheet baru dengan nama New style sheet (#nomor). Anda akan melakukan proses modifikasi tema pada berkas New style sheet ini tanpa mengubah sumber style asli yaitu style.css.

Karena anda telah mengetahui bahwa properti font-family terletak pada tag body, maka anda dapat langsung mengetikkan bahasa CSS ke dalam berkas New style sheet ini. Ketikan:

body {
font-family: "Georgia", Times, serif;
}

Perhatikan saya menuliskan nama huruf lain di belakang huruf Georgia. Hal ini adalah langkah antisipasi apabila browser gagal menampilkan huruf Georgia, maka akan ditampilkan huruf Times. Apabila masih gagal, maka browser akan menampilkan huruf apapun dengan tipe serif.

mogamogaku.com/blog - Area modifikasi CSS
Klik untuk memperbesar gambar.

Developer tools memiliki fitur auto-complete yang bermanfaat sehingga anda tidak perlu mengetikkan secara lengkap kata demi kata. Pilihan akan muncul secara drop-down seketika anda mulai mengetik. Anda tinggal memilih saja properti apa yang hendak anda ketikkan.

Sekarang anda telah mengubah jenis huruf menjadi Georgia dalam berkas style sheet baru. Tapi ini belum selesai. Situs anda masih akan kembali seperti semula ketika anda melakukan refresh halaman. Dan tentu saja perubahan ini belum tayang secara daring.

Modifikasi lanjutan

Baiklah sebelum kita eksekusi secara permanen, marilah kita lakukan beberapa modifikasi lagi. Misalnya anda tidak ingin judul situs anda ikut menggunakan jenis huruf Georgia. Anda ingin judul situs anda memiliki jenis huruf sans-serif Segoe UI.

Meskipun tema Twenty Seventeen menentukan jenis huruf secara seragam untuk seluruh isi situs, tapi anda tetap dapat melakukan modifikasi spesifik untuk semua elemen. Untuk melakukan modifikasi tema WordPress, selalu gunakan prinsip kerja dasar.

Prinsip modifikasi tema WordPress adalah: 

  1. Ketahui nama class dan/atau ID dari elemen yang hendak anda modifikasi.
  2. Lakukan perubahan pada value atau nilai dari properti yang dimiliki oleh class tersebut atau tambahkan properti dan value baru.
  3. Perhatikan perubahan yang dihasilkan.

 

Dalam kasus ini, pertama kita harus mengetahui class dari tulisan judul situs yang hendak kita modifikasi. Caranya:

Klik pick an element from the page lalu sorot pada judul situs anda.

Perhatikan ada tulisan h1.site-title. Inilah nama class yang dipakai oleh tulisan judul situs anda. Anda akan gunakan class ini untuk modifikasi jenis huruf. Ingat atau tulis di secarik kertas nama class ini.

mogamogaku.com/blog - Mencari nama class
Klik untuk memperbesar

Klik Style Editor dan kembali ke berkas New style sheet. Ketikkan syntax CSS:

h1.site-title {
font-family: "Segoe UI", Arial, sans-serif;
}

Perhatikan bahwa tulisan judul situs anda sekarang sudah berubah ke jenis huruf sans-serif Segoe UI.

“Tapi saya ingin tulisan judul tidak terlalu ‘gemuk’. Saya ingin tulisannya lebih ‘kurus’ dari yang sekarang.” Anda dapat melakukan modifikasi ini dengan menggunakan properti font-weight. Untuk value dapat anda isikan 600. Value yang semakin tinggi akan membuat huruf menjadi semakin ‘gemuk’ dan value yang semakin kecil akan membuat huruf menjadi semakin ‘kurus’. Maka syntax CSS anda akan nampak seperti:

h1.site-title {
font-family: "Segoe UI", Arial, sans-serif;
font-weight: 600;
}

Bagaimana dengan modifikasi tulisan moto situs yang ada di bawah judul situs? Lakukan dengan prinsip kerja yang sama: temukan nama class nya → lakukan modifikasi → perhatikan perubahannya. Untuk membuat tulisan moto situs anda memiliki jenis huruf yang sama dengan judul situs, dan menggunakan penulisan huruf kapital, maka CSS anda kurang lebih akan terlihat seperti:

p.site-description {
font-family: "Segoe UI", Arial, sans-serif;
font-weight: bolder;
text-transform: uppercase;
}

Value bolder adalah perintah yang membuat huruf tampil menjadi lebih tebal. Secara umum anda dapat menggunakan value angka ratusan atau value secara langsung seperti normal, bold, dan bolder.

Properti text-transform adalah properti yang mendefinisikan tampilan teks sesuai value yang diberikan. Value yang tersedia adalah lowercase, uppercase, capitalize, dan initial. Dalam hal ini dipilih uppercase untuk membuat teks moto situs seluruhnya terdiri dari huruf kapital.

Selanjutnya anda ingin huruf menu menggunakan jenis sans-serif seperti judul situs yaitu Segoe UI. Masih dengan prinsip kerja yang sama. Untuk mengetahui nama class dari menu tersebut sorot pada tulisan menu. Nama class menu adalah ul#top-menu.menu. Maka modifikasi CSS anda akan nampak seperti:

ul#top-menu.menu a{
font-family: "Segoe UI", Arial, sans-serif;
font-weight: 700;
text-transform: uppercase;
}

Perhatikan bahwa saya menambahkan ‘a’ setelah ul#top-menu.menu. Ini untuk merujuk secara lebih spesifik pada class menu. Karena sifat dari menu adalah hyperlink, maka huruf ‘a’ ini akan memastikan bahwa anda dapat memanfaatkan properti penuh pada CSS anda. Apabila huruf ‘a’ ini anda hilangkan maka properti tertentu seperti font-weight tidak berfungsi. Anda dapat mencobanya.

Kini anda ingin mengubah warna menu bar pada tema anda menjadi warna krim. Setelah anda menemukan nama class dari menu bar tersebut anda dapat menggunakan properti background untuk mengubah warna latar belakangnya. Kode anda akan terlihat seperti:

.navigation-top {
background: #f6ddcc;
}

Untuk referensi kode warna dapat anda lihat di htmlcolorcodes.com. Sekarang tema WordPress anda akan nampak seperti ini:

mogamogaku.com/blog - Hasil akhir
Klik untuk memperbesar gambar.

Finishing akhir

Sebagai sentuhan akhir, anda harus mengecek tampilan seluruh halaman situs WordPress anda apakah seluruhnya sudah sesuai dengan modifikasi anda. Jika anda menggunakan modifikasi CSS yang anda lakukan tadi, anda akan melihat bahwa di halaman dalam, tipe huruf judul situs masih menggunakan Georgia, bukan Segoe UI seperti yang diharapkan.

mogamogaku.com/blog - Halaman dalam
Klik untuk memperbesar gambar.

Hal ini karena tema Twenty Seventeen menggunakan nama class yang berbeda untuk judul situs di halaman depan (beranda) dan halaman dalam (page atau post). Untuk mengatasi ini anda lakukan prinsip modifikasi seperti yang sudah anda lakukan sebelumnya, ketahui nama class → lakukan modifikasi → lihat perubahannya.

Langkah terakhir modifikasi tema WordPress

Setelah anda merasa cukup dengan modifikasi yang anda lakukan, sekarang tiba saatnya bagi anda untuk membuat modifikasi ini menjadi permanen dan berlaku daring. Langkah-langkahnya sangat mudah:

Lakukan back up terhadap kode modifikasi CSS yang telah anda lakukan tadi. Caranya: Klik save (link save terletak di sebelah kanan dari daftar berkas style sheet) → ketikkan nama file CSS yang anda kehendaki (misalnya: modifikasi) → lalu simpan di suatu tempat di komputer anda.

Pilih dan salin seluruh modifikasi CSS yang anda buat tadi (di berkas New style sheet atau inline style sheet).

Klik Sesuaikan pada dasbor WordPress anda dan klik CSS Tambahan.

mogamogaku.com/blog - Tempel pada CSS Tambahan
Klik untuk memperbesar gambar.

Tempel hasil salinan modifikasi CSS yang telah anda buat tadi di area yang tersedia.

Klik Simpan & Terbitkan

mogamogaku.com/blog - Proses akhir
Klik untuk memperbesar gambar.

Selesai. Anda telah melakukan modifikasi tema WordPress anda dan telah memberlakukannya secara daring.

Catatan bermanfaat:

  • Mengapa anda disarankan menggunakan Style Editor pada Mozilla Firefox? Hal ini karena setelah anda melakukan modifikasi pada tema, anda dapat melakukan back up (save) atas style yang telah anda buat ke komputer anda. Back up ini sangat berguna sebagai arsip anda dan sebagai cadangan apabila terjadi sesuatu pada tema WordPress anda.

Peminat dan penikmat WordPress, blogging, desain, dan marketing.

Berikan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *