Ana İçeriğe Geç

Bir WordPress sitesi özelleştirmede Temelleri

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 901.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

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 web sitesi sahibi için, bu araçlar, herkes için değişiklikleri gerçekten 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ı '.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

"Öğ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.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

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, kaydetmek istediğiniz değişiklikleri eklemek üzere WordPress temanızın veya şablonunuzun stilini değiştirmeniz gerekir.

"" Aracını kullanarak mevcut WordPress temanızı düzenlemeye başlamadan önce 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.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

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.

Hepsi bu ders için, umarım WordPress blogunuzu daha iyi kişiselleştirebilirsiniz. Bu öğreticiyi arkadaşlarınızla paylaşmaktan çekinmeyin.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta hesabınız yayımlanmayacak. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse
cıvıltı
Enregistrer2