Modifikasi Template Wordpress

Bila sudah simpulan mempelajari wacana bagaimana Teknik cepatdangampang Membuat Website Menggunakan WordPress dan berhasil mempraktikan Teknik cepatdangampang Memindahkan Artikel Blogger ke WordPress maka biasanya seorang pemilik situs web akan memperhatikan hal lainnya menyerupai salah satunya yaitu tampilan untuk websitenya. 

WordPress sebetulnya sudah menyediakan banyak template/tema,  baik itu Tema Wordpress Gratis maupun yang berbayar, Anda dapat mengunduhnya di situs penyedia template WordPress. Template yang berbayar biasanya kostumisasinya lebih lengkap dibandingkan dengan yang gratis, sehingga tentu saja seorang pemilik website akan sangat dengan praktis melaksanakan pembiasaan situs sesuai dengan keinginan. Di Template gratis juga ada kostumisasinya tapi berdasarkan saya ada beberapa hal yang kurang lengkap sehingga kita perlu merubah/memodifikasinya sendiri kalau menginginkan hasil yang terbaik atau sesuai dengan keinginan. Sebenarnya berbagai pilihan Tema Wordpress Gratis dan Terbaik yang disediakan oleh tim wordpress, tema - tema tersebut nantinya desain ulang sesuai keinginan


Modifikasi Template WordPress ini sebetulnya sangatlah praktis bahkan orang yang tidak mengerti bahasa pemrogram menyerupai saya ini juga dapat melakukannya yang penting tau struktur codenya saja niscaya bisa. Modifikasi ini bukan modifikasi keseleruhan template namun spesialuntuk mengubah halaman gaya/css nya saja alasannya yaitu berdasarkan pengalaman aku, untuk merubah tampilan situs web kita spesialuntuk cukup melaksanakan perubahan pada halaman css/style.css. Template yang akan saya modifikasi kali ini yaitu template default WordPress “Twenty Fourteen” yang memang sudah tersedia didalam paket instalasi wordpress. Perubahan yang saya lakukan terhadap Template “Twenty Fourteen”

1. Font/Ukuran abjad bab atas 
2. Background/warna bab atas 
3. Warna sajian pada ketika a hover dan ketika terpilih 
4. Backgorund bab main sajian kiri 
5. Archive Title, Category tag, susunan cssnya diambil dari css “cat link” 
6. Cat links 
7. Warna Icon dan background search 
8. Warna widget pos – pos terbaru 
9. Ukuran, Warna, Jenis Huruf “entry title” 
10. Jarak antara category tag dengan postingan 
11. Background Footer

jujur saja saya tidak banyak mengerti dengan code – code CSS tapi saya dapat melaksanakan perubahan ini dengan cara yang sangat gampang. Menurut saya ada 2 metode untuk melaksanakan memodifikasi template ini :

1. Susunan CSS
Bisa dengan mempelajari susunan cssnya. Biasanya untuk template WordPress dilengkapai dengan susunan css atau semacam daftar isi css. Seperti dalam modifikasi template “Twenty Fourteen” ini juga terdpat daftar isi cssnya, menyerupai diberikut :

/**
* Table of Contents:
*
* 1.0 - Reset
* 2.0 - Repeatable Patterns
* 3.0 - Basic Structure
* 4.0 - Header
* 5.0 - Navigation
* 6.0 - Content
* 6.1 - Post Thumbnail
* 6.2 - Entry Header
* 6.3 - Entry Meta
* 6.4 - Entry Content
* 6.5 - Galleries
* 6.6 - Post Formats
* 6.7 - Post/Image/Paging Navigation
* 6.8 - Attachments
* 6.9 - Archives
* 6.10 - Contributor Page
* 6.11 - 404 Page
* 6.12 - Full-width
* 6.13 - Singular
* 6.14 - Comments
* 7.0 - Sidebar
* 7.1 - Widgets
* 7.2 - Content Sidebar Widgets
* 8.0 - Footer
* 9.0 - Featured Content
* 10.0 - Multisite
* 11.0 - Media Queries
* 12.0 - Print
* -----------------------------------------------------------------------------
*/


2. Memanfaatkan Fitur Inspect Elemen
Memanfaatkan “Inspect Element” milik Firefox caranya yaitu dengan melaksanakan Inspect element pada bab tampilan situs yang akan dirubah, ini dapat lebih spesifik dan cepat alasannya yaitu kita tahu mana bab yang akan berubah

Teknik Modihikasi Template yang akan saya gunakan yaitu metode kedua yaitu dengan “Inspect Element” Mozilax Firefox. Teknik menggunakan/memanfaatkannya yaitu sbb :

1. Buka situs WordPress Anda (Bukan halaman administrator)
2. Misal bab yang akan saya rubah warnanya ini yaitu bab background header.
3. Klik kanan pada bab header kemudian pilih “Inspect Element”Nanti Inspector akan muncul dan pribadi melaksanakan block sebuah code, yang mengambarkan bab code penyusun dari header
   
   
   
4. Pada gambar dan block yang ditunjukan oleh inspector terlihat terang bahwa disitu dilakukan pemanggilan sebuah “class” dengan nama “header- main” 
5. Nah kini buka juga halaman direktur WordPress di tab baru. Klik Menu -> Tampilan -> Penyunting. Biasanya akan pribadi mengarah ke lembar gaya css (style.css)
6. Tekan CTRL+F dan masukan kata header-main pada kotak pencarian
   
   
   
7. Saat dicari niscaya beliau akan pribadi mengarah ke code css “header- main”. Anda tidakboleh focus terhadap arahan yang terbloknya meskipun sudah sesuai dengan yang ditampilkan pada halaman inspect. Tapi seriuslah terhadap arahan – arahan disekitarnya yang berafiliasi dengan kata header
8. Lihat gambar 7 yang saya lingkari, alasannya yaitu saya ingin merubah background bab header maka saya mencari arahan yang berafiliasi dengan “background-color” dan merubah variabel atau nilanya. 
9. Bila sudah simpulan Klik Save/Perbaharui berkas

Lakukan cara diatas untuk mengubah bab lainnya. Silahkan explore sendiri, lakukan perubahan pada bab arahan – kodenya, kemudian lihat apakah ada perubahan kalau tidak ada perubahan, kembalikan arahan css ke awal kemudian cari lagi arahan css yang berafiliasi dengan apa yang ingin Anda rubah. Seperti itulah caranya dan dilakukan secara berulang – ulang hingga Anda melihat perubahan pada situs.


Dalam percobaan kali ini, Saya memakai Template "Twenty Fourteen", yang ialah salah satu Tema Wordpress Gratis dan Terbaik , Anda juga dapat memakai Template Wordpress Gratis dan Terbaik lainnya di situs resmi wordpress

Anda dapat mendownload CSS dari Template “Twenty Fourteen” yang sudah saya modifikasi.Selamat mencoba dan biar berhasil.

Download CSS Template Twenty Fourteen Hasil Modifikasi 

Sesudah berhasil memodifikasi css dari template twenty fourten saya juga melaksanakan modifikasi pada template lain yaitu template colormag yang sangat cocok untuk situs diberita. Anda bisa membaca artikel  Modifikasi CSS Template ColorMag untuk mempelajari bagaimana cara saya memodifikasinya

Share :