WordPress Kodu Nasıl Düzenlenir (HTML, CSS, JavaScript ve PHP)

WordPress’i seviyoruz! Basit bir WP kurulumu yapabilir ve hayalinizdeki web sitesine dönüştürebilirsiniz – ve muhtemelen bu yüzden WordPress dünyanın en yaygın olarak kullanılan CM’leri olmaya devam ediyor. Eklenti, sitenizi istediğiniz gibi görünür ve hareket etmede çok değerli olsa da, çekirdeğinizde WordPress kodunuzu (HTML, CSS, JavaScript, PHP) çekirdeğinizde düzenlemeniz gereken günler vardır. Bu makalede, WordPress kodunuzu nasıl ekleyeceğiniz/düzenleyeceğiniz konusunda adım adım bir prosedür vereceğiz. Doldurmak
WordPress’te kodu düzenleme
WordPress’te HTML kodunuzu düzenleyin (Klasik Editör)
Gutenberg editörüne HTML kodunu ekleyin veya düzenleyin
WordPress Widget’a HTML kodu nasıl eklenir veya düzenlenir
WordPress temanızdaki kaynak kodu düzenleme
CSS WordPress sitesi nasıl düzenlenir
Tema düzenleyicisi aracılığıyla css wordpress nasıl düzenlenir
WordPress CSS’nizi bir eklenti kullanarak düzenleyin
WordPress CSS kodunuzu WordPress Customerer aracılığıyla düzenleme
WordPress sitenize javascript nasıl eklenir
Eklentiler kullanarak üstbilgi ve altbilgi komut dosyaları nasıl eklenir
WordPress Post ve Page’a JavaScript ekleyin
WordPress’te PHP düzenleme
Çözüm
WordPress HTML, CSS, PHP ve JavaScript’teki kodu düzenlemek, WordPress-Each tarafından kendi işleviyle kullanılan dört programlama dilidir.
Örneğin html, CSS sitenizin görsel görünümünü tanımlarken, site içeriğinizin yapısını tanımlar. JavaScript ise dinamik işlevsellik sağlamak için HTML ve CSS’yi değiştirin. Şimdi, bu kodları WordPress’e nasıl ekleyeceğinizi ve düzenleyeceğinizi görelim. WordPress (WP Classic Editor) ‘da HTML kodunu nasıl düzenlenir HTML kodunu yayın veya WordPress sayfasından düzenle oldukça kolaydır. Tamamlamak için kontrol panelinizin ötesine geçmenize gerek yok. Yeter, yazı/sayfa düzenleyicinizdeki ‘Metin’ sekmesini tıklayın. Metin düzenleyicisi, HTML kodunu eklemenize, düzenlemenize ve silmenize olanak tanır. Değişiklikleri görmek için ‘Görsel’ sekmesini tıklayın. Değişiklikleri kaydetmeyi unutmayın.

Gutenberg editörü (Block) ile Gutenberg editörüne HTML kodunu nasıl ekleyebilirsiniz veya düzenlenir, daha fazla esnekliğiniz var. Tüm sayfalarda/yayınlarda veya ayrı bloklarda değişiklik yapabilirsiniz. HTML’de değişiklik yapmak için tüm yayınlar veya sayfalarda, ekranınızın sağ üst tarafında bulunan üç noktayı tıklayın. ‘Kod Düzenleyicisi’ni tıklayın.
Şimdi, HTML gönderisini düzenleyebilirsiniz. Editörden çıkmak için editörün üst kısmındaki ‘Çıkış Kodu Editörü’ne basın.

Bildiğiniz gibi, Gutenberg editörü bağımsız olarak düzenlenebilen bireysel bloklardan oluşur. Her bloğu yeterince düzenlemek için bloğu açın. Ardından, bloğun üstünde üç noktaya basın ve ‘HTML Olarak Düzenle’yi seçin.

Ayrıca özel bir HTML bloğu da kullanabilirsiniz. Blok eklemek için editörün sol üst köşesindeki ‘Ekle’ sembolüne basın. Ardından, ‘HTML Kustom’ bloğunu tıklayın ve elde edilen kutuya kodu yazın.

Ön uçtaki görünümü görmek için ‘Pratin İncelemesi’ni tıklayabilirsiniz. Değişiklikleri kaydetmeyi unutmayın. WordPress Widget’taki HTML Kodunu Nasıl Ekle veya Düzenleyeceğiniz veya Düzenlenir. Kenar çubuğunuza veya altbilginize HTML kodu eklemeniz gerekebilecek zamanlar vardır. Bunu yapmak için görünümü açın >> widget.

‘Özel HTML’ widget’ı arayın ve bir widget oluşturmak istediğiniz yeri seçmek için aşağı çekin. Ardından, ‘Widget Ekle’ tuşuna basın.

HTML kodunuzu girin ve ‘Kaydet’i tıklayın.

Ve hepsi bu! WordPress temanızdaki kaynak kodunu düzenlemek WordPress teması çeşitli dosyalardan oluşur. Bu, web siteniz için CSS, PHP ve JavaScript dosyalarını içerir. Sitenizi düzenlemenin aksine, tema kaynak kodunu düzenlerken ekstra dikkat edilmelidir. Bunun nedeni, temada yapılan değişikliklerle tüm sitelerinize zarar verebilmenizdir. Temanızın kaynak kodunu düzenlemeden önce dikkate alınması gereken bazı şeyler. Anne temanızı değil, çocuk temanızı düzenleyin: Tema dosyanızdaki kodu değiştirmeniz gerekiyorsa, bunu çocuğun temasında yapmalısınız.

Bunun nedeni, bir sonraki temayı güncellediğinizde tüm değişikliklerin kaybolmasıdır. Ancak, alt temayı kullandığınızda, ana temayı güncellediğinizde bile değişiklikleriniz kalır. Kendiniz için bir çocuk teması oluşturmayı öğrenmek için, WordPress’in teması hakkında tam öğreticimize bakın. Tam Site Rezervi Yapın: WordPress kaynak dosyalarını düzenlemeden önce web sitenizi ayırmayı unutmayın. Bunun nasıl yapılacağını öğrenmek için yedeklemeye nasıl geleceğinizle ilgili yazımıza bakın. Öte yandan, Fixrunner ile bir bakım planı aldığınızda yedekleme yapmak için stresi unutabilirsiniz. Gece yedeklemelerimiz var. Tema kaynak kodunuzu düzenlemenin 3 ana yolu vardır: Tema Düzenleyicisi, Eklenti ve FTP. CSS WordPress Sitesi Nasıl Düzenlenir Daha önce belirtildiği gibi, CSS Siteniz görsel ekranından sorumludur. Yazı tipi türünü, boyutunu, renk şemasını vb. Değiştirmeniz gerekiyorsa, CSS’yi düzenleyin. CSS’yi düzenleyebilirsiniz:

Tema Editörünüz aracılığıyla
WordPress Ayarını Kullanma
Eklentilerle
Bütün bunlar iyi çalışacak. CSS WordPress’in tema düzenleyicisi aracılığıyla nasıl düzenleneceği bilmiyorsanız, WordPress varsayılan bir tema düzenleyicisi ile birlikte gelir. Şablon dosyanızda doğrudan buradan değişiklik yapabilirsiniz.
Tema düzenleyicinize erişmek için görünümü açın >> Tema Düzenleyicisi.
Kod editörü ve sağdaki tarafın yan tarafı ekranınızda açılacaktır. Yan çubuktaki tema dosyalarından birini seçin ve dosyada değişiklik yapın.
Gördüğünüz dosya bir temadan diğerine değişir. Ancak, tüm WordPress temaları şu 2 dosyayı içerir:
Style.css: Genel olarak tema yazı tipini, renk şemasını ve görsel görünümü değiştirebileceğiniz yer burasıdır.

Function.php: Bu dosya, varsayılan site özelliklerinizi değiştiren PHP kodu içerir. İstediğiniz değişiklikleri yapın ve kaydetmek için ‘Dosyayı Güncelle’ tıklayın.

CSS hakkında bilginiz yoksa veya koddan uzak durmayı tercih ederseniz WordPress CSS kodunuzu bir eklenti kullanarak nasıl düzenleyebilirsiniz, eklentiyi kullanabilirsiniz. Bu şekilde, tema dosyalarınızı düzenlemeye gerek kalmadan sitenizin görünümünü değiştireceksiniz. Örneğin, özel CSS ve JS, tema dosyasını değiştirmek zorunda kalmadan sitenin görünümünü ayarlamanıza izin veren eklentilerdir. Bu eklenti, sözdizimi ile kullanımı kolay bir metin düzenleyicisi ile donatılmıştır.
İstediğiniz kadar kod ekleyebilirsiniz ve temayı değiştirdiğinizde kaybetmezsiniz.
Eklentileri kullanmak için sadece indirin, yükleyin ve etkinleştirin. CSS’yi düzenlemek için kullanılan diğer WordPress eklentileri arasında CSS kahramanları, Extender Genesis eklentileri, CSS Kustom WordPress, vb. WordPress CSS kodunuzu WordPress tema editörlerini kullanmak yerine WordPress Customerer aracılığıyla düzenleyerek varsayılan WordPress ayarını kullanabilirsiniz. WordPress Ayarlamalarını Ziyaret Etmek İçin, Gösterge Tablonuzda ‘Görünüm >> Özelleştir’:

Ardından, ek CSS’ye tıklayın.
Kod Düzenleyicisi açılacak. Özel CSS’nizi ekleyin ve yayın düğmesine basın.

WordPress sitenize javascript nasıl eklenir, animasyon, hesap makinesi, kayar çubuk, video oynatıcı veya ilgili etkileşimli öğeler gibi dinamik içerik eklemeniz gerektiğinde, web sitenize JavaScript çok kullanışlıdır.
WordPress sitenize JavaScript eklemeniz gerekebilir:

Eklenti işlevselliğini artırın. Google Analytics gibi ilgili harici öğeleri web sitenize.

Gizle veya HTML öğelerini görüntüleyin.

CSS değişkeninde karmaşık işlemleri çalıştırın.
Şimdi, JavaScript eklemek veya düzenlemek HTML veya CSS düzenlemek kadar kolay değil. Kodu nasıl yazdığınıza ve nereye eklediğinize dikkat etmelisiniz. Özellikle, JavaScript ekleyebileceğiniz iki yer var:
Temanızın üstbilgisi veya altbilgisi: Bu konuma eklenen JavaScript Site genelinde çalışıyor
Sayfalarda veya yayınlarda
WordPress’e üstbilgi ve altbilgi komut dosyaları eklemenin en kolay yolunu kullanarak başlık ve altbilgi komut dosyaları nasıl eklenir. Temanızı değiştirdiğinizde bile kalan tema komut dosyalarını eklemek istiyorsanız bu yöntem daha değerlidir. WordPress, varsayılan olarak, güncelleme sırasında header.php dosyanızın. Ancak bir eklenti kullandığınızda, bir güncelleme yaptığınızda veya temanızı değiştirseniz bile kod ekleme konusunda endişelenmenize gerek yoktur. Bu eklentinin bir örneği, ekleme başlıkları ve altbilgi eklentisidir: Bu, WP site üstbilgisinize ve altbilginize ekleme kodunu kolayca eklemenizi sağlar. Google Analytics komut dosyasını veya Facebook Pixel kodunu eklemeniz gerektiğinde, bu eklenti çok kullanışlıdır. Eklentileri kullanmak için yükleyin ve etkinleştirin. Ardından, Ayarları Açarak JavaScript Düzenleyiciye Erişim> Başlıklar ve Altbilgileri Ekle:
Sayfa, üstbilginize, gövdenize ve altbilginize komut dosyası ekleyebileceğiniz 3 metin kutusu içerir.
Komut dosyasını istenen bölüme ekledikten sonra, sayfanın altındaki Kaydet düğmesine basın. Yan Notlar: Bazı temalar (Genesis Framework gibi) bu işlevle birlikte gelir (kodu sitenizde herhangi bir yere girmenize izin verir), böylece bir eklentiye ihtiyacınız yoktur. WordPress yayınlarına ve sayfalara javascript nasıl eklenir, üstbilginize ve altbilginize JS kodu eklemenin yanı sıra (site genelinde işlev gören), gönderiye ve sayfaya tek tek ekleyebilirsiniz. Yapılacak ilk şey gömme kod eklentisini yüklemektir. Ardından, etkinleştirin. Ardından, yayınınız veya sayfanız için özel bir alanı etkinleştirmelisiniz. Klasik bir düzenleyici kullanıyorsanız, WP düzenleyicinize JS kodunu eklemeniz gereken bir sayfa veya yayın açın. Ardından, gösterge tablonuzun sağ üst köşesindeki ‘Ekran seçeneği’ tıklayın ve ‘Özel Alan’ seçeneğini kontrol edin. Gutenberg Düzenleyiciyi kullanırsanız, özel WP alanı özelliğine nasıl erişilir: Sağ üst köşedeki 3 dikey noktayı tıklayın ekranınızın ve seçeneği seçin:
Ardından Gelişmiş Panel altında bulunan ‘Özel Alan’ kutusunu kontrol edin.
Şimdi, ‘Özel Alan’ seçeneği sitenizde tamamen çalışıyor. Bundan sonra yapılması gereken bu. Gönderinizin altına doğru kaydırın (klasik bir editör veya Gutenberg’de), özel alanların eklenebileceği kısmı göreceksiniz.
Yeni girmeyi tıklayın ve yeni özel alanınızın adını ‘Ad’ kutusuna girin (adın CodeJsforpage gibi kelime koduyla başlamasına izin verin). Ardından, ‘Değer’ kutusuna JS kod parçanızı girin. Son olarak, ‘Özel Alan Ekle’ düğmesine basarak değişikliğinizi kaydedin. Bu noktada, JS kodunuzu yazı veya sayfanın herhangi bir yerine girebilirsiniz. Yeterli, istediğiniz yere Sematan kodunu: {{codejsforpage}} ekleyin. WordPress’te PHP’yi Düzenleme WordPress – WP Kod Düzenleyicisi ve FTP istemcisinde PHP düzenlemenin 2 ana yolu vardır. 1. Bu WordPress Kod Düzenleyicisi, WordPress kontrol panelinize giriş yapabileceğiniz kadar PHP’yi düzenlemek için en kolay yöntemdir. Başlamak için bir çocuk teması yapın ve etkinleştirin. Ardından, görünümü açın >> Tema Düzenleyicisi. Düzenlemek istediğiniz çocuk temasını seçin. Düzenlemek istediğiniz dosyayı açmak için tıklayın (PHP dosyası .php uzantısı ile biter). Örneğin, sitenizin altbilgisini düzenlemeniz gerekiyorsa, ekranınızın sağ tarafındaki footer.php dosyasını tıklayın. Şimdi, WordPress düzenleyicinizdeki dosyayı düzenleyin. Dosya Güncelleme düğmesini tıklamayı unutmayın. Bu değişikliğinizi kurtaracaktır. 2. FTP istemcileri kullanarak FTP aracılığıyla PHP kodunu düzenleme PHP dosyanızı düzenlemek için başka bir yöntemdir. Bu, WordPress kontrol panelinize, belki de WordPress hataları veya kötü amaçlı yazılım saldırıları nedeniyle erişemediğinizde en kullanışlıdır. WordPress kod düzenleyicisine erişiminiz varsa, bunu her şekilde kullanın. Bu daha hızlı. Bu nedenle, burada yapmanız gereken ilk şey FTP istemcisini (tercih edilen FileZilla) indirmektir. Ardından açın ve ‘Dosya >> Site Yöneticisi’ni tıklayın.

Ardından, FTP kimlik bilgisi giriş bilgilerinizi (etki alanınız, kullanıcı adınız ve şifreniz) girin. Bu ayrıntı genellikle cpanel giriş bilgilerinizle aynıdır. Bilmiyorsanız, WordPress Hosting Company ile iletişime geçin. Şimdi ‘Bağlan”yı tıklayın. Bağlantıdan sonra WordPress Core dosyanıza erişebilirsiniz. Belirli dosyaları düzenlemek için, wpconfig.php, dosyada sağlayın ve seçenek listesinden görün/düzenle seçin. Kodu düzenledikten sonra, değişiklikleri kaydedin ve Filezilla tarafından bunu yapması istendiğinde düzenlenen dosyaları sunucuya yükleyin. Sonuç WordPress, esneklik ve güçlü ayar seçenekleri nedeniyle birçok kişi tarafından sevilir. Bir özelliği sevmiyorsanız, onu kullanmaya devam etmeniz gerekmez. Eklentiler kullanarak veya WordPress kodunuzu doğrudan düzenleyerek değiştirebilirsiniz. Umarım, artık WordPress’te HTML WordPress, CSS, JavaScript ve PHP’yi düzenleyebilirsiniz. WordPress tarafından sunulan tüm güzelliği keşfetmekten çekinmeyin. Ancak, özellikle kaynak kodunuzu eklerken veya düzenlerken dikkatlice adım atmayı unutmayın. Bir WordPress uzmanı olmanıza yardımcı olmak için bir video eğitimi ve WordPress eğitim blogumuz var. Lütfen WordPress’i incelemek için kontrol edin. WordPress sitenizle ilgili hala yardıma ihtiyacınız varsa, bunu tamamlamak için WordPress geliştiricileri ve destek uzmanlarımızla iletişime geçin. Graphiqastock tarafından yapılan banner vektörler – www.freepik.com

admin

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir