Tag: theme

Gunakan alat pengembang browser untuk mengedit tema WordPress Anda

Kami akan melihat bagaimana Anda dapat menggunakan alat pengembang browser untuk mengedit tema WordPress Anda.

Ilustrasi :  Showdown Pembelajaran Bahasa: Rosetta Stone vs. Duolingo

Template Express sudah mencari pengguna tema yang kurang teknis di luar sana (kami tahu Anda memiliki hal-hal yang lebih penting untuk dikhawatirkan!) Dengan menjadikan opsi penyesuai tema kami seintuitif mungkin di semua tema kami.

Tetapi kami juga menambahkan opsi css khusus dan kompatibilitas tema anak karena suatu alasan: karena banyak pengguna ingin membuat perubahan lebih lanjut pada desain mereka.

  • Editor CSS Khusus
  • Editor css khusus dan tema anak hanya menjadi alat yang hebat jika Anda memiliki pengetahuan css.

Di situlah alat pengembang browser masuk:

Alat pengembang browser adalah penghemat waktu yang sangat besar untuk desainer atau pengembang apa pun. Dan dengan gaya tema WordPress menjadi lebih rumit dari hari ke hari alat-alat ini lebih penting dari sebelumnya.

Di Template Express, kotak masuk kami selalu penuh dengan pertanyaan dari pelanggan yang ingin mengutak-atik gaya tema. Pertanyaan-pertanyaan ini bervariasi dari “bagaimana cara mengubah warna font ini?tetapi beberapa dari Anda mungkin harus pergi selangkah lebih maju ketika mencoba menemukan elemen desain yang unik.

Jelas kami lebih dari bersedia untuk mendukung pelanggan kami yang sangat baik dengan memberikan jawaban tetapi apa yang sebagian besar pengguna tema tidak sadari adalah bahwa mereka dapat memperbaiki sebagian besar masalah css secepat mereka sendiri dengan menggunakan alat pengembang browser.

Apa itu alat pengembang browser?

Versi terbaru dari semua browser utama (Internet Explorer, Firefox, Chrome, Safari, Opera) memiliki kemampuan alat pengembang web baik sebagai fitur bawaan atau ekstensi.

Alat-alat ini memungkinkan pengembang untuk bekerja pada berbagai teknologi web termasuk CSS, HTML dan JavaScript. Meskipun Anda tidak dapat membuat perubahan langsung ke kode Anda, alat pengembang memungkinkan Anda untuk menguji elemen web apa pun dengan mengeditnya dan melihat perubahan secara instan di browser. Setelah puas dengan perubahannya, Anda dapat memindahkan kode ini ke situs web langsung Anda (lebih lanjut tentang itu nanti).
Mengaktifkan alat pengembang di browser favorit Anda

Untuk contoh ini kita akan menggunakan alat pengembang Chrome. Untuk mengakses Chrome DevTools (itulah yang mereka sebut sebagai milik mereka!) Buka halaman web di Google Chrome, pilih menu Chrome di kanan atas browser Anda dan kemudian pilih Tools> Developers Tools. Atau Anda dapat mengklik kanan pada elemen apa saja di halaman web Anda dan memilih Elemen Inspeksi. Kedua metode ini akan membuka jendela Devtools di bagian bawah browser Anda.
Gunakan alat pengembang browser untuk mengedit tema WordPress Anda

 

Alat Pengembang Chrome

 

Anda akan melihat bilah di bagian atas area alat dev dengan berbagai tab seperti Elemen, Sumber, Jaringan, Sumber, dll. Semua ini menawarkan informasi yang sangat berguna tentang situs web yang Anda gunakan, tetapi kami akan berkonsentrasi pada Elemen. tab untuk membantu kami mengubah beberapa elemen desain jadi pastikan bahwa “Elemen” dipilih.

Membuat perubahan ini langsung

 

Alat pengembang telah mengidentifikasi masalah Anda dan membantu memberi Anda solusi. Tetapi perubahan yang Anda buat menggunakan alat tidak berpengaruh pada situs langsung Anda. Anda harus menyalin perubahan ini ke kotak css kustom Anda.

Tentu saja, Anda tidak benar-benar harus menggunakan editor css khusus untuk melakukan perubahan ini secara langsung. Anda bisa membuat perubahan langsung ke file style.css Anda. Namun ini akan menyebabkan masalah saat Anda memperbarui ke versi tema yang baru. Semua perubahan Anda akan ditimpa. Di sinilah tema anak masuk

Tema Anak mudah diimplementasikan dan biasanya digunakan untuk perubahan tema WordPress. Mirip dengan editor css, gaya apa pun yang Anda tulis di sini akan menimpa gaya tema utama. Dan karena gaya tema anak duduk terpisah dari tema utama mereka tidak dapat ditimpa ketika tema diperbarui.

Untuk membuat tema anak yang harus Anda lakukan adalah membuat folder tema baru (mis. “Discovery-child”) di bawah folder “wp-content / themes”. Kemudian buat file css baru di folder tema anak dan sebut itu style.css. Tambahkan kode berikut ke file style.css ini:

/ *
Nama Tema: Tema Penemuan Anak
Tema URI: http://www.templateexpress.com/discovery/
Deskripsi: Tema Penemuan Anak
Penulis: Template Express
Penulis URI: http://www.templateexpress.com
Templat: Penemuan
Versi: 1.0
* /

@import url (“../ Discovery / style.css”);

/ * = Kustomisasi tema dimulai di sini
————————————————-

Di area admin WordPress Anda, Anda harus mengaktifkan tema anak di Appearance> Themes.

Sekarang lanjutkan dan tambahkan beberapa gaya ke file style.css tema anak Anda.

Kesimpulan

Menambahkan sentuhan akhir ke situs web Anda lebih mudah dari sebelumnya berkat alat pengembangan browser yang terus meningkat yang tersedia secara gratis. Alat-alat ini membantu kami memahami bagaimana elemen-elemen halaman web disatukan dan bagaimana elemen-elemen itu dapat diubah agar sesuai dengan desain Anda.