워드프레스 404 페이지 템플릿 만들기

  • 네이버 블로그 공유하기
  • 네이버 밴드에 공유하기
  • 페이스북 공유하기
  • 트위터 공유하기
  • 카카오스토리 공유하기

워드프레스 404 페이지 템플릿 만들기

워드프레스에서 없는 페이지를 요청할 경우 404.php 파일을 로드하여 표시됩니다. 모든 테마에 404.php 파일이 포함되어 있습니다.

가령 베스트셀링 워드프레스 테마인 아바다(Avada)의 경우 404 오류가 발생할 경우 다음과 비슷한 페이지가 표시될 수 있습니다.

워드프레스 아바다 테마 404 페이지 오류
Avada 테마의 404 Not Found 페이지

하지만 다음과 같이 별 도움이 되지 않는 404 페이지도 있습니다.

워드프레스 404 페이지 없음 오류 페이지

이 블로그에 사용된 Elegant Themes의 Divi 테마도 404 페이지가 별 도움이 되지 않고 밋밋합니다.

Divi 테마의 404 오류 페이지

사용 중인 테마의 404 페이가 마음에 들지 않거나 제대로 작동하지 않는 경우 404.php 파일을 직접 수정하거나 만들 수 있습니다.

먼저 차일드 테마를 만든 후에 작업하시기 바랍니다. 테마 내의 404.php 파일을 차일드 테마 폴더로 복사한 후에 수정하거나 새롭게 하나 만들어도 됩니다(차일드 테마를 만드는 방법은 여기를 참고하세요).

404 페이지를 만드는 방법은 WordPress Codex 페이지("Creating an Error 404 Page")에 설명되어 있습니다. Codex 페이지의 소스를 가지고 적절히 수정해도 좋을 듯 합니다.

다음과 같은 코드를 사용하여 최근 글 목록을 보여주도록 하는 것도 괜찮을 것 같습니다.

<ul>
<?php $the_query = new WP_Query( 'posts_per_page=5' ); ?>

<?php while ($the_query -> have_posts()) : $the_query -> the_post(); ?>

<li><a href="<?php the_permalink() ?>"><?php the_title(); ?></a></li>

<?php
endwhile;
wp_reset_postdata();
?>
</ul>

최근 글을 표시하는 플러그인을 사용하고 있고 해당 플러그인에서 숏코드를 지원하는 경우에는 숏코드를 추가하면 더 좋은 결과를 얻을 수 있을 것입니다. 예를 들어, Display Posts Shortcode 플러그인을 설치하고 다음과 같은 형식으로 숏코드를 추가하면 됩니다(WordPress Codex 문서 참고).

echo do_shortcode( ' [display-posts posts_per_page="5" image_size="thumbnail" include_excerpt="true"] ' );

상황에 맞는 그림을 추가하는 것도 좋은 방법입니다. CSS-Tricks는 404 오류가 발생할 경우 다음과 같은 그림을 표시하고 있습니다.

CSS Tricks 404 페이지 템플릿
CSS Tricks의 404 Not Found 페이지

플러그인을 사용하여 404 오류 페이지 수정하기

HTML 코드에 익숙하지 않는 경우 404 페이지를 수정(커스터마이징)할 수 있는 플러그인을 사용할 수도 있습니다.

워드프레스 404 페이지 플러그인

404page 플러그인을 사용하여 404 에러 페이지를 보다 수월하게 커스터마이징할 수 있습니다.

참고:



댓글 남기기