Padarykite tinkintą „Twitter“ valdiklį be papildinio

Kelis kartus manęs paklausė, kurį „WordPress“ papildinį naudoju kurdamas „Twitter“ sąrašą savo svetainės poraštėje. Aš iš tikrųjų visiškai nenaudoju papildinio, tai „Javascript“ fragmentas iš „Twitter“, kuriame pateikiamas mano naujausių „Twitter“, kurį sukūriau naudodamas CSS, sąrašas. Šiame vadove aš jums parodysiu:


  • Būtinas HTML ir „Javascript“ kodas naujausiems tviteriams traukti
  • HTML žymėjimo ir susijusių CSS parinkiklių apžvalga
  • Du „Twitter“ valdiklių, kuriuos naudojau pats, pavyzdžiai

Perskaitykite toliau, kad pamatytumėte likusią mokymo programą …

HTML ir „Javascript“

„Twitter“ savo svetainėje naudojo šį kodą, tačiau dėl tam tikrų priežasčių jie jį pašalino daug mažiau lankstūs valdikliai. Jums reikės dviejų kodo dalių.

Pirmiausia įdėkite šį kodą ten, kur norite rodyti sąrašą:

  • „Twitter“ kanalo įkėlimas

Pastaba:

  • „Twitter“ kanalo įkėlimas
  • nėra pateikto pirminio „Twitter“ kodo dalis, tačiau ją reikia patvirtinti HTML. Tai taip pat gali pateikti naudingą pranešimą, kai kraunamas sklaidos kanalas, nes lėtą dieną tai gali užtrukti kelias sekundes.

    Antra, turėsite įdėti šias „Javascript“ eilutes kuo arčiau etiketės.

    Šiuo metu turiu jį tiesiai virš „Google Analytics“ kodo. Puslapyje turėtumėte išlaikyti kuo mažesnes „Javascript“ eilutes, nes tuo atveju, jei „Twitter“ nebus įkeltas, viskas, kas yra žemiau to kodo, bus pakabinta (o tai nėra didelė problema, jei ji jau yra apačioje).

    HTML žymėjimo ir CSS parinkiklių apžvalga

    Dabar nematote HTML žymėjimo, kurį sukuria „Twitter“ valdiklis, nenaudodamas kažko panašaus į žiniatinklio kūrėjų įrankių juostą. Pasisekė tau, aš tai padariau tau. Čia yra pavyzdžių sąrašas, kuriame kaip pavyzdys pateiktas tik vienas „Twitter“.

    • #twitter_update_list – parenka visą sąrašą
    • #twitter_update_list li – Pasirinkite atskirus sąrašo elementus
    • #twitter_update_list li span – pasirenka sąrašo elemento „tweet“ dalį, o ne nuorodą prieš laiką
    • #twitter_update_list li span a – pasirenka nuorodą sąrašo elemento „tweet“ dalyje
    • #twitter_update_list a [style ="šrifto dydis: 85%;"] – šiek tiek apgaulingai pasirenka nuorodą „prieš laiką“ (žr. Pastabą žemiau).

    Pastaba: Kadangi prieš tai buvusioje nuorodoje yra įterptas stilius, kuris nustato 85% šrifto dydį, tai šiek tiek apsunkina nepaisymą be apgaulingo kodo. Aš anksčiau tai panaudojau, norėdamas atkurti šrifto dydį taip, kaip likusį sąrašą:

    #twitter_update_list a [style ="šrifto dydis: 85%;"] {šrifto dydis: 1em! svarbu; }

    Tikriausiai tai neveikia ankstesnėse IE versijose dėl „! Svarbios“ dalies. Taip pat galite naudoti ekraną: blokuoti; norėdami perkelti tą saitą į kitą eilutę.

    Gyvas pavyzdys

    Norėdami pamatyti gyvą pavyzdį, peržiūrėkite poraštę apie Temų laboratorija. Arba, jei jūs skaitote tai savo sklaidos kanalų skaitytuve ar neleistino skreperio svetainėje, peržiūrėkite toliau pateiktą ekrano kopiją.

    Temos laboratorijos „Twitter“ kanalas

    Štai kodas, kurį naudoju sąraše:

    #twitter_update_list {
    šrifto dydis: 13 pikselių;
    linijos aukštis: 21 taškas;
    sąrašo stilius: nėra;
    }
    #twitter_update_list li {
    fonas: URL (‘vaizdai / twitter-divider.gif’) apačioje kairėje pakartoti x;
    paminkštinimas-dugnas: 7px;
    paraštės apačia: 9 pikseliai;
    }
    #twitter_update_list span, #twitter_update_list span a {
    spalva: #ababas;
    teksto dekoravimas: nėra;
    }
    #twitter_update_list a {
    spalva: # 6f7276;
    }

    • Pirmoje eilutėje pasirenkamas visas sąrašas. Jame nustatomas šrifto dydis, eilutės aukštis ir užtikrinama, kad nerodytų jokių ženklų.
    • Antroje eilutėje mažas 2 × 1 paveikslėlis kartojamas po kiekvienu sąrašo elementu kaip daliklis. Padėklas nustato tarpą tarp tviterio ir viršutinio daliklio krašto. Paraštis nustato tarpą tarp apatinio daliklio krašto ir kito tviterio.
    • Trečioji eilutė nustato tviterio spalvą, įskaitant nuorodas, ir įsitikina, kad žemiau linijų nebus rodomos jokios eilutės.
    • Paskutinė eilutė nustato nuorodos „laikas atgal“ spalvą.

    Štai ir viskas! Jei man reikėjo pakeisti vieną dalyką, aš kažkaip atskyriau tviteryje esančias nuorodas ir galbūt pridėsiu pelės žymeklio efektą ir nuorodoms.

    Tai galima naudoti bet kurioje svetainėje

    Skirtingai nuo visų kitų kaip padaryti XYZ be papildinio įrašų, nėra tikrojo „WordPress“ kodo, naudojamo šioje mokymo programoje.

    Kadangi jame nenaudojamas „WordPress“ kodas, jis nėra įdėtas į „WordPress“ vadovėliai kolekcija. Jis gali būti naudojamas beveik bet kokio tipo svetainėse, darant prielaidą, kad galite redaguoti HTML šaltinį ir CSS.

    Jei norite jį naudoti „WordPress“, siūlyčiau rankiniu būdu redaguoti temos failus, kad įterptumėte dvi „Javascript“ eilutes į savo svetainės poraštę arba net įkištumėte į savo „wp_footer ()“ kabliuką..

    Kalbant apie patį valdiklį, galite įklijuoti kodą teksto valdiklyje arba rankiniu būdu koduoti jį savo šoninėje juostoje (arba bet kur)..

    Išvada

    Tikiuosi, kad jums patiko vadovėlis, norėčiau išgirsti jūsų mintis komentaruose. Jei turite užklausų dėl greitų „WordPress“ ar CSS patarimų, nedvejodami praneškite man. Tai gali būti parodyta būsimame „Tutorial“ antradienio įraše „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