Naredite pripomoček za Twitter po meri brez vtičnika

Nekajkrat so me vprašali, kateri vtičnik WordPress uporabljam za ustvarjanje seznama “Feed Feed” v nogi mojega spletnega mesta. Pravzaprav vtičnika sploh ne uporabljam, to je delček Javascripta iz Twitterja, ki prikazuje seznam mojih nedavnih tvitov, ki sem jih oblikoval s CSS. V tej vadnici vam bom pokazal:


  • Potrebna koda HTML in Javascript za poteg najnovejših tvitov
  • Pregled oznake HTML in pripadajočih izbirnikov CSS
  • Dva primera pripomočkov Twitter-ja po meri, ki sem jih uporabil sam

Preberite si nadaljevanje vadnice …

HTML in Javascript

Twitter je to kodo uporabljal na svojem spletnem mestu, vendar so jo iz nekega razloga odstranili v prid veliko manj prilagodljivih pripomočkov. Potrebovali boste dva kosa.

Najprej vnesite to kodo, kjer želite, da se seznam prikaže:

  • Nalaganje vira na Twitter

Opomba: The

  • Nalaganje vira na Twitter
  • ni del izvirne kode, ki jo je poslal Twitter, vendar mora biti HTML preverjen. Med nalaganjem vira lahko poda tudi uporabno sporočilo, saj lahko na počasen dan traja nekaj sekund.

    Drugič, morate postaviti naslednje vrstice Javascript čim bližje oznaki.

    Trenutno jo imam tik nad kodo Google Analytics. Te vrstice Javascripta imejte čim nižje na strani, ker v primeru, da se Twitter ne naloži, bo vse pod to kodo obesilo (kar ni velika težava, če je že na dnu).

    Pregled označevanja HTML in izbirnikov CSS

    Zdaj ne morete videti oznake HTML, ki jo ustvarja Twitter gradnik, ne da bi uporabili nekaj, kot je orodna vrstica spletnega razvijalca. Srečno zate, to sem storil zate. Tu je primer vzorčnega seznama s samo enim tvitom.

    • #twitter_update_list – izbere celoten seznam
    • #twitter_update_list li – Izberite posamezne elemente seznama
    • #twitter_update_list li span – izbere “tweet” del elementa seznama in ne povezavo pred časom
    • #twitter_update_list li span a – Izbere povezavo znotraj “tweet” dela seznama
    • #twitter_update_list a [style ="velikost pisave: 85%;"] – izbere povezavo »pred časom« na nekoliko osupljiv način (glej opombo spodaj).

    Opomba: Ker je v časovni povezavi inline slog, ki določa velikost pisave na 85%, je nekoliko težko preglasiti brez hecavega dela kode. To sem že uporabljal, da sem velikost pisave ponastavil na ostalo kot na seznamu:

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

    V zgodnjih različicah IE to verjetno ne deluje zaradi “pomembnega” dela. Uporabite lahko tudi display: block; da to povezavo premaknete na naslednjo vrstico.

    Primer v živo

    Primer v živo si oglejte v nogi Tematski laboratorij. Če pa to berete v svojem bralniku vira ali na nepooblaščenem spletnem mestu za strganje, si oglejte spodnji posnetek zaslona.

    Feed s temami laboratorija

    Tu je koda, ki jo uporabljam za seznam:

    #twitter_update_list {
    velikost pisave: 13px;
    črta-višina: 21px;
    seznam-slog: noben;
    }
    #twitter_update_list li {
    ozadje: url (‘images / twitter-delier.gif’) spodaj levo ponovite-x;
    oblazinjeno dno: 7px;
    zgornja meja: 9px;
    }
    #twitter_update_list razpon, #twitter_update_list razpon a {
    barva: #ababab;
    urejanje besedila: nič;
    }
    #twitter_update_list a {
    barva: # 6f7276;
    }

    • Prva vrstica izbere celoten seznam. Nastavi velikost pisave, višino črte in poskrbi, da se ne prikažejo točke črke.
    • Druga vrstica naredi majhno 2 × 1 sliko pod vsako točko seznama kot neke vrste delilnik. Oblazinjenje določa prostor med tvitom in zgornjim robom delilnika. Obrobje določa prostor med spodnjim robom delilnika in naslednjim tvitom.
    • Tretja vrstica nastavi barvo tvita, vključno s povezavami, in poskrbi, da se pod povezavami ne prikažejo nobene vrstice.
    • Zadnja vrstica nastavi barvo povezave “pred časom”.

    In to je to! Če bi moral spremeniti eno stvar, bi nekako razlikoval povezave med tvitom in morda na povezave dodal tudi učinke lebdenja.

    To je mogoče uporabiti na katerem koli spletnem mestu

    Za razliko od vseh drugih kako narediti XYZ brez vtičnika objav tam, v tej vadnici ni nobene dejanske kode za WordPress.

    Ker ta ne uporablja nobene kode WordPress, ni vložena pod Vadnice za WordPress zbirka. Uporablja se lahko na skoraj vseh spletnih mestih, ob predpostavki, da lahko urejate izvor HTML in CSS.

    Če ga želite uporabljati v programu WordPress, predlagam, da ročno uredite datoteke s temami, da v vrstico svojega spletnega mesta vstavite dve vrstici Javascripta ali ga celo priklopite v kavelj wp_footer ().

    Kar se tiče samega pripomočka, lahko kodo prilepite v besedilni gradnik ali ročno kodirate na svojo stransko vrstico (ali kamor koli).

    Zaključek

    Upam, da vam je vsem všeč vadnica, rada bi slišala vaše misli v komentarjih. Če imate kakršne koli zahteve po hitrih nasvetih za WordPress ali CSS, me obvestite. Morda bo predstavljen v prihodnji torek z vadnicami v 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