Divi sitenize favori bir düğme işlevi nasıl eklenir
Divi sitenize işlevsellik favori düğmeleri eklemek, kullanıcı deneyimi için büyük bir destek olabilir. Temel işlevsellik, gönderim için bir yer imleri sistemi olarak işlev görür. Kullanıcılar yayınlara göz atabilir ve favori yapmak istediklerini seçebilir. O zaman kullanıcı bu favori gönderiyi isteklerine göre görebilir. Bu kullanım vaka öğreticisi için, favori düğmenin işlevselliğini divi hayvan rezervuarı düzeni paketine nasıl ekleyeceğinizi göstereceğim. Bu, kullanıcıların belirli evcil hayvanları favori olarak seçmelerine ve daha sonra bu evcil hayvanları ayrı bir “favori” sayfada görmelerini sağlayacaktır.
Başlayalım. Aşağıdaki gizlice göz atma bir göz atın, en sevilen düğmeyi proje gönderimize ekleyeceğiz.
Divi teması (yüklü ve etkinleştirilmiş)
Favori eklentiler (yüklü ve etkinleştirilmiş)
Hayvan Rezervuar Düzeni Paketi
Eklenti Ayarları Eklenti yüklendikten sonra, favori> ayarlarına giderek WordPress kontrol panelinden ayarlara erişebilirsiniz. En sevdiğiniz Ayarlar sayfasındaki Ekran ve Gönderi Türleri sekmesine tıklayın. Ardından, projeyi favori bir düğme işlevselliği sağlamak istediğiniz belirlenmiş yazı türü olarak etkinleştirmek için seçin.
Not: Bir proje olarak ayarlamanıza gerek yoktur. İsterseniz bir gönderi veya sayfayı etkinleştirebilirsiniz. Listemi daha sonra görüntülemek için bir portföy modülü kullanmak istersem projeyi kullanmanın eğlenceli olacağını düşünüyorum. Kontrol edildikten sonra, sağda görünen ayarlar düğmesini tıklayın ve aşağıdakileri güncelleyin: İçerikten Önce Ekle: İçerikten Sonra Ekle: Sil Kontrol Meta Kutusu Ekle: Yönetici Ekle Sütunu Ekle: Centangkami Daha önce düğmeyi ekleme seçeneğini kontrol etmeyin Ya da Divi Builder’ı kullanıyoruz yüzümüz yüzünden içerikten sonra. Metin modülündeki düğmeyi görüntülemek için kısa bir kod kullanacağız. Favori düğmenin içeriğini ve görüntülenmesini ayarlayın, ardından HTML düğmesi öğesini “A (bağlantı)” olarak ayarlayın. Bu, daha sonra metin modülünün içinden bir bağlantı tasarlamamıza izin verecektir. Kullanmak istediğiniz düğmeyi ayarlayın. Ne yaptığınızı bilmiyorsanız, özel işaretleme yerine belirlenen düğmeyi kullanmanızı öneririm. Favori düğme türünü kullanacağım. Düğme için kullanmak istediğiniz özel rengi belirleyin. Varsayılan düğme için aşağıdakileri güncelleyin Durum: Arka Plan Rengi: #FFFFFF Renk Sınırı: #D29F68 METİN RENK: #D29F68 RENK SİMGİ: #D29F68
Etkin düğme durumu için aşağıdakileri güncelleyin: Arka Plan Rengi: #D29F68 RENK BİRLİĞİ: #D18D45 Metin Renk: #FFFFF Renk Icon: #FFFFFF Yukarıdaki düğme ekranının ne gibi görünebilirsiniz (TÜM TIKLAYABİLİR).
Liste ekranının altındaki favori listeyi ayarlayın, favori listesi HTML’yi ayarlayın ve sağdaki Ayarlar düğmesini tıklayın. Bunu yapmaya karar vermemin ana nedeni, favori liste kısa kodu ile küçük resim görüntülemeyi zor bulmam, bu yüzden kantin için uyarlanmış bir çıktı yapmaya karar verdim. Liste ve “Li” bir tür liste öğesi olarak. Ancak, varsayılan ayarları Divi ile düzenlemeyi daha zor buluyorum, bunun yerine listeye sarma türünü “div” olarak ve öğe listesinin türünü “div” olarak ayarlayın. Ardından, tek liste içerik işaretlemesini ayarlamak için seçin. Favori listelerin favori bir listesini kullanırken görüntülemek istediğiniz liste içeriğini ayarlamak için WYSIWYG düzenleyicisini göreceksiniz. Alt listeden seçerek dinamik bir düzlem ekleyebilirsiniz ve alan içerik düzenleyicisi kutusuna eklenir. Dinamik bir düzlem eklerken görsel sekmeyi seçtiğinizden emin olun (belki de seçilen metin sekmesi ile çalışmıyor).
Gönderi alanının altına “Küçük Resim: Küçük Resim” uçağını ekleyin. Bu, editörde aşağıdaki kodla sonuçlanır: [Post_thumbnail_thumbnail] Bu, proje gönderimi için seçtiğiniz küçük resim (üstün görüntü) görüntüler. Ardından, açılır menüden “Post başlığı” alanını ekleyin. Bu aşağıdaki editörle sonuçlanır: [Post_title] Bu, proje postasının başlık gönderisini gösterecektir. Gönderinize özel bir teklif vermeyi planlıyorsanız, “Post Alıntı” alanını da ekleyebilirsiniz. Bu, kullanıcılar tarafından en sevdikleri listede görülebilen favori evcil hayvanlar/hayvan listesi hakkında bazı bilgiler sağlamanın iyi bir yoludur. Alıntılar gönderme alanı aşağıdaki gibi olacaktır: [Post_excerpt] Şimdi alanımız var, küçük resimleri ve yazımızın başlığını “A” etiketine sarabiliriz. Permalink’in gönderiden çekilmesini istediğimiz için, bağlantılarımızın her biri için HREF değerine özel bir “Post Permalink” eklememiz gerekiyor. Bu editördeki son HTML ekranı: <a href=" next_permalink 23 önce [post_thumbnail_thumbnail [Post_title]
[Post_excerpt] Not: Posta teklifinin gönderisini paragraf etiketleriyle sarıyorum ve kayıtlı öğeler arasında biraz yer açmak için bazı daha düşük marjlar ekliyorum.
Bittiğinde ayarlarınızı kaydedin. Aşağıda, kullanıcının favorisini görüntülemek için her kısa kod kullandığımızda bu çıkış ekranının bir snippet’idir.
Genel ayarlar ve kullanıcılarım, genel sekme ve kullanıcı altında favori bir eklentinin varsayılan işlevselliğini korur. Varsayılan olarak eklenti, anonim kullanıcıların (kullanıcıların girmediği) favoriyi çerez olarak saklayarak favori bir işleve sahip olmasına izin verir. Kullanıcıyı vermeden önce girmeye zorlamak istiyorsanız, kullanıcı sekmesi altında yapabilirsiniz. Bir proje olarak evcil hayvanınızın bir listesini ekleyerek, proje yayınlarımızı bireysel evcil hayvanlarımızın bir listesi olarak kullanmaya başlamaya hazırız. Yeni bir proje eklemek için WordPress kontrol panelini açın ve projelere gidin> yeni ekleyin. Gönderiniz için başlığı girin (yani evcil hayvanın adı), üstün görüntüyü ekleyin, liste sayfasında görüntülemek istediğiniz içeriği girin. Alıntı kutusu.
Düzeni İçe Aktarma Sayfaları Bir sonraki liste, önceden hazırlanan liste sayfamızın düzenini Animal Barınak Düzeni paketinden eklememiz gerekiyor. Bunu yapmak için önce bir görsel üreticiyi kullanın. Ayarlar menüsünü açın ve hayvan barınağı listesinin düzenini yazıya ekleyin. Kısa kodu girin En sevdiğiniz düğme, kısa bir kod kullanarak sayfada herhangi bir yere favori bir düğme ekleyebilir. Bu kullanım için, ilk bölümde sol sütundaki fotoğrafın hemen altına ekleyelim. Metin modülünü ekleyin ve içerik kutusuna aşağıdaki kısa kodu girin: [favori_button]
İsterseniz tasarım ayarlarını kullanarak düğme stilini (teknik olarak bir bağlantı) değiştirebilirsiniz. Eklenti ayarlarında ayarladığınız renge gelmemeye dikkat edin. Örneğin, Tasarım sekmesini açabilir ve metin kategorisi altındaki bağlantıya tıklayabilir ve aşağıdakileri güncelleyebilirsiniz: bağlantı yazı tipi: lora ağırlık bağlantısı yazı tipi: metin boyutunun kalınlığı: 16pxini kısa kodların en temel kullanımıdır. İşlevselliği ayarlamak için kısa koda ekleyebileceğiniz birkaç ek parametre vardır. Daha fazla örnek ve kısa kod için eklenti sayfasında veya ana web sitesinde kontrol edebilirsiniz. Yapılacak olan şey, içerik içeriğini gerektiği gibi güncellemek ve bitmişsiniz. Ayarları kaydedin. İpucu: Tüm listelerde düğmelerin eklenmesini ve düzenlenmesini kolaylaştırmak için Global öğe olarak favori bir düğme kısa kodu ile metin modülünüzü kaydetmek isteyebilirsiniz. Bu, favori düğmelerle düzenin görüntülenmesidir: Bir Gönderi yapmak için düğmeye tıkladıktan sonra bir favori eklemek için bir sayfa oluşturun, gönderi depolanır (çerez kullanarak) ve kısa bir kod kullanarak sitenizde herhangi bir yerde listelenebilir. Bu kullanım için, tercih edilen bir gönderi eklemek için yeni bir sayfa oluşturacağım. Yeni bir sayfa oluşturun (sayfa> yeni ekle). Sayfada bir başlık verin (örneğin “favori”). Ve görsel bir yapımcı kullanın. Sayfa Düzenini İçe Aktarın Bir sonraki hakkında, sayfa hakkındaki hayvan barınağının düzenini sayfaya ekleyin. Yeni altyazıların başlığını ve metnini ekleyecek şekilde sayfanın üst kısmındaki tam geniş başlık modül ayarlarını güncelleyin. Ardından her iki düğme için düğme metnini silin.
Kullanıcının favori kısa kodu bu noktaya ekleyin, tek yapmanız gereken sayfanızı tasarlamak için korumak (veya sıfırlamak) istediğiniz kısa kod ve düzen öğeleri eklemek istediğinize karar vermektir. İkinci bölümde, ilk satırın iki sütunu vardır. İkinci sütundaki metin modülünü silin ve ilk sütundaki metin modülü içeriğini aşağıdaki başlıklar ve kısa kodlarla güncelleyin:
favorilerim
[user_favorite]
Bu kullanıcının en sevdiği kısa kodu, seçtikleri tüm kullanıcıların favorilerini gösterecektir. Ardından kısa kod tarafından kullanılan metni istediğiniz gibi ayarlamak için tasarım ayarlarına gidin. Bu örnek için, kısa kodda kullanılan yazı başlığı bağlantısını hedeflemek için bağlantı metninin tasarımını aşağıdaki gibi değiştireceğim: Yazı tipi Link: Lora Ağırlık Yazı Tipi Bağlantı: Renk Kalınlığı Bağlantı Metni: #D29F68 Metin Boyutu Bağlantı Metin: 20px Artık isterseniz doğru sütuna ek öğeler ekleyebilir ve ihtiyacınız olmayan diğer düzen öğelerini silebilirsiniz. Favori yalnızca bu sayfada kullanıcı yayınları tercih ederse görüntülenir. Bu, kullanıcılar tarafından beğenilen üç yayın içeren sayfa ekranıdır.