Utwórz niestandardowy widget Twittera bez wtyczki

Kilka razy zapytano mnie o to, której wtyczki WordPress używam do generowania listy „Twitter Feed” w stopce mojej witryny. Właściwie wcale nie używam wtyczki, to fragment kodu JavaScript z Twittera, który wyświetla listę moich ostatnich tweetów, które zaprojektowałem za pomocą CSS. W tym samouczku pokażę Ci:


  • Niezbędny kod HTML i JavaScript do ściągnięcia najnowszych tweetów
  • Przegląd znaczników HTML i powiązanych selektorów CSS
  • Dwa przykłady niestandardowych widgetów Twittera, z których sam korzystałem

Czytaj dalej, aby zobaczyć resztę samouczka…

HTML i JavaScript

Twitter dostarczał ten kod na swojej stronie, ale z jakiegoś powodu usunął go na ich rzecz znacznie mniej elastyczne widżety. Potrzebujesz dwóch fragmentów kodu.

Najpierw umieść następujący kod w miejscu, w którym ma się wyświetlać lista:

  • Ładowanie kanału z Twittera

Uwaga: The

  • Ładowanie kanału z Twittera
  • nie jest częścią oryginalnego kodu udostępnionego przez Twittera, ale jest wymagany do sprawdzenia poprawności kodu HTML. Może także dostarczyć użytecznej wiadomości podczas ładowania kanału, ponieważ może to zająć kilka sekund w wolnym dniu.

    Po drugie, musisz umieścić następujące wiersze Javascript tak blisko tagu, jak to możliwe.

    Obecnie mam go powyżej mojego kodu Google Analytics. Powinieneś utrzymywać te wiersze Javascript na jak najniższym poziomie na stronie, ponieważ w przypadku, gdy Twitter się nie ładuje, wszystko poniżej tego kodu zawiesi się (co nie jest wielką przeszkodą, jeśli jest już na dole).

    Omówienie znaczników HTML i CSS

    Teraz nie widzisz znaczników HTML generowanych przez widżet Twittera bez użycia czegoś takiego jak pasek narzędzi dla programistów stron internetowych. Na szczęście dla ciebie, zrobiłem to dla ciebie. Oto przykładowa lista z jednym tweetem jako przykładem.

    • #twitter_update_list – Wybiera całą listę
    • #twitter_update_list li – Wybierz poszczególne elementy listy
    • #twitter_update_list li span – Wybiera część „tweet” elementu listy, a nie link do czasu temu
    • #twitter_update_list li span a – Wybiera łącze w części „tweet” elementu listy
    • #twitter_update_list a [style ="rozmiar czcionki: 85%;"] – Wybiera link „time ago” w nieco hackerski sposób (patrz uwaga poniżej).

    Uwaga: Ponieważ w łączu czasu temu jest wbudowany styl, który ustawia rozmiar czcionki na 85%, utrudnia to przesłonięcie bez włamania do kodu. Użyłem tego wcześniej, aby zresetować rozmiar czcionki do tego samego, co reszta listy:

    #twitter_update_list a [style ="rozmiar czcionki: 85%;"] {font-size: 1em! ważna; }

    To prawdopodobnie nie działa we wczesnych wersjach IE z powodu części „! Ważna”. Możesz także użyć display: block; aby przenieść ten link do następnej linii.

    Przykład na żywo

    Na przykład na żywo sprawdź stopkę Theme Lab. Lub jeśli czytasz to w czytniku kanałów lub na nieautoryzowanej stronie skrobaka, sprawdź zrzut ekranu poniżej.

    Kanał tematów na Twitterze

    Oto kod, którego używam na liście:

    #twitter_update_list {
    rozmiar czcionki: 13px;
    wysokość linii: 21px;
    styl listy: brak;
    }
    #twitter_update_list li {
    background: url (‘images / twitter-divider.gif’) u dołu po lewej repeat-x;
    padding-bottom: 7px;
    margines na dole: 9 pikseli;
    }
    #twitter_update_list span, #twitter_update_list span a {
    kolor: #ababab;
    dekoracja tekstu: brak;
    }
    #twitter_update_list a {
    kolor: # 6f7276;
    }

    • Pierwszy wiersz wybiera całą listę. Ustawia rozmiar czcionki, wysokość linii i zapewnia, że ​​nie pojawią się żadne punkty wypunktowane.
    • Drugi wiersz sprawia, że ​​mały obraz 2 × 1 powtarza się pod każdym elementem listy jako rodzaj dzielnika. Wypełnienie ustawia przestrzeń między tweetem a górną krawędzią dzielnika. Margines określa przestrzeń między dolną krawędzią dzielnika a następnym tweetem.
    • Trzecia linia ustawia kolor tweeta, w tym linki, i upewnia się, że pod linkami nie będą wyświetlane żadne linie.
    • Ostatnia linia ustawia kolor linku „czas temu”.

    I to wszystko! Gdybym musiał zmienić jedną rzecz, rozróżniłbym w jakiś sposób linki w tweetach, a może też dodać efekty najechania kursorem na linki.

    Można tego użyć w dowolnej witrynie

    W przeciwieństwie do wszystkich innych jak zrobić XYZ bez wtyczki posty tam, nie ma rzeczywistego kodu WordPress użytego w tym samouczku.

    Ponieważ nie używa to kodu WordPress, nie jest składany w ramach Samouczki WordPress kolekcja. Można go używać na niemal każdym rodzaju strony, zakładając, że możesz edytować źródło HTML i CSS.

    Jeśli chcesz używać go w WordPress, sugerowałbym ręczną edycję plików motywu, aby wstawić dwa wiersze JavaScript w stopce witryny, a nawet zaczepić go w haku wp_footer ().

    Jeśli chodzi o sam widget, możesz wkleić kod do widgetu tekstowego lub ręcznie kodować go na pasku bocznym (lub gdziekolwiek).

    Wniosek

    Mam nadzieję, że wszystkim wam się podobał samouczek. Chciałbym usłyszeć wasze przemyślenia w komentarzach. Jeśli masz jakieś prośby o szybkie porady WordPress lub CSS, daj mi znać. Może być opisany w przyszłym wtorkowym tutorialu w Theme Lab!

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