Kun sivusto kasvaa ulos "blogi ja muutama sivu" -vaiheesta, tavalliset artikkelit ja kategoriat eivät enää riitä. Portfoliot, tiimit, asiakaspalautteet, tapaustutkimukset, työpaikkailmoitukset: kaikki nämä kaipaavat omaa rakennettaan sen sijaan, että ne tungettaisiin yleiseen artikkelivirtaan kategoriavirityksillä.

WordPress ratkaisee tämän ongelman räätälöityjen sisältötyyppien avulla. Mutta CPT:n luominen ei yksin riitä; tarvitset myös sivun, jolle kaikki kyseisen tyypin sisällöt kootaan yhteen: arkistosivun. Ilman sitä kävijät eivät yksinkertaisesti näe portfoliotöitäsi tai tiimin jäseniäsi yhtenäisenä kokonaisuutena.

Ruudukkolisäosat, kuten Essential Grid, hoitavat visuaalisen puolen, mutta ne lisäävät ylimääräistä CSS:ää ja JS:ää. Pienissä projekteissa tätä ei huomaa, mutta sivustolla, jolla on kymmeniätuhansia kävijöitä, jokainen kilotavu merkitsee. Sisäänrakennettu WordPressin arkistomekanismi tarjoaa saman toiminnallisuuden ilman frontend-kuormaa, ja sen määrittämiseen menee vain 10 minuuttia.

💡 Pikakatsaus:

• Luo räätälöity sisältötyyppi CPT UI:n avulla ja ota arkistotuki käyttöön asetuksissa heti
• Kirjoita tarvittaessa räätälöity mallipohja tarkkaa asettelun hallintaa varten
• Määritä SEO-metatiedot Yoast SEO:n kautta: otsikko, kuvaus ja og:image arkistosivulle
• Poista sivupalkki käytöstä ja lisää Open Graph -merkintä tarvittaessa

1. Räätälöidyn sisältötyypin luominen

Yksinkertaisin ja luotettavin tapa rekisteröidä CPT ilman yhtäkään koodiriviä on Custom Post Type UI -lisäosa. Se on asennettu yli miljoonalle sivustolle ja sitä on ylläpidetty vuodesta 2010 lähtien, ja käyttöliittymä on intuitiivinen: lomakekentät vastaavat yksi yhteen register_post_type()-funktion argumentteja.

Kun olet asentanut lisäosan, siirry kohtaan CPT UI → Add/Edit Post Types. Täytä vähimmäistiedot:

• Post Type Slug: latinalaisia merkkejä, ei välilyöntejä (esimerkiksi portfolio)
• Plural Label: "Portfolio"
• Singular Label: "Työ"

Voit jättää loput asetukset oletusarvoihinsa; oletusarvot kattavat valtaosan tyypillisistä skenaarioista. Klikkaa Add Post Type, ja uusi tyyppi ilmestyy hallintapaneeliin omana valikkokohtanaan.

2. Arkistosivun määrittäminen

Jotta uuden tyypin sisällöt kerääntyvät omalle sivulleen, sinun on erikseen otettava arkistotuki käyttöön. Se on oletuksena pois päältä.

Siirry kohtaan CPT UI → Edit Post Types ja valitse luomasi tyyppi listalta:

Vieritä alas Settings-osioon ja täytä kaksi keskeistä kenttää:

• Has Archive: aseta arvoon True. Tämä on arkistosivun kytkin.
• Custom Rewrite Slug: polkutunnus, josta arkisto on saatavilla. Yleensä sama kuin sisältötyypin polkutunnus (esimerkiksi portfolio).

Tallenna muutokset ja siirry osoitteeseen http://YOUR_SITE/portfolio. Näet listan kaikista tämän tyypin sisällöistä, jotka on tyylitelty aktiivisen teeman vakio-archive.php-mallipohjalla:

Perussivu on valmis. Jos vakio-ulkoasu riittää, voit lopettaa tähän. Mutta useimmissa tapauksissa haluat hioa ulkoasua.

3. Räätälöity archive-{posttype}.php -mallipohja

WordPress käyttää selkeää mallipohjahierarkiaa. Kun kävijä saapuu CPT-arkistosivulle, ydin etsii tiedostoja tässä järjestyksessä:

• archive-{posttype}.php
• archive.php
• index.php

Tämä tarkoittaa, että sinun tarvitsee vain luoda tiedosto nimeltä archive-portfolio.php (jossa portfolio on sisältötyyppisi polkutunnus), ja WordPress poimii sen automaattisesti.

Vaiheet:

Kopioi teemasi archive.php-tiedoston sisältö uuteen archive-portfolio.php-tiedostoon. Muokkaa sitten merkintää tarpeisiisi sopivaksi: piilota päivämäärä, jos se ei ole portfolion kannalta olennainen; tulosta pienoiskuva eri koossa; korvaa vakio the_excerpt() funktiolla the_content().

1
<?php
2
/* Template for Portfolio archive — overrides archive.php */
3
 
4
if ( have_posts() ) {
5
    while ( have_posts() ) {
6
        the_post();
7
        // Your custom markup here
8
        the_post_thumbnail( 'medium' );
9
        the_title( '<h3>', '</h3>' );
10
        the_excerpt();
11
    }
12
}

Jos työskentelet FSE-teeman (Block Theme) kanssa, arkistomallipohja luodaan sivustoeditorissa: Appearance → Editor → Templates → Add New Template → Archive: Portfolio. Ei PHP:tä, pelkkiä lohkoja, mutta logiikka on sama: räätälöity asettelu tietylle CPT:lle.

4. Arkistosivun SEO-optimointi

Arkistosivu ei ole vain tekninen URL-osoite. Hakukoneet indeksoivat sen, ja se voi helposti tuoda liikennettä kaupallisilla hakukyselyillä, kuten "web-studion portfolio" tai "toimiston tiimi".

Jos sinulla on Yoast SEO asennettuna, CPT-arkistojen metatiedot määritetään yhdessä paikassa:

Avaa Yoast SEO → Settings → Content Types, etsi räätälöity sisältötyyppisi ja laajenna osio. Aseta mallipohjat otsikolle ja metakuvaukselle:

Suositellut mallipohjat:

• Otsikko: %%pt_plural%% %%page%%, %%sitename%%
• Metakuvaus: %%pt_plural%%, work samples, case studies and projects. %%sitename%%

Yoast korvaa automaattisesti muuttujat %%pt_plural%% ja %%pt_single%% CPT-asetuksistasi. Älä unohda poistaa noindex-merkintää arkistosivulta, jos se on oletuksena käytössä; Show in search results -valintaruudun on oltava aktiivinen.

5. Open Graph -merkintä ja sivupalkki

Varmistaaksesi, että kuva noudetaan, kun arkistosivun linkki jaetaan sosiaalisessa mediassa, lisää og:image wp_head-koukun kautta. Lisää koodi aktiivisen teemasi functions.php-tiedostoon tai Code Snippets -lisäosan kautta:

1
add_action( 'wp_head', 'cpt_archive_og_image' );
2
function cpt_archive_og_image() {
3
    if ( is_post_type_archive( 'portfolio' ) ) {
4
        echo '<meta property="og:image" content="' .
5
            get_template_directory_uri() . '/images/portfolio-og.jpg' . '" />';
6
    }
7
}

is_post_type_archive()-ehto laukeaa vain määritetyn CPT:n arkistosivulla, joten merkintä ei vaikuta muihin sivuihin. Sijoita kuva teemakansioosi tai lataa se mediakirjaston kautta ja käytä suoraa URL-osoitetta.

Vielä yksi viimeistely: sivupalkki. Arkistosivuilla se on usein tarpeeton, erityisesti portfolioissa tai tiimeissä, joissa korttien leveydellä on merkitystä. Useimmat modernit teemat antavat poistaa sivupalkin käytöstä sivuasetuksissa:

Lohkoteemoissa vaihda mallipohjaksi Full Width arkistosivun asetuksissa. Klassisissa teemoissa etsi Page Attributes → Template → Full Width mukauttajasta tai muokkauksen metaboksista.

📺 Video: koko prosessi 8 minuutissa

Lyhyt englanninkielinen demo, joka kattaa CPT:n luomisen, arkiston käyttöönoton ja räätälöidyn mallipohjan ensi klikkauksesta valmiiseen sivuun:

⁉️🤔 Usein kysytyt kysymykset

Miksi arkistosivu palauttaa 404-virheen CPT:n luomisen jälkeen?

Todennäköisesti et ottanut Has Archive -parametria käyttöön. Mene kohtaan CPT UI → Edit Post Types, etsi tyyppisi, aseta Has Archive arvoon True ja määritä Custom Rewrite Slug. Tallenna muutokset ja muista mennä kohtaan Settings → Permalinks ja klikata "Save Changes"; tämä tyhjentää uudelleenkirjoitussääntöjen välimuistin.

Voinko jättää CPT UI -lisäosan pois?

Kyllä, räätälöidyt sisältötyypit voidaan rekisteröidä functions.php-tiedostossa register_post_type()-funktion avulla. Se vie noin 15-20 riviä koodia, muutaman minuutin kehittäjältä. Lisäosa tarjoaa vain visuaalisen käyttöliittymän ja estää kirjoitusvirheet argumenteissa.

Miten näytän CPT-sisällöt etusivulla?

Lisää 'has_archive' => true register_post_type()-funktion argumentteihin, ja sisällyttääksesi sisällöt pääsyötteeseen aseta 'public' => true ja 'exclude_from_search' => false. Kohdennettua tulostusta varten käytä WP_Query-kyselyä argumentilla 'post_type' => 'portfolio'.

Mitä eroa on archive-{posttype}.php ja taxonomy-{taxonomy}.php -mallipohjilla?

Ensimmäinen käsittelee sivun, jolla on KAIKKI CPT-sisällöt; toinen käsittelee suodatuksen tietyn taksonomian termin mukaan (esimerkiksi "Projektityyppi: laskeutumissivu"). Molemmat noudattavat mallipohjahierarkiaa, mutta laukeavat eri URL-osoitteissa.

Onko räätälöity mallipohja pakollinen?

Ei. Jos vakio archive.php sopii sinulle, ota vain Has Archive käyttöön ja käytä sitä. Räätälöity mallipohja tarvitaan, kun vaadit uniikkia merkintää: eri pienoiskuvakoot, ei päivämääriä, ruudukko listan sijaan.

Entä jos vakio-mallipohja ei toimi sinulle?

Räätälöityjen sisältöjen arkistosivu on asia, joka määritetään kerran ja unohdetaan. CPT UI ja muutama rivi functions.php-tiedostossa hoitavat asian täysin: ei kaikenkattavia lisäosia, ei ylimääräistä koodia frontendissa.

Jos sinulla on tämän luettuasi vielä kysymyksiä tietystä teemasta tai lisäosayhdistelmästä, jätä kommentti artikkelin alle. Tutkimme tapauksesi erikseen.