Hiç belirli renkler, yazı tipleri ve stille nasıl görüneceğini görmek için bir web sayfasını geçici olarak düzenlemek istediniz mi? Bu, tarayıcınızda zaten mevcut olan " Elemanı incelemek ". Bu, CSS'yi manipüle etmeyi seven tüm kullanıcılar için gerçekleşen bir hayaldir.

Bu eğitici yazıda, öğe incelemenin temelleri ve bunu WordPress sitenizde nasıl kullanacağınız konusunda size yol göstereceğiz.

WordPress elemanı incelemesi

Ürün inceleme aracı nedir?

Google Chrome ve Mozilla Firefox gibi modern tarayıcılar, web geliştiricilerin hataları ayıklamalarına olanak veren araçlar geliştirmiştir. Bu araçlar bir sayfa için HTML, CSS ve JavaScript’i gösterir ve kodun nasıl çalıştığını gösterir.

Aracın kullanımı " Eleman incelemek Herhangi bir web sayfasının HTML, CSS veya JavaScript kodunu düzenleyebilir ve değişikliklerinizi canlı olarak görebilirsiniz (yalnızca bilgisayarınızda).

Bir sahibi için Site Web, bu araçlar, değişiklikleri gerçekten herkes için uygulamadan belirli bir stilin nasıl görüneceğini önizlemenize yardımcı olabilir.

Yazarlar için bu araçlar harikadır çünkü ekran görüntülerinizi alırken kişisel olarak tanımlanabilir bilgileri kolayca değiştirebilir ve öğeleri gerçekten bulanıklaştırma ihtiyacını ortadan kaldırabilirsiniz.

Destek temsilcileri için bu, galerilerinizin yüklenmemesine veya düzgün çalışmasını engellemesine neden olabilecek hatayı belirlemenin harika bir yoludur.

Yalnızca kullanım alanlarının yüzeyini çiziyoruz çünkü araç " Elemanı incelemek Gerçekten güçlü.

Bu yazıda araca odaklanacağız " Elemanı incelemek Google Chrome'dan, çünkü bizim tercih ettiğimiz tarayıcı. Firefox, menü seçilerek de çağrılabilen kendi geliştirme araçlarına sahiptir " kontrol elemanı '.

"Öğeyi inceleyin" aracının başlatılması ve kodun yerelleştirilmesi

Sen basarak bu aracı çalıştırabilirsiniz CTRL + Shift + I klavyenizde. Alternatif olarak, bir web sayfasında herhangi bir yere tıklayabilir ve ardından Tarayıcı menü öğesini incele öğesini seçebilirsiniz.

blogpascher kod inpection

Tarayıcı pencereniz ikiye bölünecek ve alttaki pencerede web sayfasının kaynak kodu gösterilecektir.

Geliştirici aracı penceresi ayrıca iki pencereye bölünmüştür. Solunuzda sayfanın HTML kodunu göreceksiniz. Sağ bölmede CSS kurallarını göreceksiniz.

HTML CSS kodunu inceleme

Farenizi HTML kodunun kaynağının üzerine getirdiğinizde, vurgulanan alanı web sayfasında vurgulanmış olarak görürsünüz. Ayrıca, söz konusu öğenin CSS kurallarını da göreceksiniz.

HTML öğesinin CSS kuralları

Ayrıca fare imlecini web sayfasındaki bir öğenin üzerine getirebilir, sağ tıklayıp " elemanı incelemek ". Tıkladığınız öğe kaynak kodda vurgulanacaktır.

Kod Geliştirici ve Geliştirici Hata Ayıklayıcısı

Öğe inceleme penceresindeki HTML ve CSS düzenlenebilir. HTML kaynak kodunu çift tıklatabilir ve kodu istediğiniz gibi düzenleyebilirsiniz.

modifiye HTML kaynak

Ayrıca, CSS bölmesindeki stillerin niteliklerine çift tıklayıp düzenleyebilirsiniz. Kural eklemek için üstteki stil bölmesindeki artı simgesini tıklatın.

yeni bir kural ekle css

CSS veya HTML kodunda değişiklik yaptığınızda, bu değişiklikler tarayıcınıza anında yansıtılır.

kod değişiklikleri yaşamak

Burada yapılan tüm değişikliklerin hiçbir yere kaydedilmediğini unutmayın. Aracı Elemanı incelemek Bir hata ayıklama aracıdır ve değişikliklerinizi sunucunuzdaki bir dosyaya kaydetmez. Bu, sayfayı yenilerseniz tüm değişikliklerin kaybolacağı anlamına gelir.

Değişiklikleri gerçekten yapmak için, stilinizin stilini değiştirmeniz gerekir. WordPress tema veya kaydetmek istediğiniz değişiklikleri eklemek için bir şablon.

Düzenlemeye başlamadan önce WordPress tema aracı kullanarak mevcut " Elemanı incelemek Bir alt tema oluşturarak tüm değişikliklerinizi kaydettiğinizden emin olun.

WordPress hataları bulmak için nasıl

Aracı Elemanı incelemek "Adlı bir alana sahip konsolos Sitenizdeki tüm hataları gösterir. Bir hata ayıklamadan veya bir tema veya eklentinin yazarlarından yardım istemeden önce, neyin yanlış olduğunu görmek için her zaman buraya bakmaya değer.

JavaScript konsolu

Örneğin, müşteri olsaydınız OptinMonster Kim onun optin yüklenemediğini merak ediyor, o zaman kolayca belirten sorunu bulabilirsiniz " Sayfanızın sümüklüböcek eşleşmiyor '.

Paylaşım çubuğunuz düzgün çalışmıyorsa, buna neden olan bir JavaScript hatası olduğunu görebilirsiniz.

Bu eğitim için hepsi bu, umarım daha iyi özelleştirebilirsiniz WordPress blog. Bu öğreticiyi arkadaşlarınızla paylaşmaktan çekinmeyin.