Aiheeseen liittyvän sisällön jakaminen useille alasivuille on yhtä paljon taidetta kuin tiedettä. WordPress-verkkovastaavana saatat tuntea houkutusta laittaa paljon sisältöä yksittäiselle sivulle, mutta sinun tulee vastustaa sitä! Sotkun vähentäminen lisää sivusi luettavuutta. Ja sisällön levittäminen useille sivuille on yksi yleisimmistä tavoista välttää sotkua. Sinun on kuitenkin tehtävä vierailijoillesi selväksi, että alkuperäinen sivu ja sitä seuraavat alasivut ovat yhteydessä toisiinsa. Ja varmista, että nämä alasivut ovat helposti käytettävissä.
Voit korjata tämän sisällyttämällä alkuperäiselle sivulle hakemiston kaikista yhdistetyistä alasivuista. Hakemisto auttaa verkkosivustojen käyttäjiä näkemään nopeasti etsimäänsä sisältöä ja auttaa heitä valitsemaan sisällöstä tai jopa löytämään jotain uutta.
Alasivujen luominen on melko helppoa, koska WordPressissä on sisäänrakennettu vaihtoehto, joka auttaa sinua tekemään sen. Se toimii määrittämällä yksi sivu toisen pääsivuksi (jota kutsutaan alasivuksi). Hankala asia on kuitenkin alisivujen indeksin lisääminen pääsivulle. Joten tässä artikkelissa tarkastelemme, kuinka voit näyttää hakemiston tietylle pääsivulle kuuluvista alasivuista. Ja näytämme sinulle, kuinka voit ratkaista tämän ongelman jakamalla sen useisiin pienempiin vaiheisiin:
Kuinka näyttää tietyn WordPress-sivun kaikki alasivut
Voit näyttää hakemiston kaikista tietylle WordPress-sivulle liitetyistä alasivuista kahdella eri menetelmällä. Ensimmäinen sisältää kätevän laajennuksen käyttämisen ja toinen edellyttää tämän ominaisuuden käyttöönottoa mukautetun koodin avulla. Näytämme sinulle molempien menetelmien vaiheet. Ensin meidän on kuitenkin selitettävä, kuinka pääsivu määritetään toiselle WordPress-sivulle.
Aloita päättämällä, mikä sivu on alisivu. Sitten avaa se muokkausta varten ja siirry oikealla olevaan Sivun määritteet -osioon. Jos käytät oletusarvoista WordPress-sivunrakennusohjelmaa – Gutenbergiä, osio sijaitsee Asiakirja-välilehdessä. Sitten, paikantaa Pääsivu vaihtoehto, valitse sivu avattavasta valikosta, ja paina Päivittää -painiketta näytön oikeassa yläkulmassa päivittääksesi sivun.
Tämä asettaa avattavasta valikosta valitsemasi sivun muokattavan sivun yläpääksi. Onnistunut yhteys näkyy myös luettelosta Kaikki sivut. Alasivut näytetään vastaavan yläsivun alla ja on sisennetty käyttämällä yhdysmerkkiä nimen edessä.
Voit myös määrittää ylätason sivut jo olemassa oleville pääsivuille. Tämä luo useiden syvyyksien alisivuja. Alatason syvyystaso merkitään sitten sivun otsikkoa edeltävien viivojen lukumäärällä.
Koska WordPress-laajennuksia on runsaasti lähes mihin tahansa tarkoitukseen, sinun tulee aina yrittää löytää sopiva laajennus ensin, kun lisäät uutta ominaisuutta tai toimintoja. Tässä artikkelissa käyttämämme laajennus on CC-alasivut kytkeä. Voit käyttää tätä laajennusta kahdella tavalla sen asentamisen jälkeen.
Ensimmäinen tapa edellyttää widgetien käyttöä. Lisää CC Child Pages -widget haluamaasi widget-alueeseen ja sitten säädä käytettävissä olevia widget-vaihtoehtoja.
Löydät CC-alasivut -widgetin Käytettävissä olevat widgetit -osion luettelon yläosasta. Kun olet lisännyt sen, voit valita, mitkä vaihtoehdot ovat sinulle hyödyllisiä. Esimerkiksi, kun se on rastitettu, vaihtoehto Näytä sivun otsikko korvaa Otsikko-kentän staattisen otsikon nykyisen pääsivun nimellä, joten alisivuhakemistossa on hyödyllinen otsikko sen sijaan, että sanoisi Lapsisivut. Voit valita, mitkä sivut eivät näy lisäämällä sivutunnuksia Sulje pois vaihtoehto.
Viitteenä sivutunnus on numero, jonka löydät sivun pysyvästä linkistä sen osan jälkeen, jossa on ?post=. Meidän tapauksessamme esimerkiksi tunnuksen Ota meihin yhteyttä sivu on 1114.
Myös rastittamalla Näytä sisarussivut näet sivut, joilla on sama ylätaso ja jotka ovat samalla alatason syvyydellä.
Tässä on esimerkki siitä, miltä widgetin sisältö voisi näyttää Powerlift-teemalla tehdyllä verkkosivustolla.
Toinen tapa käyttää CC Child Pages -laajennusta on lisätä lyhytkoodi suoraan. Ohjaamme sinut vaiheiden läpi käyttämällä Gutenberg-sivunrakennustyökalua. Suosittelemme, että tutustut artikkeliimme mukautetuista lyhytkoodeista, jos et ole varma, mitä ne ovat ja missä muodossa niitä käytetään, kun lisäät ne sivullesi. Artikkeli kattaa myös mukautetun lyhytkoodin lisäämisen sivullesi, jos käytät Elementoria tai WPBakerya valitsemiksi sivun rakentajiksi.
Jos haluat lisätä mukautetun lyhytkoodin sivulle, napsauta +-merkkiä lisätäksesi Gutenbergin lohkon ja valitse a Lyhyt koodi lohko. Sitten lisää lyhytkoodin nimi sen sisällä ja paina Päivittää -painiketta. Lyhytkoodin nimi on lapsi_sivut, joten voit yksinkertaisesti lisätä [child_pages]. Näin kaikki mahdolliset funktioparametrit asetetaan oletusarvoihinsa, jotka määritetään vastaavassa laajennustiedostossa. Voit kuitenkin myös lisätä argumentteja joidenkin parametrien määrittämiseksi. Koska mahdollisten argumenttien luettelo on asetettu assosiatiiviseksi taulukoksi, sinun tulee lisätä argumentit seuraavassa muodossa: avain=’arvo’. Jos teet useita merkintöjä, erota ne tyhjällä välillä.
Esimerkkinä olemme asettaneet seuraavat:
[child_pages cols=’2’ depth=’0’]
Tämä saa hakemistoluettelomme näkyviin kahdessa sarakkeessa (cols=’2′) ja esittelee ylätason ja kaikki alatason sivut hierarkkisessa ja sisennetyssä (depth=’0′) luettelossa. Jos haluat tietää enemmän käytettävissä olevista argumenteista ja niiden sisällyttämisestä, suosittelemme käymään virallisen laajennussivun läpi yksityiskohtaisesti.
Kun olet lisännyt esimerkin lyhytkoodin, saimme seuraavan tuloksen, joka näkyy alla.
Tämän laajennuksen haittana on, että siinä on hyvin vähän lisävaihtoehtoja. Muotoilutarkoituksiin, voit valita, käytetäänkö valmiita laajennustyylejä vai ei. Se tehdään rastittamalla Joo tai Ei -valintaruutu Enqueue Skin CSS vaihtoehto kohdassa Asetukset > Lapsisivut.
Parantaaksesi alatason sivusi tulosten tyylittelyä voit myös sisällyttää lisää, räätälöityjä, CSS:ssä Mukautettu CSS vaihtoehto alla.
Kun olet tehnyt muutoksia asetuksiin, älä unohda painaa Päivitysvaihtoehdot alla olevaa painiketta, jotta muutokset tulevat voimaan.
Toinen mahdollinen tapa luoda alatason sivujen hakemisto on käyttää räätälöityä koodia. Tämän menetelmän etuna on räätälöinnin vapaus. Voit muokata alatason sivujen hakemistoosiota täsmälleen tarpeidesi mukaan ilman, että tarvitset lisäosaa. Mukautetun koodin luominen on kuitenkin menetelmä, joka on suunnattu pääasiassa kokeneemmille WordPress-käyttäjille.
Ennen kuin perehdymme tämän menetelmän edellyttämiin vaiheisiin, haluaisimme tehdä pari ehdotusta. Ensinnäkin suosittelemme päivittämään FTP:n käyttöä koskevia tietojasi. Toiseksi on järkevää tehdä varmuuskopio WordPress-tiedostoistasi etukäteen, koska koodin virheellinen käyttö voi rikkoa verkkosivustosi.
Tämän jälkeen siirrytään tämän menetelmän kuvaukseen. Ensinnäkin sinun pitäisi muodosta yhteys palvelimeesi käyttämällä FTP-tunnuksiasi ja siirry WordPress-juurihakemistoosi, jota usein kutsutaan nimellä public_html.
Sitten, siirry /wp-content/themes-hakemistoon ja napsauta nykyisen teemasi hakemistoa avataksesi sen.
Etsi functions.php-tiedosto sisällä, napsauta sitä hiiren oikealla painikkeella, ja Valitse Näytä/muokkaa vaihtoehto.
Avaa tiedosto käyttämällä haluamaasi tekstieditoria ja lisää alla annettu koodi tiedoston lopussa.
function qode_children_list() {
global $id;
$child_pages = wp_list_pages( array(
'title_li' => '',
'child_of' => $id,
'sort_column' => 'post_date',
'sort_order' => 'desc',
'echo' => 0
) );
if ( $child_pages){
$output="<ul>" . $child_pages . '</ul>';
}
else
$output="";
return $output;
}
add_shortcode( 'children_list', 'qode_children_list', 11 );
Katsotaanpa tarkemmin yllä olevaa koodia.
Tämä koodi on pieni mukautettu lyhytkoodi children_list. Se näyttää järjestämättömän luettelon linkeistä, jotka johtavat sen sivun vastaaville alisivuille, joilla lyhytkoodia käytetään. Jos sivulla ei ole alisivuja, koodi ei tee mitään (tuloste HTML olisi tyhjä).
Koodi on täysin riippuvainen wp_list_pages() toiminto. Tämä toiminto voi ottaa monia mahdollisia parametreja, vaikka käytimme hyvin vähän. Merkittävimmät ovat ne kaksi, joita käytimme asianmukaisten linkkien lajitteluun. Tarkemmin sanottuna linkit lajitellaan laskevassa järjestyksessä alatason sivujen julkaisupäivien mukaan. Siksi luettelon merkinnät alkavat uusimmasta ja menevät alas vanhimpaan.
Suosittelemme, että käyt läpi wp_list_pages()-funktiota koskevan dokumentaation saadaksesi lisätietoja sen parametreista ja käytöstä. Katsotaanpa tämän jälkeen, kuinka voimme käyttää tätä lyhytkoodia verkkosivustollamme.
Jos haluat lisätä lyhytkoodin sivullesi, voit tehdä niin käyttämällä Gutenbergiä sivun rakentajana. Yksinkertaisesti paina +-merkkiä lisätäksesi uuden lohkon, Valitse Lyhyt koodi lohko, ja lisää [children_list]. Lopuksi, paina Päivittää -painiketta sivun oikeassa yläkulmassa. Jos pidät Elementorista tai WPBakerystä sivujen rakentajina, löydät niille vaadittavat vaiheet mukautettujen lyhytkoodien käyttöä käsittelevästä artikkelistamme.
Jos käytit samaa lyhytkoodia, jonka annoimme esimerkkinä sivusi sisällössä, saat seuraavan tuloksen:
Voit myös sijoittaa lyhytkoodin Teksti-widgetiin ja näyttää alisivuhakemiston haluamallasi widget-alueella. Tätä käyttöä kuvataan myös yksityiskohtaisemmin mukautettuja lyhytkoodeja käsittelevässä artikkelissamme. Toistaiseksi voit yksinkertaisesti lisätä [children_list] Teksti-widgetin sisällä ja paina Tallentaa -painiketta. Voit jopa lisätä otsikon alasivuhakemistollesi, vaikka emme tee niin esimerkissämme.
Tältä lyhytkoodi näytti Powerlift-teemassa sen jälkeen, kun se oli lisätty sivupalkkialueelle.
Voit halutessasi tyylitellä tämän luettelon ulkoasua. Tämä voidaan tehdä luomalla mukautettu CSS. Jos päätät tehdä tämän, suosittelemme lisäämään sen alle Ylimääräinen CSS, joka sijaitsee järjestelmänvalvojan hallintapaneelin Ulkoasu > Mukauta -osiossa.
Lopulliset ajatukset
Tietyn yläsivun kaikkien alasivujen näyttämisellä on monia käyttötarkoituksia. Helpota navigointia verkkosivustollasi ja parantaa käyttökokemusta muutamia mainitakseni. Vaikka WordPress-emosivun alisivujen näyttäminen saattaa tuntua helpolta, se on hieman monimutkaistava, koska WordPressissä ei ole sisäänrakennettuja vaihtoehtoja. Jos kuitenkin noudatat artikkelissa hahmoteltuja vaiheita, voit hallita tämän nopeasti ja vähällä vaivalla. Lisäksi olemme tehneet parhaamme tarjotaksemme kattavan selvityksen molemmista tavoista. Nyt voit valita, kumpaa haluat käyttää.
Tue työtämme ❤️
Jos pidit tästä artikkelista, harkitse tipin antamista, jotta voimme jatkaa laadukkaan sisällön julkaisemista.
