Bu Üç Eklentiyle WordPress'te Kısa Kod Oluşturun

Kısa kodlar, web sayfalarınıza, blog gönderilerinize ve kenar çubuklarınıza özel içerik eklemenin uygun bir yolunu sunar. Kısacası, belirli işlevleri gerçekleştirmek veya önceden var olan diğer öğeleri geliştirmek için WordPress sitenize küçük bir kod parçası yapıştırıyorsunuz.

Bu özellik, özellikle resim karuseli, gömülü videolardan oluşan bir oynatma listesi veya etkileşimli bir slayt gösterisi gibi animasyonlu bir öğeyi görüntülemeniz gerektiğinde kullanışlıdır. Kısa kodlar, site tasarımınız üzerinde kontrol sağlayarak onu hedef kitleniz için sezgisel bir platforma dönüştürür.

Daha fazla fikir istiyorsanız, kullanıcılarınız için duyarlı özellikler eklemeye başlamak için bu olası kısa kod listesine göz atın. Bu kısa kodları uygulamak için, harici kaynaklardan medyanın nasıl dahil edileceğine ilişkin talimatları içeren WordPress dizinine göz atın.

WordPress Siteniz için Üç Başlangıç ​​Dostu Kısa Kod Eklentisi

WordPress sitenize manuel olarak kısa kodlar uygulamanız gereken günler geride kaldı. Bir arka uç geliştirici değilseniz veya PHP dosyalarınıza bir çağrı işlevi yerleştirmeyi planlamıyorsanız, üç farklı eklenti kullanarak nasıl kısa kod oluşturulacağını öğrenmek için bu öğreticiyi okuyabilirsiniz.–Shortcodes Ultimate, Shortcoder ve Insert HTML Snippet .

Kısa kodları uygulamak için önerilen en iyi üç eklenti:

1. Kısa Kodlar Ultimate:

Hepsi bir arada kısa kod eklentisi dediğiniz şey budur. Sayfa/yazı düzenleyicinizi, kenar çubuğunuzu ve widget alanınızı geliştirmek için geniş bir akıcı öğeler koleksiyonuna sahiptir. Yükseltmek istiyorsanız, Shortcode Ultimate'ın görsel ve işlevsel öğeleri, bir dizi premium eklentinin yanı sıra her türlü temayla uyumludur.

50'den fazla benzersiz kısa koda erişiminiz var: Snippet'leri önizleyebilir, Gutenberg ile düzenleyebilir ve CSS düzenleyicisini kullanarak stil verebilirsiniz. Eksiksiz bir kılavuz için, açılır açılış ekranlarından yükleme ilerleme çubuklarına kadar çok çeşitli kullanılabilir kısa kodlara göz atmak için belge sitesini ziyaret edin.

2. Kısa kodlayıcı:

Bu kısa kod eklentisi kendini açıklayıcıdır. Biri işaretleme için diğeri ise öğeleri hayata geçirmek için hem HTML hem de JavaScript'te snippet'ler oluşturmanıza olanak tanır. Kısa kodları adlandırır, içeriğinize yapıştırır ve ardından Kısa Kodlayıcının gerisini halletmesini izlemek için sonuna [sc name= “my_shortcode”] eklersiniz. Daha fazla bilgi edinmek için SSS bölümüne bakın.

Bu, sizin için kısa kod testini otomatikleştiren güçlü bir eklentidir. Kod çerçevesiyle ilgili sorunları gidermeniz gerekirse, çıktıyı neyin etkilediğini bulmak için Görsel, Kod ve metin düzenleyicileri arasında geçiş yapabilirsiniz. Ayrıca, ileride kullanmak üzere işaretlemek için her bir parçacığın parametre değerlerini değiştirebilirsiniz.

3. HTML Parçacığı Ekle:

HTML, CSS ve JavaScript'i basit kısa kodlara dönüştürebilen bu eklenti kendisi için konuşur. Özel bir kapsayıcı aracılığıyla kısa kod widget'ları eklemek için güvenilir destek sunar. En iyi yanı, mevcut kısa kodların TinyMCE açılır menüsünde görünmesi, böylece artık onları kopyalamanız/yapıştırmanız gerekmemesidir.

HTML Snippet'i Ekle, kaydedilmiş snippet'leriniz WordPress düzenleyicide listelendiğinden, sayfalarınızda ve gönderilerinizde kısa kod entegrasyonunu hızlandırır. Trafiğinizden para kazanmayı veya blog etkileşiminizi artırmak için video yüklemeyi planlıyorsanız, Google Adsense'i kurmak kolaydır. Aynısı sosyal medya paylaşım aracı için de geçerlidir.

Shortcodes Ultimate ile Kısa Kod Ekleme

Eklenti dizinine gidin, "Yeni Ekle"ye basın ve 800.000'den fazla etkin yüklemeye sahip " WordPress Shortcodes Plugin — Shortcodes Ultimate " adlı bir eklenti arayın.

İlk önce Shortcodes Ultimate'ı kurun ve etkinleştirin. WordPress kontrol panelinizde, sol menünün altında Kısa Kodlar görmelisiniz. Koleksiyonun tamamını ortaya çıkarmak için "Mevcut kısa kodlar" üzerine tıklayın.

Ekstra Kısa Kodlar uzantısını gerektiren simge paneli gibi premium seçenekler olsa da, bence sadece ücretsiz kısa kod özelliklerini kullanarak pek çok şey başarabilirsiniz.

Bu eğitimin amacı için, yeni bir gönderiye nasıl kısa kod ekleneceğini göstereceğim. Örnek olarak, bir akordeon ile gitmeye karar verdim.

Bu sayfada, etkileşim kurulacak akordeon şablonunun bir önizlemesi vardır.–Bir akordeon dikey olarak gizli öğelerin bir listesini istifler ve tıklandığında panel başına bir öğeyi genişletir.

Şu anda başlıkların hepsi etiketli ancak daha sonra bunlara başka bir ad verebilirsiniz. Altındaki kısa kod, aşağıda gösterildiği gibi kopyalayıp sayfa/yazı düzenleyicinize yapıştırmanız gereken koddur:

Aşağı kaydırdığınızda, kısa kod seçeneklerinin nasıl iki bölüme ayrıldığını fark edeceksiniz: Biri akordeona bir CSS sınıfı atar, diğeri ise başlığı, görünür içeriği, stili ve simge türünü belirler.

Bu tablo, her seçeneğin kabul ettiği olası değerleri (parametreleri) içerir. Ayarları değiştirmek için bunlardan birini seçmeli veya varsayılan değer olarak bırakmalısınız.

Ardından, birkaç değişiklik yaptım: su_accordion sınıfını = “acc1”, stil = “basit”, su_spoiler başlığı = “Sayfa 1-3” ve simge = “ok” olarak ayarladım.

Peki, kısa kodu WordPress gönderi düzenleyicisine yapıştırdığımda ne olur? Tahmin edildiği gibi çalışıp çalışmadığını öğrenelim.

Şimdi Gönder > Yeni Ekle'ye gidin ve kopyalanan kısa kodu doğrudan herhangi bir paragrafa ekleyin. Önizleme'yi seçin ve sayfada hemen bir akordeon görünmelidir.

Şu anda çok fazla görünmüyor, ancak yine de bu eklentinin işi bizim tarafımızdan minimum çabayla yapabileceğini biliyoruz. Web sayfanızda ilginç efektler oluşturmak için farklı kısa kodları birleştirmenin keyfini çıkarabilirsiniz.

Kısa Kodlayıcı Kullanarak Kısa Kod Ekleme

Ek B: Kısa Kodlayıcı eklentisini gözlemleyelim. Bu eklentiyi yükleyerek ve etkinleştirerek başlayın. Eklentiler sayfanıza gidin ve Shortcoder'ı bulana kadar aşağı kaydırın. Kısa kodları yönet'e tıklayın, sizi varsayılan düzenleyiciye götürecektir.

Yeni güncellemeler için endişelenmeyin, yönetici kullanıcı arayüzünde v5.3.1 geliştirilmiş olsa da, küçük hata düzeltmeleri için burada değiliz.

Kısa kod oluştur düğmesini seçerek devam edin. Kısa kod oluşturucuda, son rötuşları ekledikten sonra kısa kodunuzu adlandırabilir veya pasajı kopyalayabilirsiniz.

İlerlemenizi kontrol etmek isterseniz kod, görsel ve metin düzenleyici arasında da geçiş yapabilirsiniz. Görsel düzenleyicinin, gönderileri yayınlamak için tasarlanana nasıl büyük ölçüde benzediğine dikkat edin. Izgaralar, akordeonlar, düğmeler, araç ipuçları ve hatta portföyler için önceden hazırlanmış kısa kodlara sahip olmak oldukça uygundur.

Kısa kod içeriğini metin kutusuna girin. Gerçek kodunuz HTML, CSS veya JavaScript'te olmalıdır, bu nedenle kodu kullanılamaz hale getirmeyeceğini bilmiyorsanız değiştirmeyin.

Komut dosyasının çalıştığını doğrulamak için, kodu önizlemek üzere içerik alanına yapıştırmanız yeterlidir. Bunu akılda tutarak, bir YouTube videosunu paylaşmak istersem, videonun URL'sini alır ve içerik kutusuna HTML biçiminde bir gömme eklerdim.

Kısa kodun nasıl görüneceğine dair bir örnek:

[sc adı= “Youtube Videosu” genişlik = “560” yükseklik = “340” id= “fjIKmhbfh6w” ]

*Sayılar video boyutuna göre değişir.

Kısa kod parametreleri ekle açılır menüsünde, WordPress bilgileri, kısa kodlu içerik, özel alanlar ve daha fazlasını içeren ancak bunlarla sınırlı olmayan dinamik değerler ekleme seçeneği sunulur.

Temelde burada yaptığınız şey, mevcut parametreleri kendi parametrelerinizle değiştirmek. Örneğin, tarih ve saati ayarlamak istiyorsanız, gün, ay veya yılı seçip bir değer atayabilirsiniz.

Kısa kodlayıcı, kullanıcılara kısa kod ayarlarını yapılandırma olanağı sağlar.

Yeni bir görünen ad girebilir veya şu anda diğer sayfalarda kullanımda olan kısa kodları geçici olarak devre dışı bırakabilirler. Kullanılabilirlik testi için kısa kodu yalnızca mobil veya masaüstü cihazlarda yürütülecek şekilde kısıtlayabilirsiniz.

Açılacak son bir özellik, kısa kodlarınıza yeni etiketler eklemektir. Bu, çok fazla oluşturmanız durumunda snippet'lerinizi takip etmenize yardımcı olacaktır. Her birinin görsel öğeleri ve işlevleriyle eşleşecek şekilde etiketleneceği Tüm Kısa Kodlara gidin.

Herhangi bir veri kaybını önlemek için sık sık kaydetmeye özen gösterin. Her şey söylenip yapıldığında, "Yayınla"ya basın ve kısa kodlarınız hemen yayına girsin.

HTML Parçacığı Ekle'de Kısa Kod Oluşturma

XYZScripts tarafından HTML Snippet'i Ekle, incelemeye değer başka bir kısa kod eklentisidir. Bir kez daha, eklentiyi indirip etkinleştirmeniz gerekir. Kendi HTML kısa kodunuzu oluşturmak için XYZ Html'den HTML Parçacıkları > Yeni HTML Parçacığı Ekle'yi seçin.

Bu, nispeten konuşursak, en basit eklentidir, çünkü kullanıcıların yalnızca onu bir izleme adıyla etiketlemeleri ve metin alanını benzersiz HTML kodlarıyla doldurmaları gerekir. Elbette, açılış/kapanış etiketleri orada olduğu sürece her zaman CSS ve JavaScript ekleyebilirsiniz.

Gutenberg Kısa Kod bloğuyla birleştiğinde, widget alanınıza, gezinme menünüze veya gönderi içeriğinizin arasına parçacıklar ekleme esnekliğine sahipsiniz.

Ne yaptığını açıklamak için, sizi kendi blogumdan örnek bir parçaya yönlendireceğim. Örnek olarak, fareyle üzerine gelme modunda bir görüntünün üzerinde metin görüntüleyen bir görüntü bindirmesi için CSS kodunu kaydettim. Doğru sözdizimini kullanırsanız (örneğin <style>, <script> veya <body>) bir tılsım gibi çalışır.

HTML kod düzenleyicisinde saklanan bir pasaj örneği aşağıda verilmiştir:

“Güncelle”ye bastığınız anda eklenti, snippet'inizi aynı etikete sahip bir kısa kod olarak otomatik olarak saklar.

Ayarlar açısından, HTML Parçacıkları Ekle, parçacıkları oluşturuldukları tarihe göre artan veya azalan düzende düzenlemenize olanak tanır. Sitenizin yavaşlamasını önlemek için sayfa veya gönderi başına kaç kısa kodun görüntüleneceğini kısıtlayabilirsiniz.

Premium versiyonu merak ediyorsanız ve detaylı karşılaştırmasını görmek istiyorsanız “Hakkında” sekmesi altında buna ulaşabilirsiniz. Ücretsiz eklenti, kullanıcı tabanlı ayrıcalık yönetimini desteklemese de, çoğu temel görevi gerçekleştirmek için yeterlidir.

Anlaşılır bir şekilde, premium plan, cihazları hedeflemeden snippet'leri dışa/içe aktarmaya kadar daha fazla hizmet sunar, ancak bunların bu eğitim için gerekli olduğunu düşünmüyorum.

Elbette, Insert HTML Snippet'i deneyin, çünkü sizin için kod parçalarını derler. Yine de bir püf noktası var, yerleşik şablon öğelerinin olmaması nedeniyle gerçekten yeni başlayanlar için uygun değil.–Temel kodun ne yaptığını biliyor olmalısınız, aksi takdirde birkaç teknik sorunla karşılaşabilirsiniz.

Hangisi Daha İyi: Kısa Kodları Manuel Olarak Ekleme veya Gutenberg Kısa Kod Bloğu'nu Kullanma?

Kısa kodlar, WordPress API'sinin 2.5 sürümünde yayınlandı ve kullanıcıların "[ ]" ile gösterildiği gibi köşeli parantez içine alınmış bir kod parçacığı oluşturmasına izin veriyor. Her ikisi de önceden oluşturulmuş öğeleri ayrı bir konumda depolayabildiğinden, tıpkı bir kenar çubuğu widget'ı gibi davranır.

Kısa kodlar çok çeşitli dinamik işlevler sağlasa da, programlama deneyimi olmayanlar için gezinmek biraz kafa karıştırıcı olabilir. Bu, Gutenberg Blok Düzenleyici yayınlandığında değişti ve kullanıcılara bir sayfada istedikleri şekilde düzenlemeleri için çok sayıda blok şablonu seçeneği verdi.

Bu, kullanıcıların Kısa Kod bloğuna hızlı bir şekilde kopyalayıp yapıştırarak bir kısa kod ekleyebildiği anlamına geliyordu. Görünüşe göre eski yöntem, kısa kodu ayrı bir satıra yapıştırmanız gerektiğinden biraz farklıdır. Ancak, herkes Gutenberg hayranı değildi; birçok kullanıcı bunun yerine klasik içerik düzenleyiciye geri döndü.

Çoğu durumda, insanlar, başka bir siteden ses almak gibi anlamlı görevleri gerçekleştirebilecek kısa kodlar oluşturmak için eklentiler kurdular. Bu, WPForms, OptinMonster ve hatta WooCommerce'de görüldüğü gibi popüler eklentiler için geçerlidir.

Orijinal parçacıklar oluşturmak için istenen çıktıyı üretmek için özel işlevler yazmanız gerekiyordu. Her iki durumda da, kısa kod, kodun kendisini değiştirmişsiniz gibi aynı sonucu elde eder, ancak elbette, sitenizi potansiyel olarak bozma riski olmadan. Tema dosyalarınızı düzenlemekten kesinlikle daha iyi bir alternatiftir.

Kısa Kodlarla WordPress Tasarımında Kısayol Kullanın

Kısa kodlar, yalnızca site bakımında değil, aynı zamanda yeni özellik entegrasyonunda da zaman kazanmanıza yardımcı olabilir. Bu ek işlevsellik ile, tek tek parametreleri ayarlayarak ve WordPress düzenleyicinize snippet'ler ekleyerek içeriğinizi kolayca geliştirebilirsiniz.

Kullanıcı dostu öğeler söz konusu olduğunda, çok çeşitli seçeneklere erişebilirsiniz.–Ücretsiz veya abone rotasına indiğinizden bağımsız olarak WordPress'te çok sayıda kısa kod eklentisi vardır. Kısa kodlar, diğer eklentiler gerekli eylemleri gerçekleştirmek için onlara güvenebileceğinden, sitenizin bazı bölümlerinde ince ayar yapmak için özellikle yararlıdır. Bu nedenle, sahip olduğunuz her site için bir kısa kod eklentisi kurmanız önemlidir.

Bu ayrıntılı eğitimde, kodlama deneyimi olmayan kişilerin sitelerine özel medya eklemeyi hızlıca öğrenebilecekleri üç kısa kod eklentisi önerdim: Bunlar Shortcode Ultimate, Shortcoder ve Insert HTML Snippet'ti.

Ve hepsinden iyisi, diğer özelliklere müdahale etmeyeceklerinden kısa kodları kullanmanın gerçek bir dezavantajı yoktur. Aniden çalışmayı bırakırlarsa veya biraz düzenlemeye ihtiyaç duyarlarsa, bunları her zaman kaldırabilirsiniz.

Alternatif kısa kod eklentileri önermek isterseniz, aşağıda yorum yapmaktan çekinmeyin ve bu eklentilerin WordPress özelleştirmenize nasıl katkıda bulunduğunu tartışın.