Gönderilerinizde ve Sayfalarınızda Kullanabileceğiniz Gönderi Parçacıkları Kitaplığı Nasıl Oluşturulur

Yayınlanan: 2017-10-25

Birçok WordPress web sitesi, gönderilerinde ve sayfalarında bir yerde özel kod veya işlevler kullanır. Platform, bu kodu eklemeyi kolaylaştırır, ancak snippet'leri sitenizde yeniden kullanacaksanız, gerektiğinde manuel olarak kod eklemek zahmetli olabilir.

Kod parçacıklarını her ihtiyaç duyulduğunda elle eklemek yerine, eklentileri kullanarak hem organize etmek hem de kaydetmek daha mantıklı. Bu makalede, kod snippet'lerinizi düzenli tutmanın avantajlarından bahsedeceğiz ve ardından bunu Code Snippets Extended eklentisini kullanarak iki adımda nasıl yapacağınızı göstereceğiz. Hadi çalışalım!

Neden Kod Parçacıklarınızı Organize Etmelisiniz?

Bazı WordPress kodu.

Geliştirici olmasanız bile, web sitenize manuel olarak bazı kodlar eklemeniz gerekebilir.

Birçok WordPress kullanıcısı, gönderilerine ve sayfalarına özel kod parçacıkları ekler. Niş alanınız ve boyutunuz ne olursa olsun, sitenize küçük bir kod eklemeniz gereken birçok durum vardır. Örneğin, çalışabilmeleri için web sitenize birkaç satır JavaScript eklemenizi gerektiren Google Adsense veya Facebook Pixel'i ele alalım. Çok sayıda WordPress eklentisi de kısa kod kullanmanızı gerektirir, bu nedenle web sitenize özel kod ekleme şansınız yüksektir.

Bunu göz önünde bulundurarak, sitenizde kullandığınız tüm bu kod parçacıklarını kaydetmenin bir yolunu bulmak harika bir fikirdir. İşte nedeni:

  • Gerektiğinde kodunuza başvurabilirsiniz. Bazen, dosyalarınıza hangi özel kod satırlarını eklediğinizi unutabilirsiniz, bu nedenle snippet'lerinizi bir kitaplık kullanarak düzenlemek işe yarar.
  • Kod snippet'lerinizi daha kolay yeniden kullanabileceksiniz. Aynı kodu birden çok kez kullanmanız gerekiyorsa, daha sonra kullanmak üzere saklamak mantıklıdır.

Elbette, bilgisayarınızda veya bulutta normal metin dosyalarını kullanarak bu kod parçacıklarını kaydedebilirsiniz. Ancak, doğru WordPress eklentisini kullanmak, bunları sitenizde saklamanın daha uygun bir yolunu sağlayabilir. Bu şekilde, birlikte çalıştığınız her bir web sitesine hangi kodu eklediğinizi bileceksiniz.

Kod Parçacıkları Genişletilmiş Eklentisinin Tanıtımı

Kod Parçacıkları Genişletilmiş eklentisi.

Code Snippets Extended eklentisi, WordPress içinde basit bir kod kitaplığı kurmanızı sağlayan ilginç bir araçtır. Özel kodu kaydetmenize, istediğiniz herhangi bir adla tanımlamanıza ve ardından birkaç tıklamayla yazılarınıza ve sayfalarınıza eklemenize olanak tanır.

Ayrıca eklenti, basit JavaScript veya CSS oldukları sürece kod snippet'lerinizin etkilerini önizlemenize de olanak tanır. PHP'yi de destekler, ancak bu snippet'ler genellikle aracın önizleme işlevini kullanarak iyi görüntülenmez.

Eklenti, genel olarak Divi Builder ile güzel bir şekilde çalışsa da, geçici bir çözüm gerektiren bir sorun var. Araç, varsayılan olarak düzenleyiciye yeni bir düğme ekler; bu, kitaplığınızın snippet'lerinden herhangi birini yayınınıza veya sayfanıza eklemenizi sağlar. Ancak Divi Builder'a geçerken düğme kaybolur. Düzeltme basit olsa da, bir dakika içinde daha fazlasını keşfedeceğiz.

Ana Özellikler:

  • Tüm özel kod snippet'lerinizi kontrol panelinizdeki merkezi bir kitaplığa kaydedin.
  • Benzersiz bir ad kullanarak her parçacığı tanımlayın.
  • Kitaplığınızdaki her öğeye kullanımı kolay kısa kodlar atayın.
  • WordPress düzenleyicideki yeni bir seçeneği kullanarak, koda dokunmanıza gerek kalmadan gönderilerinize ve sayfalarınıza snippet'ler ekleyin.

Fiyat: ÜCRETSİZ | Daha fazla bilgi

Gönderilerinizde ve Sayfalarınızda Kullanabileceğiniz Gönderi Parçacıkları Kitaplığı Nasıl Oluşturulur (2 Adımda)

Başlamadan önce, eklentiyi kurmanız ve etkinleştirmeniz gerekecek. Hazır olduğunuzda, bir numaralı adıma atlayın!

1. Adım: Kitaplığınıza Yeni Parçacıklar Ekleyin

Eklentiyi yükledikten sonra, WordPress kontrol panelinizde Parçacıklar adlı yeni bir sekme göreceksiniz. Tıklayın ve Parçacık Ekle seçeneğini arayın. Bir sonraki ekranda, kitaplık içindeki kodunuzu tanımlamak için bir ad belirleyebilecek ve kodun yürütülmesi için gereken tüm medya dosyalarını yükleyebileceksiniz:

Yeni bir snippet ekleme.

Unutmayın – kitaplığınızda olduğu sürece, bu sayfadan gerekli medyayı yüklemeseniz bile kod çalışmaya devam edecektir. Bu özellik yalnızca oradadır, böylece sayfanın altındaki Test düğmesini kullanarak kodunuzun etkilerini önizleyebilirsiniz.

Devam ederken, CSS, JavaScript, PHP ve jQuery kodunuzu yazacağınız bir düzenleyici de göreceksiniz. Ancak, her dil için belirli etiketlere sarılması gerekecektir. Referans için bazı hızlı örnekler:

<style>CSS goes between these tags.</style>
<?php PHP tags, on the other hand, are different, so keep that in mind. ?>
<script type="text/javascript"> Same goes for JavaScript, which uses this tag type. </script>
<script type="text/javascript"> jQuery(function($) {
$(document).ready(function(){
// jQuery uses the most complex tags – they need to be set up exactly as shown, and any code should go within this section.
});
});
</script>

Yeni bir snippet eklerken düzenleyicinin altında bu etiketlerin tümüne başvurabilirsiniz ve her dilin farklı bir dil gerektirdiğini hatırladığınız sürece bunları ezberlemenize gerek yoktur. Ayrıca, aynı snippet'te birden çok dil kullanabilirsiniz - yalnızca ilgili etiketlerini kullanarak bunları sarmaladığınızdan emin olun.

Kodunuzu yazmayı veya yapıştırmayı bitirdikten sonra, sayfanın altındaki Parçayı Kaydet düğmesini kullanın; kod, WordPress kontrol panelinizdeki Parçacıklar > Parçacıklar sekmesinde görünecektir:

Parçacıklar sekmesi.

Şimdi geriye kalan tek şey, hem WordPress düzenleyicisini hem de Divi Builder'ı kullanarak yeni snippet'inizi test etmek.

Adım #2: Parçacıklarınızı Divi Gönderilerinize ve Sayfalarınıza Ekleyin

Divi Builder'ı kullanmıyorsanız, normal WordPress düzenleyicisini kullanarak yazılarınızdan veya sayfalarınızdan herhangi birini açabilirsiniz. En üstte yeni bir Parçacık Ekle düğmesi göreceksiniz:

Bir snippet ekleyin.

Üzerine tıklamak, kitaplığınızdaki tüm öğeleri gösteren bir yer paylaşımı getirecektir ve istediğinizi seçebilirsiniz:

Hangi snippet'i eklemek istediğinizi seçme.

Şimdi eklenti kodu düzenleyiciye ekleyecek ve hazırsınız – bu kadar basit. Ancak Divi Builder kullanıyorsanız bu seçeneğe erişemezsiniz. Bu soruna geçici bir çözüm bulmanın en kolay yolu, gösterge tablonuzun Parçacıklar sekmesini yeni bir pencerede açmak ve eklemek istediğiniz kod için ilgili kısa kodu kopyalamaktır. Elinize geçtikten sonra Divi Builder'a dönün ve üzerinde çalıştığınız sayfaya bir Kod modülü ekleyin:

Kod modülü ekleme.

Girdikten sonra, kısa kodunuzu İçerik alanına yapıştırın ve değişikliklerinizi kaydedin:

Kod modülünüze bir kısa kod ekleme.

Şimdi, snippet'iniz her zamanki gibi çalışacak. Divi Builder'ı kullanmak sürece bir adım ekler, ancak yine de tüm kod parçacıklarınızı erişimi kolay bir dahili kitaplıkta saklayabilirsiniz.

Çözüm

Bizim gibiyseniz, tüm projelerinizde verimliliğe değer veriyorsunuz. Aynı kodu birden fazla sayfaya veya gönderiye elle eklemek mümkündür, ancak bu, zamanınızı iyi kullanmaz. Bunun yerine, kodu bir kez test etmek, kitaplığınıza kaydetmek ve daha sonra ihtiyacınız olduğunda sanal arka cebinizde tutmak çok daha iyidir.

Code Snippets Extended eklentisi tam da bunu yapmanızı sağlar. Basitçe kurun ve şu iki adımı izleyin:

  1. Kitaplığınıza yeni snippet'ler ekleyin.
  2. Parçacıklarınızı Divi yayınlarınıza ve sayfalarınıza ekleyin.

Divi web sitenize nasıl kod parçacıkları ekleyeceğiniz hakkında sorularınız mı var? Aşağıdaki yorumlar bölümünde sorun!

Makale küçük resmi, Andrii Bezvershenko / Shutterstock.com tarafından.