Navigointivalikko ilman linkkiä kotisivulle on kuin ulko-ovi ilman kahvaa. Käyttäjä saapuu sisäsivulle haun kautta, lukee sisällön... eikä hänellä ole aavistustakaan, mistä klikata päästäkseen kotisivulle. Otsikon logo ei aina auta; jotkut käyttäjät etsivät vaistomaisesti "Koti"-kohtaa suoraan valikosta.

Ennen versiota 3.0 WordPressissä ei ollut tällaista vaihtoehtoa tavallisessa valikkoeditorissa, joten piti joko muokata koodia tai lisätä mukautettu linkki manuaalisesti. Nyt kaikki on yksinkertaisempaa: pari klikkausta ja kotilinkki on paikallaan. Ja jos olet kehittäjä tai muokkaat teemaa, käytössä on wp_nav_menu_items-suodatin, joka hoitaa tehtävän yhdellä funktiolla.

Alta löydät molemmat tavat: visuaalisen tavan tavallisille käyttäjille ja ohjelmallisen tavan koodin parissa työskenteleville. Lisäksi käymme läpi, milloin linkki kaipaa päivitystä ja mitä tehdä, jos se yhtäkkiä katoaa.

💡 Pikaopas:

• Lisää kotilinkki WordPress-valikkoon hallintapaneelin kautta alle minuutissa ilman lisäosia.
• Lisää linkki ohjelmallisesti wp_nav_menu_items-suodattimella teeman functions.php-tiedostossa.
• Tarkista ja päivitä URL-osoite verkkotunnuksen vaihdon tai HTTPS:ään siirtymisen jälkeen.

Tapa 1: WordPressin hallintapaneelin kautta

Tämä tapa toimii WordPress 3.0:ssa ja sitä uudemmissa, eli millä tahansa nykyaikaisella sivustolla. Lisäosia tai koodimuokkauksia ei tarvita.

Kirjaudu hallintapaneeliin ja siirry kohtaan Ulkoasu → Valikot. Vasemmalla näet lohkot: "Sivut", "Artikkelit", "Mukautetut linkit" ja muita asennetuista lisäosista ja sisältötyypeistä riippuen.

Sivut-lohkossa klikkaa Kaikki-välilehteä (tai "Näytä kaikki" vanhemmissa versioissa). Aivan ensimmäinen merkintä on sivu nimeltä "Koti". Valitse sen valintaruutu ja klikkaa Lisää valikkoon.

Kun kohde on lisätty, se ilmestyy oikealla olevaan valikkorakenteeseen. Vedä se haluamaasi kohtaan; se sijoitetaan yleensä ensimmäiseksi tai viimeiseksi. Tallenna valikko klikkaamalla Tallenna valikko, ja kotilinkki tulee näkyviin sivustollesi.

Oletusarvoisesti WordPress käyttää tälle kohteelle kotisivun suoraa URL-osoitetta (esimerkiksi https://vash-sait.ru/). Tämä on tärkeää muistaa: jos siirrät sivuston myöhemmin toiseen verkkotunnukseen tai vaihdat HTTP:stä HTTPS:ään, linkki säilyttää vanhan osoitteen. Sinun on avattava valikkoeditori ja korjattava URL manuaalisesti tai poistettava kohde ja lisättävä se uudelleen (WordPress lisää nykyisen osoitteen automaattisesti).

Tapa 2: ohjelmallinen lisääminen suodattimen avulla

Jos kehität mukautettua teemaa tai haluat kotilinkin lisättävän automaattisesti teeman aktivoinnin yhteydessä, käytä wp_nav_menu_items -suodatinta. Se sieppaa valikkokohteiden HTML:n ennen tulostusta ja antaa sinun lisätä oman elementtisi.

Sijoita koodi aktiivisen teeman functions.php-tiedostoon (tai lapsiteemaan, jotta et menetä muutoksia päivityksen yhteydessä). Vaihtoehto on Code Snippets -lisäosa: luot pätkän, liität koodin ja aktivoit sen; muutokset ovat tällöin teemasta riippumattomia.

1
/**
2
 * Adds a "Home" link to the main WordPress menu.
3
 *
4
 * @param string $items HTML markup of menu items.
5
 * @param object $args  wp_nav_menu() arguments.
6
 * @return string
7
 */
8
function sdstudio_add_menu_home_link( $items, $args ) {
9
    // Target menu location — replace 'main' with your own value
10
    if ( 'main' !== $args->theme_location ) {
11
        return $items;
12
    }
13
 
14
    $home_link = sprintf(
15
        '<li class="menu-item"><a href="%s">%s</a></li>',
16
        esc_url( home_url( '/' ) ),
17
        esc_html__( 'Home', 'textdomain' )
18
    );
19
 
20
    // The link is added first — put $items . $home_link if you need it last
21
    $items = $home_link . $items;
22
 
23
    return $items;
24
}
25
add_filter( 'wp_nav_menu_items', 'sdstudio_add_menu_home_link', 10, 2 );

Keskeinen parametri on 'main' if-ehdossa. Tämä on valikkoalueen (teemasijainnin) polkutunnus, jonka teeman register_nav_menu()-funktio rekisteröi. Löydät polkutunnuksesi teeman functions.php-tiedostosta: etsi kutsu funktioon register_nav_menu() tai register_nav_menus() ja tarkista ensimmäinen argumentti. Useimmiten se on primary tai main.

Funktio on turvallinen: esc_url() suojaa URL-osoitteen, ja esc_html__() suojaa linkkitekstin ja tukee samalla käännöstä. Jos käytät lapsiteemaa, korvaa 'textdomain' teemasi tekstiverkkotunnuksella.

Kun olet lisännyt koodin, päivitä sivusto, niin kotilinkki ilmestyy valikkoon automaattisesti. Sitä ei tarvitse poistaa manuaalisesti: kommentoi tai poista add_filter()-kutsu, niin kaikki palautuu alkuperäiseen tilaan.

Tilanteet, joissa linkki kaipaa päivitystä

Hallintapaneelin kautta lisätty kotilinkki tallentaa kovakoodatun URL-osoitteen, sen, joka oli sivuston asetuksissa lisäyshetkellä. Kolme yleistä skenaariota, joissa se hajoaa:

• Siirtyminen HTTP:stä HTTPS:ään. Valikkokohteen osoite on edelleen http://..., selaimet saattavat näyttää sekasisältövaroituksen tai uudelleenohjaus voi epäonnistua. Ratkaisu: avaa valikkoeditori, poista vanha "Koti"-kohde ja lisää se uudelleen; WordPress lisää nykyisen https://-osoitteen.

• Verkkotunnuksen vaihtaminen. Kun siirrät sivustoa kehitysympäristöstä tuotantoon (staging.site.ru → site.ru) tai migroit täysin uuteen verkkotunnukseen. Valikkokohteeseen jää vanha URL. Ratkaisu: sama kuin yllä (poista ja lisää uudelleen).

• Siirtyminen alihakemistosta juureen. Jos sivusto siirtyy osoitteesta site.ru/blog/ osoitteeseen site.ru/, kaikki kovakoodatut linkit hajoavat. Migraation jälkeen käy läpi KAIKKI valikkokohteet, ei pelkästään kotilinkkiä.

Ohjelmallisessa tavassa (wp_nav_menu_items-suodattimen kautta) ei ole näitä ongelmia: home_url('/') palauttaa aina nykyisen kotisivun osoitteen WordPressin asetuksista.

Muuten, jos työskentelet valikoiden kanssa usein, tarkista navigointiasetukset kohdasta Ulkoasu → Mukauta, jossa voit hallita valikoita reaaliajassa live-esikatselulla. Edistyneempiin muokkauksiin (kuvakkeiden lisääminen kohteisiin, mega-valikot) on omat työkalunsa, mutta se on toisen artikkelin aihe.

Video: kotipainikkeen lisääminen 2 minuutissa

Jos katsot mieluummin kuin luet, tässä on lyhyt englanninkielinen video, jossa on vaiheittainen ruutuesittely:

⁉️🤔 Usein kysytyt kysymykset

Voinko lisätä kotilinkin ilman lisäosia tai koodia?

Kyllä, tavallisen WordPress-valikkoeditorin kautta: Ulkoasu → Valikot → Sivut-lohko → valitse "Koti" → Lisää valikkoon. Tämä on ydintoiminnallisuutta, joka on ollut saatavilla versiosta 3.0 lähtien.

Miksi kotilinkki katosi valikosta teeman vaihtamisen jälkeen?

WordPressin valikot on sidottu teeman rekisteröimiin valikkoalueisiin (teemasijainteihin). Kun vaihdat teemaa, vanhat alueet katoavat ja uusilla voi olla eri nimet. Valikkosi ei ole kadonnut minnekään; se vain muuttui "kohdentamattomaksi". Siirry kohtaan Ulkoasu → Valikot → Hallitse sijainteja -välilehti ja kohdista olemassa oleva valikko uuden teeman alueeseen. Kaikki kohteet, mukaan lukien kotilinkki, palaavat.

Valikossa on jo "Koti"-kohde, mutta se vie jollekin tietylle sivulle sivuston juuren sijaan. Miten korjaan tämän?

Todennäköisesti valikkoon on lisätty tietty sivu nimeltä "Koti" erityisen "Etusivu"-tyypin sijaan. Poista kyseinen kohde valikosta, etsi sitten Sivut-lohkosta merkintä "Etusivu" (WordPress merkitsee sen erottuvasti) ja lisää se. Jos tällaista nimikettä ei ole, käytä "Mukautetut linkit" -kohtaa: kirjoita URL-kenttään / ja "Linkin teksti" -kenttään "Koti".

Miten lisään kotilinkin valikon viimeiseksi ensimmäisen sijaan?

Ohjelmallisessa tavassa vaihda yhdistämisjärjestys: kirjoita $home_link . $items sijaan $items . $home_link. Visuaalisessa editorissa vedä "Koti"-kohde listan loppuun ja tallenna valikko.

Onko koodissa välttämätöntä käyttää esc_url()- ja home_url()-funktioita?

Kyllä, tämä on WordPressin paras käytäntö. home_url('/') lisää dynaamisesti nykyisen sivuston osoitteen asetuksista, joten sinun ei tarvitse muokata koodia verkkotunnusta vaihtaessasi. esc_url() suojaa erikoismerkit ja estää XSS-hyökkäykset. Suojaamisen ohittaminen tuotantokoodissa on riskialtista.

Toimiiko kooditapa WordPressin multisite-asennuksessa?

Kyllä, home_url( '/' ) palauttaa multisitessa verkoston tietyn sivuston URL-osoitteen (sen, joka on määritetty kyseisen alasivuston asetuksissa). Jokaisella verkoston sivustolla on oma kotilinkkinsä. Jos tarvitset eri toimintaa eri sivustoille, kääri add_filter()-kutsu ehtoon, joka tarkistaa blogin ID:n get_current_blog_id()-funktiolla.

Mitä tehdä, jos kotilinkki ei ilmesty?

Tarkista ensin itsestäänselvyydet: tallensitko varmasti valikon kohteen lisäämisen jälkeen? "Tallenna valikko" -painike on sivun alaosassa; ilman sen klikkaamista muutoksia ei oteta käyttöön. Jos valikko on tallennettu, mutta kohde puuttuu, avaa sivusto incognito-tilassa (selaimen välimuisti piilottaa joskus viimeisimmät muutokset).

Toinen todennäköinen syy on välimuistilisäosa (WP Rocket, W3 Total Cache, LiteSpeed Cache). Tyhjennä välimuisti lisäosan hallintapaneelin kautta ja tarkista sivusto uudelleen.

Jos sekään ei auta, vaihda teema väliaikaisesti oletusteemaan (Twenty Twenty-Five tai Twenty Twenty-Six). Ilmestyikö kohde? Silloin ongelma on mukautetussa teemassa; sen wp_nav_menu()-funktio saattaa olla ohitettu ja suodattimet poistettu. Tarkista wp_nav_menu()-kutsu teemapohjassa: 'items_wrap'-argumentti ei saisi olla tyhjä merkkijono, ja 'fallback_cb' saisi olla false vain, jos poistat varatoiminnon tarkoituksella käytöstä.

"Tavan 2" koodi toimii missä tahansa teemassa, kunhan teemasijainti on oikein; se toimii vakuutuksena siltä varalta, että visuaalinen tapa ei jostain syystä toimi.

Kotilinkki valikossa on pieni yksityiskohta, joka rakentaa luottamusta. Haun kautta sisäsivulle saapuva kävijä löytää polun takaisin alkuun sekunnin murto-osassa ja jatkaa tutkimista. Ilman sitä osa yleisöstäsi sulkee vain välilehden. Kaksi minuuttia valikkoeditorissa tai kymmenen riviä koodia, eikä tämä sisääntulopiste katoa enää koskaan.