Tehtäväluettelon luominen WordPress-tarkistuslistalaajennuksella

Oletko koskaan ajatellut, kuinka siistiä olisi lisätä interaktiivinen tarkistuslista verkkosivustoosi tai johonkin blogikirjoituksestasi? Tarkistuslistat ovat erittäin hyödyllisiä ja mukavia kaikenlaisiin asioihin. Tapahtumien järjestämisestä ja isännöimisestä, lomien suunnitteluun tai yksinkertaisesti ostoksille käymiseen, me kaikki teemme listoja, tai ainakin me kaikki tarvitsemme niitä. Tarvitsetpa tarkistuslistan henkilökohtaiseen käyttöön tai haluat tarjota tämän toiminnon lukijoillesi, tulet mielelläsi kuulemaan hienosta pienestä WordPress-tarkistuslistalaajennuksesta, jota haluamme suositella sinulle tänään.

Tämän erinomaisen laajennuksen avulla voit helposti lisätä tarkistuslistoja tarpeisiisi. Jos esimerkiksi pidät matkailublogia, voit lisätä muistilistaan ​​asioista, jotka ihmisten on ehdottomasti tuotava tiettyyn kohteeseen.

Toinen esimerkki on äitiysblogi, jossa voit laatia luettelon asioista, jotka kaikkien tulevien vanhempien on hankittava ennen vauvan syntymää.

Voit tehdä ostoslistoja, päivittäistavaraluetteloita, tehtäväluetteloita, melkein mitä tahansa tarkistuslistoja, jotka sopivat tietylle verkkosivustollesi tai blogillesi.

Kuten aiemmin totesimme, voit helposti lisätä tarkistuslistan blogiisi käyttämällä WordPress Frontend Checklist -laajennusta. Se on loistava ratkaisu, jota tulet vain rakastamaan.

Tarkistuslistojen tarkoitus on olla käytännöllinen, joten päätimme olla myös käytännöllisiä ja säästää aikaasi tutkimalla tätä erinomaista ratkaisua sinulle.

Käyttöliittymän tarkistuslista

Frontend Checklist on WordPress-laajennus HTML- tai PDF-tarkistuslistojen luomiseen sivustollesi. Se on hyvin yksinkertainen, intuitiivinen ja vaivaton laajennus. Se ei ole erityisen monipuolinen, mutta se johtuu vain siitä, että et todellakaan tarvitse sitä tehdäksesi niin monia asioita. Tarvitset yksinkertaisen tarkistuslistan, ja Frontend Checklist auttaa sinua saamaan sen.

Hienoa tässä laajennuksessa on se, että voit tallentaa tarkistuslistasi evästeiden avulla tai tietokantaan. Tällä tavalla vierailijasi voivat käyttää tarkistuslistaansa palatessaan sivustolle ja tarkistaa tai poistaa valinnan lisäkohteista.

Perusasetukset ja käyttö

Ensimmäinen asia, joka sinun on tehtävä, on tietysti asentaa laajennus ja aktivoida se. Kun olet selvittänyt kaiken, siirry kohtaan Asetukset> Käyttöliittymän tarkistuslista.

Näet yksinkertaisen asetuspaneelin, joka sisältää useita erilaisia ​​lyhytkoodeja. Ainoa käytettävissä oleva vaihtoehto tässä on Uusi tarkistuslista.

Napsauta Uusi tarkistuslista ja anna ensin tarkistuslistan nimi. Älä huoli, luettelon nimi ei itse asiassa näy sivullasi.

Kuvaus- kenttä on valinnainen. Jälleen, tähän lisäämäsi teksti ei näy sivullasi, ja se auttaa vain helpottamaan useiden tarkistuslistojen hallintaa.

Kohteet – osa on tärkeä. Sinne itse asiassa lisäät tarkistuslistan kohteet. Voit lisätä enintään 50 tuotetta, mikä on enemmän kuin tarpeeksi. Lisäkenttiä avautuu, kun selaat luetteloa ja täytät tuotekentät.

<b>

Kun olet täyttänyt tarkistuslistan ja lisännyt kaikki kohteet, seuraava vaihe on luonnollisesti lisätä se sivustosi sivulle. Käyttöliittymän tarkistuslista tarjoaa neljä erilaista lyhytkoodia.

Käytä ensimmäistä, [frontend-checklist name="Standard"], lisätäksesi tarkistuslistan sivulle. Muista korvata name-attribuutti varsinaisen tarkistusluettelosi nimellä.

Kopioi lyhytkoodi ja liitä se haluamaasi paikkaan. Loimme erityisen sivun Matkapakkausten tarkistuslistalle, lisäsimme kuvan ja laitoimme tarkistuslistan alle.

Voit myös lisätä tarkistuslistoja widgeteihin tekstikentän avulla. Tee tämä tietysti vain, jos on järkevää sijoittaa tarkistuslista alatunnisteeseen tai sivupalkkiin.

Seuraava lyhytkoodivaihtoehto on "Eväste päällä/pois", ja se on erittäin hyödyllinen. Pohjimmiltaan se auttaa sinua määrittämään, haluatko tallentaa tarkistuslistan tulevaa käyttöä varten vai et. Jos evästeet ovat käytössä, sisäänkirjautuneiden käyttäjien tarkistuslistan tila tallennetaan ja he voivat jatkaa siitä, mihin jäivät ennen sivun päivittämistä tai poistumista. Jos et halua tämän toiminnon olevan käytössä – jos haluat näyttää tyhjän tarkistuslistan joka kerta, poista evästeet käytöstä.

[frontend-checklist name="ChecklistName” cookie=”off”]

Voit jopa asettaa evästeen käyttöiän päivämääritteen avulla. Lisää vain päivien lukumäärä, jonka haluat evästeiden kestävän, ja huomaa, että oletusarvo on 365 päivää.

[frontend-checklist name=”Standard” days=”180″]

Toinen mielenkiintoinen vaihtoehto, jota voit käyttää, on tarjota linkki tarkistuslistasi PDF-versioon. Tällä tavalla vierailijasi voivat tallentaa sen tietokoneelleen tai tulostaa sen suoritettuaan tarkistuslistan. Tämä on erityisen kätevää ostoslistoille, lomapakkauksille ja niin edelleen.

Tämän lyhytkoodi on [frontend-checklist name=”ChecklistName” type=”pdf” title=”My Checklist” linktext=”Tarkistuslistaan”].

Latauslinkki löytyy tarkistuslistan alapuolelta. Voit muuttaa oletuslinkkitestin “Tarkistuslistaan” ja korvata sen omalla tekstilläsi.

Lisäasetukset

Kun olet asettanut tarkistuslistan, haluat ehkä muokata sitä ja tehdä siitä verkkosivustollesi sopivamman.

Käyttöliittymän tarkistuslistalaajennuksella tarkistuslistallasi on oletuksena samat asetukset kuin muilla sivustollasi käytetyillä lomakkeilla. Tämä tarkoittaa samaa kirjasinkokoa, väriä, välilyöntiä ja niin edelleen. Tämän ansiosta verkkosivustosi on tyylillisesti yhtenäinen, mutta jos haluat muuttaa sitä ja saada tarkistuslistasi erottumaan, sekin on mahdollista.

Jos haluat muokata tarkistuslistan ja sen kohteiden ulkoasua, sinun on lisättävä HTML-tunniste "span" jokaiseen kohteeseen ja määritettävä luokka. Tässä tapauksessa luokka on "myclist", mutta voit tietysti käyttää omaasi. Teemme tämän määrittääksemme luokalle tiettyjä attribuutteja, jotka muuttavat tarkistuslistasi ulkoasua.

Kun olet lisännyt HTML-tunnisteet, sinun on määritettävä, miltä “myclist”-luokan kohteet näyttävät. Tätä varten sinun on lisättävä muutama rivi CSS-koodia, joka on hyvin yksinkertainen eikä vaadi erityistä tämän kielen taitoa. Ajattele CSS:n lisäämistä tiettyjen attribuuttien lisäämisenä luokkaan. Noudata vain näitä ohjeita:

Siirry kohtaan Ulkoasu > Mukauta > Lisä-CSS.

Vasemmalla puolellasi on kenttä, johon voit syöttää CSS:si, meidän tapauksessamme "myclist"-luokan. Voit seurata live-muutoksia oikealla olevasta kentästä.

Siirry valikkoon ja etsi sivu, jolla tarkistuslistasi sijaitsee.

Tässä esimerkissä aiomme muuttaa fonttia ja sen ominaisuuksia. Tarkemmin sanottuna aiomme määrittää luokkaamme kuusi ominaisuutta:

• väri: tarkistuslistan kohteiden fontin värin muuttamiseen
• text-shadow: 3D-tunnelman lisäämiseen kirjasimiin. Koodissa olevat numerot määrittelevät varjon koon fontin kokoon verrattuna. Voit kokeilla myös eri värien lisäämistä varjoihin ja fontteihin.
• font-weight: fontin paksuuden määrittämiseen
• font-family: näitä on saatavilla runsaasti, joten valitse mieltymystesi mukaan
• font-size: tarkistuslistan kohteissa käytettävien fonttien koon määrittämiseen
• täyte: määrittää itse kohteen ympärillä olevien pikselien lukumäärän. Ilmoitetut arvot viittaavat ylä-, oikea-, ala- ja vasempaan, tässä järjestyksessä, joten kiinnitä huomiota. Esimerkissämme se on vain vasen täyttö, mikä tarkoittaa tilaa laatikon ja tarkistuslistan kohteen välillä.

tekstivarjo: 0,5 kuvapistettä 1 kuvapiste oranssi;

font-family: ‘Comic Sans MS’, Comic Sans, kursiivinen;

.myclist { väri: #cc615f; tekstivarjo: 0,5 kuvapistettä 1 kuvapiste oranssi; fontin paino: 600; font-family: ‘Comic Sans MS’, Comic Sans, kursiivinen; Fontin koko: 20px; täyte: 0 0 0 10 kuvapistettä; }

.myclist {
color: #cc615f;
text-shadow: 0.5px 1px orange;
font-weight: 600;
font-family: 'Comic Sans MS', Comic Sans, cursive;
Font-size:20px;
padding: 0 0 0 10px;
}

Huomaa, että sinun on kiinnitettävä paljon huomiota koodisi rakenteeseen, jos haluat kaiken toimivan oikein. Luokka määritellään nimellä .classname. Tietenkin sinulla on todennäköisesti eri nimi, jota käytät sen sijaan. Kaikki ominaisuudet on sijoitettu väliin {}. Kiinteistöt lisätään omaisuudeksi: kiinteistön kuvaus; ja tämä on rakenne, jota on ehdottomasti noudatettava.

Toinen mielenkiintoinen asia, jonka voit asettaa, on tehdä valituista kohteista erilaisia ​​kuin valitsemattomista, jotta ero olisi entistä selkeämpi. Voit tehdä tämän lisäämällä ominaisuuksia .checked .myclist -luokkaan.

Toisin kuin valitsemattomissa kohteissa, valituissa kohteissa on tekstikoristelu: viiva, joka ylittää valitut kohteet.

tekstin koristelu: läpiviivaus;}

.checked .myclist { color:#e4d2b8; fontin paino: 300; tekstin koristelu: läpiviivaus;}

.checked .myclist {
color:#e4d2b8;
font-weight: 300;
text-decoration: line-through;}

Tulos näyttää tältä:

Kuten näette, kaikki on hyvin yksinkertaista. Seuraa vain koodin rakennetta, kokeile, leiki ominaisuuksien kanssa ja tee blogistasi erottuva tällä siistillä ja hyödyllisellä lisäyksellä.

Lopulliset ajatukset

Frontend Checklist -laajennus WordPressille on hyödyllinen pieni työkalu, jota et luultavasti edes tiennyt tarvitsevasi. Harkitse tarkistuslistan lisäämistä verkkosivustollesi lisätäksesi käyttäjien sitoutumista ja saada vierailijat palaamaan lisää.

Nyt kun tiedät, kuinka helppoa se on, muista muokata tarkistuslistaasi, tehdä siitä henkilökohtaisempi ja blogityylisi mukainen. Ja kerro meille tuloksista!