WordPress’te kod nasıl görüntülenir – 3 yöntem (eklenti ile ve eklenti olmadan)
Sitenizde kod parçalarını görüntülemek ister misiniz, ancak bunu yapmanın en iyi yolundan emin değil misiniz? Bu gönderi sizin için. Bu kılavuzda, WordPress’te kodları kolayca görüntülemek için çeşitli yöntemler göstereceğiz. Kodu WordPress’te görüntülemek neden zor? Kullanıcılarınız için yararlı bir kılavuz yayınladığınız bir siteniz varsa, kod görüntülerini blog yayınınızda görüntülemeniz gerekebilir. Sorun kodu eklemek kadar basit değil. Aslında, örneğin blog yayınınıza HTML görüntüleri koyarsanız, işe yaramaz. Bildiğiniz gibi, WordPress metin editörleri HTML bazlı editörlerdir, böylece kodları otomatik olarak işler ve yazdırırlar.
Aynı şekilde, kısa bir kodu kopyalayıp eklerseniz, WordPress yalnızca yazılı bir kısa kodu görüntülemek yerine işlevini görüntüler. Kodu görüntülemek istiyorsanız ve zayıf biçimlendirmeye neden olabilirseniz bu ideal değildir. Örneğin, WordPress Classic Editor aracılığıyla makalenize bazı HTML kodlarını yerleştirmek istiyorsanız, editör kodu işleyecek ve içerikte görüntüleyecektir. Bu sorunu çözmenin en iyi yolu, kod snippet’iniz için özel bir stil kullanmaktır. Ve bu makalede göstereceğimiz şey bu. WordPress’te kod nasıl görüntülenir WordPress’te kodu görüntülemek için 3 ana yöntem vardır:
WordPress Düzenleyicisi Kullanma
Gutenberg
Klasik editör
Özel bir WordPress eklentisi kullanma
Kodu manuel olarak girin
Her yönteme bakalım ve sitenizdeki kodu adım adım nasıl görüntüleyeceğinizi gösterelim. 1) WordPress düzenleyicisini kullanarak, WordPress’te kodu görüntülemenin en kolay yolu WordPress düzenleyicisini kullanmaktır. Bu bölümde, Gutenberg ve Klasik Editör kullanarak nasıl yapılacağını göstereceğiz. 1.1) İlk Gutenberg, WordPress sitenizi girin ve kodu görüntülemek istediğiniz yazıyı açın. Kod adı verilen bir blok arayın ve seçin. Kodunuzu oraya yazmaya başlayabilirsiniz ve tamamlandıktan sonra gönderiyi yayınlayın. Ön uçta kodu göreceksiniz.
Fırça yükleniyor
Çeşitlilik
Ek CSS sınıfı
İlk sıra numarası
Sıra numarası yatağı
Sekme boyutu
Başlık
Temel bir kullanıcıysanız, varsayılan yapılandırma yeterince iyidir, oysa gelişmiş bir kullanıcıysanız, ayarları görmek ve ihtiyaçlarınıza göre ayarlamak isteyebilirsiniz. Ayarları değiştirdikten sonra değişiklikleri kaydedin. Önizleme bölümünün doğrudan altında, örnek kodunu vurgulama efekti ile göreceksiniz.
Bu noktada, işlem kullandığınız düzenleyiciye bağlı olarak değişir. İkisini de görelim. 2.1) Gutenberg Editörü Eklentiyi etkinleştirdikten sonra, editörde SynTaxHighLighter kodu adlı yeni bir blok göreceksiniz. Gönderinizde çeşitli kod türlerini görüntülemek için bloğu kullanabilirsiniz. Sadece bloğu seçin ve ayarlar panelinde, görüntülemek istediğiniz dili seçme seçeneğini göreceksiniz. Seçebileceğiniz düzinelerce dil olduğunu göreceksiniz. Bu örnek için CSS kod görüntülerini görüntüleyeceğiz, böylece CSS’yi açılır menü seçeceğiz. Blok bölümünün kod dilini de değiştirebilirsiniz. Kod dilini seçtikten sonra komut dosyasını blokta yapıştırın. Ayrıca, varsayılan eklenti ayarlarını sağ paneldeki devam eden bölümden ayarlayabilir ve kuvveti değiştirebilirsiniz. Bittiğinde, gönderiyi yayınlayın (veya güncelleyin) ve sonuçları görmek için gönderiyi ön uçtan kontrol edin. Yukarıdaki ekran görüntülerinde görebileceğiniz gibi, yayınımızdaki CSS kodunu vurgulamayı başardık. Bu şekilde, WordPress’te istediğiniz kodu sadece blok ayarlarından doğru kod dilini seçerek görüntüleyebilirsiniz. 2.2) Klasik Editör Gutenberg editörü kullanmıyorsanız, dil kodunu manuel olarak girmelisiniz. Klasik bir düzenleyici kullanarak SynTaxHighlight kodunu görüntülemek için bir kısa kod kullanacağız. Kısa koda alışkın değilseniz, bu kılavuzu görmenizi öneririz. İlk olarak, herhangi bir yayını açın veya klasik bir düzenleyici kullanarak yeni bir gönderi oluşturun. Örneğin, HTML içeriğini görüntülemek için, kısa bir kod [html] [/html] kullanın ve kodu aşağıdaki gibi ekleyin ve yayın yayınlayın. [Html] <a href = 2.quadlayers.com kendimiz Gönderiyi ön uçtan kontrol ederseniz, vurgulanan HTML kodunu görürsünüz.
HTML gömme özelliğini bu şekilde kullanabilirsiniz, ancak diğer kod dili için de aynısını yapabilirsiniz. Örneğin, PHP snippet’lerini görüntülemek için, CSS’yi görüntülemek için kısa kodlar [PHP] [/PHP], kısa kod [CSS] [/CSS] kullanın. Bu şekilde kısa kodları değiştirebilir ve kod görüntülerini görüntüleyebilirsiniz Seviyorsun. Bir makalede bir PHP kodu snippet örneğini gösterelim: [php] [/Php]
Gördüğünüz gibi, kodu değiştirebilir ve WordPress sitenizdeki görüntüleri görüntüleyebilirsiniz. Not: Kodunuzun yazı tipini, yazı tipi boyutunu ve yazı tipi ağırlığını değiştirmek istiyorsanız, SynTaxHighlight eklentisi için özel bir CSS sınıfı eklemeniz gerekir. Bunu eklenti ayarlarından yapabilir ve ardından ayarlamak için WordPress ayarından veya tema düzenleyicisi aracılığıyla CSS kodunu ekleyebilirsiniz.
ve etiketlerini kullanacağız. İlk olarak, metninizi HTML olarak değiştirmek için harici bir cihaz kullanmanız gerekir. Motherheff kullanacağız, ancak istediğiniz diğer HTML kodlayıcıyı kullanabilirsiniz. Ardından, HTML görüntülerinizi kod çözme kutusuna yapıştırın, araç size bir daire sürümü verecektir. Bu örnek için kodumuz:
portföyümüzü ziyaret edin
Kod dostu görünmeyecek, ancak işe yarayacak. Ardından, WordPress kontrol panelinizde klasik bir düzenleyici açın ve metin düzenleyicisine geçin. BT. Örneğin, örnek kodumuz şöyle görünecektir: Ardından, bir gönderi yayınlayın ve ön uçta, vurgulanan kodu aşağıda gösterildiği gibi göreceksiniz.
Bu şekilde, kodu her WordPress gönderisinde manuel olarak görüntüleyebilirsiniz. Not: Gutenberg kullanıcıları bu yöntemi kullanamayacaklar. Bunu sadece klasik bir editör kullanarak yapabilirsiniz. Bonus: Kodun bir paragrafta nasıl görüntüleneceği WordPress'in gönderisinde kodu görüntülemenin yanı sıra, bir başka ilginç alternatif de kodu bir paragrafta görüntülemektir. Bu bölümde size nasıl yapılacağını göstereceğiz. Bunun için küçük bir CSS ve HTML kullanacağız. İlk olarak, web sitenize basit bir CSS kodu eklemeniz gerekir. WordPress ayarlamalarını veya kod snippet'leri gibi özel site eklentilerini kullanabilirsiniz. Bu demo için, görünüm> özelleştir> ek CSS'ye gideceğiz ve kodumuzu oraya yapıştıracağız. Kod {yazı tipi boyutu: 1.2em; Renk: #1E1E1E; Pozisyon: göreceli; Sınırlar: 4px; Arka plan: #e1e1e1} Değişiklikleri yayınladıktan sonra, düzenlemek istediğiniz gönderiyi açın. Ardından, vurgulamak istediğiniz içeriği seçin. Örneğin, bu paragraftaki kod olarak "S TART A Blog" ifadesini göstereceğiz. Metin editörlerine geçin ve içeriği ve etiketlerine sarın. Örneğimizi takip ederek, kodumuz şöyle görünecektir: Blog'u başlat Ardından, değişiklikleri yayınlayın veya güncelleyin ve değişiklikleri görmek için cepheyi kontrol edin. Bu şekilde, belirli kelimeleri veya cümleleri vurgulayabilirsiniz. Kodun CSS stilini değiştirmek istiyorsanız, lütfen burada kullandığımız CSS komut dosyasını düzenleyin. Sonuç Genel olarak, sitenizdeki kodu görüntülemek, komut dosyasını eklemek kadar basit değildir. Ancak, bu kılavuzda, WordPress'te kodları görüntülemek için size çeşitli yöntemler gösterdik: WordPress İçerik Düzenleyicisi Kullanma Özel bir eklenti ile Manuel olarak Hızlı ve kolay bir çözüm istiyorsanız, WordPress içerik düzenleyicisi size herhangi bir yayındaki komut dosyalarını görüntülemek için bir araç sağlar. Ancak, daha fazla ayarlama seçeneğine ihtiyacınız varsa, SyntaxHighLighLighLighLighLight eklentisi en iyi seçimdir. Öte yandan, kodlama becerileriniz varsa, kod snippet'inizi manuel olarak ekleyebilir ve ön uçtaki stili küçük bir CSS ile ayarlayabilirsiniz. Son olarak, bir paragraftaki belirli cümleleri veya kelimeleri vurgulamak istiyorsanız, metni etiketine sarabilirsiniz. Sitenizdeki kodların nasıl düzenleneceği hakkında daha fazla bilgi için, WordPress'te HTML'yi düzenlemek için aşağıdaki kılavuza bakın. Bu gönderinin yararlı olduğunu düşünüyor musunuz? Sitenizdeki kodu hangi yöntemi görüntülemeyi seviyorsunuz? Aşağıdaki yorum bölümünde bize bildirin.
