Herhangi bir yazılım veya programlama ipucu sunuyorsanız, kesinlikle kod parçacıklarını paylaşmak isteyeceksiniz. Kod parçacıkları paylaşmanın bu yolu, hızlı bir şekilde bir uygulama oluşturmalarına yardımcı olabilir. Ancak, kodu gerekli tüm biçimlendirmeyle paylaşmak varsayılan olarak mümkün değildir. Biçimlendirme ile kastettiğim, sözdizimi vurgulamadır. Yine de yapılması oldukça kolay bir şey.
Neyse ki, eğer divi kullanıyorsanız, bu kod parçacıklarına özel stiller eklemek için bunu manuel olarak yapmanın yerleşik bir yolu olduğunu bilmelisiniz. Ayrıca eklentiler ve kaynakların bulunduğu Divi'de estetik açıdan hoş ve işlevsel parçalar oluşturma sürecini gerçekten basitleştirebilecek üçüncü taraf uygulamalar.
Bu eğitimde, Divi'de (manuel olarak) kod parçacıklarının nasıl paylaşılacağını göstereceğim. Ayrıca sizi bir sonraki seviyeye taşıyacak olan Divi Builder ile nasıl pasaj blokları tasarlayacağınızı da göstereceğim.
anket
Bu öğreticide olası pasaj tasarımlarına genel bir bakışı burada bulabilirsiniz.
Kod parçacıkları içeren Kod Parçacığı Kutuları manuel mod ekledi.
Eğitim için önkoşullar
Bu eğitim için tek ihtiyacınız olan Divi teması, kurulu ve aktif. Yeni bir sayfada Divi Builder'ı kullanarak örnek kod parçacıklarını sıfırdan oluşturacağız.
Başlamak için yeni bir sayfa oluşturun ve Divi Builder'ı genel arayüzde dağıtın. Ardından "Sıfırdan oluştur" seçeneğini seçin.
Şimdi gitmeye hazırsın!
Divi'de kod parçacıkları için kişiselleştirilmiş bir kutu tasarımı
Kod parçacığımız bir metin modülünde bulunduğundan, metin modülüne (ve çevresine) tasarım öğeleri eklemek için divi oluşturucuyu kullanabiliriz. Bu tasarımda, snippet için bir etiket görevi görecek bir özet modülü kullanacağız. Ardından, imleci metin modülünün soluna biçimlendirip konumlandıracağız. Ardından, pasajımızın metin modülünün stilini belirleyeceğ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.
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.
bırakabilirsin içindekiler varsayılan olarak. 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 kenar boşluğu: 60 piksel sol Özel dolgu:% 3 üst,% 3 alt,% 3 sol,% 3 sağ
Üst kenarlık genişliği: 10 piksel Üst kenarlık rengi: # 7cda24
Snippet etiketini oluşturma
Snippet etiketini oluşturmak için bir blurb modülü kullanacağız. Bu, görüntülenen kod dilinin yanına bir metin simgesi (veya özel resim simgesi) eklemenizi sağlar.
Bir sunum modülü oluşturun ve bunu 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] Simge kullan: EVET Simge: 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 Resim / Simge Konum: sol Yazı Tipi Boyutu: 20px Metin Başlığı Rengi: #ffffff Metin Boyutu Başlığı: 16px
Başlık Satırı Yüksekliği: 1.3em Genişlik: 100px Özel Kenar Boşluğu: -44px Alt, -50px Sol Özel Doldurma: 10px Üst, 2px Alt, 15px Sol, 15px Sağ
Daha fazla pasaj kutusu tasarımı oluşturmak için bölümü çoğaltın
Bu, ilk kod kutusu tasarımımızı destekler. Şimdi, kod bloğu tasarımını içeren bölümü çoğaltmamız ve farklı bir kodlama dili için yeni bir kod bloğu oluşturmak için etiketi ve renkleri güncellememiz gerekiyor. Bu elbette isteğe bağlıdır, ancak bir sayfaya farklı pasajlar eklemeyi planlıyorsanız, her biri için farklı bir renk şemasına sahip olmak yardımcı olur.
Ö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ü / Simge Rengi üzerine 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ümde Değiştir: [yeni renk] Tümünü değiştir: kontrol edin bulunan tüm değerleri değiştirin
Artık JS parçacıkları için yeni bir parçacık bloğunuz var.
İşte WordPress için popüler kod türleri için bir snippet kutusu örneği.
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 vurgulanan kodu anında tüm "ön" etiketlerine 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.
Code Prettify geliyor Google tarafından ve aynı zamanda tüm bu harika pasajları sitenizde stilize etmek için de kullanılır. stackoverflow.com.
Bitirmek için
Divi'de kod parçacıklarını görüntülemek zor olmak zorunda değil. Snippet'leri WordPress tarafından sağlanan pre ve Word kod etiketlerini kullanarak manuel olarak eklemek, çoğu html olmayan snippet için işi yapar, ancak önce snippet'i bir kodlayıcı üzerinden çalıştırmanız gerekir. html emin olmak için. Ek olarak, metin modülü ayarlarını kullanarak parçacık metin stilini daha da özelleştirebilirsiniz. Ve manuel snippet'lerinize vurgu eklemek için Code Prettify'ı unutmayın.
Düzenli olarak snippet paylaşanlar için, SyntaxHighlighter eklentisini kullanmak muhtemelen en iyi seçeneğinizdir. Her iki durumda da, Divi Builder'ı kullanarak parçacıklarınıza her zaman daha yaratıcı tasarımlar ekleme seçeneğiniz olacaktır.
Bonne şans.
