WordPress 웹 사이트에 빵 부스러기를 추가하는 방법

"breadcrumbs"라는 용어는 Hansel과 Gretel이 가르친 것처럼 웹 사이트의 "홈"(또는 홈페이지)으로 돌아가는 단계를 추적하는 데 도움이 되는 효율적인 웹 사이트 탐색 도구를 나타냅니다. 이를 통해 사용자는 홈페이지로 이어지는 링크(또는 레이블)의 인라인 트랙을 제공하여 현재 페이지가 전체 사이트 구조에 어떻게 맞는지 확인할 수 있습니다.

빵 부스러기가 있는 Home Depot 제품 페이지

이동 경로는 실제로 생각보다 WordPress 웹 사이트에서 더 중요합니다. 그들은 사용자 경험을 향상시킬 뿐만 아니라 귀하의 사이트에 검색 순위를 올릴 수도 있습니다. Google은 웹사이트에서 이러한 구조적 요소를 좋아하며 방문자는 귀하의 페이지 중 하나를 유기적으로 발견할 때(이탈률 낮추기) 중요한 탐색 도움을 받을 것입니다.

웹사이트에 이러한 통합된 네이티브 시스템을 추가하는 것이 어려울 것이라고 생각할 수 있지만 실제로 플러그인을 사용하면 매우 간단합니다. 사실, Yoast SEO 플러그인을 사용하는 경우 이동 경로 기능이 이미 Yoast에 내장되어 있기 때문에 앞서 나갈 수 있습니다! 그리고 Yoast를 통해 이동 경로를 추가하는 것은 확실히 선호되는 방법 중 하나입니다. Yoast SEO 외에도 플러그인 Breadcrumb NavXT는 사용자 정의가 가능하고 자체 Divi 테마와도 잘 작동하는 또 다른 훌륭한 옵션입니다.

YouTube 채널 구독

Yoast를 사용하여 WordPress 웹 사이트에 빵 부스러기를 추가하는 방법

Yoast SEO를 사용하여 WordPress 웹사이트에 이동 경로를 추가하려면 다음 세 가지 간단한 단계를 수행해야 합니다.

• Yoast SEO 플러그인 설치 및 활성화
• WordPress 테마에 Breadcrumbs 코드 스니펫 추가
• 플러그인 설정에서 Yoast Breadcrumbs를 활성화/구성합니다.

Yoast SEO 플러그인 설치 및 활성화

Yoast SEO 플러그인을 설치하려면 WordPress 대시보드로 이동하여 플러그인 > 새로 추가로 이동합니다. 그런 다음 WordPress 저장소에서 "yoast"를 검색합니다. Yoast SEO 플러그인이 보이면 클릭하여 플러그인을 설치하고 활성화합니다.

WordPress 하위 테마에 Breadcrumbs 코드 조각 추가

다음으로 WordPress 테마 파일에 짧은 코드 스니펫을 추가해야 합니다. 따라서 아직 만들지 않았다면 자식 테마를 만드는 것이 좋습니다. 이 예에서는 기본 TwentyNineteen WordPress 테마에 이동 경로 코드 조각을 추가하는 방법을 보여 드리겠습니다. 모든 테마 파일/템플릿에 코드를 추가할 수 있지만 대부분의 경우 single.php 파일(모든 게시물에 표시), page.php 파일(모든 페이지에 표시)에 코드를 추가하고 싶을 것입니다. ) 또는 header.php 파일(사이트 전체에 표시).

이 예에서는 내 자식 테마의 header.php 파일에 이동 경로 코드를 추가하겠습니다. 상위 테마에서 header.php 파일을 복사한 후 선택한 코드 편집기에서 파일을 열어서 편집하십시오.

그런 다음 header.php 파일 맨 아래에 Yoast에서 제공하는 다음 PHP 스니펫을 추가하여 Breadcrumbs 기능을 활성화합니다.

<?php
if ( function_exists('yoast_breadcrumb') ) {
  yoast_breadcrumb( '<p id="breadcrumbs">','</p>' );
}
?>

그러면 모든 페이지의 머리글 바로 아래에 이동 경로가 표시되며 이동 경로의 공통 위치입니다.

플러그인 설정에서 Yoast Breadcrumbs 활성화 및 구성

코드 조각이 WordPress Child 테마에 추가되면 Yoast SEO 플러그인 설정에서 Breadcrumbs를 활성화하기만 하면 됩니다. 이렇게 하려면 WordPress 대시보드로 이동하여 SEO > 검색 모양으로 이동한 다음 Breadcrumbs 탭을 클릭합니다. 이동 경로 설정에서 옵션을 "활성화"로 전환하여 이동 경로를 활성화해야 합니다. 그런 다음 필요에 따라 이동 경로 설정을 구성할 수 있습니다. 게시물의 이동 경로에 표시할 분류를 선택할 수도 있습니다. 이 예에서는 탐색경로에 카테고리를 표시하도록 내 게시물을 설정하겠습니다.

이제 TwentyNineteen 테마에서 만든 게시물 중 하나에서 이동 경로가 어떻게 보이는지 확인하겠습니다.

다음은 이동 경로를 활성화하기 전의 게시물 모습입니다.

다음은 이동 경로를 활성화한 후 게시물의 모습입니다. 이 특정 게시물 예제에는 이동 경로 설정에서 선택한 이동 경로의 범주 분류를 보여주는 범주("WordPress")와 상위 범주("웹 디자인")가 있습니다.

외부 CSS를 사용하여 이동 경로의 스타일을 조정해야 할 수도 있습니다. 그렇게 하려면 PHP 코드에 포함된 CSS ID "breadcrumbs"를 사용할 수 있습니다. 하위 테마의 style.css 파일을 열고(또는 추가 CSS 아래의 테마 사용자 지정 프로그램에 추가할 수 있음) 다음을 추가합니다.

#breadcrumbs {

/*Add breadcrumb styling here*/

}

TwentyNineteen 테마의 경우 다음 사용자 정의 CSS를 추가하여 헤더 텍스트의 여백을 일치시키고 싶을 수 있습니다.

#breadcrumbs {

margin: 0 calc(10% + 60px);

}

이동 경로의 특정 위치를 더 잘 제어하려면 개별 게시물이나 페이지에 다음 단축 코드를 사용할 수도 있습니다.

[wpseo_breadcrumb]

Breadcrumb NavXT를 사용하여 WordPress 웹 사이트에 Breadcrumb 추가

어떤 이유로 Yoast SEO를 설치하고 싶지 않거나 다른 간단한 옵션을 찾고 있다면 Breadcrumb NavXT 플러그인이 탁월한 선택입니다.

플러그인을 설치하려면 WordPress 대시보드로 이동하여 플러그인 > 새로 추가로 이동합니다. 그런 다음 WordPress 저장소에서 "breadcrumb navxt"를 검색합니다. 플러그인이 표시되면 클릭하여 설치하고 활성화합니다.

웹 사이트에 표시되도록 이동 경로를 호출하려면 위젯 페이지에서 제공되는 내장 이동 경로 NavXT 위젯을 사용할 수 있습니다. 이렇게 하면 위젯을 테마에서 제공하는 다양한 위젯 영역으로 드래그할 수 있습니다. 이렇게 하려면 WordPress 대시보드로 이동하여 모양 > 위젯으로 이동합니다. 그런 다음 위젯을 위젯 영역이나 선택한 항목으로 드래그하고 위젯 설정을 업데이트합니다.

이 예에서는 Divi 테마를 사용하여 사이드바 상단에 이동 경로를 표시합니다. 다음은 게시물에 표시되는 내용입니다.

Yoast Breadcrumb 예제와 유사하게 자식 테마에 필요한 코드를 추가하여 사이트에 대한 이동 경로를 호출할 수도 있습니다. 다음은 schema.org 브레드크럼리스트를 준수하는 코드입니다.

<div class="breadcrumbs" typeof="BreadcrumbList" vocab="https://schema.org/">
    <?php
    if(function_exists('bcn_display'))
    {
            bcn_display();
    }?>
</div>

이 예제에서는 Divi 테마를 사용하고 있으므로 Divi Child 테마의 Single.php 파일에 기사 태그 바로 위에 코드를 추가하겠습니다. 그러면 내 모든 게시물의 상단에 이동 경로가 표시됩니다.

다음은 코드를 추가한 후의 게시물 모습입니다.

플러그인 설정을 사용하여 이동 경로 구성

Breadcrumb NavXT 플러그인에는 이동 경로를 구성하기 위한 몇 가지 강력한 옵션이 있습니다. 다양한 분류 등을 위해 탐색경로의 전체 템플릿을 사용자 정의할 수 있습니다. 설정 > Breadcrumb NavXT로 이동하여 WordPress 대시보드에서 이러한 설정에 액세스할 수 있습니다.

빵 부스러기 스타일링

이동 경로의 스타일을 지정하려면 코드에 포함된 "breadcrumbs"라는 클래스를 대상으로 지정할 수 있습니다.

다음 CSS를 자식 테마의 style.css 파일이나 테마 커스터마이저 추가 CSS에 추가하기만 하면 됩니다.

.breadcrumbs {

/*add css to style breadcrumbs here*/

}

Divi 테마와 함께 이동 경로 위젯을 사용하려는 경우 Divi의 사이드바 모듈을 사용하여 Divi Builder 내의 이동 경로에 스타일을 추가할 수도 있습니다.

마지막 생각들

이동 경로는 유용성과 SEO 모두에서 웹사이트의 중요한 부분입니다. 따라서 WordPress 사이트에 이동 경로를 추가하는 것을 고려하고 있다면 이 기사에서 언급한 플러그인(Yoast SEO 및 Breadcrumb NavXT)에서 제공하는 방법으로 시작하는 것이 좋습니다. 이미 처분할 수 있는 SEO 플러그인을 이미 활용하고 있다면 Yoast 브레드크럼을 사용하는 것이 가장 합리적입니다. 그러나 Breadcrumb NavXT는 사용자 정의가 가능한 옵션이기도 합니다. 물론 테마 파일에 액세스해야 할 수도 있지만 대체로 프로세스는 간단합니다. 무엇이든 이것이 자신의 WordPress 사이트에서 이동 경로를 얻는 고통을 완화하는 데 도움이 되기를 바랍니다.

댓글로 여러분의 의견을 기다리겠습니다.

건배!