Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPB Kupası
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPress Kod Düzenleyicisinde HTML Nasıl Düzenlenir (Başlangıç Kılavuzu)

Editoryal Not: WPBeginner üzerindeki ortak bağlantılardan komisyon kazanıyoruz. Komisyonlar, editörlerimizin görüşlerini veya değerlendirmelerini etkilemez. Editoryal Süreç hakkında daha fazla bilgi edinin.

WordPress web sitenizde HTML düzenlemenin kolay bir yolunu mu arıyorsunuz?

HyperText Markup Language veya HTML, bir web tarayıcısına web sayfalarınızdaki içeriğin nasıl görüntüleneceğini söyleyen bir koddur. HTML’yi düzenlemek, gelişmiş özelleştirme ve sorun giderme için kullanışlıdır.

Bu makalede, farklı yöntemler kullanarak WordPress kod düzenleyicisinde HTML’yi nasıl düzenleyeceğinizi göstereceğiz.

How to Edit HTML in WordPress code editor

WordPress’te HTML’yi Neden Düzenlemelisiniz?

WordPress, web sitenizin görünümünü değiştirmek ve tek bir kod satırına dokunmadan farklı öğeleri özelleştirmek için binlerce tema ve eklenti sunar.

Ancak eklentilerin ve temaların kendi sınırlamaları vardır ve tam olarak aradığınız özellikleri sunmayabilirler. Sonuç olarak, web sitenizi istediğiniz gibi şekillendiremeyebilirsiniz.

HTML düzenlemenin gerçekten yararlı olduğu yer burasıdır. HTML kodunu kullanarak gelişmiş özelleştirmeleri kolayca gerçekleştirebilirsiniz. Sitenizin nasıl görüneceği ve çalışacağı konusunda çok fazla esneklik ve kontrol sağlar.

Buna ek olarak, HTML’nin nasıl düzenleneceğini öğrenmek, kontrol paneline erişiminiz olmadığında WordPress web sitenizdeki hataları belirlemenize ve düzeltmenize de yardımcı olabilir.

Not: HTML düzenlemek istemiyor, ancak yine de tam özelleştirme seçenekleri istiyorsanız, SeedProd gibi bir sürükle ve bırak WordPress sayfa oluşturucu kullanmanızı öneririz.

Bununla birlikte, bir WordPress web sitesinde HTML düzenlemenin farklı yollarına bakalım.

Blok düzenleyiciyi ve klasik düzenleyiciyi kullanarak HTML’yi nasıl düzenleyeceğinizi ele alacağız ve ayrıca sitenize kod eklemenin kolay bir yolunu göstereceğiz. Tercih ettiğiniz bölüme geçmek için aşağıdaki bağlantılara tıklayabilirsiniz.

WordPress Blok Düzenleyicide HTML Nasıl Düzenlenir

WordPress blok düzenleyicisinde, yazınızın veya sayfanızın HTML’sini düzenlemenin birden fazla yolu vardır.

İlk olarak, HTML kodu eklemek için içeriğinizde bir Özel HTML bloğu kullanabilirsiniz.

Başlamak için WordPress kontrol panelinize gidin ve ardından yeni bir yazı/sayfa ekleyin veya mevcut bir makaleyi düzenleyin. Bundan sonra, sol üst köşedeki artı (+) işaretine tıklayın ve bir ‘Özel HTML’ bloğu ekleyin.

Adding custom HTML block in WordPress

Ardından, devam edin ve özel HTML kodunuzu bloğa girin. HTML kodunun düzgün çalışıp çalışmadığını ve içeriğinizin canlı web sitenizde nasıl görüneceğini kontrol etmek için ‘Önizleme’ seçeneğine de tıklayabilirsiniz.

Custom HTML code in WordPress Editor

WordPress blok düzenleyicisinde HTML kodu eklemenin veya değiştirmenin bir başka yolu da belirli bir bloğun HTML’sini düzenlemektir.

Bunu yapmak için, içeriğinizdeki mevcut bir bloğu seçin ve ardından üç noktalı menüye tıklayın. Ardından, devam edin ve ‘HTML olarak düzenle’ seçeneğine tıklayın.

Click the three dots and select edit as HTML

Şimdi tek bir bloğun HTML’sini göreceksiniz. Devam edin ve içeriğinizin HTML’sini düzenleyin. Örneğin, bir nofollow bağlantısı ekleyebilir, metninizin stilini değiştirebilir veya başka kodlar ekleyebilirsiniz.

Edit the HTML of an individual block

Yazınızın tamamının HTML’sini düzenlemek istiyorsanız, WordPress blok düzenleyicisindeki ‘Kod Düzenleyici’yi kullanabilirsiniz.

Kod düzenleyiciye sağ üst köşedeki üç nokta seçeneğine tıklayarak erişebilirsiniz. Ardından açılan seçeneklerden ‘Kod Düzenleyici’yi seçin.

Access the Code Editor

WordPress Klasik Düzenleyicide HTML Nasıl Düzenlenir

WordPress klasik düzenleyicisini kullanıyorsanız, HTML’yi Metin görünümünde kolayca düzenleyebilirsiniz.

Metin görünümüne erişmek için bir blog gönderisini düzenlemeniz veya yeni bir tane eklemeniz yeterlidir. Klasik düzenleyicideyken makalenizin HTML’sini görmek için ‘Metin’ sekmesine tıklayın.

Click on Text in the Classic Editor to edit HTML

Bundan sonra, içeriğinizin HTML’sini düzenleyebilirsiniz. Örneğin, farklı kelimeleri belirgin hale getirmek için kalınlaştırabilir, metinde italik stili kullanabilir, listeler oluşturabilir, içindekiler tablosu ekleyebilir ve daha fazlasını yapabilirsiniz.

WordPress Widget’larında HTML Nasıl Düzenlenir

Sitenizin widget alanına HTML kodu ekleyebileceğinizi ve düzenleyebileceğinizi biliyor muydunuz?

WordPress’te Özel HTML widget’ı kullanmak kenar çubuğunuzu, altbilginizi ve diğer widget alanlarını özelleştirmenize yardımcı olabilir. Örneğin, iletişim formları, harekete geçirici mesaj (CTA) düğmeleri, Google Haritalar ve diğer içerikleri yerleştirebilirsiniz.

WordPress yönetici panelinize giderek başlayabilir ve ardından Görünüm ” Widget‘lar bölümüne gidebilirsiniz. Bundan sonra, HTML kodu eklemek istediğiniz herhangi bir widget alanındaki ‘Artı’ simgesine tıklayın.

Kullanılabilir widget alanları, kullandığınız WordPress temasına bağlı olacaktır. Örneğin, altbilginize, üstbilginize veya diğer alanlara ekleyebilirsiniz.

Click the Plus icon to add a widget

Ardından, widget bloğu menüsünde Özel HMTL widget’ını arayın ve widget alanına otomatik olarak eklemek için üzerine tıklayın.

Add custom HTML widget in WordPress

Bundan sonra, Özel HTML widget’ınıza tıklayabilir ve HTML kodunu girebilirsiniz. İşiniz bittiğinde, ekranın sağ üst köşesindeki ‘Güncelle’ düğmesine tıklamayı unutmayın.

Add custom HTML code in widget block

Artık Özel HTML widget’ını çalışırken görmek için web sitenizi ziyaret edebilirsiniz.

Custom HTML Preview

WordPress Tema Düzenleyicisinde HTML Nasıl Düzenlenir

Web sitenizin HTML’sini düzenlemenin bir başka yolu da WordPress Tema Düzen leyicisidir (Kod Düzenleyici).

Ancak, Tema Düzenleyicide kodu doğrudan düzenlemenizi önermiyoruz. Kod girerken yapacağınız en ufak bir hata web sitenizi bozabilir ve WordPress kontrol paneline erişiminizi engelleyebilir.

Ayrıca, temanızı güncellerseniz, tüm değişiklikleriniz kaybolacaktır.

Bununla birlikte, Tema düzenleyicisini kullanarak HTML düzenlemeyi düşünüyorsanız, herhangi bir değişiklik yapmadan önce web sitenizi yedeklemeniz iyi bir fikirdir.

Ardından, WordPress panonuzdan Görünüm ” Tema Düzenleyici ‘ye gidin. Şimdi tema dosyalarını doğrudan düzenleme hakkında bir uyarı mesajı göreceksiniz.

Theme editor warning in WordPress

‘Anladım’ düğmesine tıkladığınızda tema dosyalarınızı ve kodunuzu göreceksiniz. Buradan hangi dosyayı düzenlemek istediğinizi seçebilir ve değişikliklerinizi yapabilirsiniz.

WordPress Theme Editor

WordPress’te FTP Kullanarak HTML Düzenleme

WordPress tema dosyalarında HTML düzenlemenin bir başka alternatif yöntemi de dosya aktarım protokolü hizmeti olarak da bilinen FTP’yi kullanmaktır.

Bu, tüm WordPress barındırma hesaplarıyla birlikte gelen standart bir özelliktir.

Kod düzenleyici yerine FTP kullanmanın avantajı, FTP istemcisini kullanarak sorunları kolayca çözebilmenizdir. Bu şekilde, HTML düzenlerken bir şey bozulursa WordPress panonuzun dışında kalmazsınız.

Başlamak için öncelikle bir FTP yazılımı seçmeniz gerekecek. Windows, Mac ve Linux için ücretsiz ve kullanıcı dostu bir FTP istemcisi olduğu için bu eğitimde FileZilla’yı kullanacağız.

FTP istemcinizi seçtikten sonra, şimdi sitenizin FTP sunucusunda oturum açmanız gerekecektir. Giriş bilgilerini barındırma sağlayıcınızın kontrol paneli panosunda bulabilirsiniz.

Giriş yaptıktan sonra, ‘Uzak site’ sütunu altında web sitenizin farklı klasörlerini ve dosyalarını göreceksiniz. Devam edin ve wp-content ” theme seçeneğine giderek tema dosyalarınıza gidin.

Şimdi web sitenizde farklı temalar göreceksiniz. Devam edin ve düzenlemek istediğiniz temayı seçin.

Navigate to your theme files in FTP client

Ardından, HTML’yi düzenlemek için bir tema dosyasına sağ tıklayabilirsiniz. Örneğin, altbilgide değişiklik yapmak istiyorsanız footer.php dosyasına sağ tıklayın.

Birçok FTP istemcisi dosyayı görüntülemenize, düzenlemenize ve değişiklikleri yaptıktan sonra otomatik olarak yüklemenize izin verir. FileZilla’da bunu ‘Görüntüle/Düzenle’ seçeneğine tıklayarak yapabilirsiniz.

Download and edit your theme file

Ancak, herhangi bir değişiklik yapmadan önce düzenlemek istediğiniz dosyayı masaüstünüze indirmenizi öneririz.

HTML’yi düzenledikten sonra orijinal dosyayı değiştirebilirsiniz. Daha fazla ayrıntı için WordPress’te dosya yüklemek için FTP’nin nasıl kullanılacağına ilişkin kılavuzumuzu izlemenizi öneririz.

WordPress’e Kod Eklemenin Kolay Yolu

WordPress’e kod eklemenin en kolay yolu, piyasadaki en iyi kod parçacıkları eklentisi olan WPCode‘u kullanmaktır.

WPCode Pro version

WPBeginner ekibi bu eklentiyi, yeni başlayanların bile sitelerine dakikalar içinde özel kod ekleyebilecekleri şekilde tasarladı. Ayrıca, eklentinin kullanımı %100 ücretsiz olan bir lite sürümü de bulunmaktadır.

Tek bir yerde depolandığı için kodunuzu düzenlemenize yardımcı olur. Ayrıca, kodu manuel olarak düzenlerken oluşabilecek hataları önler.

Bir diğer avantajı ise temanızı güncellemeye veya değiştirmeye karar verdiğinizde kodunuzun silinmesi konusunda endişelenmenize gerek kalmamasıdır.

Yapmanız gereken ilk şey, web sitenize ücretsiz WPCode eklentisini yüklemek ve etkinleştirmektir. Daha fazla ayrıntı için WordPress eklentisi nasıl kurulur hakkındaki ayrıntılı eğitimimizi takip edebilirsiniz.

Eklenti aktif olduktan sonra, yönetici panelinizden Code Snippets ” Header & Footer bölümüne gidebilirsiniz.

Ardından, HTML kodunu web sitenize üstbilgi, gövde ve altbilgi kutularına ekleyebilirsiniz.

Örneğin, web sitenizde bir uyarı çubuğu görüntülemek istediğinizi varsayalım. HTML kodunu ‘Gövde’ kutusuna girebilir ve ‘Değişiklikleri Kaydet’ düğmesine tıklayabilirsiniz.

Adding the HTML code using the WPCode plugin

Bunun yanı sıra, başlığa bir Google Analytics izleme kodu, Facebook pikseli ve TikTok reklam pikseli ekleyebilirsiniz. Veya eklentiyi kullanarak web sitenizin altbilgisine bir Pinterest düğmesi ekleyebilirsiniz.

WPCode ile kodun nerede çıkacağına karar vermek de kolaydır. Örneğin, bazı HTML kodlarını her gönderinin başında veya sonunda otomatik olarak görüntüleyebilirsiniz.

Daha fazla ayrıntı için WordPress’te üstbilgi ve altbilgi kodunun nasıl ekleneceğine ilişkin kılavuzumuza bakabilirsiniz.

Bu makalenin WordPress kod düzenleyicisinde HTML’yi nasıl düzenleyeceğinizi öğrenmenize yardımcı olduğunu umuyoruz. Ayrıca bir WordPress web sitesi oluşturmanın gerçekte ne kadara mal olduğuna ilişkin kılavuzumuza bakmak veya web siteniz için WordPress kullanmanızın en önemli nedenlerini görmek isteyebilirsiniz.

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

Açıklama: İçeriğimiz okuyucu desteklidir. Bu, bazı bağlantılarımıza tıklarsanız komisyon kazanabileceğimiz anlamına gelir. WPBeginner'ın nasıl finanse edildiğini, neden önemli olduğunu ve nasıl destek olabileceğinizi görün. İşte editoryal sürecimiz.

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

Ultimate WordPress Araç Kiti

Araç setimize ÜCRETSİZ erişim sağlayın - her profesyonelin sahip olması gereken WordPress ile ilgili ürün ve kaynaklardan oluşan bir koleksiyon!

Reader Interactions

3 yorumBir Cevap Bırakın

  1. Syed Balkhi says

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

  2. Mrteesurez says

    Is there any way to run an HTML/CSS/JS in a WordPress page, like running an entire HTML file that contains CSS and JS. Is there any plugin you can suggest me ?

Bir Cevap Bırakın

Yorum bırakmayı seçtiğiniz için teşekkür ederiz. Lütfen tüm yorumların yorum poli̇ti̇kasi uyarınca denetlendiğini ve e-posta adresinizin yayımlanmayacağını unutmayın. Ad alanında anahtar kelime KULLANMAYIN. Kişisel ve anlamlı bir sohbet edelim.