WordPress Breadcrumbs: WordPress 사이트에서 활성화하는 방법

평범한 이름에도 불구하고 이동 경로는 사이트의 사용자 경험(UX) 및 검색 엔진 최적화(SEO)를 개선하는 데 매우 유용한 도구입니다. 플러그인이나 약간의 사용자 정의 코드를 사용하여 활성화하는 것은 간단합니다.

이 게시물에서는 WordPress 브레드크럼 을 소개하고 작동 방식을 설명합니다. 그런 다음 사이트에 추가하고 스타일을 지정하고 제거하는 방법을 보여드리겠습니다. 다룰 내용이 많으니 시작하겠습니다!

WordPress 이동 경로는 무엇입니까?

워드프레스(또는 모든 웹사이트)와 관련된 이동 경로는 게시물 또는 페이지 상단에 표시되는 탐색 링크입니다. 사용자에게 현재 보고 있는 콘텐츠로 안내하는 상위 수준 범주를 보여주고 이전에 본 페이지로 쉽게 돌아갈 수 있도록 합니다.

예를 들어 다음 예를 고려하십시오.

왼쪽 머리글 바로 아래에 Home > Resource Center > Kinsta Blog 라는 단어가 있습니다. 각각은 현재 게시물에서 해당 페이지로 돌아가는 링크입니다. 이를 통해 블로그 독자는 뒤로 버튼, 메뉴 또는 검색 기능을 사용할 필요 없이 한 번의 클릭으로 이러한 주요 콘텐츠 영역으로 이동할 수 있습니다.

이것이 바로 이동 경로가 이름을 갖게 된 방식입니다. 사용자를 '집'으로 이끄는 흔적을 만듭니다. 방문자가 유사한 콘텐츠를 찾을 수 있는 개별 게시물, 제품 페이지 및 카테고리 아카이브 사이를 이동할 수 있는 블로그 및 온라인 상점과 같은 사이트에 특히 유용합니다.

WordPress 이동 경로는 어떻게 작동합니까?

WordPress 이동 경로에는 세 가지 유형이 있습니다. 모두 위에서 설명한 대로 탐색 링크를 통합하지만 방식은 약간 다릅니다.

• 계층 기반: 이 이동 경로는 위의 예와 같이 사이트 구조에서 사용자가 어디에 있는지 보여줍니다.
• 속성 기반: 주로 전자 상거래 사이트에서 사용되는 이 이동 경로는 사용자가 현재 보고 있는 제품으로 연결되도록 검색한 속성을 표시합니다.
• 히스토리 기반: 사용자가 사이트 전체에서 페이지에서 페이지로 이동함에 따라 이 이동 경로는 그들이 왔던 길로 되돌아갈 것입니다.

다양한 이동 경로는 서로 다른 목적에 유용합니다. 그러나 모두 탐색을 개선하고 UX를 확장할 수 있습니다.

SEO 목적으로도 유용합니다. 이동 경로는 사이트에 있는 다양한 콘텐츠 간의 관계를 명확하게 보여줍니다. 이러한 방식으로 검색 엔진 크롤러 또는 '봇'이 사이트 구성 방식을 더 쉽게 이해할 수 있습니다.

이렇게 하면 해당 봇이 사이트 페이지를 보다 정확하게 색인화할 수 있습니다. 검색 엔진은 또한 결과 목록에 귀하의 이동 경로를 표시할 수 있으므로 사용자가 찾고 있는 정보와 관련된 귀하의 사이트에서 추가 콘텐츠를 볼 수 있습니다.

사이트에 WordPress Breadcrumbs를 추가하는 방법(4가지 방법)

코딩 전문가이든 WordPress 초보자이든 관계없이 몇 단계만 거치면 사이트에 탐색경로를 빠르고 쉽게 추가할 수 있습니다. 다음은 이 작업을 수행할 수 있는 네 가지 방법입니다.

1. Yoast SEO에서 이동 경로 활성화

Yoast SEO는 WordPress 사용자가 검색 엔진 순위를 추정하고 그에 따라 콘텐츠를 최적화하는 데 도움이 되는 인기 있는 플러그인입니다. 또한 이동 경로를 포함하여 사이트의 가시성을 높이기 위한 몇 가지 다른 기능도 포함되어 있습니다.

아직 설치하지 않았다면 WordPress 대시보드에서 플러그인을 설치하고 활성화하십시오.

다음으로 다음 코드 스니펫을 테마에 추가해야 합니다.

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

특히 추가하는 위치는 사용자에게 달려 있습니다. 블로그 게시물에서 이동 경로를 사용하려면 single.php 템플릿 파일에 추가할 수 있습니다.

또는 header.php 파일 끝에 붙여넣으면 전체 사이트에 이동 경로가 추가됩니다.

향후 테마 업데이트는 이 사용자 정의 코드를 무시할 수 있습니다. 이 문제를 피하거나 단순히 하위 테마를 사용하는 방법에 대한 정보는 테마 개발자에게 문의해야 합니다. 스니펫이 준비되면 대시보드에서 SEO > 검색 모양 > 이동 경로 로 이동합니다.

이동 경로 설정 스위치를 활성화로 전환합니다. 그런 다음 사이트를 미리 봅니다.

이제 코드 조각을 추가한 위치에 따라 사이트의 관련 부분에 이동 경로가 표시되어야 합니다.

2. WordPress Breadcrumbs 플러그인으로 Breadcrumbs 활성화

이미 SEO 목적으로 해당 플러그인을 사용 중인 경우 Yoast로 이동 경로를 추가하는 것이 특히 편리합니다. 그러나 콘텐츠 최적화를 위해 다른 플러그인을 선호하는 경우 위의 접근 방식이 덜 유용합니다. 다행히 WordPress에 이동 경로를 추가하도록 특별히 설계된 몇 가지 다른 플러그인이 있습니다.

탐색경로 NavXT

Yoast와 별도로 WordPress에 이동 경로를 추가하는 데 가장 널리 사용되는 플러그인은 Breadcrumb NavXT입니다.

이 플러그인은 사이드바 또는 바닥글과 같이 테마가 제공하는 모든 위젯 영역에 추가할 수 있는 이동 경로 위젯을 제공합니다. 고도로 사용자 정의가 가능하므로 트레일에 표시할 페이지와 카테고리를 선택할 수 있습니다. Breadcrumbs NavXT에는 SEO 개선을 ​​위한 스키마 마크업도 포함되어 있습니다.

이 플러그인을 사용하여 이동 경로를 추가하려면 모양 > 위젯 으로 이동합니다. 새로운 Breadcrumb NavXT 위젯이 표시되며, 이를 표시할 위젯 영역으로 드래그할 수 있습니다.

드롭다운 화살표를 클릭하여 위젯 설정을 연 다음 필요한 필드를 채우십시오.

탐색경로에 링크를 추가하고, 순서를 결정하고, 첫 페이지에서 숨기고, 캐싱을 무시하려면 필요에 따라 확인란을 선택하십시오. 완료되면 저장 버튼을 클릭한 다음 사이트의 프런트 엔드를 확인합니다.

이제 이동 경로는 선택한 위젯 영역에서 볼 수 있습니다.

유연한 빵 부스러기

대안으로 Flexy Breadcrumb는 WordPress에 이동 경로를 추가하기 위한 가장 높은 평가를 받는 플러그인입니다.

이 플러그인이 설치되고 활성화되면 [flexy_breadcrumb] 단축 코드를 사용하여 사이트에 이동 경로를 추가할 수 있습니다. 이렇게 하면 흔적이 나타날 위치에 대해 좀 더 유연하게 사용할 수 있습니다. 또한 글꼴 크기, 색상 및 아이콘과 같은 구성 요소의 스타일을 더 잘 제어할 수 있습니다.

Flexy Breadcrumbs를 설치하면 대시보드 사이드바에 새 항목이 표시됩니다.

그런 다음 구성할 몇 가지 설정이 있습니다. 일반 탭에서 홈 페이지의 텍스트와 아이콘을 변경하고 글자 수 제한을 설정하고 계층 구조를 결정할 수 있습니다.

타이포그래피 탭에서 이동 경로의 글꼴 색상과 크기도 조정할 수 있습니다.

추적을 사용자 정의한 후에는 이동 경로를 표시할 위치에 [flexy_breadcrumb] 단축 코드를 추가해야 합니다. 사이트에 게시하는 개별 게시물마다 이 작업을 수행할 수 있지만 WordPress 위젯에 단축 코드를 추가하는 것이 더 효율적입니다.

사이트의 프런트 엔드를 확인하면 단축 코드를 추가한 위치에 이동 경로가 표시되는 것을 볼 수 있습니다.

WooCommerce 이동 경로

온라인 소매업체의 경우 WooCommerce Breadcrumbs를 사용하면 제품 페이지에 탐색 링크를 쉽게 추가할 수 있습니다.

인기 있는 WooCommerce 플러그인으로 온라인 상점을 운영하고 있다면 이것이 최선의 선택일 수 있습니다. 사이트에서 고객 탐색을 개선하기 위해 제품 페이지에 대한 이동 경로를 활성화할 수 있습니다.

설치 및 활성화 후 설정 > WC 이동 경로로 이동하여 이동 경로 를 사용자 정의할 수 있습니다.

고려해야 할 가장 중요한 설정은 이동 경로 활성화 확인란입니다. 이동 경로를 표시하려면 선택되어 있는지 확인해야 합니다. 그런 다음 제품 페이지 중 하나를 확인하십시오.

이동 경로는 페이지 상단에 표시되어야 합니다.

빵 부스러기

마지막으로 Breadcrumb는 단축 코드를 사용하여 사이트의 어느 곳에나 이동 경로를 추가할 수 있는 경량 플러그인입니다.

이 플러그인에는 이 게시물에 나열된 것 중 가장 광범위한 설정이 있습니다. WordPress 대시보드 사이드바에서 Breadcrumb 을 클릭하여 액세스할 수 있습니다.

첫 번째 탭에는 옵션 레이블이 지정되어 있으며 사용자 정의 텍스트, 구분 기호 및 문자 제한과 같은 몇 가지 일반 설정이 포함되어 있습니다.

스타일 지정 옵션 전용 전체 탭도 있습니다. 글꼴 크기 및 색상뿐만 아니라 선택할 수 있는 여러 화살표 버튼이 있습니다.

코딩 기술이 있고 스타일을 더 세밀하게 제어하려는 경우 사용자 정의 CSS 탭을 사용할 수도 있습니다.

마지막으로 사이트에 탐색경로를 추가하려면 Shortcode 탭을 방문하는 것이 중요합니다.

우리가 다룬 다른 플러그인과 마찬가지로 사이트 어디에서나 단축 코드를 사용할 수 있습니다. 그러나 Breadcrumb은 템플릿 파일 중 하나에 추가하여 머리글, 바닥글 또는 다른 곳에 흔적을 통합할 수 있는 코드 스니펫도 제공합니다.

3. 이동 경로가 포함된 테마 사용

일반적으로 사이트가 어떻게 보이는지 제어하는 ​​맥락에서 생각되지만 WordPress 테마는 웹사이트의 기능에도 영향을 줄 수 있습니다. 그들이 할 수 있는 한 가지 방법은 페이지에 이동 경로를 추가하는 것입니다.

WordPress 테마를 사용하여 기존 WordPress 사이트에 이동 경로를 추가할 때의 단점은 웹사이트의 모양도 변경해야 한다는 것입니다. 브랜드와 사이트 아이덴티티가 확립되어 있다면 이것은 실제로 실용적인 솔루션이 아니며 플러그인을 사용하는 것이 더 나을 것입니다.

그러나 새로운 WordPress 사이트를 시작하거나 웹사이트 재설계를 실행하는 경우 탐색경로를 통합하는 테마를 선택하는 것은 사이트에 추가하기 위한 노력이 적은 방법입니다. 또한 WordPress 테마 디렉토리에는 무료로 사용할 수 있는 몇 가지 옵션이 있습니다.

오션WP

OceanWP는 가장 인기 있는 다목적 WordPress 테마 중 하나입니다.

여기에는 페이지에 이동 경로를 쉽게 적용하는 데 사용할 수 있는 단축 코드가 포함되어 있습니다. 또한 이동 경로를 통합하는 OceanWP와 함께 사용할 수 있는 몇 가지 데모가 있습니다. 단축 코드를 사용하려면 게시물, 페이지 또는 텍스트 위젯에 [oceanwp_breadcrumb]를 추가하기만 하면 됩니다.

다음 매개변수를 사용하여 이동 경로를 사용자 정의할 수 있습니다.

• 클래스: 사용자 정의 CSS 클래스를 통합합니다.
• 색상: 텍스트의 색상을 변경합니다.
• 호버 색상: 사용자가 탐색경로 위로 마우스를 가져갈 때 텍스트 색상을 변경합니다.

다음 매개변수 중 일부 또는 전부를 단축 코드 대괄호에 추가하기만 하면 됩니다.

이제 관련 페이지에서 이동 경로를 볼 수 있습니다.

아스트라

마찬가지로 Astra를 사용하면 사이트에 이동 경로를 쉽게 추가할 수 있습니다.

Astra에서 이동 경로를 활성화하는 가장 간단한 방법은 사용자 지정 프로그램을 사용하는 것입니다. 테마가 설치되고 활성화된 상태에서 모양 > 사용자 정의 로 이동합니다.

그런 다음 이동 경로 탭을 선택합니다.

여기에서 페이지에서 탐색경로를 표시할 위치를 선택할 수 있는 드롭다운이 표시됩니다.

선택하면 몇 가지 스타일 옵션도 나타납니다.

변경 사항을 저장하려면 커스터마이저 게시 버튼을 클릭해야 합니다.

4. 수동으로 이동 경로 추가

플러그인과 테마는 WordPress를 사용자 친화적이고 접근 가능한 플랫폼으로 만드는 요소입니다. 그러나 일부 고급 사용자와 개발자의 경우 한계를 느낄 수 있습니다. 코드는 매우 창의적인 매체가 될 수 있으며 자신만의 이동 경로를 자유롭게 작성할 수 있다는 점이 매력적일 수 있습니다.

이동 경로를 수동으로 표시하려면 두 가지 작업을 수행해야 합니다. 먼저 기능을 활성화하려면 functions.php 파일에 기능을 추가해야 합니다. 다음은 사용할 수 있는 코드의 예입니다.

 function get_breadcrumb() { echo '<a href="”'.home_url().'”" rel="”nofollow”">Home</a>'; if (is_category() || is_single()){ echo “ » ”; the_category (' • '); if (is_single()) { echo “ » ”; the_title(); } } elseif (is_page()) { echo “ » ”; echo the_title(); } elseif (is_search()) { echo “ » ”;Search Results for… echo '“<em>'; echo the_search_query(); echo '</em>”'; } }

함수가 추가되면 이동 경로를 표시할 템플릿 파일에서 함수를 호출해야 합니다. single.php 에서 함수를 호출하면 게시물에 브레드크럼이 표시되고 header.php 에서 호출하면 헤더가 표시되는 모든 위치에 표시됩니다.

사용할 코드는 다음과 같아야 합니다.

 <div class="breadcrumb"><?php get_breadcrumb(); ?></div>

이러한 파일을 수정하면 사이트에 이동 경로가 표시되지만 디자인과 일치하도록 스타일을 지정할 수는 없습니다. 그렇게 하려면 일부 CSS로 손을 더럽힐 필요도 있습니다.

WordPress Breadcrumb 스타일을 지정하는 방법

직접 코딩하는 경우 이동 경로의 스타일을 지정해야 합니다. 그러나 플러그인이나 테마를 사용하여 추가하는 경우에도 도움이 될 수 있습니다. 이러한 도구가 제공하는 기본 스타일은 사이트에 적합하지 않을 수 있습니다. 이 경우 일관성을 유지하기 위해 조정해야 할 수 있습니다.

사용자 정의 CSS를 추가하여 테마의 스타일시트(style.css) 또는 사용자 정의 프로그램의 추가 CSS 영역에서 탐색경로의 스타일을 지정할 수 있습니다.

글꼴, 크기 및 색상을 조정하는 것과 같이 사이트 디자인에 맞게 탐색경로를 조정할 수 있는 여러 가지 방법이 있습니다. 여백, 패딩, 테두리 및 아이콘과 같은 요소를 고려할 수도 있습니다.

다음은 이동 경로의 스타일을 지정하는 데 사용할 수 있는 CSS의 예입니다.

 .breadcrumb { padding: 8px 15px; margin-bottom: 20px; list-style: none; background-color: #f5f5f5; border-radius: 4px; } .breadcrumb a { color: #428bca; text-decoration: none; }

CSS에 관해서는 많은 가능성이 있습니다. 따라서 이동 경로가 원하는 대로 정확하게 보이도록 하려면 약간의 실험이 필요할 수 있습니다.

사이트에서 WordPress Breadcrumbs를 제거하는 방법

사이트에 이동 경로를 추가하면 많은 이점이 있지만 이것이 모든 사람을 위한 것은 아닙니다. 어떤 사람들은 그것들이 혼란스럽다고 느끼거나 사이트의 페이지가 너무 복잡하다고 느낄 수 있습니다.

WordPress 사이트에서 이동 경로를 제거하려면 원래 추가한 방법에 따라 적절한 방법을 사용하면 됩니다. 예를 들어 이동 경로를 사용자 지정 코딩한 경우 테마 파일에서 추가한 코드를 간단히 제거할 수 있습니다.

플러그인과 함께 추가된 이동 경로를 비활성화하는 것은 일반적으로 플러그인 비활성화만큼 간단합니다. Yoast SEO의 경우 검색 표시 설정의 Breadcrumbs 탭으로 이동하여 관련 스위치를 Disable 로 전환할 수 있습니다.

설정 또는 WordPress 단축 코드를 통해 이동 경로를 활성화하는 테마의 경우에도 마찬가지입니다. 그러나 기본적으로 이동 경로를 추가하는 일부 테마가 있습니다. 특히 코드에 대한 경험이 많지 않은 경우 이러한 요소를 제거하는 것이 약간 까다로울 수 있습니다.

이러한 상황이라면 사이트의 header.php 파일로 이동해야 합니다. 거기에서 "breadcrumb"에 대한 검색 명령을 실행하십시오. 그러면 사이트에 이동 경로를 추가하는 함수를 호출하는 코드가 강조 표시되어야 합니다(여기에 있는 경우).

사이트에서 이동 경로를 제거하려면 이 코드 줄을 삭제하세요. 올바른 코드를 찾지 못한 경우 single.php 및 page.php 파일에서 이 프로세스를 다시 시도하여 해당 템플릿 중 하나에서 함수가 대신 호출되는지 확인할 수 있습니다.

다른 모든 것이 실패하면 테마 개발자에게 지원을 문의하세요. WordPress 테마를 업데이트하면 파일에 대한 변경 사항이 무시될 수 있습니다. 따라서 사용자 정의를 무기한 보존하기 위해 모범 사례에서 이러한 이유로 하위 테마를 사용하는 것이 좋습니다.

요약

강력한 UX와 SEO는 모두 성공적인 웹사이트의 핵심입니다. WordPress 이동 경로를 활성화하면 방문자가 사이트 전체를 더 쉽게 탐색할 수 있으며 검색 엔진이 구조를 이해하고 페이지를 정확하게 색인화할 수 있습니다.

이 게시물에서는 WordPress 사이트에 이동 경로를 추가하는 네 가지 방법을 다뤘습니다.

1. Yoast SEO에서 이동 경로를 켭니다.
2. WordPress 이동 경로 플러그인을 설치하고 구성합니다.
3. 이동 경로가 포함된 테마를 사용합니다.
4. 코드를 사용하여 수동으로 이동 경로를 추가합니다.

WordPress 이동 경로 또는 사용 방법에 대해 질문이 있습니까? 아래 의견 섹션에서 알려주십시오!