WordPress에서 404 페이지를 사용자 정의하는 방법

게시 됨: 2021-06-29

사이트에서 404 오류 페이지를 편집하는 방법을 찾고 있습니까? 우리는 당신을 덮었습니다. 이 가이드에서는 WordPress에서 404 페이지를 사용자 지정하는 다양한 방법을 보여줍니다.

인터넷을 정기적으로 사용하는 경우 404 오류 페이지를 한 번 이상 접했을 것입니다. 요청한 페이지를 사용할 수 없을 때 나타납니다. 대부분의 웹 사이트 소유자는 기본 404 페이지를 최대한 활용하기 위해 할 수 있는 일이 많다는 사실을 깨닫지 못한 채 그대로 둡니다. 좋은 소식은 WordPress를 사용하면 쉽게 사용자 지정할 수 있다는 것입니다.

이 오류 페이지를 편집하는 방법을 보기 전에 404 페이지가 무엇인지, 그리고 이를 사용자 정의할 때의 이점을 더 잘 이해해 보겠습니다.

404 페이지는 무엇입니까?

404 오류 페이지는 사용자가 웹 브라우저에 끊어지거나 잘못된 링크를 입력할 때 표시되는 웹 사이트의 페이지입니다. 이는 방문자가 액세스하려는 페이지에 액세스할 수 없음을 의미합니다. 상상할 수 있듯이 이것은 귀하의 사이트에 좋지 않습니다.

깨진 링크는 좋지 않은 경험을 제공할 뿐만 아니라 SEO 순위에도 영향을 미칠 수 있습니다. 일반적으로 방문자가 404 페이지에서 원하는 것을 찾지 못할 수 있으므로 방문자를 404 페이지로 보내지 않도록 해야 합니다.

그러나 방문자는 웹 사이트가 얼마나 잘 유지 관리되는지에 관계없이 적어도 한 번은 404 페이지를 방문합니다. 서버가 다운되었거나 이동된 페이지가 제대로 리디렉션되지 않았거나 페이지 자체가 존재하지 않은 경우 발생할 수 있습니다. 게다가 사용자는 브라우저에 잘못된 URL을 입력했기 때문에 404 페이지에 도달할 수도 있습니다. 따라서 404페이지 방문을 완전히 막을 수 있는 방법은 없습니다.

404 페이지를 사용자 정의하는 이유는 무엇입니까?

방문자가 404 오류 페이지를 방문하는 것을 완전히 피할 수는 없으므로 이를 최대한 활용하고 그 나쁜 경험을 기회로 전환해야 합니다 .

대부분의 웹 사이트의 기본 404 페이지 는 좋지 않습니다. 일반적으로 문제에 대한 일부 기술 세부 정보와 함께 "찾을 수 없음" 오류를 표시하며 매우 유사하게 보이는 경향이 있습니다. 당신이 상상할 수 있듯이, 그것은 사용자에게 최선이 아닙니다. 사용자가 할 수 있는 유일한 것은 이전 페이지로 돌아가는 것입니다.

기본 404 페이지 WordPress의 404 페이지 사용자 정의

좋은 소식은 대부분의 사이트에 기본 404 페이지가 있으므로 편집을 통해 경쟁업체와 차별화할 수 있다는 것입니다. WordPress에서는 404 페이지를 쉽게 사용자 정의하고 사용자에게 추가 정보를 제공하고 일부 조치를 취하도록 권장할 수 있습니다.

사이트의 404 페이지를 변경하는 방법에는 다양한 가능성이 있습니다. 예를 들어 배경을 변경하고 일부 옵션을 추가 하여 페이지 디자인을 개선 할 수 있습니다. 마찬가지로 사용자에게 404 페이지를 방문하게 된 이유를 알리고 원하는 정보를 얻을 수 있는 몇 가지 팁을 추가할 수 있습니다. 또는 웹사이트의 다른 유용한 게시물이나 페이지에 대한 링크를 추가 할 수 있습니다.

이러한 사용자 정의는 방문자에게 항상 좋은 인상을 줄 수 있습니다.

더 이상 고민하지 않고 404 페이지를 편집하는 방법을 살펴보겠습니다.

WordPress에서 404 페이지를 사용자 정의하는 방법

WordPress에서 404 페이지를 쉽게 사용자 정의하는 두 가지 주요 방법이 있습니다.

  1. 프로그래밍 방식으로
  2. 플러그인으로

가장 적합한 방법을 선택할 수 있도록 각 방법을 살펴보겠습니다.

프로세스를 시작하기 전에 사이트의 전체 백업을 생성했는지 확인하십시오. 웹사이트의 민감한 정보를 수정하므로 문제가 발생할 경우를 대비하여 항상 백업해 두는 것이 좋습니다.

1) 프로그래밍 방식으로 WordPress 404 페이지 사용자 지정

이 방법은 약간의 코딩 기술이 있고 404 페이지를 변경할 수 있는 충분한 유연성을 제공하는 사람들에게 매우 유용합니다. 고급 사용자가 아니더라도 몇 가지 스니펫을 추가하여 404 페이지의 다양한 구성 요소를 쉽게 사용자 지정할 수 있습니다.

WordPress 대시보드에서 모양 > 테마 편집기 로 이동하고 화면 오른쪽에서 404.php 파일을 열기만 하면 됩니다. 여기에서 아래에서 볼 코드 조각을 추가해야 합니다.

테마 편집기 404 파일 WordPress에서 404 페이지 사용자 정의

이 파일의 코드는 사용하는 테마에 따라 다릅니다 . Divi 테마를 사용하고 있지만 다른 테마를 사용하면 코드가 다르게 보일 수 있습니다. Divi도 사용하고 싶다면 전체 리뷰를 살펴보세요.

다른 테마를 사용하는 경우 다음 스니펫 중 일부를 기본으로 사용하고 WordPress에서 404 페이지를 사용자 정의하도록 조정하십시오.

404 페이지의 텍스트 및 제목 사용자 정의

404.php 파일의 기본 코드를 편집하여 404 페이지의 텍스트와 제목을 쉽게 사용자 정의할 수 있습니다.

404 오류 페이지의 기본 코드는 다음과 같습니다.

 <?php get_header(); ?>

<div id="주 콘텐츠">
<div class="컨테이너">
<div id="콘텐츠 영역" class="clearfix">
<div id="왼쪽 영역">
<article id=”post-0″ <?php post_class( 'et_pb_post not_found' ); ?>>
<?php get_template_part( '포함/결과 없음', '404' ); ?>
</article> <!– .et_pb_post –>
</div> <!– #왼쪽 영역 –>

<?php get_sidebar(); ?>
</div> <!– #콘텐츠 영역 –>
</div> <!– .container –>
</div> <!– #주 콘텐츠 –>

<?php

get_footer();

전체 <article> 태그를 일련의 제목 태그로 바꾸고 다음과 같이 404 페이지에 표시할 텍스트와 제목을 추가하기만 하면 됩니다.

 <?php get_header(); ?>

<div id="주 콘텐츠">
<div class="컨테이너">
<div id="콘텐츠 영역" class="clearfix">
<div id="왼쪽 영역">
<h2> 페이지를 찾을 수 없음 – 404 오류 </h2>
서버 문제일 수 있습니다.
</div> <!– #왼쪽 영역 –>

<?php get_sidebar(); ?>
</div> <!– #콘텐츠 영역 –>
</div> <!– .container –>
</div> <!– #주 콘텐츠 –>

<?php

get_footer();

빠른 팁: 404 페이지를 미리 보려면 웹 브라우저의 새 탭에 웹사이트 URL을 입력하고 404 경로 를 추가하면 됩니다.

예를 들어 사이트 URL이 " www.sitename.com "인 경우 끝에 404를 추가하면(" www.sitename.com/404 ") 404 페이지를 미리 볼 수 있습니다.

사이트에 정확한 경로가 있는 페이지가 없는지 확인하세요. 이미 존재하는 경우 " www.sitename.com/404-preview-404" 와 같은 임의의 문자를 경로에 추가할 수 있습니다.

404 페이지에 가장 최근 게시물 표시

웹사이트의 404 페이지에 가장 최근 게시물을 표시하려면 404.php 파일에 다음 코드 스니펫을 추가하기만 하면 됩니다.

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

이 경우 최근 10개의 게시물이 표시되지만 표시하려는 최근 게시물의 수로 제한 속성을 변경할 수 있습니다.

404 페이지에 임의의 게시물 표시

마찬가지로 404 페이지에 임의의 게시물을 표시할 수도 있습니다. 이를 위해 이 코드 조각을 404.php 파일에 추가합니다.

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

코드 조각을 편집하여 표시하려는 임의의 게시물 수를 조정할 수도 있습니다.

코드로 파일을 편집하는 것이 불편하다면 플러그인으로 404 페이지를 변경할 수도 있습니다.

2) 플러그인으로 WordPress의 404 페이지 사용자 지정

이 방법은 코딩 기술이 없거나 스니펫이 있는 파일을 편집하지 않으려는 경우에 유용할 수 있습니다. 플러그인을 사용하는 것은 WordPress 웹사이트에서 404 페이지를 사용자 정의하는 가장 빠르고 쉬운 방법 중 하나일 수 있습니다. 플러그인을 설치하고 몇 가지 변경만 하면 됩니다.

404 페이지를 편집하는 데 사용할 수 있는 여러 플러그인이 있습니다. 가장 좋은 것은 다음과 같습니다.

2.1) Peter Raschendorfer의 404페이지

404page 는 404 페이지를 사용자 정의하는 가장 인기 있는 WordPress 플러그인 중 하나입니다. 기본 WordPress 페이지 편집기를 사용하여 사용자 정의 오류 페이지를 만들 수 있습니다.

플러그인은 사용이 매우 간편하여 단 몇 분 만에 404 페이지를 편집할 수 있습니다. 가장 인기 있는 WordPress 테마 및 플러그인과 잘 작동하므로 호환성 문제가 없습니다.

주요 특징들
  • 기본 WordPress 페이지 편집기를 사용하여 404 페이지 편집
  • 주요 WordPress 테마 및 플러그인과 호환
  • 매우 간단하고 사용하기 쉽습니다.
  • 잘 문서화되어 있으며 플러그인 설명서와 함께 제공됩니다.
가격

404page는 무료 플러그인입니다.

2.2) Colorlib 404 커스터마이저

Colorlib 404 Customizer 는 404 페이지를 사용자 정의할 수 있는 훌륭한 플러그인입니다. 라이브 미리보기에서 모든 변경 사항을 볼 수 있으므로 매우 편리한 테마 사용자 지정기로 404페이지를 편집할 수 있는 옵션을 제공합니다.

또한 여러 404페이지 템플릿과 함께 404페이지의 배경 이미지를 편집할 수 있습니다. 마찬가지로 필요한 경우 페이지에 사용자 정의 CSS를 추가하여 추가로 사용자 정의할 수도 있습니다.

주요 특징들
  • Theme Customizer를 사용하여 404 페이지를 편집할 수 있습니다.
  • 404 페이지의 텍스트와 배경을 편집하는 추가 옵션
  • 필요한 경우 404 페이지에 사용자 정의 CSS를 추가하는 옵션
  • 여러 404페이지 템플릿
가격

이 플러그인은 100% 무료이며 WordPress 저장소에서 다운로드할 수 있습니다.

Colorlib 404로 404 페이지 사용자 정의

이제 플러그인으로 404 페이지를 편집하는 방법을 살펴보겠습니다. 이 튜토리얼에서는 Colorlib 404 Customizer 를 사용합니다. 실시간 미리보기를 통해 변경 사항을 실시간으로 볼 수 있을 뿐만 아니라 웹 사이트에 대한 20가지 다양한 페이지 템플릿에 액세스할 수 있습니다. 그런 다음 사용자 정의 도구를 사용하여 일부를 변경하고 404 페이지를 업데이트하기만 하면 됩니다.

과정을 단계별로 살펴보겠습니다.

플러그인 설치 및 활성화

플러그인을 설치하려면 WordPress 대시보드에서 플러그인 > 새로 추가 로 이동하고 아래 스크린샷과 같이 검색 창에서 플러그인을 검색합니다. Colorlib 404 Customizer를 찾으면 지금 설치 를 클릭하여 플러그인을 설치한 다음 활성화하십시오.

플러그인을 수동으로 다운로드하여 설치할 수도 있습니다. 방법을 잘 모르겠다면 WordPress 플러그인을 수동으로 설치하는 방법에 대한 가이드를 확인하세요.

404 페이지 사용자 지정

플러그인이 활성화되면 모양 > 사용자 지정 으로 이동하여 테마 사용자 지정 프로그램을 엽니다. Colorlib 404 사용자 정의 설정 탭으로 이동하면 활성 템플릿, 일반 옵션 및 사용자 정의 CSS의 세 가지 옵션이 표시됩니다. 선택한 템플릿에 따라 더 많은 옵션이 표시될 수 있습니다.

그에 따라 사용자 정의 도구의 미리보기가 새 사용자 정의 404 페이지로 변경됩니다. 먼저 활성 템플릿의 변경 버튼을 클릭하여 404 페이지에 사용할 템플릿을 선택합니다 . 20가지 템플릿 중에서 선택할 수 있습니다.

활성 템플릿 변경 9 WordPress에서 404 페이지 사용자 정의

그런 다음 일반 옵션을 선택합니다. 여기에서 사용자 정의 404 페이지를 표시하려면 Colorlib 404 사용자 정의 프로그램을 활성화 해야 합니다. 그런 다음 페이지의 주요 콘텐츠에 대한 배경 이미지와 텍스트를 추가하거나 변경할 수 있습니다. 또한 페이지의 배경 반복, 크기 및 색상을 조정할 수 있습니다.

방문자를 404 페이지에서 다른 곳으로 리디렉션하려는 경우 텍스트와 링크를 추가할 수도 있습니다. 이는 사용자를 관련 페이지로 안내하고 사이트에 머물도록 하는 데 매우 유용합니다.

플러그인에는 사용자 정의할 수 있는 홈페이지로 청중을 안내하는 기본 버튼이 포함되어 있습니다.

일반 옵션은 WordPress에서 404 페이지를 사용자 정의합니다.

돌아가서 사용자 정의 CSS 옵션을 열면 사용자 정의 CSS를 사용하여 페이지를 편집할 수 있습니다. 이는 페이지 디자인을 변경하고 사이트의 모양과 느낌과 일치시키는 데 유용할 수 있습니다.

앞서 언급했듯이 커스터마이저의 실시간 미리보기를 통해 모든 변경 사항을 실시간으로 볼 수 있습니다. 404 페이지의 모든 변경 사항에 만족하면 게시 를 눌러 페이지를 업데이트합니다.

최종 미리보기 WordPress에서 404 페이지 사용자 정의

결론

요약하면, 사이트를 얼마나 잘 관리하더라도 방문자는 결국 404 페이지를 보게 될 것입니다. 대부분의 웹사이트 관리자는 기본 페이지를 떠나지만 사용자는 이를 편집하여 최대한 활용할 수 있습니다. 404 페이지를 변경하면 방문자 경험을 개선하고 사용자를 잃지 않고 경쟁업체와 차별화할 수 있습니다.

이 가이드에서는 404 페이지를 맞춤설정하는 다양한 방법을 살펴보았습니다.

  • 프로그래밍 방식으로
  • 전용 플러그인으로

코딩 기술이 있는 경우 코드 스니펫을 사용하여 404 페이지를 편집할 수 있습니다. 웹사이트의 텍스트를 변경하고, 유용한 링크와 버튼을 추가하고, 최근 게시물을 표시하는 등의 작업을 수행할 수 있습니다. 그러나 초보자이고 파일을 편집하고 싶지 않다면 플러그인을 사용하여 404 페이지를 변경할 수 있습니다. 몇 번의 클릭으로 페이지의 배경 이미지와 텍스트를 사용자 정의할 수 있습니다.

이제 이 튜토리얼의 도움으로 문제 없이 404 페이지를 사용자 정의할 수 있기를 바랍니다. 사이트를 최대한 활용하려면 다른 다양한 페이지를 편집하는 데 도움이 되는 다른 가이드를 살펴보는 것이 좋습니다.

  • WordPress 홈페이지를 편집하는 방법
  • 프로그래밍 방식으로 제품 페이지를 편집하는 방법 알아보기
  • WooCommerce 상점 페이지를 사용자 정의하는 방법
  • WooCommerce 카테고리 페이지 사용자 정의
  • WooCommerce에서 결제 페이지를 편집하는 방법
  • WooCommerce에서 내 계정 페이지를 사용자 정의하는 방법 배우기
  • WooCommerce 제품 페이지를 사용자 정의하는 방법

사이트에서 404 페이지를 사용자 정의했습니까? 어떤 방법을 사용하셨나요? 아래 의견에 알려주십시오!