Vytvorte si vlastný widget na Twitteri bez doplnku

Niekoľkokrát ma požiadali o to, ktorý doplnok WordPress používam na generovanie zoznamu „Twitter Feed“ v päte stránky. Doplnok vôbec nepoužívam, je to útržok kódu Javascript z Twitteru, ktorý zobrazuje zoznam mojich posledných tweetov, ktoré som vytvoril pomocou CSS. V tomto návode vám ukážem:


  • Potrebný kód HTML a Javascript na získanie najnovších tweetov
  • Prehľad značiek HTML a pridružených selektorov CSS
  • Dva príklady prispôsobených miniaplikácií Twitter, ktoré som použil

Čítajte ďalej a prečítajte si zvyšok tutoriálu …

HTML a Javascript

Twitter poskytoval tento kód na svojich stránkach, ale z nejakého dôvodu ho odstránili v prospech týchto stránok omnoho flexibilnejšie widgety. Budete potrebovať dva kusy kódu.

Najprv umiestnite nasledujúci kód, kde chcete, aby sa zoznam zobrazoval:

  • Načítava sa informačný kanál Twitter

Poznámka:

  • Načítava sa informačný kanál Twitter
  • nie je súčasťou pôvodného poskytovaného kódu Twitter, ale je potrebné vykonať overenie HTML. Môže tiež poskytnúť užitočnú správu počas načítania informačného kanála, pretože to môže trvať niekoľko sekúnd v pomalý deň.

    Po druhé, budete musieť umiestniť nasledujúce riadky jazyka Javascript čo najbližšie k značke.

    Momentálne ho mám priamo nad svojím kódom Google Analytics. Mali by ste udržiavať tieto riadky jazyka Javascript čo najnižšie na stránke, pretože v prípade, že sa nenačíta Twitter, všetko pod týmto kódom sa zablokuje (čo nie je veľký problém, ak je už dole).

    Prehľad značiek HTML a selektorov CSS

    Teraz nevidíte označenie HTML, ktoré generuje miniaplikácia Twitter, bez použitia niečoho, ako je napríklad Panel s nástrojmi pre vývojárov webu. Našťastie pre vás, urobil som to pre vás. Toto je ukážkový zoznam s iba jedným tweetom ako príkladom.

    • #twitter_update_list – Vyberie celý zoznam
    • #twitter_update_list li – Vyberte jednotlivé položky zoznamu
    • #twitter_update_list li span – Vyberie časť „tweet“ položky zoznamu, nie odkaz pred časom
    • #twitter_update_list li span a – Vyberie odkaz v časti položky „tweet“ položky zoznamu
    • #twitter_update_list a [style ="veľkosť písma: 85%;"] – Vyberie odkaz „pred časom“ trochu hackersky (pozri poznámku nižšie).

    Poznámka: Pretože v čase odkazu existuje inline štýl, ktorý nastavuje veľkosť písma na 85%, je obtiažne ho prepísať bez drsného kódu. Použil som to predtým, aby som nastavil veľkosť písma na rovnakú časť ako v zozname:

    #twitter_update_list a [style ="veľkosť písma: 85%;"] {font-size: 1em! important; }

    Pravdepodobne to nefunguje v skorších verziách IE kvôli časti „! Important“. Môžete tiež použiť displej: block; presunúť tento odkaz na ďalší riadok.

    Živý príklad

    V prípade živého príkladu si pozrite pätu stránky Téma Lab. Ak to čítate v čítačke informačných kanálov alebo na neautorizovanom webe so škrabkou, pozrite si nižšie uvedený screenshot.

    Téma Lab Twitter Feed

    Tu je kód, ktorý používam pre zoznam:

    #twitter_update_list {
    veľkosť písma: 13px;
    výška riadku: 21px;
    štýl zoznamu: žiadny;
    }
    #twitter_update_list li {
    background: url (‘images / twitter-divider.gif’) vľavo dole, opakovanie x;
    čalúnenie: 7px;
    okraj-spodok: 9px;
    }
    #twitter_update_list span, #twitter_update_list span a {
    farba: #ababab;
    dekorácia textu: žiadna;
    }
    #twitter_update_list a {
    farba: # 6f7276;
    }

    • Prvý riadok vyberie celý zoznam. Nastavuje veľkosť písma, výšku riadku a zabezpečuje, aby sa nezobrazovali žiadne guľky.
    • Druhý riadok spôsobí, že sa pod každou položkou zoznamu opakuje malý obrázok 2 × 1 ako určitý oddeľovač. Čalúnenie nastavuje priestor medzi tweetom a horným okrajom deliča. Okraj určuje medzeru medzi dolným okrajom deliča a ďalším tweetom.
    • Tretí riadok nastavuje farbu tweetu vrátane odkazov a zabezpečuje, aby sa pod odkazmi nezobrazovali žiadne riadky.
    • Posledný riadok nastavuje farbu odkazu „pred časom“.

    A to je všetko! Keby som musel zmeniť jednu vec, nejakým spôsobom by som odlíšil odkazy v tweetu a možno by som pridal aj efekty vznášania sa na odkazy..

    Toto sa dá použiť na ľubovoľnom mieste

    Na rozdiel od všetkých ostatných ako to urobiť XYZ bez plugin príspevky tam, neexistuje žiadny skutočný WordPress kód používaný v tomto tutoriále.

    Keďže sa v ňom nepoužíva žiadny kód WordPress, nezadáva sa pod Výukové programy WordPress kolekcie. Môže byť použitý na takmer akomkoľvek mieste, za predpokladu, že môžete upravovať zdroj HTML a CSS.

    Ak ho chcete používať v rámci WordPress, navrhujem manuálne upraviť súbory tém tak, aby ste vložili dva riadky jazyka Javascript do päty vašej stránky, alebo ich dokonca zahákli do háčika wp_footer ()..

    Pokiaľ ide o samotný widget, môžete ho vložiť buď do textového widgetu, alebo ho manuálne kódovať do bočného panela (alebo kamkoľvek).

    záver

    Dúfam, že sa vám všetkým tento kurz páčil, rád by som v komentároch počul vaše myšlienky. Ak máte akékoľvek požiadavky na rýchle tipy pre WordPress alebo CSS, dajte mi vedieť. Môže sa objaviť v budúcom utorkovom príspevku v téme Lab!

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