Realizați un widget Twitter personalizat fără un plugin

Am fost întrebat de câteva ori despre ce plugin WordPress folosesc pentru a genera lista „Twitter Feed” din subsolul site-ului meu. De fapt nu folosesc niciun plugin, este un fragment de Javascript de pe Twitter care afișează o listă cu tweeturile mele recente pe care le-am conceput cu CSS. În acest tutorial, vă voi arăta:


  • Codul HTML și Javascript necesar pentru a trage cele mai recente tweet-uri
  • O imagine de ansamblu a marcajului HTML și a selectoarelor CSS asociate
  • Am folosit eu două exemple de widgeturi în stil personalizat pe Twitter

Citiți mai departe pentru a vedea restul tutorialului …

HTML și Javascript

Twitter obișnuia să furnizeze acest cod pe site-ul lor, dar din anumite motive l-au eliminat în favoarea acestora widget-uri mult mai puțin flexibile. Veți avea nevoie de două bucăți de cod.

Mai întâi, așezați următorul cod unde doriți să apară lista:

  • Se încarcă feedul Twitter

Notă:

  • Se încarcă feedul Twitter
  • nu este o parte a codului inițial oferit de Twitter, dar trebuie să facă validarea HTMLului. De asemenea, poate furniza un mesaj util în timp ce feedul se încarcă, deoarece ar putea dura câteva secunde într-o zi lentă.

    În al doilea rând, va trebui să plasezi următoarele rânduri de Javascript cât mai aproape de etichetă.

    În prezent, îl am chiar deasupra codului meu Google Analytics. Ar trebui să păstrați aceste linii Javascript cât mai jos pe pagină, deoarece în cazul în care Twitter nu se încarcă, tot ce se află sub acest cod va atârna (ceea ce nu este mare lucru dacă este deja în partea de jos).

    Prezentare generală a marcajelor HTML și a selectorilor CSS

    Acum nu puteți vedea marcajul HTML pe care îl generează widgetul Twitter fără a utiliza ceva precum Bara de instrumente pentru dezvoltatori Web. Norocos pentru tine, am făcut-o pentru tine. Iată o listă de exemple cu un singur tweet ca exemplu.

    • #twitter_update_list – Selectează întreaga listă
    • #twitter_update_list li – Selectați elementele individuale din listă
    • #twitter_update_list li span – Selectează partea „tweet” a articolului din listă, nu linkul de acum
    • #twitter_update_list li span a – Selectează legătura din partea „tweet” a articolului din listă
    • #twitter_update_list a [style ="dimensiune font: 85%;"] – Selectează legătura „timp în urmă”, într-un mod oarecum haios (vezi nota de mai jos).

    Notă: Întrucât există un stil inline în legătura de timp în urmă, care stabilește dimensiunea fontului la 85%, este oarecum dificil să se înlocuiască fără un cod hacky. Am mai folosit acest lucru pentru a reseta dimensiunea fontului la fel ca restul listei:

    #twitter_update_list a [style ="dimensiune font: 85%;"] {font-size: 1em! important; }

    Probabil că nu funcționează în versiunile IE din timp, din cauza părții „importante”. Puteți utiliza, de asemenea, afișare: bloc; pentru a muta acea legătură la linia următoare.

    Exemplu live

    Pentru un exemplu live, consultați pagina de subsol Laborator tematic. Sau dacă citiți acest lucru în cititorul de fluxuri sau pe un site de răzuitor neautorizat, consultați imaginea de mai jos.

    Tema Laborator Feed Twitter

    Iată codul pe care îl folosesc pentru listă:

    #twitter_update_list {
    font-size: 13px;
    linie-înălțime: 21px;
    stil de listă: nici unul;
    }
    #twitter_update_list li {
    fundal: url (‘images / twitter-divider.gif’), stânga-jos, repetare-x;
    căptușire-jos: 7px;
    margine-jos: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    culoare: #ababab;
    text-decor: nici unul;
    }
    #twitter_update_list a {
    culoare: # 6f7276;
    }

    • Prima linie selectează întreaga listă. Setează dimensiunea fontului, înălțimea liniei și se asigură că nu vor apărea puncte de glonț.
    • A doua linie face ca o imagine mică de 2 × 1 să se repete sub fiecare element de listă ca un fel de împărțitor. Căptușeala stabilește spațiul dintre tweet și marginea superioară a împărțitorului. Marja stabilește spațiul dintre marginea de jos a divizorului și următorul tweet.
    • A treia linie stabilește culoarea tweet-ului, inclusiv link-urile și se asigură că nu există linii sub link-uri.
    • Ultima linie stabilește culoarea legăturii „timp în urmă”.

    Si asta e! Dacă ar trebui să schimb un lucru, aș diferenția într-un fel legăturile in-tweet și aș adăuga, de asemenea, efecte pasive pe link-uri..

    Acest lucru poate fi folosit pe orice site

    Spre deosebire de toate celelalte cum se face XYZ fără un plugin postări acolo, nu există niciun cod WordPress real utilizat în acest tutorial.

    Întrucât acesta nu folosește niciun cod WordPress, acesta nu este depus în secțiunea Tutoriale WordPress Colectie. Poate fi folosit pe aproape orice fel de site, presupunând că puteți edita sursa HTML și CSS.

    Dacă doriți să-l utilizați în WordPress, v-aș sugera editarea manuală a fișierelor dvs. tematice pentru a insera cele două linii de Javascript în subsolul site-ului dvs., sau chiar să-l agitați în cârligul wp_footer ().

    În ceea ce privește widget-ul în sine, puteți să lipiți codul în interiorul unui widget text sau să-l codați manual în bara laterală (sau oriunde).

    Concluzie

    Sper să vă placă tuturor tutorialul, mi-ar plăcea să vă aud gândurile în comentarii. Dacă aveți solicitări de sfaturi rapide pentru WordPress sau CSS, nu ezitați să mă anunțați. Poate fi prezentat într-o viitoare postare de marți tutorial la Theme Lab!

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