Tällä WordPress-teeman opetusohjelman aloittelijoille oppitunnilla opimme sivumalleista, mitä ne ovat, miten niitä luodaan ja parhaita käytäntöjä. Teemme esimerkkinä täysleveän mallin. Matkan varrella lisäämme myös luokan runkoon kysymällä, käyttääkö sivu tiettyä sivumallia.
Mitä ovat sivumallit
Sivumallit ovat hyödyllisiä tapauksissa, joissa haluat eri asettelun tai asennuksen tietylle sivulle. Yleisiä esimerkkejä sivupohjien käytöstä ovat viestien luettelointi mukautetussa viestityypissä (esim. portfolio, kirjat tai palvelut), joilla on täysin erilainen sisältö tai asettelu (esim. sarakkeiden sisällä) tai jopa yksinkertaisesti sivun tekeminen täysleveäksi (ei sivupalkkia).
Sivupohjien käytettävyys on heikentynyt WordPressin version 5.x (Gutenberg) jälkeen. Uusi Gutenberg-editori mahdollistaa suuren joustavuuden tällaisten sivujen rakentamisessa ilman sivumalleja. Siitä huolimatta opimme lisäämään mukautetun sivumallin teemaomme.
Sivujen "Page Attributes" -metalaatikon sisällä näkyy sivumallin valinta. Mallivaihtoehto näkyy vain, jos aktiivisessa teemassa on vähintään yksi sivumalli.
Sivumalleja voidaan itse asiassa käyttää myös viesteissä ja mukautetuissa viestityypeissä. WordPress 4.7:n ja sitä uudempien versioiden jälkeen voit määrittää, mille viestityypeille haluat mallin olevan saatavilla. WordPress lisää automaattisesti vaaditun "Page Attributes" -metalaatikon näihin viestityyppeihin.
Sivumallin nimeäminen ja sijoittelu
Aloita yleensä kopiot mistä tahansa mallitiedostosta, joka on lähinnä sitä, mitä haluat saavuttaa sivumallilla. Useimmissa tapauksissa se on page.php. Mitä tulee sivumallin nimeämiseen, se on tavallaan sinun päätettävissäsi. Mutta on joitain sääntöjä ja maalaisjärkeä.
On houkuttelevaa yksinkertaisesti nimetä sivusi malli esim page-books.php. mallia varten, jossa luetellaan mukautettuja postaustyyppisiä kirjoja. Älä koskaan liitä sivumallin etuliitteeseen " page-"! Jos muistat WordPressin mallihierarkiasta, WordPress etsii page-<slug>.phpennen kuin yrittää page.php, ja teemasi käyttäjät voivat kohdata odottamatonta toimintaa.
Hyvä käytäntö on liittää sivumallin eteen jotain, joka ei ole osa WordPressin sivumallien nimiä. Esimerkiksi " pagetemplate-', " pt-" tai yksinkertaisesti vain koko nimi " fullwidth-template.php". On myös hyvä käytäntö säilyttää ne alikansiossa; /page-templates/Tämä ei kuitenkaan ole hyvä, jos haluat, että teemasi on käytettävissä lapsiteemalla. Alatason teema ei voi ohittaa sivumalleja, jotka on sijoitettu pääteeman alikansioon.
Kun olet päättänyt nimeämismallin, siirrytään eteenpäin ja luodaan sivumalli.
Sivumallin luominen
Tee kopio page.phpja nimeä se uudelleen muotoon pagetemplate-fullwidth.php. Jos haluat tehdä siitä sivumallin, sinun tarvitsee vain lisätä heti alkuun kommentti, joka kertoo WordPressille, että tämä on sivumalli:
<?php
/*
Template Name: Fullwidth
*/
get_header(); ?>
<?php
if (have_posts()) {
...Tarvitset vain kommentin aivan tiedoston alussa, jossa on "Mallin nimi: " ja mallin nimi sen jälkeen. Se siitä! Siirry järjestelmänvalvojaan, muokkaa sivua ja sinun pitäisi nähdä vaihtoehto valita "Fullwidth" malliksi.
Mainitsin, että WordPress 4.7:ssä voit määrittää, mille viestityypeille haluat sivumallin olevan saatavilla. Tällä hetkellä se on saatavilla vain sivuille, mutta sanotko, että haluat myös mahdollisuuden tehdä julkaisuista täysleveitä? Lisää siinä tapauksessa "Temlate Post Type: " samaan kommenttilohkoon ja määritä viestityypit pilkulla erotettuina. Esimerkiksi, jotta se olisi saatavilla sekä viesteille että sivuille;
<?php
/*
Template Name: Fullwidth
Template Post Type: post, page
*/
get_header(); ?>
<?php
if (have_posts()) {
...Muokkaa viestiä ja sinun pitäisi nähdä uusi metalaatikko "Viestiattribuutit", josta voit valita Fullwidth-mallin. Kiva!
Koodin muuttaminen sivumallissamme
Muokataan nyt sivumallia niin, että se todella tekee jotain erilaista kuin yhden sivun katselu. Poistetaan sivupalkkimallin pyyntö: (Kommentoin sitä, jotta se olisi näkyvämpi, mutta voit vain poistaa rivin).
...
?><p><?php _e('No posts, sorry.', 'wptutorial'); ?></p><?php
}
//get_sidebar();
get_footer(); ?>Tehdään vielä yksi asia, jotta sivumallimme olisi helpompi muotoilla. Kun lisäät CSS:n, sinun on usein tiedettävä, onko sivulla sivupalkki vai ei, jotta voit säätää sarakkeita/asettelua. Muista body_class, mikä tarjoaa koko joukon hyödyllisiä luokkia kehon elementille? Mitä jos lisäisimme runkoon mukautetun luokan, joka kertoo, onko nykyisellä sivulla sivupalkki vai ei?
Suodatin päälläbody_class
Huomautus: Olet ehkä huomannut, että jokainen sivu tai viesti, joka käyttää sivumallia, saa jo tietyn runkoluokan. "page-template-" – esimerkissämme "page-template-pagetemplate-fullwidth". Se on melko pitkä luokka, ja lisäksi haluamme tehdä teemastamme joustavamman – ja sallia täyden leveyden muissa malleissa paitsi sivumallipohjaisissa. Et esimerkiksi yleensä halua sivupalkkia etusivulle, eikö niin?
Huomautus: Tämä vain lisää luokan runkoon, joten muotoilu helpottuu, se ei itse asiassa poista sivupalkin lähtöä käytöstä. Sinun täytyy muistaa poistaa se mistä get_sidebar()et halua sitä.
Lisätään suodatin body_classmukautetun sivupalkkiluokan lisäämistä varten functions.php, jotta voit myöhemmin lisätä siihen lisää muissa tapauksissa, joissa et halua sivupalkkia. WordPressissä on mukava ehdollinen tagi, jolla tarkistetaan, onko sivumalli käytössä; is_page_template()johon laitat sivumallin nimen parametriksi. Haluamme lisätä luokan, jos tämä ei ole totta, joten lisäämme käänteisen sanan "!":
add_filter('body_class', 'wptutorial_body_class_filter');
function wptutorial_body_class_filter($classes) {
if (!is_page_template('pagetemplate-fullwidth.php')) {
$classes[] = 'has-sidebar';
}
return $classes;
}Todennäköisesti, kun kehität malleja, törmäät toisinaan malleihin, joihin et halua lisätä sivupalkkiluokkaa, ja kun menet lisäämään ne tapaukset tähän if. Jos esimerkiksi et halua sivupalkkiluokkaa etusivulle, voit lisätä !is_front_page(). Tämä lisää luokan "has-sidebar" kaikille sivuille paitsi etusivulle ja sivumalliin:
if (!is_front_page() && !is_page_template('pagetemplate-fullwidth.php'))On sinun itsestäsi kiinni, kuinka monta sivumallia haluat ja mitä niiden tulee sisältää. Tämä oli vain yksinkertainen johdanto. Jos olet kiinnostunut tiedustelemaan muita viestejä sivupohjien sisällä, katso seuraava vaihe.