Loncat ke Konten Utama

Dasar-dasar dalam menyesuaikan situs WordPress

Divi: tema WordPress termudah untuk digunakan

Divi: Tema WordPress terbaik sepanjang masa!

lebih 600.000 unduhan, Divi adalah tema WordPress paling populer di dunia. Sudah lengkap, mudah digunakan dan dilengkapi dengan lebih dari 62 template gratis. [Direkomendasikan]

Pernahkah Anda ingin sementara memodifikasi halaman web untuk melihat seperti apa tampilannya dengan warna, font, gaya tertentu? Ini dimungkinkan dengan alat yang sudah ada di browser Anda yang disebut " Periksa elemen ". Ini adalah mimpi yang menjadi kenyataan bagi semua pengguna yang suka memanipulasi CSS.

Dalam tutorial ini, kami akan memperkenalkan Anda pada dasar-dasar pemeriksaan elemen dan cara menggunakannya dengan situs WordPress Anda.

Inspeksi elemen WordPress

Apa itu alat inspeksi elemen?

Browser modern seperti Google Chrome dan Mozilla Firefox telah membangun alat yang memungkinkan pengembang web untuk men-debug kesalahan. Alat-alat ini menampilkan HTML, CSS, dan JavaScript untuk halaman dan menunjukkan bagaimana kode berjalan.

Penggunaan alat memeriksa Element Anda dapat mengedit kode HTML, CSS, atau JavaScript untuk halaman web apa pun dan melihat perubahan Anda secara langsung (hanya pada komputer Anda).

Untuk pemilik situs web, alat-alat ini dapat membantu Anda melihat seperti apa gaya tertentu tanpa benar-benar menerapkan perubahan untuk semua orang.

Untuk penulis, alat ini luar biasa karena Anda dapat dengan mudah mengubah kredensial pribadi saat mengambil tangkapan layar dengan menghilangkan keharusan untuk benar-benar memudar item.

Untuk agen help desk, ini adalah cara yang bagus untuk mengidentifikasi kesalahan yang mungkin menyebabkan kegagalan memuat galeri Anda atau mencegahnya bekerja dengan baik.

Kami hanya menggores permukaan use case karena alat " Periksa elemen Sangat kuat.

Dalam artikel ini, kami akan fokus pada alat " Periksa elemen Dari Google Chrome karena ini adalah browser pilihan kami. Firefox memiliki alat pengembangannya sendiri yang juga dapat dipanggil dengan memilih menu " memeriksa elemen '.

Apakah Anda mencari tema dan plugin WordPress terbaik?

Unduh plugin terbaik dan tema WordPress di Envato dan buat situs web Anda dengan mudah. Sudah lebih dari 49.720.000 unduhan. [EKSKLUSIF]

Meluncurkan alat "Periksa Elemen" dan pelokalan kode

Anda dapat menjalankan tool ini dengan menekan CTRL + Shift + I di keyboard Anda. Atau, Anda dapat mengklik di mana saja pada halaman web, dan kemudian pilih Periksa Menu Browser.

inpection kode blogpascher

Jendela browser Anda akan terbagi dua, dan jendela bagian bawah akan menunjukkan kode sumber halaman web.

Jendela alat pengembangan selanjutnya dibagi menjadi dua jendela. Di sebelah kiri Anda, Anda akan melihat kode HTML halaman tersebut. Di panel kanan Anda akan melihat aturan CSS.

inspeksi kode HTML-CSS

Saat Anda menggerakkan mouse ke sumber kode HTML, Anda akan melihat area yang disorot disorot di halaman web. Anda juga akan melihat aturan CSS untuk elemen ini.

Aturan CSS dari elemen HTML

Anda juga dapat mengambil penunjuk mouse di atas item di halaman web, klik kanan dan pilih " periksa elemen ". Item yang Anda klik akan disorot dalam kode sumber.

Pengembang Kode dan Debugger Pengembang

HTML dan CSS di jendela pemeriksaan elemen dapat diedit. Anda dapat mengklik dua kali pada kode sumber HTML dan mengedit kode sesuka Anda.

Pengeditan kode sumber HTML

Buat situs web Anda dengan Elementor dengan mudah

Elementor memungkinkan Anda untuk dengan mudah membuat desain situs web apa pun dengan tampilan profesional. Berhentilah membayar mahal untuk apa yang dapat Anda lakukan sendiri. [Gratis]

Anda juga dapat mengklik dua kali dan mengedit atribut gaya di panel CSS. Untuk menambahkan aturan, klik ikon plus di panel gaya di bagian atas.

tambahkan css aturan baru

Saat Anda membuat perubahan pada CSS atau kode HTML, perubahan ini akan tercermin secara instan di browser Anda.

perubahan kode hidup

Perhatikan bahwa tidak semua perubahan yang dilakukan di sini disimpan di mana saja. Alat itu Periksa elemen Adalah alat debugging, dan itu tidak menyimpan perubahan Anda ke file di server Anda. Ini berarti bahwa jika Anda me-refresh halaman, semua perubahan Anda akan hilang.

Untuk benar-benar melakukan perubahan, Anda perlu mengubah gaya tema atau templat WordPress Anda untuk menambahkan perubahan yang ingin Anda simpan.

Sebelum Anda mulai mengedit tema WordPress yang ada menggunakan alat " Periksa elemen Pastikan untuk menyimpan semua perubahan Anda dengan membuat tema anak.

Bagaimana menemukan kesalahan pada WordPress

Alat itu Periksa elemen Memiliki daerah yang disebut " konsul Yang menunjukkan semua kesalahan yang ada di situs Anda. Sebelum mencoba men-debug kesalahan atau meminta bantuan dari penulis tema atau plugin, selalu ada baiknya mencari di sini untuk melihat apa yang salah.

Buat Toko Online Anda dengan mudah

Unduh WooCommerce gratis, plugin e-commerce terbaik untuk menjual produk fisik dan digital Anda di WordPress. [GRATIS]

konsol JavaScript

Misalnya, jika Anda seorang pelanggan OptinMonster Siapa yang bertanya-tanya mengapa optin-nya tidak memuat, maka Anda dapat dengan mudah menemukan masalah yang menunjukkan bahwa " siput halaman Anda tidak cocok '.

Jika bilah berbagi Anda tidak berfungsi dengan benar, maka Anda dapat melihat bahwa ada kesalahan JavaScript yang menyebabkannya.

Itu saja untuk tutorial ini, saya harap Anda dapat lebih menyesuaikan blog WordPress Anda. Silakan berbagi tutorial ini dengan teman-teman Anda.

Artikel ini berisi komentar 0

Tinggalkan komentar

Alamat email Anda tidak akan dipublikasikan. Bidang yang harus diisi ditandai *

Situs ini menggunakan Akismet untuk mengurangi yang tidak diinginkan. Pelajari lebih lanjut tentang bagaimana data komentar Anda digunakan.

Kembali ke atas
2 saham
saham
menciak
Register2