Skapa en anpassad Twitter-widget utan ett plugin

Jag har frågats några gånger om vilket WordPress-plugin jag använder för att skapa “Twitter Feed” -listan i sidfoten på min webbplats. Jag använder faktiskt inte ett plugin alls, det är ett utdrag av Javascript från Twitter som visar en lista över mina nyaste tweets som jag utformade med CSS. I den här självstudien visar jag dig:


  • Den nödvändiga HTML- och Javascript-koden för att dra de senaste tweetsna
  • En översikt över HTML-markeringen och tillhörande CSS-väljare
  • Två exempel på specialanpassade Twitter-widgets som jag har använt själv

Läs vidare för att se resten av lektionen …

HTML och Javascript

Twitter brukade tillhandahålla denna kod på sin webbplats men av någon anledning tog de bort den till förmån för dessa mycket mindre flexibla widgetar. Du behöver två kodkoder.

Först placerar du följande kod där du vill att listan ska visas:

  • Twitter-feed-laddning

Notera: De

  • Twitter-feed-laddning
  • är inte en del av den ursprungliga koden som Twitter tillhandahåller, men det krävs för att HTML ska valideras. Det kan också ge ett användbart meddelande medan flödet laddas, eftersom det kan ta några sekunder på en långsam dag.

    För det andra måste du placera följande rader i Javascript så nära taggen som möjligt.

    Jag har för närvarande rätt ovanför min Google Analytics-kod. Du bör hålla dessa Javascript-linjer så låga som möjligt på sidan eftersom i händelse av att Twitter inte laddas kommer allt under den koden att hänga (vilket inte är en stor sak om det redan är längst ner).

    Översikt över HTML-markering och CSS-väljare

    Nu kan du inte se HTML-markeringen som Twitter-widgeten genererar utan att använda något som Web Developer Toolbar. Tur för dig, jag har gjort det åt dig. Här är en exempellista med bara en tweet som exempel.

    • #twitter_update_list – Väljer hela listan
    • #twitter_update_list li – Välj enskilda listobjekt
    • #twitter_update_list li span – Väljer “tweet” -delen av listobjektet, inte länken sedan
    • #twitter_update_list li span a – Väljer länken inom “tweet” -delen av listobjektet
    • #twitter_update_list a [style ="teckenstorlek: 85%;"] – Väljer länken “tid sedan” på ett något hackigt sätt (se anmärkning nedan).

    Notera: Eftersom det finns en inline-stil i länken för tid sedan som ställer in teckensnittsstorleken till 85%, gör det det något svårt att åsidosätta utan en hackig kodkod. Jag har använt detta tidigare för att återställa teckensnittstorleken till samma som resten av listan:

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

    Det fungerar förmodligen inte i tidiga versioner IE på grund av den “! Viktiga” delen. Du kan också använda display: block; för att flytta länken till nästa rad.

    Levande exempel

    För ett liveexempel, kolla in sidfoten till Theme Lab. Eller om du läser detta i din flödesläsare eller på en obehörig skrapsida, kolla in skärmdumpen nedan.

    Theme Lab Twitter Feed

    Här är koden jag använder för listan:

    #twitter_update_list {
    typstorlek: 13px;
    linjehöjd: 21px;
    liststil: ingen;
    }
    #twitter_update_list li {
    bakgrund: url (‘bilder / twitter-divider.gif’) upprepa längst ner till vänster;
    polstring-botten: 7px;
    marginalbotten: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    färg: #ababab;
    textdekoration: ingen;
    }
    #twitter_update_list a {
    färg: # 6f7276;
    }

    • Den första raden väljer hela listan. Den ställer in teckensnittstorlek, radhöjd och ser till att inga punktpunkter dyker upp.
    • Den andra raden gör en liten 2 × 1-bild upprepad under varje listobjekt som en slags avdelare. Polstringen ställer in utrymmet mellan tweet och överkanten på delaren. Marginalen ställer in utrymmet mellan delarens nedre kant och nästa tweet.
    • Den tredje raden anger färgen på tweeten, inklusive länkar, och ser till att inga rader dyker upp under länkarna.
    • Den sista raden anger färgen på länken “tid sedan”.

    Och det är allt! Om jag var tvungen att ändra en sak, skulle jag på något sätt differentiera in-tweet-länkarna och kanske lägga till svävande effekter på länkar också.

    Detta kan användas på alla webbplatser

    Till skillnad från alla andra hur man gör XYZ utan ett plugin inlägg där ute, det finns ingen faktisk WordPress-kod som används i den här självstudien.

    Eftersom detta inte använder någon WordPress-kod lagras den inte under WordPress Tutorials samling. Det kan användas på nästan alla typer av webbplatser, förutsatt att du kan redigera HTML-källa och CSS.

    Om du vill använda det inom WordPress, föreslår jag manuell redigering av dina temafiler för att infoga de två raderna i Javascript i sidfoten på din webbplats, eller till och med ansluta den till din wp_footer () -krok.

    När det gäller själva widgeten kan du antingen klistra in koden i en textwidget eller manuellt koda den i sidfältet (eller var som helst).

    Slutsats

    Hoppas att ni alla gillade självstudien, jag skulle gärna höra dina tankar i kommentarerna. Om du har några förfrågningar om snabba WordPress- eller CSS-tips kan du gärna meddela mig. Det kan visas i ett framtida tutorial-tisdagpost 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