Eklenti Olmadan Özel Twitter Widget’ı Yapın

Birkaç kez, sitemin altbilgisinde “Twitter Beslemesi” listesini oluşturmak için hangi WordPress eklentisini kullandığım soruldu. Aslında hiç bir eklenti kullanmıyorum, CSS ile stilize ettiğim son tweet’lerin bir listesini gösteren Twitter’dan bir Javascript pasajı. Bu derste size şunu göstereceğim:


  • En son tweetleri almak için gerekli HTML ve Javascript kodu
  • HTML işaretlemesine ve ilişkili CSS seçicilerine genel bakış
  • Kendime kullandığım iki özel stilde Twitter widget’ı örneği

Eğiticinin geri kalanını görmek için okumaya devam edin…

HTML ve Javascript

Twitter bu kodu sitelerinde sağlıyordu, ancak bir nedenden dolayı bunları lehine kaldırdılar çok daha az esnek widget’lar. İki parça koda ihtiyacınız olacak.

İlk olarak, aşağıdaki kodu listenin görünmesini istediğiniz yere yerleştirin:

  • Twitter özet akışı yükleniyor

Not:

  • Twitter özet akışı yükleniyor
  • , Twitter’ın sağladığı orijinal kodun bir parçası değildir, ancak HTML’nin doğrulanması gerekir. Yavaş bir günde birkaç saniye sürebileceğinden, feed yüklenirken de yararlı bir mesaj sağlayabilir..

    İkincisi, aşağıdaki Javascript satırlarını yerleştirmeniz gerekir etikete olabildiğince yakın.

    Şu anda Google Analytics kodumun hemen üstünde var. Bu Javascript satırlarını sayfada olabildiğince düşük tutmalısınız, çünkü Twitter’ın yüklenmemesi durumunda, bu kodun altındaki her şey kilitlenir (zaten altta ise büyük bir sorun değildir).

    HTML İşaretleme ve CSS Seçicilerine Genel Bakış

    Artık Twitter widget’ının oluşturduğu HTML işaretlemesini Web Geliştirici Araç Çubuğu gibi bir şey kullanmadan göremiyorsunuz. Senin için şanslıyım, senin için yaptım. Örnek olarak yalnızca bir tweet içeren örnek bir liste.

    • #twitter_update_list – Tüm listeyi seçer
    • #twitter_update_list li – Ayrı liste öğelerini seç
    • #twitter_update_list li span – Liste öğesinin “tweet” bölümünü, zaman önce değil bağlantısını seçer
    • #twitter_update_list li span a – Liste öğesinin “tweet” bölümündeki bağlantıyı seçer
    • #twitter_update_list a [style ="yazı tipi boyutu:% 85;"] – “Zaman önce” bağlantısını biraz acayip bir şekilde seçer (aşağıdaki nota bakın).

    Not: Yazı tipi boyutunu% 85 olarak ayarlayan zaman içinde bağlantıda satır içi bir stil olduğundan, hileli bir kod parçası olmadan geçersiz kılmayı biraz zorlaştırır. Yazı tipi boyutunu listenin geri kalanıyla aynı şekilde sıfırlamak için bunu daha önce kullandım:

    #twitter_update_list a [style ="yazı tipi boyutu:% 85;"] {yazı tipi boyutu: 1em! önemli; }

    “! Önemli” kısmı nedeniyle muhtemelen IE’nin ilk sürümlerinde çalışmaz. Display: block; komutunu da kullanabilirsiniz. bu bağlantıyı bir sonraki satıra taşımak için.

    Canlı Örnek

    Canlı bir örnek için, altbilgisini inceleyin Tema Laboratuvarı. Veya bunu feed okuyucunuzda veya yetkisiz bir kazıyıcı sitesinde okuyorsanız, aşağıdaki ekran görüntüsüne bakın.

    Tema Laboratuvarı Twitter Yayını

    Liste için kullandığım kod:

    #twitter_update_list {
    yazı tipi boyutu: 13 piksel;
    satır yüksekliği: 21 piksel;
    liste stili: yok;
    }
    #twitter_update_list li {
    arka plan: url (‘images / twitter-divider.gif’) sol alt yineleme-x;
    dolgu tabanı: 7 piksel;
    kenar boşluğu: 9 piksel;
    }
    #twitter_update_list span, #twitter_update_list span a {
    renk: #ababab;
    metin dekorasyonu: yok;
    }
    #twitter_update_list a {
    renk: # 6f7276;
    }

    • İlk satır tüm listeyi seçer. Yazı tipi boyutunu, satır yüksekliğini ayarlar ve hiçbir madde işaretinin görünmemesini sağlar.
    • İkinci satır, her liste öğesinin altında bir tür bölücü olarak 2 × 1 küçük bir görüntü tekrarlar. Dolgu, tweet ile bölücünün üst kenarı arasındaki boşluğu ayarlar. Kenar boşluğu, bölücünün alt kenarı ile bir sonraki tweet arasındaki boşluğu belirler..
    • Üçüncü satır, bağlantılar dahil olmak üzere tweet’in rengini belirler ve bağlantıların altında hiçbir satır gösterilmemesini sağlar.
    • Son satır “zaman önce” bağlantısının rengini belirler.

    Ve bu kadar! Bir şeyi değiştirmek zorunda kalsaydım, tweet’leri bir şekilde farklılaştırırdım ve belki de bağlantılara fareyle üzerine gelme efektleri eklerdim.

    Bu, Herhangi Bir Sitede Kullanılabilir

    Diğerlerinin aksine eklenti olmadan XYZ nasıl yapılır orada yayınlar, bu öğreticide kullanılan gerçek bir WordPress kodu yok.

    Bu hiçbir WordPress kodu kullanmadığından, WordPress Eğiticileri Toplamak. HTML kaynağını ve CSS’yi düzenleyebileceğinizi varsayarak hemen hemen her türlü sitede kullanılabilir.

    WordPress içinde kullanmak istiyorsanız, tema dosyalarınızı sitenizin altbilgisine Javascript’in iki satırını eklemek için manuel olarak düzenlemenizi veya hatta wp_footer () kancanıza takmanızı öneririm.

    Widget’ın kendisine gelince, kodu bir metin widget’ına yapıştırabilir veya kenar çubuğunuza manuel olarak kodlayabilirsiniz (veya herhangi bir yere).

    Sonuç

    Umarım öğreticiyi sevmişsinizdir, yorumlarınızda düşüncelerinizi duymak isterim. Hızlı WordPress veya CSS ipuçları için herhangi bir talebiniz varsa, bana bildirmekten çekinmeyin. Tema Lab’in gelecekteki bir Salı günü gönderisinde yer alabilir!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map