Tämä WordPress-teeman opetusohjelman oppitunti aloittelijoille jatkuu lisäämällä teeman määrittämiseen tarvittavan peruskoodin. Opimme lisäämään teematukea, ja sen seurauksena WordPressin esitelty kuvatoiminto aktivoituu. Tällä oppitunnilla korjaamme myös etusivun otsikon käyttämällä ensimmäistä suodatinta.
Työskentelemme enimmäkseen functions.phptiedostossa, jonka lisäsimme edellisellä oppitunnilla. Lopuksi lisäämme koodin esiteltyjen kuvien tulostamiseksi malleihimme.
Teeman asetukset
Kaikki teemat tarvitsevat koodin sen määrittämiseksi käskemällä WordPressiä aktivoimaan tietyt toiminnot. Tämä sisältää valikoiden, widgetien, käännösten ja niin edelleen aktivoimisen. Tämä tehdään yleensä "asennusteematoiminnossa", joka on yleensä kiinnitetty kätevästi nimettyyn koukkuun after_setup_theme. Joihinkin tiettyihin asioihin meidän on käytettävä WordPressin alustuskoukkua nimeltä init.
Tarvittavan teeman asetuskoodin kirjoittaminenafter_setup_theme
Asetetaan tällainen "teeman määritystoiminto" -sovellukseemme functions.php, joka on koukussa after_setup_theme:
add_action('after_setup_theme', 'wptutorial_setup_theme');
function wptutorial_setup_theme() {
}Tämän toiminnon sisään lisäämme joukon yleisiä ja hyödyllisiä asennustoimintoja WordPress-teemoihin. Aseta kaikki seuraavat koodikappaleet asetustoimintoon.
Ensin meidän on määritettävä kuvien ja upotusten (kuten videoiden) enimmäisleveys. Tämä varmistaa, että kun kirjoittajat lisäävät suuria kuvia viesteihin, kuvat pysyvät tietyn leveyden sisällä. Asetin sen 840 pikseliin (koska haluan tilaa sivupalkille), mutta voit säätää tätä haluamallasi tavalla.
$GLOBALS['content_width'] = 840;Meidän tulee myös ilmoittaa WordPressille, että teema on käännettävä ja mistä se voi etsiä käännöstiedostoja. Siirryn WordPress-teeman kääntämiseen yksityiskohtaisesti tämän teema-opetussarjan seuraavassa vaiheessa .
load_theme_textdomain('wptutorial', get_stylesheet_directory(). '/lang');Huomaa uuden toiminnon käyttö teemahakemiston saamiseksi, get_stylesheet_directory(). Tämä on hyvin samanlainen kuin get_stylesheet_directory_uri()viimeisessä vaiheessa, mutta tässä tarvitsemme suhteellisen polun, ei URL-osoitetta.
Sitten meidän on lisättävä joitain "teematukea", jotka aktivoivat WordPressin toimintoja, joita ei ole aktivoitu oletuksena.
Se oli koko joukko add_theme_supportpuheluita! Kuten nimestä voi päätellä, add_theme_supportkäskee WordPressiä aktivoimaan ominaisuuksia, joita ei ole aktivoitu oletusarvoisesti. Esimerkiksi esitellyt kuvat (‘post-thumbnails’), tuki HTML5-tageille ja WordPressin mukautettu logoominaisuus Customizerissa (säädä haluttua logokuvaa, jos haluat!).
Tarjolla on monia muita hienoja ominaisuuksia, joten suosittelen tutustumaan add_theme_supportin dokumentaatioon. Esimerkiksi siellä on melko uusi, title-tag, joka käsittelee otsikkotunnisteen. Olen jättänyt sen pois tästä opetusohjelmasta, koska olemme jo lisänneet otsikkotunnisteen header.phpmanuaalisesti.
Muista, että jos lisäät tuen tiedostolle title-tag, sinun tulee poistaa otsikkotunniste otsikkotiedostostasi, jotta et saa päällekkäisiä otsikkotunnisteita.
Lopuksi lisäämme muutaman add_theme_supportuuden Gutenbergin WordPressissä. Lisäämme tuen leveille osiolle, aktivoivat lohkotyylien toiminnallisuuden ja tuen responsiivisille upotuksille:
add_theme_support('wp-block-styles');
add_theme_support('align-wide');
add_theme_support('responsive-embeds');Lopputulos
Tässä on viimeinen asennustoiminto functions.php:
Tallentamisen jälkeen sinun pitäisi nyt pystyä lisäämään suositeltuja kuvia järjestelmänvalvojan viesteihin! Lisätään vielä yksi teemakorjaus, functions.phpennen kuin lisäämme esittelykuvia malleihimme. muistatko, että wp_titleoletuksena header.phpei voi kaikua mitään etusivulla? Korjataan se.
Suodattimen lisääminenwp_title
Lisätään ensimmäinen oikea suodattimen muokkaustoiminto käyttämällä add_filter(). Suodattimella, johon liitämme, on sama nimi kuin funktiolla, jota käytimme WordPressissä sivun otsikon dynaamiseen hakemiseen; wp_title. Korjaamme sen, että otsikko ei ole tyhjä etusivulla – mikä on oletusarvo WordPressissä. Kun olemme etusivulla, haluamme, että se täytetään WordPress-sivuston nimellä.
Muista aina palauttaa suodatettu muuttuja suodatinfunktioissasi! Kaikki suodattimet muokkaavat muuttujaa, ja jos et palauta mitään, muuttujasta tulee määrittelemätön. Tämä voi aiheuttaa paljon ongelmia. Jos haluat lisätietoja suodattimista, katso viestiäni, joka selittää kaiken koukuista ja suodattimista.
Tietää, milloin otsikkoa tulee muokata
Haluamme muokata otsikkomuuttujaa vain, jos olemme etusivulla. Haluamme jättää sen kaikille muille sivuille (palauta se sellaisenaan). Mutta mistä tiedämme, milloin olemme etusivulla?
Voimme hyödyntää WordPressin ehdollisia tageja, jotka ovat koko joukko hyödyllisiä toimintoja, jotka palauttavat tosi tai epätosi ehdon perusteella. Näitä käytetään yleisimmin kysymään, olemmeko tietyllä sivulla tai mallissa. Voimme vain kysyä "Olemmeko etusivulla?". Jos tämä menetelmä palauttaa true, vain silloin muokkaamme otsikkomuuttujaa.
On syytä huomata, että etusivulla on kaksi ehdollista tagia, nimittäin is_home()ja is_front_page().Nämä vaihtelevat "Luku"-asetuksen mukaan – onko etusivullasi uusimmat viestit vai onko se asetettu kiinteälle sivulle. Jos seuraat tätä opetusohjelmaa upouudella WordPress-asennuksella oletusasetuksilla, käytät is_front_page().
WordPress-sivuston nimen saaminen
Nyt tiedämme, mitä suodatinta käytetään ja kuinka varmistaa, että muutamme otsikkoa vain, jos olemme oikeassa paikassa. Mutta mikä otsikon pitäisi olla? Yleensä etusivun sivun otsikko on WordPress-sivustosi nimi. Mutta miten saamme tämän tiedon?
Käytämme bloginfo()toimintoa tiedon hakemiseen nykyisestä WordPress-asennuksesta. Parametriksi pyydämme palauttamaan sivuston nimen, mikä tehdään asettamalla parametriksi " name". Ja koska tämä on suodatin ja meidän on palautettava se, ei toistettava sitä, käytämme sen sisarmenetelmää get_bloginfo(). Soittaminen toistaa bloginfo()aina.
add_filter('wp_title', 'wptutorial_title_filter');
function wptutorial_title_filter($title) {
if (is_front_page()) {
return get_bloginfo('name');
}
return $title;
}Jos päivität etusivusi, sinun pitäisi nähdä, että sivustosi nimi näkyy <title>tagissa (ja selaimen välilehdessä)! Suodattimemme vaikuttaa vain etusivulle, joten kaikkien muiden sivujen, kuten yksittäisten viestien, pitäisi silti palauttaa samat kuin ennenkin; postauksen otsikko.
Suositeltujen kuvien näyttäminen mallitiedostoissa
Aiemmin, kun määritimme teematuen, lisäsimme tuen esiteltyille kuville. Kun tämä on aktivoitu, voimme nyt tulostaa nämä kuvat malleihimme. Tehdään se nyt!
Avaa index.phpja etsi heille paikka silmukan sisällä. Päätin sijoittaa sen otsikon jälkeen, mutta se on sinun, mihin haluat ne. Käytät toimintoa the_post_thumbnail()kuvan tulostamiseen. Suosittelemme ensin tarkistamaan, onko viestissä edes asetettu esittelykuva, minkä teemme käyttämällä has_post_thumbnail().
Jos viestissäsi ei ole esiteltyä kuvaa, otsikon jälkeen ei näytetä mitään. Jos kuitenkin asetat suositellun kuvan johonkin viestiisi, the_post_thumbnail()se <img>tulostaisi valitun kuvan sisältävän tunnisteen. Tämä toiminto hyväksyy joitain lisäparametreja. Voit esimerkiksi määrittää, mitä kuvakokoa haluat käyttää, ja hallita kuvaan lisättyjä attribuutteja. Kuten tavallista, kehotan sinua vilkaisemaan dokumentaatiota nopeasti ja muokkaamaan niitä mielesi mukaan.