Lag en tilpasset Twitter-widget uten plugin

Jeg har blitt spurt noen ganger om hvilken WordPress-plugin jeg bruker for å generere “Twitter Feed” -listen i bunnteksten på nettstedet mitt. Jeg bruker faktisk ikke en plugin i det hele tatt, det er et utdrag av Javascript fra Twitter som viser en liste over mine nylige tweets som jeg stilte med CSS. I denne opplæringen skal jeg vise deg:


  • Den nødvendige HTML- og Javascript-koden for å trekke de nyeste tweets
  • En oversikt over HTML-markeringen og tilhørende CSS-velgere
  • To eksempler på egendefinerte Twitter-widgets jeg har brukt selv

Les videre for å se resten av opplæringen …

HTML og Javascript

Twitter pleide å oppgi denne koden på nettstedet, men av en eller annen grunn fjernet de den til fordel for disse mye mindre fleksible widgeter. Du trenger to kodestykker.

Først plasserer du følgende kode der du vil at listen skal vises:

  • Lasting av Twitter-feed

Merk: De

  • Lasting av Twitter-feed
  • er ikke en del av den opprinnelige koden som følger med Twitter, men det er påkrevd at HTML skal validere. Det kan også gi en nyttig melding mens feeden lastes, ettersom det kan ta noen sekunder på en langsom dag.

    For det andre må du plassere følgende linjer i Javascript så nær koden som mulig.

    Jeg har den for øyeblikket rett over min Google Analytics-kode. Du bør holde disse linjene i Javascript så lave som mulig på siden, for i tilfelle Twitter ikke lastes, vil alt under denne koden henge (noe som ikke er en stor sak hvis den allerede er nederst).

    Oversikt over HTML Markup og CSS Selectors

    Nå kan du ikke se HTML-merkingen som Twitter-widgeten genererer uten å bruke noe som Web Developer Toolbar. Heldig for deg, jeg har gjort det for deg. Her er en eksempelliste med bare en tweet som eksempel.

    • #twitter_update_list – Velger hele listen
    • #twitter_update_list li – Velg individuelle listeelementer
    • #twitter_update_list li span – Velger “tweet” -delen av listeelementet, ikke for tiden siden
    • #twitter_update_list li span a – Velger koblingen innenfor “tweet” -delen av listeelementet
    • #twitter_update_list a [style ="skriftstørrelse: 85%;"] – Velger “tid siden” -koblingen, på en noe habil måte (se merknad nedenfor).

    Merk: Siden det er en inline-stil i den tid siden lenken som setter skriftstørrelsen til 85%, gjør det det noe vanskelig å overstyre uten et hakk koden. Jeg har brukt dette før for å tilbakestille skriftstørrelsen til den samme som resten av listen:

    #twitter_update_list a [style ="skriftstørrelse: 85%;"] {font-size: 1em! viktig; }

    Det fungerer sannsynligvis ikke i tidlige versjoner IE på grunn av den “! Viktige” delen. Du kan også bruke display: blokkere; for å flytte lenken til neste linje.

    Levende eksempel

    For et levende eksempel, sjekk bunnteksten til Theme Lab. Eller hvis du leser dette i feed-leseren eller et uautorisert skrapeside, kan du sjekke skjermdumpen nedenfor.

    Theme Lab Twitter Feed

    Her er koden jeg bruker for listen:

    #twitter_update_list {
    skriftstørrelse: 13px;
    linjehøyde: 21px;
    listestil: ingen;
    }
    #twitter_update_list li {
    bakgrunn: url (‘bilder / twitter-divider.gif’) gjenta-nederst til venstre;
    polstring-bunn: 7px;
    margin-bottom: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    farge: #ababab;
    tekstdekorasjon: ingen;
    }
    #twitter_update_list a {
    farge: # 6f7276;
    }

    • Den første linjen velger hele listen. Den angir skriftstørrelse, linjehøyde og sørger for at ingen punkttegn vises.
    • Den andre linjen gjør at et lite 2 × 1 bilde gjentas under hvert listeelement som en slags skillelinje. Polstringen setter avstanden mellom tweeten og toppkanten på skillet. Margen angir mellomrommet mellom underkanten på skillet og neste tweet.
    • Den tredje linjen angir fargen på tweeten, inkludert lenker, og sørger for at ingen linjer vises under lenker.
    • Den siste linjen angir fargen på koblingen “siden siden”.

    Og det er det! Hvis jeg måtte endre en ting, ville jeg differensiere in-tweet-koblingene på en eller annen måte, og kanskje legge til sveveeffekter på lenker også.

    Dette kan brukes på ethvert nettsted

    I motsetning til alle de andre hvordan gjøre XYZ uten en plugin innlegg der ute, det er ingen faktisk WordPress-kode som brukes i denne opplæringen.

    Siden dette ikke bruker noen WordPress-kode, blir den ikke arkivert under WordPress Tutorials samling. Det kan brukes på stort sett alle slags sider, forutsatt at du kan redigere HTML-kilde og CSS.

    Hvis du vil bruke den i WordPress, vil jeg foreslå at du redigerer temafilene manuelt for å sette inn de to linjene i Javascript i bunnteksten på nettstedet ditt, eller til og med koble dem til wp_footer () -kroken.

    Når det gjelder selve widgeten, kan du enten lime inn koden i en tekstwidget eller manuelt kode den inn i sidefeltet (eller hvor som helst).

    Konklusjon

    Håper dere alle likte opplæringen, jeg vil gjerne høre tankene dine i kommentarene. Hvis du har spørsmål om raske WordPress- eller CSS-tips, kan du gi meg beskjed. Det kan vises i et fremtidig tirsdagspost om veiledning på 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