Maak een aangepaste Twitter-widget zonder plug-in

Er is mij een paar keer gevraagd welke WordPress-plug-in ik gebruik om de “Twitter Feed” -lijst in de voettekst van mijn site te genereren. Ik gebruik eigenlijk helemaal geen plug-in, het is een fragment van Javascript van Twitter dat een lijst toont van mijn recente tweets die ik heb gestyled met CSS. In deze tutorial laat ik je zien:


  • De nodige HTML- en Javascript-code om de laatste tweets te halen
  • Een overzicht van de HTML-opmaak en bijbehorende CSS-kiezers
  • Twee voorbeelden van op maat gemaakte Twitter-widgets die ik zelf heb gebruikt

Lees verder om de rest van de tutorial te zien …

De HTML en Javascript

Twitter verstrekte deze code altijd op hun site, maar om de een of andere reden hebben ze deze verwijderd veel minder flexibele widgets. Je hebt twee stukjes code nodig.

Plaats eerst de volgende code waar u de lijst wilt laten verschijnen:

  • Twitter-feed laden

Notitie: De

  • Twitter-feed laden
  • maakt geen deel uit van de originele code die Twitter heeft verstrekt, maar het is vereist om de HTML te valideren. Het kan ook een nuttig bericht zijn terwijl de feed wordt geladen, omdat het op een langzame dag enkele seconden kan duren.

    Ten tweede moet u de volgende regels Javascript plaatsen zo dicht mogelijk bij de tag.

    Ik heb het momenteel direct boven mijn Google Analytics-code. Je moet deze regels Javascript zo laag mogelijk houden op de pagina, want in het geval dat Twitter niet laadt, blijft alles onder die code hangen (wat geen probleem is als het al onderaan staat).

    Overzicht van HTML-opmaak en CSS-kiezers

    Nu kun je de HTML-opmaak die de Twitter-widget genereert niet zien zonder zoiets als Web Developer Toolbar te gebruiken. Gelukkig voor jou, ik heb het voor je gedaan. Hier is een voorbeeldlijst met slechts één tweet als voorbeeld.

    • #twitter_update_list – Selecteert de hele lijst
    • #twitter_update_list li – Selecteer individuele lijstitems
    • #twitter_update_list li span – Selecteert het “tweet” -gedeelte van het lijstitem, niet de tijd geleden-link
    • #twitter_update_list li span a – Selecteert de link binnen het “tweet” -gedeelte van het lijstitem
    • #twitter_update_list a [style ="lettergrootte: 85%;"] – Selecteert de “tijd geleden” -link, op een enigszins hacky manier (zie opmerking hieronder).

    Notitie: Aangezien er een inline-stijl is in de tijd geleden-link die de lettergrootte op 85% instelt, maakt het het enigszins moeilijk om te overschrijven zonder een hacky stuk code. Ik heb dit eerder gebruikt om de lettergrootte opnieuw in te stellen op de rest van de lijst:

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

    Dat werkt waarschijnlijk niet in vroege versies IE vanwege het “! Belangrijke” deel. U kunt ook display: block gebruiken; om die link naar de volgende regel te verplaatsen.

    Live voorbeeld

    Bekijk voor een live voorbeeld de voettekst van Theme Lab. Of als je dit leest in je feedreader of een ongeautoriseerde schrapersite, bekijk dan de onderstaande schermafbeelding.

    Theme Lab Twitter-feed

    Dit is de code die ik gebruik voor de lijst:

    #twitter_update_list {
    lettergrootte: 13px;
    regelhoogte: 21px;
    lijststijl: geen;
    }
    #twitter_update_list li {
    achtergrond: url (‘images / twitter-divider.gif’) linksonder herhaling-x;
    opvulling-onderkant: 7px;
    margin-bottom: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    kleur: #ababab;
    tekstversiering: geen;
    }
    #twitter_update_list a {
    kleur: # 6f7276;
    }

    • De eerste regel selecteert de hele lijst. Het stelt de lettergrootte, regelhoogte in en zorgt ervoor dat er geen opsommingstekens verschijnen.
    • De tweede regel maakt een kleine 2 × 1 afbeeldingherhaling onder elk lijstitem als een soort scheidingslijn. De opvulling bepaalt de ruimte tussen de tweet en de bovenrand van de verdeler. De marge stelt de ruimte in tussen de onderkant van de verdeler en de volgende tweet.
    • De derde regel stelt de kleur van de tweet in, inclusief links, en zorgt ervoor dat er geen regels worden weergegeven onder links.
    • De laatste regel stelt de kleur in van de “tijd geleden” link.

    En dat is het! Als ik één ding moest veranderen, zou ik op de een of andere manier de in-tweet-links differentiëren en misschien ook hover-effecten op links toevoegen.

    Dit kan op elke site worden gebruikt

    In tegenstelling tot alle andere hoe XYZ te doen zonder een plug-in berichten die er zijn, is er geen echte WordPress-code gebruikt in deze tutorial.

    Aangezien dit geen WordPress-code gebruikt, wordt deze niet onder de WordPress-zelfstudies verzameling. Het kan op vrijwel elk soort site worden gebruikt, ervan uitgaande dat u HTML-bron en CSS kunt bewerken.

    Als je het binnen WordPress wilt gebruiken, raad ik je aan om je themabestanden handmatig te bewerken om de twee regels Javascript in de voettekst van je site in te voegen, of het zelfs in je wp_footer () hook te haken.

    Wat betreft de widget zelf, u kunt de code in een tekstwidget plakken of deze handmatig in uw zijbalk (of waar dan ook) coderen.

    Conclusie

    Ik hoop dat jullie de tutorial allemaal leuk vonden, ik hoor graag je mening in de reacties. Als je vragen hebt voor snelle WordPress- of CSS-tips, laat het me dan gerust weten. Het kan te zien zijn in een toekomstige Tutorial Tuesday-post op 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