404-sivun muokkaaminen WordPressissä

21.1.2024 | Artikkeleita, IT, Kotisivut, Nettisivut, Verkkokauppa, Verkkosivut, Verkkotyökalu, Woocommerce, WordPress, WordPress-ylläpito

Wordpress

404-sivun muokkaaminen WordPressissäKattava opas 404-sivun muokkaamiseen WordPressissä

404-sivu, eli ”Sivua ei löydy” -sivu, on tärkeä osa verkkosivuston käyttäjäkokemusta. Kun käyttäjät päätyvät sivulle, joka ei ole olemassa, hyvin suunniteltu 404-sivu voi auttaa heitä löytämään etsimänsä ja vähentämään turhautumista. Tässä artikkelissa käsittelemme, kuinka voit muokata 404-sivua WordPressissä, ja tarjoamme käytännön vinkkejä ja parhaita käytäntöjä.

Mikä on 404-sivu ja miksi se on tärkeä?

404-sivu näkyy käyttäjille, kun he yrittävät päästä sivulle, jota ei ole olemassa verkkosivustollasi. Tämä voi tapahtua esimerkiksi silloin, kun käyttäjä kirjoittaa URL-osoitteen väärin tai klikkaa rikkinäistä linkkiä. Hyvin suunniteltu 404-sivu voi:

  • Parantaa käyttäjäkokemusta: Ohjata käyttäjiä takaisin toimivaan sisältöön ja auttaa heitä löytämään etsimänsä.
  • Vähentää poistumisprosenttia: Estää käyttäjiä poistumasta sivustoltasi heti, kun he kohtaavat virheen.
  • Brändin vahvistaminen: Antaa mahdollisuuden esittää brändisi persoonallisuus ja tyyli.

404-sivun muokkaaminen WordPressissä

1. Oletus 404-sivun löytäminen

WordPressin teemat sisältävät oletuksena 404-sivumallin, joka sijaitsee teemakansiossa nimellä 404.php. Voit tarkistaa, onko teemassasi tämä tiedosto, seuraavasti:

  1. Mene WordPress-hallintapaneeliin.
  2. Valitse ”Ulkoasu” > ”Teematiedostojen muokkaus”.
  3. Etsi tiedosto nimeltä 404.php teemasi tiedostoluettelosta.

Jos 404.php-tiedostoa ei ole olemassa, sinun täytyy luoda se.

2. Uuden 404.php-tiedoston luominen

Jos teemassasi ei ole 404.php-tiedostoa, voit luoda sellaisen manuaalisesti:

  1. Luo uusi tiedosto nimeltä 404.php tekstieditorissa (esim. Notepad, Sublime Text).
  2. Lisää perusrakenne tiedostoon:

<?php get_header(); ?>
<div id="primary" class="content-area">
<main id="main" class="site-main">
<section class="error-404 not-found">
<header class="page-header">
<h1 class="page-title"><?php esc_html_e( 'Oops! That page can’t be found.', 'your-theme-textdomain' ); ?></h1>
</header><!-- .page-header -->
<div class="page-content">
<p><?php esc_html_e( 'It looks like nothing was found at this location. Maybe try a search?', 'your-theme-textdomain' ); ?></p>
<?php get_search_form(); ?>
</div><!-- .page-content -->
</section><!-- .error-404 -->
</main><!-- #main -->
</div><!-- #primary -->
<?php get_footer(); ?>

  1. Tallenna tiedosto ja lataa se teemasi juurikansioon FTP-ohjelmalla tai hosting-palvelusi tiedostonhallinnalla.

3. 404-sivun muokkaaminen

Voit mukauttaa 404.php-tiedostoa tarpeidesi mukaan. Tässä muutamia elementtejä, joita voit lisätä:

Hakulomake

Hakulomake auttaa käyttäjiä löytämään sisältöä sivustoltasi. Voit lisätä hakulomakkeen seuraavasti
<?php get_search_form(); ?>

Suosituimmat artikkelit tai sivut

Voit näyttää suosituimmat artikkelit tai sivut, jotta käyttäjät voivat löytää kiinnostavaa sisältöä. Esimerkki suosittujen artikkelien näyttämisestä:
<h2><?php esc_html_e( 'Popular Posts', 'your-theme-textdomain' ); ?></h2>
<ul>
<?php
$popular_posts_args = array(
'posts_per_page' => 5, // Näytettävien artikkelien määrä
'meta_key' => 'post_views_count', // Suosituimmuuden peruste
'orderby' => 'meta_value_num',
'order' => 'DESC'
);
$popular_posts_loop = new WP_Query( $popular_posts_args );
if ( $popular_posts_loop->have_posts() ) :
while ( $popular_posts_loop->have_posts() ) : $popular_posts_loop->the_post(); ?>
<li><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></li>
<?php endwhile;
wp_reset_postdata();
endif;
?>
</ul>

Yhteydenottolomake

Yhteydenottolomake antaa käyttäjille mahdollisuuden ilmoittaa virheellisistä linkeistä tai kysyä lisätietoja. Voit lisätä yhteydenottolomakkeen käyttämällä lisäosaa kuten Contact Form 7 ja lisäämällä lomakkeen lyhytkoodin 404.php-tiedostoon.

4. Tyylien ja ulkoasun mukauttaminen

CSS:navulla voit muokata 404-sivusi ulkoasua vastaamaan sivustosi tyyliä. Lisää mukautetut tyylit teemasi style.css-tiedostoon tai suoraan 404.php-tiedostoon tyylitunnisteiden sisään.

Esimerkki mukautetusta tyylistä:

.error-404 {
text-align: center;
padding: 50px;
}

.error-404 .page-title {
font-size: 36px;
color: #ff0000;
}

.error-404 .page-content {
margin-top: 20px;
}

Parhaat käytännöt 404-sivun suunnittelussa

Informatiivinen viesti

Kerro käyttäjille selkeästi, että sivua ei löytynyt, ja tarjoa ohjeita eteenpäin. Käytä ystävällistä ja informatiivista viestiä.

Navigointivaihtoehdot

Tarjoa linkkejä tärkeisiin sivuihin, kuten etusivulle, yhteystietosivulle ja suosituimpiin artikkeleihin. Tämä auttaa käyttäjiä löytämään tiensä takaisin toimivaan sisältöön.

Brändin mukainen ulkoasu

Pidä 404-sivu visuaalisesti yhtenäisenä muun sivustosi kanssa. Käytä samaa väripalettia, typografiaa ja logoa.

Käyttökelpoiset työkalut

Lisää hakulomake, suosituimmat artikkelit ja yhteydenottolomake auttaaksesi käyttäjiä löytämään etsimänsä tiedot tai ilmoittamaan ongelmista.

Hauskat ja luovat ideat

Monet yritykset käyttävät 404-sivuja brändinsä persoonallisuuden korostamiseen. Voit lisätä huumoria tai interaktiivisia elementtejä, kuten pelejä, jotka pitävät käyttäjät sivustollasi pidempään.

Esimerkkejä hyvin suunnitelluista 404-sivuista

1. GitHub

GitHubin 404-sivu sisältää humoristisen viestin ja hakulomakkeen. Käyttäjille tarjotaan myös linkkejä tärkeisiin sivuihin.

2. LEGO

LEGO käyttää hauskaa ja brändilleen ominaista grafiikkaa, jossa on Lego-hahmoja. Sivu sisältää myös navigointilinkkejä ja hakulomakkeen.

3. Airbnb

Airbnb 404-sivu on tyylikäs ja informatiivinen, ja se tarjoaa käyttäjille hakulomakkeen ja linkkejä tärkeisiin sivuihin.

Yhteenveto

404-sivun muokkaaminen WordPressissä on tärkeä osa käyttäjäkokemuksen parantamista. Hyvin suunniteltu 404-sivu voi vähentää turhautumista, ohjata käyttäjiä takaisin toimivaan sisältöön ja vahvistaa brändiäsi. Käyttämällä tässä oppaassa esitettyjä vinkkejä ja parhaita käytäntöjä voit luoda tehokkaan ja käyttäjäystävällisen 404-sivun WordPress-sivustollesi.

Samankaltaisia artikkeleita

WordPressin typografiaopas

WordPressin typografiaopas

Tässä oppaassa käydään läpi, kuinka valita oikeat fontit, miten käyttää niitä WordPressissä tehokkaasti ja miten typografia voi tuk...

23.11.2025
WordPressin joustavuus

WordPressin joustavuus

WordPress on säilyttänyt asemansa maailman suosituimpana sisällönhallintajärjestelmänä jo yli 20 vuoden ajan. Yritykset eri toimialoilt...

20.11.2025
WordPressin kehityssuunta

WordPressin kehityssuunta

WordPress on ollut verkkokehityksen kulmakivi jo vuosikymmeniä, ja sen rooli on muuttunut dramaattisesti ajan myötä. Alun perin blogi...

20.11.2025
WordPressin ekosysteemi vuonna 2026

WordPressin ekosysteemi vuonna 2026

WordPress on laaja ja kehittyvä ekosysteemi, joka kattaa verkkosivujen, verkkokauppojen, sovellusten, integraatioiden ja tekoälypohjai...

20.11.2025
Verkkokauppa WordPressillä

Verkkokauppa WordPressillä

Tässä oppaassa käymme läpi vaiheet, työkalut ja parhaat käytännöt, jotta voit luoda toimivan ja optimoidun verkkokaupan.

20.11.2025