Otsikot WordPressissa ovat enemmän kuin pelkkää tekstiä sivun ylälaidassa. Ne toimivat neljään suuntaan yhtä aikaa: hakukoneoptimointi (title-tagi hakutulossivulla), navigointi (selaimen välilehti), design (visuaalinen hierarkia sivulla) ja toimituksellinen hallinta (mitä kirjoittajat kirjoittavat). Oletusarvoiset ylläpitoasetukset kattavat kuitenkin vain perusteet; hienosäätö vaatii koodia.

Ongelma pahenee, kun sivustolla työskentelee useita kirjoittajia. Yksi kirjoittaa 120 merkin otsikoita ja rikkoo ulkoasun. Toinen käyttää sanoja, jotka kumppanisi on sopimuksella kieltänyt. Kolmas unohtaa, että sivun otsikko hakutuloksissa ja itse sivustolla ovat kaksi erillistä kenttää. Kaikkien perässä on mahdotonta pysyä käsin.

Alla on neljä konkreettista tekniikkaa WordPressin otsikoiden määrittämiseen functions.php-tiedoston kautta. Jokainen ratkaisee oman tehtävänsä: automaattisesta pituuden katkaisusta kiellettyjen sanojen ohjelmalliseen estoon. Koodi käyttää dokumentoituja WordPress-filttereitä ja se on testattu WP 6.x:llä. Lopusta löydät aihetta käsittelevän UKK-osion.

💡 Pikakatsaus:

• Rajoita otsikon pituus automaattisesti the_title-filtterillä, jotta kirjoittajat eivät voi rikkoa ulkoasua
• Muuta artikkelin otsikon tasausta single.php-tiedoston kautta ilman lisäosia tai CSS-muokkauksia
• Estä kiellettyjä sanoja sisältävien artikkelien julkaisu transition_post_status-koukun avulla
• Vaihda title-tagin erotin ja lisää mukautettuja otsikoita metakenttien kautta

Miten rajoittaa WordPress-otsikon pituutta

Pitkä otsikko voi tuhota huolellisimminkin suunnitellun ulkoasun. Etusivulla, jossa näytetään katkelmia, 120 merkin otsikko valuu kortin ulkopuolelle ja design näyttää rikkinäiseltä. Tämä iskee erityisesti monisarakkeisia ruudukkoja käyttäviin sivustoihin.

Ratkaisu on the_title-filtteri, joka katkaisee otsikon määritettyyn rajaan, kun se näytetään sivulla. Varsinainen tietue tietokannassa säilyy koskemattomana; ainoastaan näytettävä teksti lyhenee.

Koodi functions.php-tiedostoon:

1
function sdstudio_limit_title_length( $title ) {
2
    $max = 60;
3
    if ( mb_strlen( $title ) > $max ) {
4
        return mb_substr( $title, 0, $max ) . ' …';
5
    }
6
    return $title;
7
}
8
add_filter( 'the_title', 'sdstudio_limit_title_length' );

Tässä on mitä tapahtuu: mb_strlen laskee merkit oikein myös kyrillisille aakkosille (toisin kuin strlen, joka laskee tavuja). Kun 60 merkin raja ylittyy, otsikko katkaistaan ja loppuun lisätään ellipsi, jotta lukijat ymmärtävät, ettei tämä ole koko teksti. Voit korvata luvun 60 millä tahansa muulla numerolla omaan ulkoasuusi sopivaksi.

Missä käyttää valikoivasti? Jos haluat katkaista otsikot vain tietyssä paikassa (esimerkiksi suosittujen artikkelien vimpaimessa), kääri add_filter ehtotagiin:

1
if ( is_home() || is_front_page() ) {
2
    add_filter( 'the_title', 'sdstudio_limit_title_length' );
3
}

Sama lähestymistapa toimii is_archive(), is_category() ja kaikissa muissa konteksteissa.

Miten muuttaa artikkelin otsikon tasausta

WordPress-teemat vaihtelevat. Jotkut tarjoavat tasausvaihtoehtoja kustomoijassa; toiset eivät. Jos teemasi kuuluu jälkimmäiseen kategoriaan, otsikko on oletuksena vasemmalle tasattu, etkä löydä tälle asetusta hallintapaneelista.

Otsikon tasaus määritetään single.php-pohjatiedostossa, joka vastaa yksittäisten artikkelien näyttämisestä. Vaiheita on vain neljä:

• Avaa Ulkoasu → Teemaeditori (tai single.php-tiedosto FTP:n/hotellipaneelin kautta)
• Etsi rivi <?php the_title(); ?>, joka tulostaa otsikon
• Kääri se tagiin, jossa on haluttu tasaus

Vasen tasaus (oletus):

1
<?php the_title(); ?>

Keskitetty:

1
<div style="text-align: center;"><?php the_title(); ?></div>

Oikea:

1
<div style="text-align: right;"><?php the_title(); ?></div>

• Tallenna tiedosto ja avaa mikä tahansa artikkeli; otsikko näkyy määritetyssä kohdassa

Tämä menetelmä on perustason, mutta toimii mille tahansa teemalle. Siistimpi tapa on lisätä CSS-luokka body_class-filtterin kautta ja tyylitellä tyylitiedoston kautta, mutta nopeaan korjaukseen inline-tyylit riittävät.

Miten estää ei-toivotut sanat otsikoissa

Tekstimuotoinen varoitus kirjoittajille ("älä käytä sanaa X otsikoissa") toimii ensimmäiseen unohdettuun deadlineen asti. Ennemmin tai myöhemmin joku julkaisee otsikon, jossa on kielletty ilmaus, ja parhaassa tapauksessa artikkeli nähdään sisäisesti; pahimmassa tapauksessa kumppani tai kilpailija näkee sen.

Ohjelmallinen esto ratkaisee ongelman radikaalisti: WordPress yksinkertaisesti estää artikkelin julkaisun, jos otsikko sisältää kielletyn sanan. Kirjoittaja näkee virheilmoituksen ja hänen on korjattava teksti ennen julkaisua.

Koodi tiedostoon functions.php:

1
function sdstudio_block_forbidden_title_words( $new_status, $old_status, $post ) {
2
    if ( 'publish' !== $new_status || 'publish' === $old_status ) {
3
        return;
4
    }
5
 
6
    $restricted = array( 'word1', 'word2', 'word3' );
7
    $title      = $post->post_title;
8
 
9
    foreach ( $restricted as $word ) {
10
        if ( mb_stripos( $title, $word ) !== false ) {
11
            wp_die( 'Ошибка: заголовок содержит запрещённое слово — «' . esc_html( $word ) . '». Измените заголовок и попробуйте снова.' );
12
        }
13
    }
14
}
15
add_action( 'transition_post_status', 'sdstudio_block_forbidden_title_words', 10, 3 );

Miten se toimii: transition_post_status-koukku laukeaa aina, kun artikkelin tila muuttuu. Tarkistamme, että uusi tila on publish ja vanha tila ei ole publish (muuten jokainen jo julkaistun artikkelin päivitys estyisi myös). Sen jälkeen mb_stripos etsii jokaista estesanaa otsikosta kirjainkoosta riippumatta. Jos sana löytyy, wp_die pysäyttää julkaisun ja näyttää selkeän viestin.

Jos haluat lisätä oman sanan, korvaa word1, word2, word3 $restricted-taulukossa. Voit lisätä niin monta sanaa kuin tarvitaan; funktio käy ne kaikki läpi.

Bonus: näytä kirjoittajille kiellettyjen sanojen lista suoraan otsikkokentän alapuolella. Lisää tämä koodi samaan functions.php-tiedostoon:

1
function sdstudio_show_restricted_words_notice() {
2
    $restricted = array( 'word1', 'word2', 'word3' );
3
    echo '<div style="color:#856404;background:#fff3cd;padding:6px 12px;margin:8px 0;border-radius:4px;font-size:13px;">';
4
    echo 'Запрещённые слова в заголовке: <strong>' . implode( ', ', $restricted ) . '</strong>';
5
    echo '</div>';
6
}
7
add_action( 'edit_form_after_title', 'sdstudio_show_restricted_words_notice' );

Nyt estesanojen lista näkyy editorin yläpuolella, joten kirjoittajien ei tarvitse arvailla, mikä on kiellettyä.

Otsikon erotin ja mukautetut title-tagit

Otsikon erotin on symboli sivuston nimen ja artikkelin otsikon välissä <title>-tagissa. Hakutuloksissa se näkyy muodossa "Sivuston nimi | Artikkelin otsikko" tai "Sivuston nimi - Artikkelin otsikko". Tämä ei suoraan vaikuta klikkausprosenttiin, mutta se erottaa sinun hakutuloksesi visuaalisesti muista.

WordPress 4.4:stä lähtien erotinta vaihdetaan document_title_separator-suodattimella. Koodi on vain kolme riviä:

1
function sdstudio_change_title_separator( $separator ) {
2
    return '|';
3
}
4
add_filter( 'document_title_separator', 'sdstudio_change_title_separator' );

Voit korvata kolmannen rivin symbolin millä tahansa merkillä: pystyviiva, yhdysmerkki, suurempi kuin -merkki, keskipiste. Älä käytä erikoismerkkejä kuten ★ tai →; Google ei näytä niitä, ja hakutuloksesi näyttävät sotkuisilta.

WordPress 4.4:ää vanhemmille versioille: wp_title-funktio on vanhentunut, mutta jos sivustosi on vielä vanhemmassa versiossa, päivitä ensin (tämä on tietoturvakysymys) ja säädä sitten erotin. Vanha wp_title-koodi on WordPressin dokumentaatiossa historiallisena viitteenä, mutta sitä ei suositella.

Miten asetat mukautetun title-tagin yksittäiselle artikkelille

On tilanteita, joissa hakukoneille tarkoitetun title-tagin tulisi poiketa sivun H1-otsikosta. Hakukoneoptimointilisäosat (Yoast, Rank Math) tarjoavat tätä varten erillisen kentän. Mutta jos et käytä SEO-lisäosaa, tehtävä ratkeaa mukautetulla kentällä ja pre_get_document_title-suodattimella.

Koodi tiedostoon functions.php:

1
function sdstudio_custom_title_from_meta( $title ) {
2
    if ( is_singular() ) {
3
        $custom = get_post_meta( get_the_ID(), 'custom_post_title', true );
4
        if ( $custom ) {
5
            return esc_html( $custom );
6
        }
7
    }
8
    return $title;
9
}
10
add_filter( 'pre_get_document_title', 'sdstudio_custom_title_from_meta', 20 );

Näin käytät:

• Avaa artikkeli, joka tarvitsee mukautetun <title>-tagin
• "Mukautetut kentät" -lohkossa (jos et näe sitä, ota se käyttöön "Näytön asetukset" -valikosta) luo kenttä nimeltä custom_post_title
• Syötä haluttu title-tagi arvoksi, esimerkiksi "Välimuistilisäosien vertailu 2026, testit ja arviot"
• Tallenna artikkeli

Jos mukautettua kenttää ei ole täytetty, WordPress käyttää tavallista title-tagia (artikkelin otsikko + erotin + sivuston nimi). Mekanismi toimii vain yksittäisillä sivuilla (is_singular); arkistojen ja hallinta-alueen otsikoihin se ei vaikuta.

Tärkeä huomio: pre_get_document_title-suodattimella on prioriteetti 20, mikä varmistaa, että suodatin suoritetaan tavallisen otsikon muodostamisen JÄLKEEN ja se ohittaa sen.

Katso aiheesta 6 minuutin video; se näyttää visuaalisesti, miten title-tageja määritetään WordPressin hallintapaneelin ja SEO-lisäosien kautta.

⁉️🤔 Usein kysytyt kysymykset

Toimiiko tämän artikkelin koodi WordPress 6.x:ssä (nykyinen versio osoitteessa wordpress.org)?

Kyllä, kaikki koodi on testattu nykyisellä WordPress-versiolla. Suodattimet the_title, document_title_separator ja pre_get_document_title ovat olleet osa WordPressin ydintä versioista 4.4-5.0 lähtien, ja ne ovat täysin tuettuja WP 6.x:ssä. Ainoa muutos vanhempiin oppaisiin verrattuna: vanhentunut publish_post-koukku on korvattu transition_post_status-koukulla.

Pitäisikö minun muokata lapsiteeman functions.php-tiedostoa vai voinko käyttää pääteemaa?

Muokkaa aina lapsiteemaa. Jos muokkaat pääteeman functions.php-tiedostoa, kaikki muutokset katoavat seuraavassa päivityksessä. Jos sinulla ei ole lapsiteemaa, luo sellainen: siihen menee viisi minuuttia Child Theme Configurator -lisäosalla tai manuaalisesti (style.css-tiedosto + functions.php-tiedosto, jossa on Template:-direktiivi).

Voinko saavuttaa saman lopputuloksen lisäosilla koodin sijaan?

Osittain. SEO-otsikoille on olemassa Yoast SEO ja Rank Math. Pituuden rajoittamiseen on lisäosia, kuten Title Length Limiter, mutta niiden tuki on epäluotettavaa. Estosanoille ja erottimen vaihtamiselle ei ole vakiolisäosia; vain koodi toimii. Lisäksi jokainen ylimääräinen lisäosa hidastaa sivustoa, kun taas neljä riviä functions.php-tiedostossa ei aiheuta havaittavaa kuormitusta.

Mitä teen, jos sivusto näyttää valkoista ruutua functions.php-tiedoston muokkaamisen jälkeen?

Yhdistä palvelimelle FTP:n kautta tai hotellisi tiedostonhallinnan kautta, avaa functions.php ja poista lisäämäsi koodi. Jos sinulla ei ole FTP-yhteyttä, mene phpMyAdminiin, etsi wp_options-taulu, active_plugins-rivi ja poista kaikki lisäosat väliaikaisesti käytöstä (tämä tyhjentää välimuistin). Tulevaisuutta varten: ennen jokaista functions.php-muokkausta ota WP_DEBUG käyttöön wp-config.php-tiedostossa; silloin valkoisen ruudun sijaan näet virheilmoituksen.

Vaikuttaako otsikon erotin SEO:hon?

> Suoraa vaikutusta sijoituksiin ei ole; Google ei arvioi, käytätkö |- vai --merkkiä. Epäsuora vaikutus on: Google ei välttämättä näytä epästandardeja erottimia (★, →), ja katkelmasi hakutuloksissa näyttää visuaalisesti huonommalta. Lisäksi tunnistettava erotin rakentaa brändin tunnettuutta: käyttäjät tottuvat muotoon "Brändi | Otsikko" ja huomaavat tuloksesi hakutulossivulla nopeammin.

Mitä toteuttaa ja missä järjestyksessä

Neljä yllä olevaa tekniikkaa kattavat kaikki pääskenaariot WordPress-otsikoiden kanssa työskentelyyn. Toteutusjärjestys etenee yksinkertaisesta monimutkaiseen:

Vaihda ensin otsikkotagin erotin; tämä on kolme riviä koodia, jonka tulokset näkyvät heti hakutuloksissa. Määritä sitten mukautetut <title>-tagit metakenttien kautta, jos sivustollasi on avainsivuja, jotka tarvitsevat erilliset hakutulosotsikot. Tämän jälkeen ota käyttöön pituussuodatin; se suojaa asettelua liian pitkiltä otsikoilta ilman kirjoittajien toimenpiteitä. Lisää lopuksi estosanojen estäjä, kun kiellettyjen ilmausten lista on sovittu ja hyväksytty.

Ennen jokaista functions.php-muokkausta varmuuskopioi tiedosto: kopioi sen sisältö tekstieditoriin ja tallenna paikallisesti. Tämä vie kymmenen sekuntia ja säästää tunteja palauttamisessa virhetilanteessa.