İncele Öğesi Temelleri: Kendin Yap Kullanıcıları İçin WordPress'i Özelleştirme

Birçoğumuz, kalıcı değişiklikler yapma riski olmadan bir web sitesinin tasarımını anlamaya meraklıdır.

Element İncele aracı, bu amaç için tasarlanmış bir tarayıcı özelliğidir ve doğrudan tarayıcınızda geçici değişiklikler yapmanıza olanak tanır. Ayrıca geliştiricilerin kodu hata ayıklamasına ve performans sorunlarını düzeltmesine yardımcı olur.

Başlangıç seviyesindeki birçok kullanıcımız HTML/CSS düzenlemenin zor olduğunu belirtti. Bu kullanıcılara her zaman Denetle aracını denemelerini öneriyoruz.

Basit ve kullanımı kolaydır ve yaptığınız değişikliklerin sonuçlarını anında görebilirsiniz. Küçük metin düzenlemelerinden tüm sayfa düzeni değişikliklerine kadar değişen önizleme değişiklikleri için her zaman kullanırız.

Bu kılavuz, WordPress sitenizde Element İncele aracını etkili bir şekilde kullanma adımlarını size gösterecek ve tasarım fikirlerinizi güvenli ve verimli bir şekilde hayata geçirmenize yardımcı olacaktır.

İnceleme Aracı Nedir?

İncele Aracı (veya Geliştirici Araçları), Google Chrome, Firefox, Safari ve Microsoft Edge gibi modern web tarayıcılarında bulunan ve herhangi bir web sayfasının arkasındaki kodu görüntülemenize ve işlemenize olanak tanıyan yerleşik bir özelliktir.

Web sitesi değişikliklerini gidermek ve denemek için bu araçlara sayısız kez güvendik.

Bu araçlar, tarayıcının nasıl işlediğini gösterirken bir sayfanın HTML, CSS ve JavaScript kodlarını görüntüler. Bizim için, gerçek web sitesini etkilemeden hile kodlarımızı denemek gibi.

Bu geliştirici araçlarına herhangi bir sayfada sağ tıklayıp menüden 'İncele' seçeneğini seçerek erişebilirsiniz. Tasarım değişikliklerini test ederken veya bir sorunu giderirken başvurduğumuz eylemlerden biridir.

İncele aracıyla, HTML, CSS veya JavaScript kodunu geçici olarak düzenleyebilir ve değişiklikleri ekranınızda canlı olarak görebilirsiniz. Küçük stil ayarlamalarından tam sayfa düzeni fikirlerine kadar her şeyi önizlemek için kullandık. (Bunu bu makalede daha sonra göstereceğiz.)

En iyi yanı? Bu değişiklikler gerçek web sayfasını etkilemez. Sayfayı yeniden yüklediğinizde veya tarayıcıyı kapattığınızda her şey normale döner. Bu, fikirleri test etmek için güvenli ve güvenilir bir araç olmasını sağlar.

Bunu, hızlı bir şekilde test etmek veya hata ayıklamak isteyen kendi web sitesi sahipleri ve geliştiriciler için özellikle yararlı bulduk. İşte sadece birkaç kullanım durumu:

• Yeni CSS stilleri uygulayın ve sitenizde nasıl göründüklerini hemen görün.
• Teknik yazarlar ekran görüntüleri için HTML düzenleyebilir, hassas bilgileri gizleyebilir veya görünen metni özelleştirebilir.
• Geliştiriciler genellikle bunu yaygın WordPress hatalarını belirlemek, JavaScript sorunlarını ayıklamak veya 404 hatalarını çözmek için kullanırlar.

Ve bu sadece yüzeyi çizmek. Bu araçlar inanılmaz derecede çok yönlüdür ve web siteleriyle çalışan herkes için favorisidir.

Bu kılavuzda, okuyucularımız arasında en popüler tarayıcı olduğu için Google Chrome'daki İncele aracına odaklanacağız. Ancak, Firefox, Safari ve Microsoft Edge'in tümü İncele seçenekleri aracılığıyla erişilebilen benzer araçlara sahiptir.

Başlamaya hazır mısınız? Makalenin herhangi bir bölümüne atlamak ve takip etmek için aşağıdaki bağlantıları kullanın:

İnceleme Aracını Başlatma ve Kodu Bulma

Kodunuzu hata ayıklamaya veya görüntülemeye başlamak için klavyenizde CTRL + Shift + I (Windows) veya Command + Option + I (Mac) tuşlarına basarak inceleme aracını başlatabilirsiniz.

Ayrıca bir web sayfasındaki herhangi bir yere tıklayıp tarayıcı menüsünden 'İncele' seçeneğini seçebilirsiniz.

Alternatif olarak, araca ana tarayıcı menüsünden erişebilirsiniz.

Google Chrome'da, sağ üst köşedeki üç noktalı menüye tıklayın ve ardından Diğer araçlar » Geliştirici araçları'na gidin.

Tarayıcı pencereniz ikiye bölünecektir.

Bir tarafta görüntülediğiniz sayfayı göreceksiniz. Diğer tarafta ise HTML kodunu ve CSS kurallarını göreceksiniz.

Denetim bölmesinin konumu değişir, ancak üç nokta menüsüne tıklayıp 'Bölme kenarı'nı seçerek değiştirebilirsiniz. Tıklayacağınız simgeyi yukarıdaki resimde görebilirsiniz.

Fareyi HTML kaynağının üzerine getirdiğinizde, web sayfasındaki etkilenen alan vurgulanacaktır.

Ayrıca, HTML kodundaki bir öğeye tıkladığınızda CSS kurallarının değiştiğini fark edeceksiniz.

Ayrıca fare işaretçisini web sayfasındaki bir öğeye götürebilir, sağ tıklayabilir ve 'Denetle' aracını seçebilirsiniz. Öğe kaynak kodunda vurgulanacaktır.

Denetim Öğesinde Kodu Düzenleme ve Hata Ayıklama

Denetim Öğesi penceresindeki hem HTML hem de CSS düzenlenebilir.

HTML kaynak kodunda istediğiniz yere çift tıklayarak kodu istediğiniz gibi düzenleyebilirsiniz.

CSS bölmesindeki herhangi bir özniteliği ve stili çift tıklayarak düzenleyebilirsiniz.

Özel bir stil kuralı eklemek için CSS bölmesinin üst kısmındaki + simgesine tıklamanız yeterlidir.

CSS veya HTML'de değişiklik yaptıkça, bu değişiklikler tarayıcıda anında yansıyacaktır.

Bu değişiklikler tarayıcınızın geçici belleğine kaydedilecek ve web sitenizi etkilemeyecektir.

Bu değişiklikleri uygulamak için, değişiklikleri kaydetmek istediğiniz özel CSS'yi temanıza eklemeniz veya ilgili şablonu düzenlemeniz gerekir.

Mevcut WordPress temanızı İncele Öğesi aracını kullanarak düzenlemeye başlamadan önce, bir WordPress yedeği oluşturduğunuzdan emin olun.

Sitenizdeki Hataları Kolayca Bulun

Konsol, Denetim Öğesi araçları içindeki JavaScript hatalarını, güvenlik uyarılarını ve ağ isteklerini kaydeden özel bir sekmedir. Sayfa yüklenirken oluşan hataları gösterir.

Bir hatayı ayıklamaya çalışırken veya eklenti yazarlarından destek isterken, herhangi bir hata veya uyarı olup olmadığını görmek için buraya bakmak her zaman faydalıdır.

Konsol sekmesini kullanarak birkaç yaygın sorunu giderebilirsiniz. Örneğin, İnceleme konsolu ile yapabileceğiniz şeylerden sadece birkaçı şunlardır:

• Eklediğiniz bir resmin neden görüntülenmediğini öğrenin.
• Bir eklentinin veya temanın neden düzgün çalışmadığını görün.
• Çakışmaya hangi eklentinin veya tarayıcı uzantısının neden olabileceğini görün.

Teknik olmayan kullanıcılar bile sorunun nereden kaynaklandığına dair ipuçları bulmak için buna bakabilir.

Örneğin, OptinMonster müşterisiyseniz ve optininizin neden yüklenmediğini merak ediyorsanız, sorunu kolayca bulabilirsiniz: "Sayfa takma adınız eşleşmiyor."

Denetleme Öğesi Konsolu gibi araçları kullanmak, sitenizde bir şeyler doğru çalışmadığında yararlı teknik ayrıntılar toplamanıza yardımcı olabilir. Hata mesajları veya eksik kaynaklar gibi bu bilgileri paylaşmak, eklenti veya tema destek ekiplerinin sorunu daha hızlı anlamasını ve çözmesini kolaylaştırabilir.

Element İncele Kullanarak Mobil Düzenleri Nasıl Önizleyebilirsiniz?

Geliştirici seçenekleri mobil tarayıcılarda varsayılan olarak etkin değildir çünkü üreticiler çoğu mobil kullanıcının bunları kullanmayacağını varsayar.

Mobil sorunlar için denetim aracını sorun gidermenin ve kullanmanın en kolay yolu, masaüstü tarayıcınızdaki (Chrome DevTools veya Safari Web Inspector) mobil emülasyon özelliğini kullanmaktır.

Ardından üst kısımdan veya ekran boyutlarından bir cihaz seçebilirsiniz. Chrome daha sonra bu ekran boyutunu sizin için taklit edecektir.

WordPress'te İncele Öğesi Değişikliklerini Kalıcı Olarak Uygulama

Denetim Öğesi ile çalışırken, test ettiğiniz değişiklikleri nasıl kalıcı hale getirebileceğinizi merak ediyor olabilirsiniz. Bu bölümde, WordPress sitenizde bunu nasıl yapacağınızı açıklayacağız.

Öncelikle, saklamak istediğiniz değişiklikleri belirleyin ve Not Defteri veya TextEdit gibi bir uygulamayı kullanarak bunları bir metin dosyasına kopyalayın. Ardından, aşağıdaki yöntemlerden birini deneyebilirsiniz.

Yöntem	En İyisi
Site Düzenleyici	Basit CSS düzenlemeleri (Renkler, Yazı Tipleri, Kenar Boşlukları)
WPCode	Gelişmiş CSS, HTML, JavaScript parçacıkları ve daha kolay yönetim

1. Site Düzenleyiciyi Kullanarak WordPress Sitenize CSS Değişiklikleri Ekleyin

Kopyaladıktan sonra WordPress kontrol panelinize gidin. Bir blok teması kullanıyorsanız, site düzenleyicisini başlatmak için Görünüm » Düzenleyici'ye gidin.

Klasik bir tema kullanıyorsanız, Görünüm » Özelleştir » Ek CSS'ye gidin.

Sitenizi düzenlemeye başlamak için önizleme penceresine tıklayın.

Düzenleyici içinde, üstteki Stil düğmesine tıklayın, ardından üç noktalı menüye tıklayın ve 'Ek CSS'i seçin.

Bu, kaydetmek istediğiniz CSS'yi yapıştırabileceğiniz Ek CSS panelini açar.

Değişikliklerinizin önizleme penceresinde anında uygulandığını görebilirsiniz. Değişikliklerinizi yayınlamak için ‘Kaydet’e tıklamayı unutmayın.

2. WPCode Kullanarak Sitenize Özel CSS Ekleyin

Sitenize özel CSS eklemenin daha kolay bir yoluna ihtiyacınız varsa, bu yöntem tam size göre.

Bu yöntem için WPCode kullanacağız. En iyi WordPress kod parçacığı yöneticisidir ve temanızı düzenlemeden sitenize özel kod, HTML ve CSS eklemenize olanak tanır.

Not: Kullanabileceğiniz WPCode'un ücretsiz bir sürümü de mevcuttur. Ancak, tam potansiyelini açığa çıkarmak için ücretli plana yükseltmenizi öneririz.

WPCode'u kendi sitelerimizde kullanıyoruz çünkü kodu yönetmeyi kolaylaştırıyor. Daha da önemlisi, bir hata döndürdüğünde kodunuzu devre dışı bırakan yerleşik bir güvenlik önlemine sahip. Ayrıntılar için WPCode incelememize bakın.

Öncelikle, WPCode eklentisini yüklemeniz ve etkinleştirmeniz gerekir. Yardım isterseniz, talimatlar için bir WordPress eklentisinin nasıl kurulacağına dair eğitimimize bakın.

Etkinleştirdikten sonra, WordPress yönetici kontrol panelinden Kod Parçacıkları » + Yeni Ekle'ye gidin.

Ardından, kod parçacıkları kitaplığındaki 'Özel Kodunuzu Ekle (Yeni Parçacık)' seçeneğinin üzerine gelebilir ve '+ Özel Parçacık Ekle'ye tıklayabilirsiniz.

Bundan sonra, ekranda beliren seçenekler listesinden kod türü olarak 'CSS Snippet'i seçmeniz gerekir.

Ardından, sayfanın en üstünde, özel CSS kod parçacığınız için bir başlık ekleyebilirsiniz. Bu, kodu tanımlamanıza yardımcı olacak herhangi bir şey olabilir.

Bir başlık girdikten sonra, özel CSS'nizi ‘Kod Önizleme’ kutusuna yazabilir veya yapıştırabilirsiniz.

Özel CSS kodunuzu ekledikten sonra, ‘Snippet Kaydet’ düğmesine tıklayın ve durum geçişini ‘Aktif’ olarak ayarlayın.

3. WordPress Sitenize HTML Parçacığı Ekleyin

Sitenize HTML değişiklikleri eklemek için, temanızdaki doğru şablon dosyasına yapıştırmanız gerekir.

Hangi tema dosyasını düzenleyeceğinizi belirlemek için, bir WordPress temasında hangi dosyaların düzenleneceğini bulma rehberimize bakın.

Tema dosyalarınızı düzenlemek için bir FTP istemcisi veya barındırma hesabınız altındaki dosya yöneticisi uygulamasını kullanmanız gerekecektir.

Alternatif olarak, sitenize yeni HTML öğeleri (banner veya rozet gibi) eklemek isterseniz WPCode'u kullanabilirsiniz. Yeni bir kod parçacığı ekleyin ve parçacık türü olarak HTML'yi seçin.

Bundan sonra, HTML snippet'inizi tanımlamanıza yardımcı olacak bir başlık sağlayın.

Bunun altına, önizleme kutusuna özel HTML kodunuzu ekleyin.

WPCode, herhangi bir kod parçacığını nereye eklemek istediğinizi seçmenize olanak tanır.

'Ekleme' alanına aşağı kaydırın ve mevcut seçenekleri görüntülemek için 'Konum'a tıklayın.

Bir konum seçtikten sonra, ‘Kaydet’e tıklamayı ve snippet durumunu Aktif olarak değiştirmeyi unutmayın.

Artık sitenizi çalışırken görmek için ziyaret edebilirsiniz.

Kod Yazmadan Özelleştirmek İster Misiniz?

SeedProd WordPress için en iyi yapay zeka web sitesi oluşturucusudur. Kodu incelemeyi çok zor buluyorsanız, SeedProd, tek bir satır CSS veya HTML yazmadan görsel olarak özel temalar ve açılış sayfaları oluşturmanıza olanak tanır.

Profesyonel sonuçları hızlı bir şekilde almak isteyen kendi kendine yap (DIY) kullanıcıları için mükemmel bir alternatiftir. SeedProd'u bugün deneyin 👉

Element İncele Kullanırken En İyi Uygulamalar

İncele aracını kullanmak, web tasarımına gizli bir pencere açmak gibi hissettirebilir.

Ancak ondan en iyi şekilde yararlanmak için, özellikle yeni başlıyorsanız, işte bazı en iyi uygulamalar:

• Güvenli bir şekilde keşfetmeye başlayın: Inspect Element'te yaptığınız tüm değişiklikler geçicidir. Bu yüzden kalıcı olarak hiçbir şeyin bozulmayacağından emin olarak korkmadan deneyler yapın.
• Farklı stilleri ve düzenleri deneyin: Gerçek temanıza veya stil sayfanıza değişiklikleri uygulamadan önce neyin iyi göründüğünü görmek için renkleri, yazı tiplerini, aralığı veya konumu test edin.
• İşe yarayanları not alın: Bir değişiklik hoşunuza giderse, CSS'yi kopyalayıp bir metin dosyasına veya not alma uygulamasına yapıştırın, böylece kaybetmezsiniz.
• Tarayıcılar arasında test edin: Chrome'da harika görünen bir tasarım değişikliği Firefox veya Safari'de bozuk görünebilir, bu yüzden her zaman iki kez kontrol edin.
• Düzenli kalın: Yaptığınız tüm değişikliklerin ve nedenlerini kaydedin. Bu, bir şeyi geri almanız veya daha sonra sorunları gidermeniz gerekirse yardımcı olur.
• Canlı siteleri rastgele düzenlemeyin: Öğreniyorsanız, canlı sitenizde kazara sorunları önlemek için bir hazırlık sitesinde veya test ortamında pratik yapmak daha iyidir.

İnceleme Öğesi Hakkında Sıkça Sorulan Sorular

Kullanıcılarımız tarafından Denetleme aracını kullanma hakkında en sık sorulan sorulardan bazıları şunlardır.

Herhangi bir web sitesinde veya sadece kendi sitemde İncele aracını kullanabilir miyim?

Evet, inceleme aracını herhangi bir web sitesinde kullanabilirsiniz. Herhangi bir web sitesinin arkasındaki kodu görmek için sağ tıklayıp tarayıcı menüsünden İncele aracını seçmeniz yeterlidir. Diğer web sitelerindeki kodu incelemek, kendi CSS/HTML becerilerinizi öğrenmek ve geliştirmek için hızlı bir yoldur.

2. Tarayıcımdaki İncele aracını neden bulamıyorum?

Google Chrome, özellikle birden fazla uzantı sağ tıklama menüsüne kendi seçeneklerini eklediğinde, İncele seçeneğini sağ tıklama menüsünde gizleyebilir.

Ek olarak, sağ tıklama işlevi JavaScript kullanılarak devre dışı bırakılmış olabilir, bu da 'Denetle' seçeneğini gizleyebilir. Bu gibi durumlarda, Ctrl + Shift + I (veya Mac'te Cmd + Option + I) klavye kısayolunu kullanarak veya Menü » Diğer Araçlar » Geliştirici Araçları'na giderek Geliştirici Araçları'nı hala açabilirsiniz.

3. Değişiklikleri farklı tarayıcılarda görebilir miyim?

Evet, İncele Öğesi, Chrome, Firefox, Safari ve Edge'de değişiklikleri test etmenize ve gözlemlemenize olanak tanıyan büyük tarayıcılarda mevcuttur.

4. İncele Öğesi JavaScript hata ayıklamasına nasıl yardımcı olabilir?

Elementi İncele, JavaScript hatalarını ve uyarılarını görebileceğiniz bir Konsol sekmesi içerir. Bu araç, sitenizdeki betiklerle neyin yanlış gittiğini anlamanız gerektiğinde inanılmaz derecede yardımcı olur. Tarayıcının düşünce sürecine doğrudan bir hat gibi, sorunları hızlı bir şekilde belirlemenizi sağlar.

5. İncele Öğesi web sitemin güvenliğini etkileyebilir mi?

Hayır, Denetim Öğe'yi kullanmak web sitenizin güvenliğini etkilemez. Bu, arka uç verilerini veya bütünlüğünü değiştirmeden sitenin yerel makinenizde nasıl göründüğünü veya davrandığını geçici olarak değiştiren bir tarayıcı aracıdır.

Video Eğitim

WPBeginner'a Abone Olun

WordPress Özelleştirmesi Hakkında Daha Fazla Bilgi Edinin

WordPress sitenizde daha fazla şey yapmak için İnceleme aracını nasıl kullanabileceğinizi daha fazla keşfetmek isterseniz, aşağıdaki kaynaklar iyi bir başlangıç noktası olacaktır:

• WordPress temanızı nasıl özelleştirirsiniz – Bu başlangıç rehberi, WordPress temanızı adım adım nasıl özelleştireceğinizi gösterir.
• WordPress'te özel CSS'yi doğru şekilde ekleme – Bu öğretici, WordPress'e özel CSS'nizi kolayca eklemenin birden çok yolunu gösterir.
• WordPress'te CSS teslimatını optimize etme – Çok fazla bireysel CSS dosyası performansı düşürebilir. Bu eğitim, WordPress hızını artırmak için CSS teslimatını nasıl optimize edeceğinizi gösterir.
• Varsayılan WordPress tarafından oluşturulan CSS kısayol sayfası – Bu kullanışlı kılavuz, WordPress'in varsayılan olarak farklı öğelere eklediği birçok CSS sınıfını gösterecektir. Ardından, bu öğelerin görünümünü değiştirmek için özel CSS kodunuzda bu CSS sınıflarını kullanabilirsiniz.

Umarım bu makale, İncele Öğesi'nin temellerini ve WordPress sitenizle nasıl kullanacağınızı öğrenmenize yardımcı olmuştur.

Bu makaleyi beğendiyseniz, lütfen WordPress video eğitimleri için YouTube Kanalımıza abone olun. Bizi ayrıca Twitter ve Facebook'ta da bulabilirsiniz.