Ana İçeriğe Geç

WordPress'te kod parçacıkları nasıl paylaşılır?

Divi: Kullanılacak en kolay WordPress teması

Divi: Tüm zamanların en iyi WordPress teması!

daha fazla 600.000 indirmeler, Divi, dünyanın en popüler WordPress teması. Tamamen, kullanımı kolay ve 62 ücretsiz şablonlardan daha fazlasını sunuyor. [Önerilen]

Programlama hakkında yazılım veya hile yaparsanız, kesinlikle kod snippet'lerini paylaşmak isteyeceksiniz. Bu kod snippet'lerini paylaşmanın bu yolu hızlı bir şekilde bir araya getirmelerine yardımcı olabilir. Ancak, gerekli tüm biçimlendirme ile kod paylaşımı varsayılan olarak mümkün değildir. Biçimlendirme ile kastettiğim, sözdizimi vurgulamasıdır. Yine de, yapmak oldukça kolay bir şey.

Neyse ki, eğer divi kullanıyorsanız, bu parçacıklara özel stiller eklemek için bunu manuel yapmak için entegre bir yöntem olduğunu bilmelisiniz. Ek olarak, Divi'de estetik ve işlevsel kod parçacıkları oluşturma işlemini gerçekten basitleştirebilecek üçüncü taraf eklentileri ve kaynakları vardır.

Bu derste, size kod snippet'lerini Divi'de (elle) nasıl paylaşacağınızı göstereceğim. Ayrıca, sizi bir sonraki seviyeye götürecek olan Divi Builder ile kod parçacıklarının nasıl tasarlandığını göstereceğim.

anket

İşte bu eğitimdeki olası snippet tasarımlarına genel bir bakış.

Kod parçacıklarını içeren Kod Parçacık Kutuları, manuel modu ekledi.

Eğitim için önkoşullar

Bu ders için ihtiyacınız olan tek şey yüklü ve aktif olan Divi teması. Yeni bir sayfada Divi Builder'ı kullanarak sıfırdan kod parçası örnekleri oluşturacağız.

Başlamak için yeni bir sayfa oluşturun ve Divi Builder'ı ortak arayüze yerleştirin. Sonra "Sıfırdan Yap" seçeneğini seçin.

Şimdi gitmeye hazırsın!

Divi'deki kod parçacıkları için özel kutu tasarımı

Kod snippet'imiz bir metin modülünde bulunduğundan, divi oluşturucuyu metin modülünün içine ve çevresine tasarım öğeleri eklemek için kullanabiliriz. Bu tasarım için, kod snippet'i için bir etiket görevi görecek bir özet modülü kullanacağız. Ardından, imleci metin modülünün soluna yerleştirecek ve yerleştireceğiz. Sonra kod snippet'inizin metin modülünü stilize edeceğiz.

Bölüm, satır ve sütun oluşturma

Önce bir satırlık sütunu olan yeni bir bölüm oluşturmalıyız.

Elementor ile web sitenizi kolayca oluşturun

Elementor, profesyonel bir görünüme sahip herhangi bir web sitesi tasarımını kolayca oluşturmanıza olanak sağlar. Kendin yapabileceğin için pahalı ödemeyi kes. [Ücretsiz]

Ardından, satır parametrelerini aşağıdaki gibi güncelleyin:

Oluk genişliği: 1
Özel dolgu: Üstte 0px, altta 0px

Metin modülünü ekle

Ardından satıra bir metin modülü ekleyin.

İçeriği varsayılan olarak bırakabilirsiniz. WordPress kod parçacıklarımızı daha sonra ekleyeceğiz. Şimdilik, aşağıdaki metin parametrelerini güncelleyerek metin modülünü modelleyelim:

Arka Plan Rengi: #eff0f1 Metin Rengi: #000000 Özel Marj: 60px Sol Özel Dolgu: 3% Yukarı,% 3% Aşağı,% 3 Sol,% 3 Sağ

Üst kenarlığın genişliği: 10px Üst kenarlığın rengi: #7cda24

Kod pasajı etiketini oluşturma

Kod pasajı etiketini oluşturmak için, bulanık bir modül kullanacağız. Bu, görüntülenen kod dilinin yanına bir sunum metni simgesi (veya özel bir resim simgesi) eklemenizi sağlar.

En iyi WordPress temalarını ve eklentilerini mi arıyorsunuz?

Envato'daki en iyi eklentileri ve WordPress temalarını indirin ve web sitenizi kolayca oluşturun. 49.720.000 indirme işleminden daha fazla. [ÖZEL]

Bir sunum modülü oluşturun ve onu metin modülünün üzerine sürükleyin. Ardından, aşağıdaki sunum ayarlarını güncelleyin:

Başlık: css İçerik: [hayali içeriği kaldırın] Simgesini kullanın: YES Simgesi: ekran görüntüsüne bakın

Ardından tasarım parametrelerini aşağıdaki gibi güncelleyin:

Arka plan rengi: #1b2426 Simge rengi: #7cda24 Görüntünün konumu / simgesi: sol Yazı tipi boyutu: 20px Metin başlığı Renk: #ffffff Metin boyutu: 16px

Başlık satırı yüksekliği: 1.3em Genişlik: 100px Özel kenar boşluğu: -44px altta, -50px soldaki Özel dolgu: 10px üstte, 2px sağdaki, 15px, solda 15px

Daha fazla kod parçacığı kutusu tasarımları oluşturmak için yinelenen bölüm

Bu, ilk kod kutusu tasarımımızı desteklemektedir. Sadece kod bloğu tasarımını içeren bölümü kopyalamalıyız ve farklı bir kodlama dili için yeni bir kod bloğu oluşturmak için etiketi ve renkleri güncellemeliyiz. Bu elbette isteğe bağlıdır, ancak bir sayfaya farklı kod parçacıkları eklemeyi planlıyorsanız, her biri için farklı bir renk şeması olması yararlı olacaktır.

Örneğin, bölümü çoğaltın ve Blurb modülü ayarlarını açın.

Javascript için "js" başlığını güncelleyin.

Ardından Görüntü Rengi / Simgesine sağ tıklayın ve Bul ve Değiştir'i seçin.

Güncellenmiş arama ve değiştirme seçenekleri:

İçinde: bu bölüm Şununla değiştir: [yeni renk] Tümünü değiştir: bulunan tüm değerleri değiştir kontrol et

Artık JS kod parçacıkları için yeni bir kod parçacıkları bloğunuz var.

WordPress için popüler kod türleri için kod pasajı alanlarına bir örnek.

Manuel kod parçacıklarına sözdizimi vurgulamak için Prettify Code eklentisini kullanma

Peki, manuel yöntemle, hemen metni yapıştırabilir ve iletebilirsiniz. Prettify Kod eklentisi anında tüm ön etiketlere vurgulanan kodu ekleyecektir. Bu eklentinin güzelliği, kesinlikle hiçbir özelleştirme gerekmemesidir. Tek yapmanız gereken eklentiyi indirmek ve etkinleştirmek.

İşte kodun Active Prettify Code ile nasıl görüneceğine bir örnek.

Çevrimiçi Mağazanızı kolayca oluşturun

WordPress'te fiziksel ve dijital ürünlerinizi satmak için ücretsiz WooCommerce, en iyi e-ticaret eklentilerini indirin. [Önerilen]

Code Prettify geliyor Google tarafından ve ayrıca tüm bu harika özleri stilize etmek için kullanılır. stackoverflow.com.

Bitirmek için

Divi'de pasajları göstermek zor olmak zorunda değil. WordPress tarafından sağlanan ön ve Word kod etiketlerini kullanarak kod parçacıklarını el ile eklemek, çoğu HTML olmayan kod parçacıklarının işini gerçekleştirir, ancak önce kod pasajını bir kodlayıcıda çalıştırmanız gerekir emin olmak için html. Ek olarak, metin modülü ayarlarını kullanarak kod pasajının metin stilini daha da özelleştirebilirsiniz. Ve manuel kod parçacıklarınıza bir vurgu eklemek için Code Prettify'yi de unutmayın.

Düzenli olarak kod parçacıklarını paylaşanlar için, SyntaxHighlighter eklentisini kullanmak muhtemelen en iyi seçimdir. Her neyse, Divi Builder'ı kullanarak snippet'inize daha yaratıcı tasarımlar ekleyebileceksiniz.

Bonne şans.

Bu makale yorumları 0 içeriyor

YORUM BIRAKIN

E-posta adresiniz gösterilmeyecektir. Doldurulması zorunlu alanlar * ile işaretlenmiştir *

Bu site, istenmeyenleri azaltmak için Akismet'i kullanıyor. Yorum verilerinizin nasıl kullanıldığı hakkında daha fazla bilgi edinin..

Başa dönüş
2 hisseleri
hisse2
cıvıltı
Enregistrer