WordPress'te Üstbilgi ve Altbilgi Kodu Nasıl Eklenir?

Yayınlanan: 2022-09-19

WordPress platformu, kodlama deneyimi olmayanların hemen hemen her tür işlevselliği uygulamalarına yardımcı olmak için harika bir iş çıkarır. Ancak bazı durumlarda, üçüncü taraf hizmetlerin kendi işlevlerini yerleştirmesine yardımcı olmak için WordPress'e üstbilgi ve altbilgi kodu eklemeniz gerekir.

Bunun için en tipik kullanım durumu, Google Analytics'i sitenize entegre etmektir. Ancak, bunu yapmak isteyebileceğiniz birçok başka neden vardır – bu görevi neden gerçekleştirmek istediğinizi zaten biliyor olabilirsiniz.

Bu eğitim için size WordPress'e üstbilgi ve altbilgi kodu eklemenin birkaç yolunu göstereceğiz. Yine de ilk olarak, bunu yapmak isteyebileceğiniz nedenlere bir göz atacağız.

Sitenizin Üstbilgi ve Altbilgisinde Eklenen Kodla Neler Elde Edebilirsiniz?

Standart bir web sitesi, bir metin belgesine çok benzer şekilde birkaç farklı bileşene ayrılacaktır:

  • Başlık. Sitenizin başlığı, bir dizi 'ön yükleme' öğesi ve Güvenli Yuva Katmanı (SSL) sertifikanız, şifreleme, herhangi bir JavaScript ve daha fazlasıyla ilgili ayrıntıları içerir.
  • Altbilgi. Bu, başlığınıza benzer şekilde çalışır, ancak bunun yerine sayfanın en altında biter.
  • Gövde. Sitenize uyguladığınız işlevlerin çoğu, içeriğinizin "gövdesi" içinde olacaktır. Bu, WordPress panosundaki hemen hemen her şeyin ana odak noktasıdır ve gövde, sayfada gördüğünüzü temsil eder.

Sunucular sayfaları doğrusal bir şekilde yükler – baş, gövde ve ardından alt bilgi. Bu, önce üstbilgideki kodun yükleneceği, ancak altbilgi kodunun her şeyden sonra yükleneceği anlamına gelir.

Günlük Kod Parçacığı Kullanım Örnekleri

Sosyal medya ve Arama Motoru Optimizasyonu (SEO) araçları genellikle WordPress'e başlık kodu eklemenize ihtiyaç duyar. Bunun nedeni, bir site yüklendiğinde, kendisinden sonra gelen her şeyi günlüğe kaydetmek için bu hizmetlerin bir miktar öncelik alması gerektiğidir.

Bu, CSS koduyla benzer bir durumdur, çünkü bu, sitenizin nasıl görüneceğini belirler. Bu altbilgide olsaydı, stili görmeden önce bir dizi düzen değişikliği görürdünüz.

JavaScript, modern web siteleri oluşturmamıza, görüntülememize ve bunlarla etkileşime girmemize yardımcı olurken, (teknik anlamda) gerekli bir bileşen değildir. Bu nedenle, altbilgideki JavaScript, birçok durumda size daha fazla performans sağlayacaktır ve buna sahipseniz. seçeneği, onunla gitmelisin.

Aslında, daha birçok kullanım durumu vardır ve bunları WPKube blogundaki başka bir makalede daha ayrıntılı olarak ele alıyoruz. Ancak, tipik bir WordPress durumunda sitenizin üstbilgi ve altbilgi öğelerine erişiminiz yoktur. Bunu yapmak için ya ellerinizi kirletmeniz ya da dışarıdan yardım çağırmanız gerekir.

WordPress'te Üstbilgi ve Altbilgi Kodu Nasıl Eklenir (2 Yol)

Makalenin geri kalanında, WordPress'e üstbilgi ve altbilgi kodu eklemenin iki yolunu ele alacağız. Her ikisi de basittir, ancak birini diğerine tercih ederiz:

  1. Kodu sitenizin doğru alanlarına eklemenize yardımcı olması için bir eklenti kullanabilirsiniz.
  2. functions.php dosyanıza kod ekleyebilirsiniz ve sitenizin dosyalarına nasıl erişeceğiniz konusunda ekstra bilgiye sahip olmanız gerekir.

Birazdan açıklayacağımız nedenlerden dolayı önce eklenti seçeneğine bakacağız.

1. Üst Bilginize ve Alt Bilginize Kod Eklemek İçin Bir Eklenti Kullanın

WordPress'te bir şey uygulamak istiyorsanız, işi sizin için bir eklenti yapmalıdır. Çoğu durumda WordPress web siteleri için bir eklentiyi varsayılan olarak kabul ederiz. Bu nedenle, WordPress'e üstbilgi ve altbilgi kodu eklemek istiyorsanız, Embed Code eklentisi ideal olacaktır:

WordPress.org'dan Embed Code eklentisi.

Bu, kardeş sitemiz DesignBombs'un geliştirdiği bir çözümdür ve sitenizin tamamına, belirli sayfalara veya gönderilere ve hatta özel gönderi türlerine kod eklemenin hızlı ve zahmetsiz bir yolunu sunar.

Kullanmak için eklentiyi tipik WordPress tarzında yükleyecek ve etkinleştireceksiniz. Bu işlem bittiğinde, kontrol panelinde yeni bir Ayarlar > Kodu Göm seçeneği göreceksiniz:

WordPress kontrol panelindeki Embed Code bağlantısı.

Bu ekranda iki metin alanı göreceksiniz: biri başlık için diğeri alt bilgi için. Girdiğiniz kodun HTML'nizde nerede bulunacağına dair bir ipucu bile alacaksınız:

WordPress ayarlarındaki global Embed Code üstbilgi ve altbilgi bölümleri.

Bu aracı kullanmak son derece basittir. Kodunuzu girdikten sonra değişikliklerinizi kaydedin. Bu, küresel (yani site genelinde) düzeyde herhangi bir kodu buraya ekleyecektir. Ancak, yalnızca tek bir gönderiye veya sayfaya kod eklemek isteyebilirsiniz. Bunu Blok Düzenleyici aracılığıyla yapabilirsiniz – ihtiyacınız olan meta kutu ve seçenekler ekranın alt kısmındadır:

Embed Code eklentisi meta kutuları, ayrı bir Blok Düzenleyici sayfasında.

Embed Code bizim tercih ettiğimiz ve en az sorun için kullanmanız gereken bir yöntem olsa da, ihtiyacınız olan sonuçları elde etmenin başka bir yolu daha var. Bundan sonra buna bakacağız.

2. functions.php Dosyanıza Kod Parçacıkları Ekleyin

Her WordPress kurulumu, üst düzey veya temaya özel dizinde özel bir functions.php dosyasına erişebilir. Bu, WordPress'in daha fazla işlevsellik kullanmasına yardımcı olmak için kod parçacıkları eklemenizi sağlar. Ancak, başlamadan önce anlamanız ve yerine getirmeniz gereken bazı ön koşullar vardır:

  • WordPress çekirdek dosyalarınıza - ve uzantısı olarak, functions.php dosyasına - Güvenli Dosya Aktarım Protokolü'nü (SFTP) kullanarak erişirsiniz. Bu nedenle, site dosyalarınızı bulmak ve onlarla çalışmak için bunun nasıl çalıştığı hakkında bilgi sahibi olmanız gerekir.
  • Ayrıca, söz konusu tema bir güncelleme alırsa değişikliklerinizi korumak için bir alt tema kullanmanızı öneririz.
  • En azından WordPress kancaları, eylemleri ve filtreleri hakkında bilgi sahibi olmak isteyeceksiniz. Dahası, WordPress'in bu kancalar aracılığıyla üstbilginize ve altbilginize nasıl eriştiğini anlamak isteyeceksiniz.

SFTP'yi kullanmak söz konusu olduğunda, WPKube, temel okumayı düşünebileceğiniz bir dizi makaleye sahiptir:

  • Güvenli Dosya Aktarım Protokolü (SFTP) için Başlangıç ​​Kılavuzu
  • FileZilla Nasıl Kullanılır: Adım Adım Kılavuz
  • WordPress Dosya İzinlerine Yeni Başlayanlar Kılavuzu

Ayrıca, WordPress Developer kanca kitaplığına, özellikle wp_head ve wp_footer girişlerine bakmak isteyebilirsiniz, ancak bu isteğe bağlıdır, çünkü bunları ağır bir şekilde kullanmazsınız.

Buradan, süreç birkaç adım atıyor. Önce, sitenizin sunucusunu SFTP istemcinizde açın, ardından wp-content/themes'e gidin. Burada, mevcut temanızın dizinini açın ve ilgili functions.php dosyasını arayın:

Bir metin düzenleyicide bir temanın functions.php dosyasını açma.

Bu dosyayı favori metin veya kod düzenleyicinizde açmak isteyeceksiniz. İçine aşağıdaki snippet şablonunu yerleştirebilirsiniz:

 add_action( 'wp_head', '<SNIPPET_NAME>' ); function <SNIPPET_NAME>() { ?> <!-- Place your HTML code or other script here. --> <?php }

Kısacası bu, <SNIPPET_NAME> olarak adlandırdığınız her şeyi kullanarak WordPress'e bir eylem kancası ekler. Fonksiyonun kendi içinde, yorum satırının altına ya değiştireceksiniz ya da altına yazacaksınız (yani <!-- ile başlayan satır.) Alt bilgiye kod eklemek istiyorsanız, 'wp_head' 'wp_footer' ve normal şekilde devam edin.

Değişikliklerinizi kaydettikten sonra, bu siteniz için geçerli olmalıdır. Eklediğiniz koda bağlı olarak, ön uç sayfanın kendisinde, WordPress kontrol panelinizde veya hatta bir üçüncü taraf kontrol panelinde görünür bir şey olmalıdır.

Toplama

WordPress tam olarak kullanmak için tipik kodlama bilgisine ihtiyaç duymasa da, bazı durumlarda WordPress'e üstbilgi ve altbilgi kodu eklemeniz gerekebilir. Örneğin, sitenizin dosyalarını kırmak için popüler bir neden olan analitiği kullanmak isteyebilirsiniz.

Bu gönderi, üstbilginize ve altbilginize kod eklemenin iki farklı yolunu inceledi:

  • Embed Code gibi bir eklenti, panoyu kullanarak WordPress'e üstbilgi ve altbilgi kodu eklemenize izin verir. Bu nedenle, sunucunuza erişme endişesi olmadan kopyalayıp yapıştırmanız yeterlidir.
  • Ancak, teknik bilginiz varsa, functions.php dosyanıza bir snippet eklemeyi düşünebilirsiniz. SFTP bilgisine ve WordPress dosyalarınızla ilgili biraz deneyime ihtiyacınız olacak, ancak bu yaklaşım eklenti seçeneği kadar iyidir.

WordPress'te üstbilgi ve altbilgi kodu eklemek için hangi yöntemi kullanacaksınız? Aşağıdaki yorumlar bölümünde bize bildirin!