Hur du förbÀttrar din 404-sidmall i WordPress

Hur du förbÀttrar din 404-sidmall i WordPress

404-fel Àr inte bra för anvÀndarupplevelsen. Vi visade dig hur du fÄr e-postvarningar för 404-fel pÄ din webbplats sÄ att du snabbt kan fixa dem. I den hÀr artikeln visar vi dig hur du kan förbÀttra din 404-sidmall i WordPress, sÄ att du kan skapa en mer anvÀndbar 404-sida som faktiskt hjÀlper anvÀndare.

Hur ser de flesta WordPress 404-sidor ut?

404-sidan Àr ofta den mest försummade sidan pÄ de flesta webbplatser. Ofta ser mÄnga WordPress-teman 404-sidan ut sÄ hÀr:

Denna 404-sida i WordPress hanteras av en mallfil som heter 404.php.

Om din konfiguration verkligen Àr trasslig ser 404-sidan ut sÄ hÀr:

404-fel hanteras av webblÀsaren

Ingen av ovanstÄende 404 sidor Àr riktigt anvÀndbara.

NÀr en anvÀndare hamnar pÄ en 404-sida Àr de redan frustrerade. Varför? Eftersom de inte kan hitta det de letade efter.

Du mÄste hjÀlpa anvÀndaren att hitta rÀtt sida. Du kan hjÀlpa till att göra den hÀr upplevelsen bÀttre genom att förmedla felet korrekt och ge dem en ordentlig handlingssÀtt (dvs. vad man ska göra nÀsta).

Detta kan göras genom att visa dem andra delar av dina webbplatser de kan besöka, ge dem ett sÀtt att kontakta dig etc.

Hur man skapar en anpassad 404-sida i WordPress

Det första vi behöver göra Àr att börja med att skapa en anpassad 404-sidmall. Detta kan göras genom att redigera 404.php-filen i ditt WordPress-tema.

Om du redigerar ditt tema direkt, uppmanar vi dig att Ätminstone sÀkerhetskopiera ditt WordPress-tema.

För att göra din 404-sida mer anvÀndbar kommer vi att visa dig hur du lÀgger till anvÀndbara element som populÀra inlÀgg, mest kommenterade inlÀgg, senaste inlÀgg, datumarkiv, lista över alla kategorier etc.

Detta gör det möjligt för nya anvÀndare att snabbt se vad du har att erbjuda.

Visa de mest populÀra inlÀggen pÄ 404-sidan

Vi kommer att anvÀnda en av de bÀsta WordPress-inlÀggsprogrammen för att visa populÀra inlÀgg pÄ vÄr 404-sida.

Det första du behöver göra Àr att installera och aktivera WordPress Popular Posts-plugin pÄ din webbplats. Efter aktivering mÄste du lÀgga till den hÀr malltaggen i din 404.php-fil dÀr du vill visa de populÀra inlÀggen.


<?php wpp_get_mostpopular(); ?>

Visa de mest kommenterade inlÀggen pÄ 404-sidan

Det mest kommenterade inlÀggssektionen Àr ocksÄ beroende av det populÀra inlÀggsprogrammet som vi aktiverade i det sista steget. LÀgg bara till den hÀr malltaggen dÀr du vill visa dina mest kommenterade inlÀgg.


<?php wpp_get_mostpopular("range=all&order_by=comments"); ?>

Du kan ocksÄ kolla in vÄr guide om hur du visar de mest kommenterade inlÀggen i WordPress.

Visa senaste inlÀgg pÄ 404-sidan

Det finns flera sÀtt att visa senaste inlÀgg pÄ WordPress. Det enklaste sÀttet Àr att lÀgga till den hÀr malltaggen i din 404-mall för att visa dina senaste inlÀgg.


<?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>

Visa slumpmÀssiga inlÀgg pÄ 404-sidan

Om du vill visa en slumpmÀssig lista med inlÀgg i WordPress kan du helt enkelt lÀgga till den hÀr koden i din 404-mall dÀr du vill visa en slumpmÀssig lista med inlÀgg frÄn din webbplats.


<ul>
<?php 
$posts = get_posts('orderby=rand&numberposts=5'); 
   foreach($posts as $post) { ?>
        <li><a href="<?php the_permalink(); ?>" title="<?php the_title(); ?>"><?php the_title(); ?></a>
        </li>
   <?php } ?>
</ul>

LÀgg till mÄnadsarkiv med kompaktarkiv

Om du tittar pÄ WPBeginner 404-sidan kommer du att mÀrka att vi visar vÄra mÄnatliga arkivlistor med hjÀlp av ett plugin Compact Archives. Observera att vi har antagit detta plugin och hÄller nu pÄ det.

Installera och aktivera detta plugin Compact Archives-plugin. Efter att ha aktiverat plugin, lÀgg till följande kod i din 404.php-fil:


<p><strong>By Date</strong></p>
<ul>
<?php compact_archive($style="block"); ?>
</ul>

Det visar dina mÄnadsarkiv sÄ hÀr:

Visar mÄnadsarkiv ett Är per rad med Compact Archives

Ett exempel pÄ 404-mall för WordPress

HĂ€r Ă€r ett exempel pĂ„ en 404.php-fil baserad pĂ„ standard WordPress-temat Twenty Thirteen’s 404-mall.


<?php
/**
 * The template for displaying 404 pages (Not Found)
 *
 */

get_header(); ?>

	<div id="primary" class="content-area">
		<div id="content" class="site-content" role="main">

			<header class="page-header">
				<h1 class="page-title"><?php _e( 'Not found', 'twentythirteen' ); ?></h1>
			</header>

			<div class="page-wrapper">
				<div class="page-content">
					<h2><?php _e( 'This is somewhat embarrassing, isn&rsquo;t it?', 'twentythirteen' ); ?></h2>
					<p><?php _e( 'It looks like nothing was found at this location. Maybe try a search?', 'twentythirteen' ); ?></p>

					<?php get_search_form(); ?>
					
					<h3>Check out some of our popular content:</h3>

<div class="col1">
<div class="col-header">			
<h3>Popular Posts</h3>
</div>
<?php wpp_get_mostpopular(); ?>
</div>

<div class="col2">
<div class="col-header">			
<h3>Most Commented</h3>
</div>
 <?php wpp_get_mostpopular("range=all&order_by=comments"); ?>
</div>

<div class="col3">
<div class="col-header">			
<h3>Recent Posts</h3>
</div>
 <?php wp_get_archives( array( 'type' => 'postbypost', 'limit' => 10, 'format' => 'custom', 'before' => '', 'after' => '<br />' ) ); ?>
</div>
				</div><!-- .page-content -->
			</div><!-- .page-wrapper -->

		</div><!-- #content -->
	</div><!-- #primary -->

<?php get_footer(); ?>

JÀmför denna 404-mall med standardmallen i Twenty Thirteen. Du kommer att mÀrka att vi direkt efter sökformulÀret har lagt till vÄr anpassade kod för att visa populÀra, mest kommenterade och senaste inlÀgg. Efter det lade vi till lite CSS för att dela upp det i kolumner.


.col1, .col2, .col3 { 
width:30%;
float:left;
padding:0px 10px 10px 10px;
height:450px;
margin:0px;
}
.col3:after{
clear:both;
}
.col-header { 
background:#220e10;
color:#FFF;
margin:0px;
padding:1px;
text-align:center;
}

SÄ hÀr sÄg slutresultatet ut:

En modifierad 404-sida pÄ WordPress som visar populÀra inlÀgg

Vi hoppas att den hÀr artikeln hjÀlpte dig att förbÀttra 404-sidan pÄ din WordPress-webbplats. Leka gÀrna med koden och experimentera med olika malltaggar för att möta dina behov.

Du kan ocksÄ anvÀnda dessa listor för coola 404 designexempel som inspiration.

Om du gillade den hÀr artikeln, prenumerera sedan pÄ vÄr YouTube-kanal för fler WordPress-videor. Du kan ocksÄ gÄ med pÄ Google+ och Twitter.