Izveidojiet pielāgotu Twitter logrīku bez spraudņa

Man pāris reizes ir jautāts, kuru WordPress spraudni es izmantoju, lai vietnes “kājenē” izveidotu “Twitter plūsmas” sarakstu. Es faktiski nelietoju spraudni, tas ir Javascript fragments no čivināt, kurā parādīts saraksts ar maniem pēdējiem tvītiem, kurus veidoju ar CSS. Šajā apmācībā es jums parādīšu:


  • Nepieciešamais HTML un Javascript kods, lai ievilktu jaunākos tweets
  • Pārskats par HTML marķējumu un saistītajiem CSS atlasītājiem
  • Divi pielāgoto Twitter sīkrīku piemēri, kurus esmu izmantojis pats

Lasiet tālāk, lai redzētu pārējo apmācību…

HTML un Javascript

Twitter izmantoja šo kodu savā vietnē, bet kādu iemeslu dēļ viņi to noņemja par labu šiem daudz mazāk elastīgi logrīki. Jums būs nepieciešami divi koda fragmenti.

Vispirms ievietojiet šo kodu tur, kur vēlaties parādīt sarakstu:

  • Twitter plūsmas ielāde

Piezīme:

  • Twitter plūsmas ielāde
  • nav sākotnējā Twitter sniegtā koda sastāvdaļa, taču tas ir nepieciešams, lai HTML būtu validēts. Plūsmas ielādes laikā tas var arī sniegt noderīgu ziņojumu, jo lēnā dienā tas var aizņemt dažas sekundes.

    Otrkārt, jums būs jānovieto šādas Javascript rindiņas pēc iespējas tuvāk tagam.

    Pašlaik tas atrodas tieši virs mana Google Analytics koda. Šīs Javascript rindiņas jums lapā vajadzētu būt pēc iespējas zemākām, jo ​​gadījumā, ja čivināt netiek ielādēts, viss zem šī koda tiek pakārts (kas nav liels darījums, ja tas jau ir apakšā).

    Pārskats par HTML marķējumu un CSS atlasītājiem

    Tagad jūs nevarat redzēt HTML marķējumu, ko ģenerē Twitter logrīks, neizmantojot kaut ko līdzīgu Web izstrādātāja rīkjoslai. Lai jums veicas, es to esmu izdarījis jūsu labā. Šeit ir paraugu saraksts, kurā kā piemērs ir tikai viens tvīts.

    • #twitter_update_list – izvēlas visu sarakstu
    • #twitter_update_list li – atlasiet atsevišķus saraksta vienumus
    • #twitter_update_list li span – izvēlas saraksta vienības “tweet” daļu, nevis saiti pirms laika
    • #twitter_update_list li span a – izvēlas saiti saraksta elementa “tweet” daļā
    • #twitter_update_list a [style ="fonta lielums: 85%;"] – nedaudz slikti izvēlas saiti “pirms laika” (sk. Piezīmi zemāk).

    Piezīme: Tā kā pirms laika saitē ir iekļauts stils, kas nosaka fonta lielumu 85%, tas nedaudz apgrūtina ignorēšanu bez hacky koda. Es to esmu izmantojis iepriekš, lai atiestatītu fonta lielumu tādā pašā mērā kā pārējā sarakstā:

    #twitter_update_list a [style ="fonta lielums: 85%;"] {font-size: 1em! svarīgi; }

    Tas, iespējams, nedarbojas IE agrīnajās versijās daļas “! Svarīgi” dēļ. Varat arī izmantot displeju: bloķēt; lai pārvietotu šo saiti uz nākamo rindu.

    Dzīvais piemērs

    Lai iegūtu dzīvu piemēru, apskatiet kājeni Tēmu laboratorija. Vai arī, ja jūs to lasāt savā plūsmas lasītājā vai neatļautā skrāpja vietnē, apskatiet zemāk redzamo ekrānuzņēmumu.

    Tēmas laboratorijas Twitter plūsma

    Šis ir kods, kuru izmantoju sarakstam:

    #twitter_update_list {
    fonta lielums: 13 pikseļi;
    līnijas augstums: 21 pikse;
    saraksta stils: nav;
    }
    #twitter_update_list li {
    fons: url (‘attēli / twitter-divider.gif’) apakšējā kreisajā stūrī atkārtot-x;
    polsterējuma dibens: 7 pikseļi;
    malas robeža: 9 pikseļi;
    }
    #twitter_update_list span, #twitter_update_list span a {
    krāsa: #abababs;
    teksta noformējums: nav;
    }
    #twitter_update_list a {
    krāsa: # 6f7276;
    }

    • Pirmajā rindā tiek atlasīts viss saraksts. Tas nosaka fonta lielumu, līnijas augstumu un nodrošina, ka netiek parādīti aizzīmju punkti.
    • Otrajā rindā neliels 2 × 1 attēls tiek atkārtots zem katra saraksta vienuma kā sava veida dalītājs. Polsterējums nosaka atstarpi starp tvītu un dalītāja augšējo malu. Robeža nosaka atstarpi starp dalītāja apakšējo malu un nākamo tvītu.
    • Trešajā rindā tiek iestatīta tvīta krāsa, ieskaitot saites, un pārliecinieties, vai zem saitēm nav redzamas līnijas.
    • Pēdējā rinda nosaka saites “laiks atpakaļ” krāsu.

    Un tas arī viss! Ja man būtu jāmaina viena lieta, es kaut kā atšķirtu iekšējās tviterī esošās saites un, iespējams, pievienotu arī vietņu rādīšanas efektu.

    To var izmantot jebkurā vietnē

    Atšķirībā no visiem pārējiem kā to izdarīt XYZ bez spraudņa tur esošie ziņojumi, šajā apmācībā nav izmantots faktiskais WordPress kods.

    Tā kā tas neizmanto WordPress kodu, tas nav reģistrēts zem Konsultācijas WordPress kolekcija. To var izmantot gandrīz jebkura veida vietnēs, pieņemot, ka varat rediģēt HTML avotu un CSS.

    Ja vēlaties to izmantot WordPress, es ieteiktu manuāli rediģēt motīvu failus, lai jūsu vietnes kājenē ievietotu abas Javascript rindiņas vai pat saliktu to savā wp_footer () āķī..

    Runājot par pašu logrīku, varat ielīmēt kodu teksta logrīkā vai manuāli kodēt to sānjoslā (vai kur citur).

    Secinājums

    Es ceru, ka jums visiem patika apmācība, es labprāt dzirdētu jūsu domas komentāros. Ja jums ir kādi pieprasījumi pēc ātriem WordPress vai CSS padomiem, nekautrējieties man paziņot. Tas, iespējams, tiks parādīts kādā no nākamajām apmācību otrdienas ziņām Motīvu laboratorijā!

    Jeffrey Wilson Administrator
    Sorry! The Author has not filled his profile.
    follow me
      Like this post? Please share to your friends:
      Adblock
      detector
      map