Divi Blog Gönderi Şablonunuz için Yorum Geçişi Nasıl Oluşturulur

Yorumlar, herhangi bir blog yazısı şablonunun önemli bir parçasıdır. Bununla birlikte, bazı ziyaretçiler için, gönderideki içeriğin geri kalanını kaydırmaya çalıştıklarında uzun bir yorum bölümü bir sorun haline gelebilir. Bir yorum geçişi oluşturmak, bu soruna harika bir çözümdür. Kullanıcılara yorumları değiştirme (gösterme veya gizleme) olanağı vererek, başlangıçta gönderinizin daha özlü bir sürümünü sunarak ve onlara yorumları istedikleri zaman gösterme veya gizleme olanağı sağlayarak kullanıcı deneyimini iyileştirebilirsiniz.

Bu eğitimde, Divi blog yazısı şablonu yorumlarınız için nasıl bir yorum geçişi oluşturacağınızı göstereceğiz. Divi Builder'ı kullanarak yorum geçiş çubuğunu oluşturduğumuzda, geçiş çubuğuna tıklandığında yorum alanını göstermek/gizlemek için gerekli kodu ekleyeceğiz.

Başlayalım!

Gizlice Bakış

İşte bu eğitimde oluşturacağımız tasarıma hızlı bir bakış.

Şablonu ÜCRETSİZ olarak indirin

Bu eğitimdeki yorum geçiş gönderi şablonunu elinize almak için, önce aşağıdaki düğmeyi kullanarak indirmeniz gerekir. İndirmeye erişmek için aşağıdaki formu kullanarak Divi Daily e-posta listemize abone olmanız gerekir. Yeni bir abone olarak, her Pazartesi daha da fazla Divi iyiliği ve ücretsiz bir Divi Düzen paketi alacaksınız! Zaten listedeyseniz, aşağıya e-posta adresinizi girin ve indir'i tıklayın. "Yeniden abone olmayacaksınız" veya fazladan e-posta almayacaksınız.

Ücretsiz İndirme Şablonu Nasıl Yüklenir

Divi Theme Builder'a gidin

Şablonu yüklemek için WordPress web sitenizin arka ucundaki Divi Tema Oluşturucu'ya gidin.

Web Sitesi Şablonu Yükle

Ardından, sağ üst köşede iki oklu bir simge göreceksiniz. simgesine tıklayın.

İçe aktarma sekmesine gidin, bu gönderide indirebildiğiniz JSON dosyasını yükleyin ve 'Divi Tema Oluşturucu Şablonlarını İçe Aktar'a tıklayın.

Divi Tema Oluşturucu Değişikliklerini Kaydet

Dosyayı yükledikten sonra, Tüm Gönderiler'e atanmış yeni bir vücut alanına sahip yeni bir şablon göreceksiniz. Şablonun etkinleştirilmesini istediğiniz anda Divi Tema Oluşturucu değişikliklerini kaydedin.

Bu şeyi sıfırdan inşa etmeyi öğrenebilmemiz için öğreticiye geçelim, olur mu?

Divi Blog Gönderi Şablonunuz için Yorum Geçişi Nasıl Oluşturulur

Tema Oluşturucu Paketi 5 Blog Gönderisi Şablonunu Yükleme

Başlamak için, hazır blog yazısı şablonlarımızdan birini ekleyerek tasarıma hızlı bir başlangıç ​​yapacağız. Tema Oluşturucu şablonunu içe aktarmak için aşağıdakileri yapmanız gerekir:

1. Divi Tema Oluşturucu'ya gidin
2. Sayfanın sağ üst köşesindeki taşınabilirlik simgesini tıklayın.
3. Taşınabilirlik açılır penceresinde İçe Aktar sekmesini seçin.
4. Divi Divi Theme Builder 5 Ürün Şablonu Dosyasını indirin ve içe aktarın. Paketi buradan indirdikten sonra, dosyayı açın ve içe aktarmanız gereken “divi-theme-builder-pack-5-post-template.json” dosyasını bulacaksınız.
5. İçe Aktar Düğmesine tıklayın
6. Şablon içe aktarıldıktan sonra, şablon düzenini düzenlemek için şablonun özel gövde alanındaki düzenle simgesine tıklayın.

Yorumlar Geçiş Çubuğu Oluşturma

İlk adımımız, sonunda yorumları gösterecek/gizleyecek yorum geçiş çubuğunu oluşturmaktır. Bunu yapmak için, yorum modülünün/içeriğinin bulunduğu satırın üzerinde yeni bir satır oluşturacağız. Ardından, tasarımı tamamlamak için satırı geçiş başlığı ve simgesiyle dolduracağız.

Satır ekle

Devam edin ve önceden hazırlanmış düzenin en altına gidin ve yorum modülünü içeren satırın hemen altına yeni bir satır ekleyin.

Yeni satırı yorum satırının üzerine sürükleyin.

Ardından, daha sonra kolay tanımlama için katmanlar görünümünün içindeki satıra “Yorum Değiştirme Çubuğu” etiketini ekleyin.

Satır Ayarları

Yeni satır için ayarları açın ve aşağıdaki arka planı ekleyin:

• Arka Plan Rengi: #624de3

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Yuvarlatılmış Köşeler: 10px

• Oluk Genişliği: 1
• Maksimum Genişlik: 1180 piksel
• Dolgu: 10 piksel üst, 10 piksel alt, %5 sol, %5 sağ

Gelişmiş sekmesinin altındaki satıra aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-yorum-geçiş

Ardından aşağıdaki Özel CSS'yi Ana Öğeye ekleyin:

display:flex;
align-items:center;

Yorumlar Başlığı Değiştir

Yorum geçiş başlığını eklemek için sol sütuna yeni bir metin modülü ekleyin.

Sahte gövde içeriğini silin ve fareyle gövde içeriği kutusunun üzerine geldiğinizde "Dinamik İçeriği Kullan" simgesini seçin.

Açılır listeden “Yorum Gönderi Sayısı”nı seçin.

Yorum Gönderi Sayısı ayarlarında aşağıdakileri güncelleyin:

Önce giriş kutusuna aşağıdaki HTML'yi yapıştırın:

Show/Hide Comments <span style="font-size:0.7em">(

Girişten sonra kutusuna aşağıdaki HTML'yi yapıştırın:

 comments)</span>

Yorum Alanına Bağla seçeneğinin altında HAYIR'ı seçin.

Ardından ayarları kaydedin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Metin Yazı Tipi: Rubik
• Metin Yazı Tipi Ağırlığı: Orta
• Metin Yazı Tipi Stili: TT
• Metin Metin Boyutu: 24px (masaüstü), 18px (tablet), 16px (telefon)
• Metin Satırı Yüksekliği: 1em
• Metin Hizalama: Sol
• Metin Rengi: Açık

Yorumlar Çubuğu Simgesini Değiştir

Yorumlar geçiş çubuğu simgesini oluşturmak için, yalnızca kullanmak istediğimiz simgeyi görüntüleyen bir tanıtıcı modül kullanacağız.

Satırın sağ sütununa yeni bir tanıtım modülü ekleyin.

Sahte başlığı ve gövde içeriğini çıkarın ve ardından artı simgesini kullanmayı seçin.

Tasarım sekmesi altında aşağıdakileri güncelleyin:

• Simge Rengi: #ffffff
• Simge Yazı Tipi Boyutu: 40px

• Genişlik: 50 piksel
• Modül Hizalaması: Sağ
• Yükseklik: 50 piksel
• Resim/Simge Animasyonu: Animasyon Yok

Gelişmiş Sekmesi altında, Ana Öğeye aşağıdaki özel CSS'yi ekleyin:

display:flex;
align-items:center;

Ardından, Blurb Image'a bir CSS parçacığı daha ekleyin:

margin-bottom: 0px !important;

Açıklama Modülü/İçeriği ile Satırı Optimize Etme

Artık yorum geçiş çubuğu tamamlandığında, gerekli CSS Sınıfı ve aralığına sahip olması için yorum modülünü/içeriği içeren mevcut satırı optimize etmemiz gerekiyor.

İlk olarak, satıra "Yorumlar İçeriği Değiştir" etiketini ekleyebilirsiniz. Ardından satır ayarlarını açın ve dolguyu aşağıdaki gibi güncelleyin:

• Dolgu %4 üst, %4 alt, %4 sol, %4 sağ

Gelişmiş sekmesinin altındaki satıra aşağıdaki CSS Sınıfını ekleyin:

• CSS Sınıfı: et-yorum-geçiş-içerik

Ardından düzen düzenleyiciyi kaydedin ve çıkın.

Ve değişiklikleri tema oluşturucuya da kaydedin.

Özel Kodu Ekleme

Yorumlar için geçiş işlevini eklememiz gereken kod, bir kod modülüne eklenebilir.

Daha önce oluşturduğumuz yorum geçiş çubuğu satırındaki tanıtım yazısı modülünün altına yeni bir kod modülü ekleyin.

Ardından, kodu stil etiketlerine sardığınızdan emin olarak aşağıdaki CSS'yi yapıştırın.

.et-comment-toggle .et-pb-icon {
  transition: all 300ms;
  } 
.et-comment-toggle.open .et-pb-icon { /*rotate the plus icon 45 degrees when toggle opens*/
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
  }
.et-comment-toggle-content { /* hide comment toggle content initially */
  display:none;
  }
.et-comment-toggle-content.ctc-active { /* show comment toggle content when active */
    display:block;
  }  
.et-fb .et-comment-toggle-content {
  display:block;
  }
.et-comment-toggle {
  cursor:pointer;
  }

Sonra içine sarılmış CSS'nin altına, kodu stil etiketlerine sardığınızdan emin olarak aşağıdaki CSS'ye yapıştırın, aşağıdaki JQuery kodunu ekleyin ve kodu komut dosyasına sardığınızdan emin olarak aşağıdaki CSS'ye yapıştırın. etiketler.

function isStorageAvailable(type) {
    try {
        var storage = window[type],
            x = '__storage_test__';
        storage.setItem(x, x);
        storage.removeItem(x);
        return true;
    }
    catch(e) {
        return e instanceof DOMException && (
            // everything except Firefox
            e.code === 22 ||
            // Firefox
            e.code === 1014 ||
            // test name field too, because code might not be present
            // everything except Firefox
            e.name === 'QuotaExceededError' ||
            // Firefox
            e.name === 'NS_ERROR_DOM_QUOTA_REACHED') &&
            // acknowledge QuotaExceededError only if there's something already stored
            storage.length !== 0;
    }
}

jQuery(document).ready(function($) {
    var isSessionStorageAvailable = window.isStorageAvailable('sessionStorage');
    var $commentToggle = $('.et-comment-toggle');
    var $commentToggleContent = $('.et-comment-toggle-content');

    $commentToggle.on('click', function() {
        // Toggle content and add 'ctc-active' class:
        $commentToggleContent.slideToggle(300).toggleClass('ctc-active');

        // Add class to animate toggle icon:
        if ($commentToggleContent.hasClass('ctc-active')) {
            $commentToggle.addClass('open');
        } else {
            $commentToggle.removeClass('open');
        }

        // If storage is available, set item in browser session storage
        // (so we can know to open the toggle automatically
        // when user reloads the page).
        if (isSessionStorageAvailable) {
            $commentToggleContent.hasClass('ctc-active') ?
            sessionStorage.setItem('etCommentToggleEnabled','1'):
            sessionStorage.removeItem('etCommentToggleEnabled');
        }
    });

    // If storage is available, open toggle automatically
    // on page load if item is in browser session storage.
    // This allows the anchor links to work after adding
    // a comment or reply in the comment form.
    if (isSessionStorageAvailable) {
        '1' == sessionStorage.getItem('etCommentToggleEnabled') ?
        $commentToggleContent.addClass('ctc-active'):
        $commentToggleContent.removeClass('ctc-active');
    }

    // Open toggle if url has hash tag and no session storage.
    // This is will make sure the toggle is open for incoming
    // anchor links (from another page) to specific comments.
    if (window.location.hash) {
        $commentToggleContent.addClass('ctc-active');
        if (isSessionStorageAvailable) {
            sessionStorage.setItem('etCommentToggleEnabled','1');
        } else {
            sessionStorage.removeItem('etCommentToggleEnabled');
        }
    }

    // Add class to animate toggle icon if needed on page reload:
    if ($commentToggleContent.hasClass('ctc-active')) {
        $commentToggle.addClass('open');
    } else {
        $commentToggle.removeClass('open');
    }
});

Yorumlar Geçiş İşlevi Hakkında

Bu yorum geçiş anahtarı, kullanıcının tarayıcı oturumu boyunca geçiş durumunu (açık veya kapalı) hatırlayacak jQuery'ye sahiptir. Yani kullanıcı yorumları göstermeyi seçer ve sayfayı yenilerse yorumlar açık kalacaktır. Ayrıca, bir kullanıcı yorum formuna yorum gönderdiğinde veya yanıt verdiğinde yorumlar otomatik olarak açılır/gösterilir. Bu önemlidir, çünkü bir kullanıcı her yorum gönderdiğinde, sayfa gönderilerine bir kaydırmayı yeniden yükler. Aslında, başka bir sayfadan belirli bir yoruma bağlantı vermek istemeniz durumunda, sayfada bir bağlantı bağlantısı kullanıldığında yorumlar geçişi otomatik olarak açılır/gösterilir.

Son sonuç

Nihai sonucu kontrol etmek için sitenizdeki herhangi bir canlı blog gönderisini açmanız yeterlidir.

Son düşünceler

Umarım, bu yorum geçişi, Divi blog yayınlarınızın tasarımını düzene sokmak için kullanışlı olacaktır, böylece kullanıcılar isterlerse yazının daha özlü bir düzeninin keyfini çıkarabilirler. Ve sağlanan kod, gerektiğinde yorumları görünür tutmak için ek işlevsellik sağladığından, herhangi bir Divi blog yazısı şablonuna bir eklenti kullanmak zorunda kalmadan yorum geçişleri eklemek için güzel bir seçeneğiniz vardır.

Yorumlarda sizden haber bekliyorum.

Şerefe!