Web sitenizde gerçek zamanlı kripto para birimi verileri nasıl görüntülenir
Kripto para birimi odasında bir web sitesi oluşturuyorsanız, birçok farklı kripto para biriminde (veya madeni para) farklı bir gerçek zamanlı alıntı görüntülemenin bir yoluna ihtiyacınız vardır. Bitcoin gibi dijital para birimlerine şahsen yatırım yaparsanız (veya ticaret yapıyorsanız), gerçek zamanlı tırnak yenilemesini kontrol etmek için takıntılara aşina olabilirsiniz (sahip olduğumu biliyorum). Yani, kripto para birimi veya tam çevrimiçi değişim hakkında bir blog çalıştırıyor musunuz, verileri kullanıcı tarafından görünür tutmak her zaman iyi bir fikirdir. Bu kullanım vaka öğreticisinde, size Divi sitenize gerçek zamanlı kripto para birimi verileri eklemenin kolay bir yolunu göstereceğim. Bunu yapmak için, ayarlanabilir bir widget kısa kodu kullanarak gerçek zamanlı bir para verileri yerleştirmek için Premium Cryptourrency Widget eklentisini kullanacağım. Ayrıca, bu kısa kodu Divi ile Kripto para birimi düzeni paketinin tasarımına uyacak şekilde kullanmanın iyi bir yolunu göstereceğim.
Başlayalım. Buradaki zirve gizlice, bu öğreticide tartışacağımın bazı anlık görüntüleri:
Divi teması (yüklü ve aktif)
Premium Cryptocurrency Widget eklentisi (yüklü ve etkin)
Kripto para birimi düzeni paketi
Premium Cryptourrency Widget eklentisi eklentisinin nasıl çalıştığının temelleri, çok fazla ayar olmadan kullanımı çok kolaydır. Temel olarak, tek yapmanız gereken widget’a karar vermek, widget için temalar ve renkler seçmek ve sitenizde herhangi bir yerde görüntülemek için üretilen kısa kodu kullanmaktır. Nasıl çalıştığı hakkında bir fikir edinmek için web sitelerinde 10 widget’tan demoyu görebilirsiniz. Ancak bir eklenti yüklediyseniz, önizlemenizi WordPress kontrol panelinde ayarlarken doğrudan gerçek zamanlı olarak görebilirsiniz.5 Widget Belirli kripto para birimi için verileri görüntülemek için belirli kripto para birimi için veri görüntüleyen 5 widget vardır. Bunlar aşağıdakileri içerir:
Satır içi – sayfanızdaki/yayınınızdaki bir metin satırında bir teklif görüntülemek için.
Düğme – Herhangi bir URL’ye yönlendirilebilecek bir dava açmak için Metin düğmesindeki alıntıyı görüntülemek için.
Kart – Belirli bir kripto para biriminden doğrudan bir teklif görüntülemek için kart biçiminde
Spark – kullanıcıların fiyat değişikliklerini görselleştirmelerine yardımcı olmak için ona eşlik eden bir kıvılcım çizgisi veya çubuk ile doğrudan bir alıntı görüntülemek.
Sıralama Tahtası – Sayfa başlığınızdaki belirli bir kripto para biriminden (birkaç ek metrikle) doğrudan bir teklif görüntülemek için
Her widget eklenti ayarlarında ayarlanabilir. Seçenek aşağıdakileri seçmenizi sağlar: Belirli kripto para birimi
Alıntı yapmak istediğiniz para veya fiat madeni para
Widget’lar için renk şablonları ve şemalar
Fiyatlar değiştiğinde flaş etkisi.
Seçeneklerinizi seçmeyi bitirdikten sonra, kısa kod widget’ı otomatik olarak oluşturulur, böylece sitenize (veya metin modülüne) kopyalayıp eklersiniz. Bazı kripto para birimleri için verileri görüntülemek için 5 widget, belirli veri görüntülemeye adanmış 5 widget vardır. kripto para. Bunlar aşağıdakileri içerir:
Tablo (Alıntı) – Aynı anda birkaç kripto para birimi için teklif görüntülemek. Tablo (Ticaret) – Birkaç kripto para birimi için gerçek zamanlı ticaret piyasası yenilemesini görüntülemek.
Portföy – Madeni para değerinin mevcut portföyünüz için zaman zaman nasıl değiştiğini göstermek için kullanışlıdır.
Karşılaştırma – Birkaç kripto para biriminin alıntılarını yan yana karşılaştırmak için.
Ticker – Birkaç kripto para biriminin doğrudan fiyatından yuvarlanan bir bilet sergilemek.
Ayarlama seçeneği, birkaç para biriminin ve özel alanların görüntülenmesine izin vermek için biraz değişecektir.
Bu widget’ların çoğu aşağıdaki seçenekleri paylaşacaktır: Bazı kripto para birimi seçin Fiat para birimi veya diğer madeni para bir alıntı (ekran) seçin
Şablonları ve renk şemalarını seçin
Alanı Seçin
Para değiştiğinde yanıp sönüyor
Portföy widget’ının her bir madeni para için fiyat ve satın alma sayısını ayarlamak için ek bir seçeneğe sahip olacaktır. Ticker Widget, hız ve kaydırma yönünü ayarlamak için ek bir seçeneğe sahip olacaktır. Düğme widget’ının özel URL aktarımını girmek ve düğme metnini özel değişkenlerle ayarlamak için ek bir seçeneğe sahip olacaktır.
Kripto para birimi widget’ı Divi Cryptourrency Düzen Paketine ekleyin Bu kısa kodu herhangi bir WordPress temasında kullanabilirsiniz, ancak Divi temasını kullanmanın avantajlarından biri, görsel üreticideki modüle kolayca kısa kod ekleyebilmenizdir. Ayrıca, bazen kısa kod içeriği düzenlemek için kullanılan CSS eklentisini değiştirmek için modül ayarlarını kullanabilirsiniz. Bu her zaman gerçekleşmez (özellikle kısa kod bir tablo görüntülendiğinde), ancak gelecekte ek özel CSS’den kaçınmak için izlenmesi gerekir. Aşağıdaki örnekte Divi “Stil Değişikliği” nin bazılarını tartışacağım. Yön sayfanıza satın alma düğmesine sahip üç gerçek zamanlı teklif kartı ekleyin
Bu ilk örnek için, her biri belirli kripto para birimi için bir teklifle üç kart yapacağım ve her birinin altında (Coinbase’e benzer bir şey) düğmeleri satın alacağım. Bu ayar, satın alınacak bazı popüler paraları görüntülemek için kripto para birimi yönü sayfasında iyi çalışacaktır. İşin püf noktası, düzeninize uygun bir tasarım elde etmektir. Başlayalım. Sayfaya giderek yeni bir sayfa oluşturun> Yeni eklendi. Sayfanıza bir başlık verin ve bir görsel üreticiyi uygulayın. Sayfanın altındaki ayarlar çubuğunu açın ve kitaplıktan Ekle düğmesini tıklayın. Ardından bir kripto para birimi düzeni paketi bulun ve seçin. Ardından bir açılış sayfası şablonu kullanmak için tıklayın.
Düzen sayfaya yüklendikten sonra, hizmetleri görüntüleyen üç sıra sütun içeren parçayı bulun ve çoğaltın. Bu, üç kartımız için iyi bir arka plan (zaten tasarlanmış) olarak işlev görecektir. Şimdi ilk kartımız için kısa bir kod yapmamız gerekiyor. Ayrı bir pencerede, Kripto para birimi widget’ları> kart olarak gidin. Aşağıdaki seçenekleri güncelleyin: Kripto para birimi: Bitcoin (farklı bir para seçmek için, açılır listeye tıklayın ve adını yazmaya başlayın) fiat veya diğer madeni paralar: USD şablonu: Renk arka planı renk şeması: Donanma Flaşı: Evet, aşağıdaki kısa kodu üretmelidir: [CryptoCurrency_widget type = “kutu” sembolü = “btc-usd” template = “arka plan” color = “lacivert” flash = “1”]
Şimdi kısa kodu panonuza kopyalayın ve yön sayfasına dönün. İlk sütundaki açıklama için bulanıklık modülü ayarlarını açın. Kullanılan başlık ve görüntüyü silin. Ve şimdi içeriği oradaki silin ve kısa kodunuza yapıştırın. Ardından, tasarım ayarlarını girin ve dolguyu sağa tıklatarak ve özel dolgu sıfırlamasını tıklayarak dolguyu varsayılana geri döndürün. Ayarları kaydedin.
İpucu: Widget’ta görüntülenen metni daha iyi ayarlamak için gövde yazı tipini ve hat yüksekliğini de değiştirebilirsiniz.
Şimdi kalan sütundaki iki modülü silin ve az önce yaptığınız modülü kopyalayıp yapıştırın. Şimdi tek yapmanız gereken yeni bir kısa kod yapma işlemini tekrarlamak ve sadece kopyaladığınız modül içerik alanına yapıştırmaktır. Kısa kod seçeneği, görüntülemek istediğiniz kripto para biriminin adı dışında aynı kalmalıdır. Şimdiye kadar görülmesi gereken bu.
Kartlarımızın her birinin altında bir satın alma düğmesi yapmak için önce ilk düğmemiz için kısa bir kod oluşturmamız gerekir. Kripto para birimi widget> düğmesine gidin. Ardından düğmeniz için seçeneği seçin. Dikkat edin, Varsayılan URL satın alma işlemini tamamlamak için Changelly’ye yönlendirin. Ancak URL, istediğiniz her şeye göre düzenlenebilir. Kendi sitenizden kripto para satın alma/satma olanağı sunmak istiyorsanız, bunları yalnızca kayıt işlemine yönlendirmeniz veya belirli madeni paralar için sayfaları kontrol etmeniz gerekir. Ayrıca, satın alımları tamamlamak için diğer üçüncü taraf sitelerine de yönlendirebilirsiniz. Ayrıca, mevcut metin değişkenleri, düğmenizde görüntülenecek gerçek zamanlı bir metriği yerleştirmenizi sağlar. Bu örnek için aşağıdakileri güncelleyeceğim: Kripto para birimi: Bitcoin Şablonu: Temel Renk Şeması: Geri kalan donanmayı varsayılan olarak bırakacağım. Bu, aşağıdaki kısa kodu üretmelidir. [CryptoCurrency_Widget Type = “düğme” sembolü = “btc ~ usd” şablonu = “color” color = “navy” url = “https://changelly.com/?ref_id=7c53196afedb” name} {tosymbolsign} {price} ” ] Şimdi bunu panonuza kopyalayın ve sayfanızı düzenlemek için geri dönün. İlk sütunda açıklama modülünün altına bir metin modülü eklememiz gerekir. Ardından kısa kodunuzu içerik kutusuna girin. Tasarım sekmesindeki aşağıdaki tasarım ayarlarını güncelleyin: Metin Yazı Tipi: Ekşi Sans Pro (Düzen Yazı Tipleri ile eşleşmesi için) Metin Yazı Tipi Tarzı: TT Metin Oryantasyonu: Orta (Bu Odak Düğmesi) Renkli Metin Bağlantısı: #4328B7 (Mor Renk Eşleşmesi İçin Tata konumunda) Hızlı bir inceleme için her şeye sahip olup olmadığınızı görmek için, ayarlar kutunuzun sağ üst kısmındaki filtre düğmesini tıklayın ve yalnızca değiştirilmiş kuvveti görüntülemek için tıklayın. Görmeniz gereken bu. Ardından, kripto para birimi düğmelerinizin her biri için yeni bir kısa kod yapma işlemini tekrarlayın. Her şeyi temizlemek için satırı doğrudan geçerli satırın altına çıkarın. Sonuçlar aşağıdadır. Beyaz düğmeyi sevmiyorsanız, her zaman bir donanma renk şemasına sahip bir renk şablonu seçebilirsiniz. Ardından, her bir modül için bağlantınızın rengini varsayılan beyaz renge sıfırlayın. Nihai sonucu alacaksınız:
Rengi özel bir CSS ile değiştirin Varsayılan renk şeması ile hayal kırıklığına uğradıysanız, istediğiniz rengi elde etmek için bazı CSS görüntüleri: Kartın arka plan rengini kaldırmak için modülün arka plan rengini görünür izleyin (bu olacaktır Düzenle daha uygun), özellikle tema ayarına CSS girin: Arka plan-rengi: şeffaf! Önemli;
}
Bu, kartınızdaki Donanma Renk Şemasının renginin yerini alacaktır, bu nedenle CSS’nin değiştirilmesi için renk şemasının seçildiğinden emin olun. Düzeninizdeki Light Mor düğmesinin rengiyle eşleşecek şekilde düğmenizin arka plan rengini değiştirmek için aşağıdaki özel CSS’yi ekleyin: } Yerlerde CSS parçaları ile çeşitli tasarım seçeneği mevcuttur. Artık kartınız için bazı dikey alan oluşturmak için açıklamanıza geri dönebilir ve bazı özel pedler ekleyebilirsiniz. Ayrıca, açıklamanızın her modülü için her kısa kart kodunun altındaki düğmeniz için kısa bir kod ekleyebilirsiniz. Sonuç çok iyi. İşte gerçek zamanlı bir güncelleme ekranı.
Cep telefonunda aşağıdaki görünüm.
Açılış sayfasında bir teklif tablosu oluşturma Yön sayfasında daha fazla kaydırırsanız, bir tablonun taklit görüntüsüyle “Dijital Para Biriminin Piyasa Değeri” başlıklı bölümünü görürsünüz. Kısa bir kodla (alıntı) kolayca böyle bir tablo ekleyebilirsiniz. Kripto para birimi widget> tablosuna gidin (alıntı). Ardından tablonuz için seçeneği seçin. Emin olun ve özel alanları beğeninize ekleyin/silin. Bu örnek için, değiştirme alanını silmedikçe ve 24 saat hacim ve besleme eklemedikçe seçeneği varsayılan ayarlara izin verdim.
Şimdi yalnızca kısa bir kod almamız ve yön sayfasına dönmemiz gerekiyor. Yeni kısa kodunuza sahip bir metin modülüne sahip yapay bir tablo görüntüleyen görüntü modülünü değiştirin.
İşte burada! Tablonuzdaki kripto para birimi sayfanıza bağlantılar ekleyin Bir tablo widget (teklif) veya tablo (ticaret) kullanıyorsanız, madeni para sütunu ve/veya adını madeni para sütunu (bağlantı) ve/veya ad (bağlantı) ile değiştirmeyi seçebilirsiniz. . Bu, kullanıcıyı sitenizdeki belirli bir madeni para sayfasına veya seçtiğiniz URL’ye yönlendirmenizi sağlar. URL bağlantısının yapısını kontrol etmek için, kripto para birimi widget’ları> ayarlarına gidin. Orada tüm bağlantılar için ortak bir URL yolu ayarlayabilirsiniz ve/veya her bir madeni paraya bağlantılar özel olarak değiştirebilirsiniz. Örneğin kendi madeni para sayfanızı barındırmak ve divi ile tasarlamak istiyorsanız, URL maskesini “/{name} olarak ayarlayabilirsiniz. “. Ardından, sayfa başlığı / salyangoz eşleşmenizin uygun para adını eşleştirdiğinden emin olun. Bu nedenle, Bitcoin için özel bir sayfa oluşturmak istiyorsanız, permaliniz şöyle görünecektir: https://www.website.com/bitcoin
Gitmenize izin vermeden önce, sıralama kartı widget’ı, düğme widget’ı ve karşılaştırma widget’ını kullanarak Divi ile yaptığım madeni para sayfasının ekran görüntüleri. Belki doğrudan akışta onu kapsayacak zamanım olacak, ama şimdilik umarım bu akış meyve suyuna yardımcı olur. Duyarlı mı? Widget’ın (özellikle tablo) yanıtı konusunda biraz endişeliyim çünkü tarayıcı penceresini hücresel boyuta ayarlamak her zaman en iyi sonuçları vermiyor, ancak mobil cihazımdaki hızlı inceleme beni bu widget’ların tümüne ikna etti (dahil Tablolar) İyi ayarlayın. İşte bir akıllı telefondaki bir tablo ekranı örneği.
