WordPress Sayfaya Kod Ekleme WordPress’e kod parçacıkları ekleme ile mücadele mi ediyor musunuz? Kod parçacıkları, yararlı bir işlevsellik yığınının kilidini açar. ancak bazen geliştiriciler sadece sihirli bir şekilde her kod parçasını nereye koyacağınızı bilmenizi bekler gibi gözüküyor, değil mi?
Ve kaynak koduna girmek çok ciddi bir şey olduğu için kesinlikle seyahat etmek ve yanlışlıkla hata yapmak istemezsiniz…
Bu talihsiz durumdan kaçınmanıza yardımcı olmak için bu yazıda iki şeyi ele alacağım:
- WordPress topluluğunun etrafında uçarken gördüğünüz bu kod parçacıklarını nereye ekleyeceksiniz?
- Nasıl onlar mahvetme sitenizi yapmak o kadar güvenle bu kod parçacıklarını eklemek ve yanlışlıkla Temanızı güncellemek eğer onları kaybetmek (veya geçiş temalar) olmaz
Muhtemelen Karşılaştığınız Kod Parçacıklarının İki Türü
Çoğu durumda, muhtemelen yalnızca iki tür kod snippet’iyle ilgileneceksiniz:
- PHP – bu kod parçacıkları WordPress sitenizin işlevselliğini genellikle ön uçta veya arka uçta değiştirir
- CSS – bu kod parçacıkları sitenizin görünüşünü etkiler.
Onları nasıl ayırt edebilirsiniz? Peki, kod pasajının kaynağı zaten size söylemedi ise, nasıl göründüklerine dair bazı örnekler.
PHP kod parçacıkları şöyle görünecek:PHP
add_action( ‘after_setup_theme’, ‘yourtheme_setup’ );
function yourtheme_setup() {
add_theme_support( ‘wc-product-gallery-zoom’ );
add_theme_support( ‘wc-product-gallery-lightbox’ );
add_theme_support( ‘wc-product-gallery-slider’ );
}
Oysa CSS kod snippet’leri şöyle görünecek :CSS
/* WooCommerce 3.0 Gallery */
.single-product div.product .woocommerce-product-gallery .woocommerce-product-gallery__trigger {
position: absolute;
top: .875em;
right: .875em;
display: block;
height: 2em;
width: 2em;
border-radius: 3px;
z-index: 99;
text-align: center;
text-indent: -999px;
overflow: hidden;
}
Aşağıda, WordPress sitenize her iki tür kod snippet’ini nasıl güvenli bir şekilde ekleyebileceğinizi göstereceğim.
WordPress’e PHP Kod Parçacıkları Nasıl Eklenir
WordPress’e bir PHP kod pasajı eklemek için kullanabileceğiniz iki genel yaklaşım vardır:
- Doğrudan temanıza – kod snippet’ini doğrudan bir alt temada Fonksiyon.php adlı bir dosyaya yerleştirebilirsiniz.
- Bir eklentide – kod parçacığını bir eklentiye yerleştirebilirsiniz
Her iki yaklaşım da, WordPress sitenize eklenen snippet’le bitiyor olsa da, bazı işlevsel farklılıklar vardır, yani:
Kod pasajını doğrudan temanıza eklerseniz, WordPress temalarını değiştirirseniz bu pasaj çalışmayı durduracaktır.
Öte yandan, kod snippet’inizi bir eklentiye eklerseniz, hangi WordPress temasını kullanırsanız kullanın, orada kalacaktır.
İşte PHP kod parçacıklarını nereye koyacağınıza dair hızlı bir kural:
- SADECE eklediğiniz işlevsellik şu anki temanız için geçerliyse, onu doğrudan temenın işlevleri.
- Eklemekte olduğunuz işlevselliğin WordPress temalarını değiştirseniz bile çalışmaya devam etmesi gerekiyorsa , bunu eklenti yöntemiyle ekleyin.
Kulağa hoş gelmek? Özel yöntemlere geçelim…
Alt tema kodları için nasıl kod parçacıkları eklenir
Functions.php dosyasına kod parçacıkları eklemek oldukça basittir. Temel olarak iki aşamalı bir işlem:
- Bir alt tema oluşturun ( zaten bir tane yoksa ) – bu, eklediğiniz kod parçacıklarının WordPress temanızı bir sonraki güncellemenizin üzerine yazılmamasını sağlar.
- Kod pasajında yapıştırın – bu kısım oldukça kolaydır!
Zaten bir alt temanız varsa, 2. Adıma geçin. Aksi takdirde, en baştan başlayalım…
1. Adım: Yeni Bir Tema Oluşturun
Bir alt tema, sitenizdeki mevcut işlevlerin hiçbirini etkilemez. Ancak, temanızı bir sonraki güncellemenizde bu değişikliklerin üzerine yazılma tehlikesi olmadan güvenli bir şekilde yeni değişiklikler yapmanıza izin verecektir.
El ile bir alt tema oluşturmak mümkün olsa da, süreci basitleştirmek için Childify Me adlı ücretsiz bir eklenti kullanabilirsiniz . İşte nasıl yapılacağı:
- Childify Me eklentisini kurun ve etkinleştirin
- Git özelleştir → Görünüm WordPress dashboard
- WordPress Özelleştirici’nin sol kenar çubuğunu aşağı kaydırın
- En alttaki Childify Me düğmesini tıklayın
- temasına bir ad verin
- Oluştur’a tıklayın
- Önizle ve Etkinleştir’i tıklayın.
Her şeyin iyi göründüğünden emin ol. Ardından, alt temanızı etkinleştirmek için Etkinleştir ve Yayınladüğmesini tıklayın:
Adım 2: functions.php Dosyasına Kod Parçacıkları Ekleyin
Şimdi, tek yapmanız gereken kodları temanızdaki yeni functions.php dosyasına eklemek.
FTP’ye aşina iseniz, bunu en güvenli yaklaşım için FTP üzerinden yapmanızı öneririm ( bazen kodu yanlışlıkla yanlış yazabilirsiniz, bu da sitenizde sorunlara neden olabilir. FTP işleri hızlı bir şekilde düzeltmenize olanak sağlar ).
Ancak bu kafa karıştırıcıysa, WordPress panonuzdan da yapabilirsiniz:
- Görünüm → Editör’e Git
- Tema Dosyaları sütununun altındaki functions.php dosyasını seçin.
- Kod pasajınıza yapıştırın ve değişiklikleri kaydedin
Ve bu kadar!
Kod Parçacıkları Eklentisi ile PHP Kod Parçacıkları Nasıl Eklenir
Temaya özgü olmayan kod parçacıkları için, aptly adlı Kod Kod Parçacığı eklentisini kullanabilirsiniz .
Buraya eklediğiniz snippet’ler, önceki yöntemle eklediğiniz snippetlerle aynı şekilde çalışır. Tek fark, WordPress temalarını değiştirseniz bile parçacıklarınızın artık etkin kalacağıdır.
Eklentiyi nasıl kullanacağınız:
- Ücretsiz Kod Parçacıkları eklentisini kurun ve etkinleştirin
- Parçacıklar’a Git → Yeni Ekle
- Snippet’inizi adlandırın ( bu ad tamamen dahilidir ve hatırlamanıza yardımcı olur )
- Kod kutusundaki kod pasajına yapıştırın
- Ekranın altına doğru kaydırın
- Snippet’inizin Kapsamını seçin ( şüpheniz olduğunda, her yerde varsayılan Snippet’i çalıştır seçeneğine yapıştırın )
- Değişiklikleri Kaydet ve Etkinleştir’i tıklayın.
Ve bu kadar! Snippet’iniz artık etkin.
Snippet’i daha sonraki bir tarihte devre dışı bırakmanız veya düzenlemeniz gerekirse, bunu Snippets → Tüm Snippets alanına giderek yapabilirsiniz :
WordPress’e Özel CSS Parçacıkları Nasıl Eklenir
Genel olarak, WordPress sitenize CSS parçacıkları eklemenin iki kolay yolu vardır. Çoğu durumda, iki yöntem arasında bir fark yoktur – hangisini en uygun bulursanız kullanın.
Seçenek 1: WordPress Özelleştiricisine CSS Ekleme
WordPress 4.7’den bu yana, WordPress Özelleştiricisi, özel CSS parçacıkları eklemek için bir nokta içermektedir.
İşte nasıl kullanılacağı…
- Git özelleştir → Görünüm WordPress dashboard
- Sol kenar çubuğundaki Ek CSS seçeneğini tıklayın
- Özel CSS’nizi kutuya ekleyin
- Özel CSS snippet’inizi canlı yayınlamak için Yayınla’yı tıklayın
Hepsi bu kadar! Ve bu yöntemle ilgili güzel şey, özel CSS snippet’inizle yapılan değişiklikleri sitenizin canlı önizlemesinde ekranın sağ tarafında görebilmenizdir.
Seçenek 2: WordPress Alt Temasına CSS Ekleme
WordPress Özelleştirici’yi kullanmamayı tercih ederseniz, CSS parçacıklarını doğrudan temanın stil sayfasına da ekleyebilirsiniz.
temayı kurduğunuzda, özel CSS parçacıklarınızı şu şekilde ekleyebilirsiniz:
- WordPress panonuzdaki Görünüm → Editör’e gidin
- Alt temanız için style.css dosyasını seçin
- CSS pasajınızı dosyaya ekleyin ve değişiklikleri kaydedin
Ve bu kadar! Özel CSS’niz canlı olmalıdır.
Genel Olarak
Artık WordPress sitenize kod parçacıkları eklemeye başlamak için ihtiyacınız olan tüm bilgiye sahip olmalısınız!
Unutmayın, PHP kod parçacıkları için:
- Temanın kullanın functions.php işlevselliği ile snippet’lerde dosyayı belirli temanızın
- Olduğunu işlevselliği ile snippet’lerde ücretsiz Kod Parçaları eklentiyi kullanın bağımsız Temanızın
Ve CSS parçacıkları için aşağıdakilerden birini kullanabilirsiniz:
- WordPress Özelleştiricisinin Ek CSS seçeneği
- Temasının style.css dosyası
Başka sorunuz varsa, yorum olarak bırakın