WordPress 자식 테마에서 사용자 지정 404 페이지를 만드는 방법

웹 사이트가 아무리 잘 설계되고 설계되었더라도 사용자는 어느 시점에서 404 페이지를 접하게 됩니다. 맞춤법 오류가 있는 URL을 입력하는 것처럼 간단할 수 있습니다. 예를 들어 www.website.com/contact에 연락처 페이지가 있고 누군가 www.website.com/contacts를 방문하려고 하면 404 페이지로 리디렉션될 가능성이 높습니다. 또한 웹사이트 콘텐츠 조정에서 링크가 리디렉션되지 않고 이동할 수 있었던 페이지가 항상 고려되는 것은 아닙니다. 이러한 경험이 사용자에게 너무 자주 발생하지 않기를 바랍니다. 하지만 발생하면 도움을 제공하고 브랜드 고유의 무언가를 만들 수 있는 기회가 됩니다.

웹의 404페이지가 낯설지 않을 가능성이 있으므로 이미 디자인을 염두에 두고 있을 수 있습니다. 그렇지 않은 경우 "멋진 404 페이지"를 인터넷 검색하면 모든 종류의 영감을 찾을 수 있습니다. 디자인은 진지한 것부터 재미있는 것, 텍스트가 많거나 미니멀한 것, 또는 그 중간에 있는 것까지 무엇이든 될 수 있습니다.

아래는 내가 좋아하는 것 중 일부입니다. 페이지 디자인에서 창의성이 어떻게 사용되는지 보여주는 좋은 예입니다.

피그마

Figma는 단순한 404 페이지이지만 그래픽은 벡터 포인트와 매우 잘 맞습니다. 나는 그것이 얼마나 단순하고 대담한지 좋아합니다. 정말 필요한 모든 것입니다.

에어비앤비

이 예제는 내용 측면에서 좀 더 많은 것을 제공합니다. 예시적인 접근 방식은 유머 요소를 광고합니다. 여기에는 일부 주요 링크가 포함됩니다. 사용자가 잘못 입력한 경우 목록에서 원하는 것을 찾을 수 있습니다.

메일침프

MailChimp 사이트에서 디자인은 항상 재미있습니다. 특히 최근의 재설계로 인해 더욱 그렇습니다. 텍스트와 일러스트레이션 모두에서 유머 요소가 있습니다.

Genesis Framework 및 StudioPress 테마를 무료로 받으세요!

Flywheel에서 사이트를 호스팅하면 멋진 대시보드에서 바로 30개 이상의 프리미엄 WordPress 테마(Genesis! 포함)에 액세스할 수 있습니다. $2,000가 넘는 금액으로 월 $15에 시작할 수 있습니다! 여기에서 자세히 알아보세요.

사용자 정의 404 페이지 만들기

가장 먼저 해야 할 일: 모든 사용자 정의는 하위 테마에서 수행해야 합니다. 그렇게 하면 일반 테마에 대한 업데이트로 인해 수정 사항이 무시되지 않습니다. 이 404 페이지는 자식 테마의 파일이 될 것입니다. 정확히는 404.php 라는 파일입니다.

WordPress 하위 테마를 사용자 정의하기 위해 CSS 변수를 추가하는 방법

CSS 사용자 정의 속성이라고도 하는 CSS 변수를 사용하면 CSS 스타일시트에서 쉽게 재사용할 수 있습니다. WordPress 하위 테마로 작업을 완료했다면 아마도 많은 스타일을...

또한 테스트 환경에서 이 작업을 수행해야 합니다. 테마 파일이 변경되면 사이트를 다운시킬 수 있는 구문 오류의 가능성이 항상 있습니다.

1. 새 파일 만들기

하위 테마가 있는 경우 첫 번째 단계는 작업을 시작할 새 파일을 만드는 것입니다. 하위 테마를 생성한 폴더를 열고 404.php 파일을 추가하고 싶을 것입니다.

2. 파일 편집

기본 예

이 예제는 텍스트와 이미지가 있는 페이지를 설명합니다. 여기서 디자인 아이디어는 일러스트레이션 그래픽이 필요한 단순한 것을 만드는 것입니다.

다음 코드를 404.php 페이지에 붙여넣습니다. 기본적인 시작입니다. 다른 구조로 수정하여 실제로 자신의 것으로 만들 수 있습니다(즉, 사이드바를 원하지 않는 경우 제거할 수 있음).

<?php get_header(); ?>
<div id="main-content">
<div class="container">
<div id="content-area" class="clearfix">
<div id="left-area">
<article id="post-0" <?php post_class( 'post_not_found' ); ?>>
<img src="/images/image.jpg">
<h1><?php esc_html_e('404'); ?></h1>
<h2><?php esc_html_e('Oops, this page cannot be found.','WP Loop'); ?></h2>
</article> <!-- .post_not_found -->
</div> <!-- #left-area -->
<?php get_sidebar(); ?>
</div> <!-- #content-area -->
</div> <!-- .container -->
</div> <!-- #main-content -->
<?php get_footer(); ?>

몇 가지 수정해야 할 사항이 있습니다. 하나는 이미지의 경로를 변경하고 원하는 제목을 포함하는 것입니다. 사용자 지정 메시지를 작성한 다음 변경 사항을 저장하는 것을 잊지 마십시오.

여기까지 지침을 따랐다면 이미지, 메시지 및 표준 머리글, 사이드바 및 바닥글이 있는 사용자 지정 템플릿을 만든 것입니다. (다른 페이지에도 있을 수 있습니다.)

위젯 접근

이것은 선택 사항이지만 많은 디자이너는 위젯 영역으로 작업하는 것을 선호합니다. 변경 및 유지 관리가 더 쉽습니다. 예를 들어 위젯은 가장 최근에 인기 있는 블로그 기사를 표시하는 효율적인 방법입니다.

위젯 추가

위젯을 404.php file 에 추가하려면 새 위젯 영역을 만들어야 합니다. 자식 테마에는 functions.php 파일이 필요하므로 이제 자식 테마에 functions.php 파일이 있는지 다시 확인해야 합니다.

functions.php 파일에서 페이지에 새 위젯을 추가하려면 스니펫이 필요합니다.

function widget_area_404() {
register_sidebar( array(
'name' => '404 Page',
'id' => '404',
'description' => __( 'Widgets for 404 error page.' ),
'before_widget' => '<div class="et_pb_post">',
'after_widget' => '</div>',
'before_title' => '<h4 class="widgettitle">',
'after_title' => '</h4>',
) );
}
add_action( 'widgets_init', 'widget_area_404' );

이 스니펫은 위젯만 추가합니다. 실제로 사용하려면 이 함수를 호출해야 합니다. 404.php 파일에서 호출됩니다. 이 위젯 영역을 원하는 위치를 주시하세요.

새 위젯을 표시하려는 위치(예: 제목 및 텍스트 뒤)에 다음 코드를 복사하여 붙여넣습니다.

<?php dynamic_sidebar( '404' ); ?>

새 위젯 영역을 표시할 위치를 설정했으므로 이제 모양 > 위젯 으로 이동하여 위젯 콘텐츠를 추가할 차례입니다. 여기에서 HTML 블록, 인기 게시물 또는 404 페이지에 대한 기타 위젯과 같은 항목을 선택할 수 있습니다.

간단한 것을 만들든 많은 링크가 있는 페이지를 만들든 사용자 지정 404 페이지를 만드는 것은 매우 간단합니다. 하위 테마를 사용하고 위젯을 활용하여 디자인 가능성이 무궁무진합니다.

사이트를 사용자 정의하는 더 많은 방법을 찾고 계십니까? 다음 튜토리얼을 확인하세요.

• WordPress 하위 테마를 사용자 정의하기 위해 CSS 변수를 추가하는 방법
• Genesis 하위 테마에 대한 간단한 사용자 지정
• WordPress에서 사용자 정의 필드를 만들고 사용하는 방법