Gumawa ng isang Pasadyang Widget ng Twitter Nang Walang Isang Plugin

Ilang beses akong tinanong tungkol sa kung aling plugin ng WordPress na ginagamit ko upang makabuo ng listahan ng “Twitter Feed” sa footer ng aking site. Hindi talaga ako gumagamit ng isang plugin, ito ay isang snippet ng Javascript mula sa Twitter na nagpapakita ng isang listahan ng aking kamakailang mga tweet na naka-istilong sa CSS. Sa tutorial na ito, ipapakita ko sa iyo:


  • Ang kinakailangang HTML at Javascript code upang hilahin ang pinakabagong mga tweet
  • Isang pangkalahatang-ideya ng HTML markup at mga nauugnay na CSS selectors
  • Dalawang halimbawa ng mga naka-istilong mga widget ng Twitter na ginamit ko ang aking sarili

Basahin ang upang makita ang natitirang bahagi ng tutorial …

Ang HTML at Javascript

Ginagamit ng Twitter ang code na ito sa kanilang site ngunit sa ilang kadahilanan tinanggal nila ito sa pabor sa mga ito mas mababa nababaluktot na mga widget. Kakailanganin mo ng dalawang piraso ng code.

Una, ilagay ang sumusunod na code kung saan mo nais na ipakita ang listahan:

  • Paglo-load ng feed ng Twitter

Tandaan: Ang

  • Paglo-load ng feed ng Twitter
  • ay hindi isang bahagi ng orihinal na code na ibinigay ng Twitter, ngunit kinakailangan upang mapatunayan ang HTML. Maaari rin itong magbigay ng isang kapaki-pakinabang na mensahe habang ang feed ay naglo-load, dahil maaaring tumagal ng ilang segundo sa isang mabagal na araw.

    Pangalawa, kakailanganin mong ilagay ang mga sumusunod na linya ng Javascript malapit sa tag hangga’t maaari.

    Kasalukuyan akong nasa kanan nito sa itaas ng aking Google Analytics code. Dapat mong panatilihing mababa ang mga linya ng Javascript na ito sa pahina dahil kung hindi nag-load ang Twitter, ang lahat sa ibaba ng code na iyon ay hang (na hindi isang malaking pakikitungo kung nasa ibaba na ito).

    Pangkalahatang-ideya ng HTML Markup at CSS Selectors

    Ngayon ay hindi mo makita ang markup ng HTML na bumubuo ang widget ng Twitter nang hindi gumagamit ng isang bagay tulad ng Web Developer Toolbar. Masuwerte para sa iyo, nagawa ko na ito para sa iyo. Narito ang isang listahan ng sample na may isang tweet lamang bilang isang halimbawa.

    • #twitter_update_list – Pinipili ang buong listahan
    • #twitter_update_list li – Piliin ang mga item sa listahan ng indibidwal
    • #twitter_update_list li span – Pinipili ang bahagi ng “tweet” ng item sa listahan, hindi ang oras na nakalipas na link
    • #twitter_update_list li span a – Pinipili ang link sa loob ng “tweet” na bahagi ng listahan ng listahan
    • #twitter_update_list isang [style ="laki ng font: 85%;"] – Pinipili ang link na “oras na nakalipas”, sa isang medyo nakakatakot na paraan (tingnan ang tala sa ibaba).

    Tandaan: Dahil mayroong isang inline na istilo sa nakaraan na link na nagtatakda ng laki ng font sa 85%, ginagawang medyo mahirap na i-override nang walang isang hacky na piraso ng code. Ginamit ko ito bago i-reset ang laki ng font sa katulad ng ang natitirang listahan:

    #twitter_update_list isang [style ="laki ng font: 85%;"] {laki ng font: 1em! mahalaga; }

    Iyon ay marahil ay hindi gagana sa mga unang bersyon ng IE dahil sa “! Mahalaga” na bahagi. Maaari mo ring gamitin ang display: block; upang ilipat ang link na iyon sa susunod na linya.

    Live na Halimbawa

    Para sa isang live na halimbawa, tingnan ang footer ng Tema ng Lab. O kung binabasa mo ito sa iyong feed reader o isang hindi awtorisadong site ng scraper, suriin ang screenshot sa ibaba.

    Feed ng Tema ng Twitter Lab

    Narito ang code na ginagamit ko para sa listahan:

    #twitter_update_list {
    laki ng font: 13px;
    taas ng linya: 21px;
    istilo ng listahan: wala;
    }
    #twitter_update_list li {
    background: url (‘mga imahe / twitter-divider.gif’) ibabang kaliwa ulit-x;
    padding-ibaba: 7px;
    margin-ibaba: 9px;
    }
    Ang #twitter_update_list span, #twitter_update_list ay sumasaklaw sa isang {
    kulay: #ababab;
    dekorasyon ng teksto: wala;
    }
    #twitter_update_list isang {
    kulay: # 6f7276;
    }

    • Pinili ng unang linya ang buong listahan. Itinatakda nito ang laki ng font, taas ng linya, at tinitiyak na hindi lalabas ang mga puntos ng bala.
    • Ang pangalawang linya ay gumagawa ng isang maliit na imahe ng 2 × 1 na ulitin sa ibaba ng bawat item na listahan bilang isang uri ng divider. Ang padding ay nagtatakda ng puwang sa pagitan ng tweet at sa tuktok na gilid ng divider. Ang margin ay nagtatakda ng puwang sa pagitan ng ilalim na gilid ng divider at sa susunod na tweet.
    • Ang ikatlong linya ay nagtatakda ng kulay ng tweet, kabilang ang mga link, at tinitiyak na walang mga linya na lumilitaw sa ibaba ng mga link.
    • Ang huling linya ay nagtatakda ng kulay ng link na “oras na nakalipas”.

    At iyon! Kung kailangan kong baguhin ang isang bagay, naiiba ko ang mga link na in-tweet kahit papaano, at maaaring magdagdag din ng mga hover effects sa mga link..

    Maaari itong Magamit sa Anumang Site

    Hindi tulad ng lahat ng iba pa kung paano gawin ang XYZ nang walang isang plugin nai-post doon, walang aktwal na WordPress code na ginamit sa tutorial na ito.

    Dahil hindi gumagamit ng WordPress code ito, hindi ito nai-file sa ilalim ng Mga Tutorial ng WordPress koleksyon Maaari itong magamit sa halos anumang uri ng site, sa pag-aakalang maaari mong mai-edit ang pinagmulang HTML at CSS.

    Kung nais mong gamitin ito sa loob ng WordPress, iminumungkahi kong manu-mano ang pag-edit ng iyong mga file ng tema upang ipasok ang dalawang linya ng Javascript sa footer ng iyong site, o kahit na pag-hook ito sa iyong wp_footer () hook.

    Tulad ng para sa widget mismo, maaari mong i-paste ang code sa loob ng isang widget ng teksto o manu-manong code ito sa iyong sidebar (o saan man).

    Konklusyon

    Sana nagustuhan mo lahat ang tutorial, gusto kong marinig ang iyong mga saloobin sa mga komento. Kung mayroon kang anumang mga kahilingan para sa mabilis na mga tip sa WordPress o CSS, huwag mag-atubiling ipaalam sa akin. Maaari itong itampok sa hinaharap na post ng Tutorial Martes sa Tema Lab!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me