WordPress에서 이동 경로를 편집하는 방법

게시 됨: 2021-08-10

이동 경로를 사용자 정의하는 가장 쉬운 방법을 찾고 있습니까? 당신은 바로 이곳에 왔습니다. 이 가이드에서는 WordPress에서 이동 경로를 쉽게 편집하는 방법을 알아봅니다. 홈 텍스트를 바꾸거나 구분 기호를 변경하려는 경우 저희가 해결해 드립니다!

빵 부스러기는 무엇이며 왜 필요한가요?

이동 경로는 일반적으로 페이지/게시물 상단에 표시되는 탐색 링크로, 사용자가 웹사이트 전체에서 링크의 흔적을 탐색하는 데 도움이 됩니다. 이렇게 하면 현재 보고 있는 사이트의 부분을 파악하고 몇 번의 클릭만으로 페이지의 분기 또는 홈 페이지로 돌아갈 수 있습니다. WooCommerce 상점이나 대규모 블로그를 운영하는 경우 탐색 요구 사항에 따라 이동 경로를 설정하는 것이 중요합니다.

좋은 소식은 이러한 이동 경로를 웹 사이트의 요구 사항에 따라 다양한 방식 으로 쉽게 통합할 수 있다는 것입니다. 일반적으로 대부분의 사용자는 계층 구조를 기반으로 이동 경로를 설정하므로 이동 경로는 웹 사이트 구조에 따라 범주와 하위 범주를 표시합니다. 여기에는 사용자가 어떤 카테고리의 제품 또는 페이지를 거치는지 또는 어떤 하위 콘텐츠를 보고 있는지 표시하여 원할 때마다 한 번의 클릭으로 상위 계층으로 돌아갈 수 있도록 하는 것이 포함됩니다.

또는 속성을 기반으로 이동 경로를 설정하여 뷰어가 검색하는 속성에 따라 이동 경로를 표시할 수 있습니다. 또한 방문 기록 경로를 사용하고 사용자가 사이트에서 방문한 과거 페이지를 기반으로 이동 경로를 표시할 수 있습니다.

물론, 이동 경로를 사용자 지정하는 것이 전부는 아닙니다. 다음과 같은 다양한 페이지에 사용자 지정 이동 경로를 추가할 수 있습니다.

  • 제목 아카이브
  • 태그 아카이브
  • 웹사이트 아래의 페이지/게시물
  • 홈 페이지에서 페이지 탐색
  • 검색 결과
  • 404 오류 페이지
  • 그리고 더

보시다시피, 웹사이트의 구조와 고객이 사이트를 탐색하는 방식에 적합한 방식으로 표시되도록 하기 위해 이동 경로에 대한 광범위한 사용자 정의 가 있습니다.

전용 이동 경로 플러그인 을 사용하는 경우 원하는 만큼 이동 경로를 사용자 정의할 수 있는 자체 옵션이 제공될 가능성이 있습니다. 그러나 Yoast SEO 또는 WooCommerce 의 이동 경로 옵션을 사용하는 경우 추가로 사용자 정의하기 위해 약간의 코딩을 사용해야 할 수도 있습니다.

다음 섹션에서는 WordPress에서 이동 경로를 편집 하고 다양한 탐색 요소를 활성화하는 방법을 보여줍니다.

WordPress에서 BreadCrumbs를 편집하는 방법

먼저 Yoast SEO, 전용 WordPress 플러그인 또는 WooCommerce 이동 경로 를 사용하는지 여부에 따라 이동 경로를 사용자 정의하는 프로세스가 다를 수 있음을 명확히 해야 합니다.

시작하기 전에 이 가이드를 보고 처음부터 이동 경로를 올바르게 설정했는지 확인하는 것이 좋습니다.

이 섹션에서는 WordPress에서 이동 경로를 편집하는 다양한 방법을 배웁니다.

  1. Yoast SEO를 사용하여 이동 경로 사용자 지정
  2. 프로그래밍 방식으로 WooCommerce 이동 경로 편집

각각의 방법을 살펴보자.

1) Yoast SEO를 사용하여 WooCommerce에서 BreadCrumbs를 편집하는 방법

Yoast SEO에서 이동 경로를 활성화하면 전용 설정을 사용하여 구성할 수 있습니다. 이를 위해 WordPress 관리 대시보드에서 Yoast SEO > 검색 모양 으로 이동하고 Breadcrumbs 탭으로 이동합니다.

WordPress에서 이동 경로 편집 - Yoast SEO 설정

여기에서 이동 경로를 편집할 수 있습니다. 주요 단계부터 시작하겠습니다.

구분 기호 변경

이동 경로 구분자 옵션을 사용하여 이동 경로 구분자를 변경할 수 있습니다.

사용하려는 구분 기호를 입력하기만 하면 됩니다. 가장 일반적인 것은 " | " 또는 "/".

홈페이지 텍스트 편집

홈 페이지의 앵커 텍스트 옵션을 사용하여 홈 페이지 텍스트를 바꿀 수 있습니다.

해당 필드를 사용하여 새 홈페이지 텍스트를 입력하기만 하면 다음과 같이 표시됩니다.

edit-breadcrumbs-in-wordpress-demo-yoast-seo-2

아카이브, 검색 페이지 및 404 페이지의 접두사 변경

Yoast SEO를 사용하면 아카이브, 검색 페이지 결과 및 오류 404 페이지에 대한 접두사 를 개별적으로 변경하여 이동 경로를 편집할 수도 있습니다.

해당 필드에 필요한 텍스트를 추가하고 변경 사항을 저장하기만 하면 됩니다.

여기에서 콘텐츠 유형 및 분류에 대한 분류에 대한 추가 옵션과 추가 Yoast SEO 옵션에 대해 자세히 알아볼 수 있습니다.

Yoast SEO에서 WooCommerce Shop에 Shop 페이지 Breadcrumb 추가하기

또 다른 흥미로운 대안은 functions.php 파일을 편집하고 이동 경로에 Shop 링크를 추가하는 것입니다. 이 링크는 고객이 WooCommerce Shop 페이지를 탐색할 때 표시되므로 온라인 상점이 있는 경우 시도해 볼 것을 적극 권장합니다.

functions.php 파일을 열려면 사이드바에서 모양 > 테마 편집기 로 이동하고 테마 파일을 보여주는 오른쪽 사이드바에서 functions.php 를 누르십시오.

wordpress에서 이동 경로 편집 - 함수 파일

그런 다음 이 스크립트를 복사하여 붙여넣기만 하면 됩니다.

 add_filter( 'wpseo_breadcrumb_links', 'wpseo_breadcrumb_add_woo_shop_link' );

기능 wpseo_breadcrumb_add_woo_shop_link( $links ) {
글로벌 $post;

if ( is_woocommerce() ) {
$breadcrumb[] = 배열(
'url' => get_permalink( woocommerce_get_page_id( 'shop' ) ),
'텍스트' => '쇼핑',
);

array_splice( $links, 1, -2, $breadcrumb );
}

$link를 반환합니다.
}

그런 다음 업데이트 를 누르면 끝입니다. 보시다시피, 제품에 대한 링크를 이동 경로에 추가했습니다.

또한 필터 및 기능을 사용할 수 있는 경우 wpseo_breadcrumb_single_link 필터를 사용하여 이동 경로 경로를 훨씬 더 사용자 지정할 수 있습니다. 여기에서 자세히 알아볼 수 있습니다.

2) 프로그래밍 방식으로 WooCommerce 이동 경로를 편집하는 방법

WooCommerce 스토어를 운영하는 경우 WooCommerce 사이트 용으로 특별히 설계된 이동 경로를 활성화하고 편집할 수도 있습니다. 이 이동 경로는 WooCommerce 페이지에서만 활성화되므로 모든 전자 상거래 상점에 완벽한 옵션입니다.

기본부터 시작하여 WooCommerce에서 이동 경로를 활성화해 보겠습니다. 이를 위해 기본 WooCommerce 이동 경로 코드 스니펫을 사용합니다.

테마 파일 에 다음 PHP 코드 를 붙여넣기만 하면 됩니다(개인적으로 헤더 파일에 추가하는 것이 좋습니다) . 대시보드에서 모양 > 테마 편집기 를 선택 하고 오른쪽 사이드바 에서 Header.php 를 선택하여 테마 편집기에서 파일을 엽니다.

그런 다음 다음 스니펫을 붙여넣기만 하면 됩니다.

 <?php if (class_exists('우커머스') && is_woocommerce()) : ?>

<?php woocommerce_breadcrumb(); ?>

<?php endif; ?>

그러면 상점 페이지에서 WooCommerce 탐색경로가 활성화됩니다. 그러나 몇 가지 멋진 기능으로 요소를 훨씬 더 사용자 정의하도록 선택할 수도 있습니다.

Appearance > Theme Editor > functions.php 에서 찾을 수 있는 functions.php 파일에 이러한 코드 조각을 추가하는 것을 잊지 마십시오.

WooCommerce BreadCrumbs 홈 텍스트 편집

기본 예제부터 시작하여 WooCommerce 이동 경로의 홈 텍스트 를 변경하는 방법을 살펴보겠습니다. $defaults['Home'] = 'Home Page Text' 행의 텍스트를 'Home Page Text'에서 필요한 텍스트로 변경하기만 하면 됩니다.

 add_filter( 'woocommerce_breadcrumb_defaults', 'wcc_change_breadcrumb_home_text' );
함수 wcc_change_breadcrumb_home_text( $defaults ) {
// 이동 ​​경로 홈 텍스트를 'Home'에서 'Apartment'로 변경합니다.
$defaults['home'] = '홈 페이지 텍스트';
$defaults 반환;
}

WooCommerce BreadCrumbs 홈 텍스트 링크 편집

마찬가지로 유사한 스니펫을 사용하여 WooCommerce 탐색경로에서 홈 페이지 링크 를 변경할 수 있습니다. 반환 텍스트 이후에 URL 링크를 변경하는 것을 잊지 마십시오. 예를 들어, 코드 스니펫의 경우 http://quadlayers.com/blog 를 두 따옴표 사이에 필요한 새 링크로 바꿔야 합니다.

 add_filter( 'woocommerce_breadcrumb_home_url', 'woo_custom_breadrumb_home_url' );
함수 woo_custom_breadrumb_home_url() {
반환 'http://quadlayers.com/blog';
}

wordpress에서 이동 경로 편집 - woocommerce 홈 페이지 링크

WooCommerce Breadcrumbs 구분 기호, 텍스트 앞뒤 등 편집

또한 기본 배열 기능을 사용하여 구분 기호, 텍스트 앞뒤 등 WooCommerce 이동 경로의 여러 요소 를 변경할 수 있습니다.

스니펫에서 배열의 ' ' 섹션 사이에 있는 텍스트를 다음 스니펫의 필수 텍스트로 바꾸기만 하면 됩니다.

 add_filter( 'woocommerce_breadcrumb_defaults', 'jk_woocommerce_breadcrumbs' );
함수 jk_woocommerce_breadcrumbs() {
반환 배열(
'구분자' => ' > ',
'wrap_before' => '<nav class="woocommerce-breadcrumb" itemprop="breadcrumb">',
'wrap_after' => '</nav>',
'이전' => ' ',
'뒤' => '텍스트 뒤',
'home' => _x( '홈 텍스트 ', 'breadcrumb', 'woocommerce' ),
);
}

wordpress에서 이동 경로 편집 - woocommerce 이동 경로 배열

결과적으로 구분 기호와 텍스트 앞뒤가 변경됩니다.

여기에서 문서에서 WooCommerce의 이동 경로를 사용자 정의하기 위한 추가 코드 스니펫을 확인할 수 있습니다.

보너스: 나만의 이동 경로 추가 및 스타일 지정

WooCommerce 또는 Yoast SEO에 의존하고 싶지 않다면 어떻게 하시겠습니까? WordPress에서 이동 경로를 편집하는 다른 방법이 있습니까? 네, 있습니다! 이동 경로에 대한 사용자 지정 함수를 만들 수 있습니다. 이를 통해 사용자 지정 CSS를 사용하여 스타일을 지정할 수 있는 사용자 지정 이동 경로를 만들 수 있습니다.

이것은 CSS와 PHP에 대해 자신만의 방식을 알고 있는 보다 숙련된 사용자에게 완벽한 옵션입니다. 당신이 초보자이고 자신의 코드와 기능을 설정하는 것에 대해 확신이 없다면, 우리는 이 이동 경로 플러그인 중 하나를 사용하거나 위에서 언급한 방법을 사용하여 이동 경로를 사용자 정의할 것을 강력히 권장합니다.

자신의 기능을 충분히 사용할 수 있는 경험이 있는 경우 시작하기 전에 사이트의 전체 백업을 만들고 하위 테마를 설치하는 것이 좋습니다. 그런 다음 시작할 준비가 된 것입니다.

먼저 Appearance > Theme Editor 로 이동하여 functions.php 파일에 다음 기능을 추가하세요.

 함수 get_breadcrumb() {
echo '<a href='.home_url().' rel="nofollow">홈</a>';
if (is_category() || is_single()) {
echo "&nbsp;/ &nbsp;";
the_category(' &황소; ');
if (is_single()) {
에코 " &nbsp;/ &nbsp; ";
제목();
}
} elseif (is_page()) {
echo "&nbsp;/ ";
echo the_title();
} elseif (is_search()) {
echo "&nbsp;/ $nbsp 검색 결과... ";
echo '"<em>';
echo the_search_query();
에코 '</em>"';
}
}

더 나은 사용자 지정을 위해 사용자 지정 이동 경로의 코드 편집

코드의 특정 섹션을 사용하여 함수 상단의 홈 페이지 텍스트와 구분 기호 를 변경할 수 있음을 기억하십시오.

예를 들어 다음 줄을 편집할 수 있습니다.

 echo '<a href='.home_url().' rel="nofollow">홈</a>';

에게

 echo '<a href= https://quadlayers.com/blog rel="nofollow">홈</a>';

또는 원하는 URL.

그 위에 코드의 오른쪽 echo 문에서 /를 대체하는 구분 기호 를 변경할 수도 있습니다.

예를 들어 다음과 같이 구분 기호를 /에서 >로 바꿀 수 있습니다.

 echo "&nbsp; > &nbsp;";

&nbsp 는 구분 기호 사이와 뒤에 공백을 포함하기 위해서만 추가됩니다.

그런 다음 파일 업데이트 를 클릭하여 함수 를 저장한 다음 오른쪽에 있는 파일 사이드바에서 Header.php 파일 을 눌러 테마 헤더 파일로 전환합니다. 이제 이 스니펫을 Header.php 파일에 추가하여 헤더 파일에 함수 호출을 추가해야 합니다.

 <?php custom_breadcrumbs(); ?>

그게 다야! 이것이 사용자 정의 기능을 사용하여 WordPress에서 이동 경로를 편집하는 방법입니다.

사용자 지정 이동 경로 스타일 지정

테마의 추가 CSS 섹션 을 사용하여 이동 경로의 스타일을 지정할 수도 있습니다. 이를 위해 단순히 모양 > 사용자 정의 로 이동하고 아래와 같이 추가 CSS 섹션으로 이동합니다.

wordpress에서 이동 경로 편집 - 추가 CSS

여기에서 다음 CSS 스니펫을 추가하고 필요한 값을 변경하여 이동 경로의 스타일을 지정하고 사용자 지정할 수 있습니다.

 #빵 부스러기{
목록 스타일:없음;
여백:10px 0;
오버플로:숨김;
}

#breadcrumbs 리{
디스플레이: 인라인 블록;
수직 정렬:가운데;
여백 오른쪽:15px;
}

#breadcrumbs .separator{
글꼴 크기:18px;
글꼴 두께:100;
색상:#ccc;
}

wordpress에서 이동 경로 편집 - CSS 추가

물론 이러한 모든 값을 변경하고 웹 사이트 테마에 가장 적합한 값을 찾기 위해 사용할 수 있습니다. 변경 사항에 만족하면 게시 를 누르는 것을 잊지 마십시오.

결론

요약하면, 이동 경로는 사용자가 사이트를 탐색하는 데 매우 유용합니다. 이것은 온라인 상점이나 섹션이 많은 사이트가 있는 경우 특히 중요합니다.

이 가이드에서는 WordPress에서 이동 경로를 편집하는 다양한 방법을 배웠습니다. 이동 경로를 사용자 지정하기 전에 다음 방법 중 하나를 사용하여 설정해야 합니다.

  • 전용 이동 경로 플러그인 사용
  • Yoast SEO 사용
  • WooCommerce의 전용 이동 경로 후크 사용
  • 자신의 이동 경로 기능을 생성하여

구성한 후에는 사용자 지정할 수 있습니다. 이 가이드에서는 두 가지 방법을 살펴보았습니다.

  • Yoast SEO로 이동 경로 편집
  • 프로그래밍 방식으로 WooCommerce 이동 경로 사용자 지정

Yoast SEO를 사용하고 코딩 기술이 없다면 첫 번째 방법이 적합합니다. 반면에 코딩 기술이 있고 더 많은 유연성을 원하는 경우 프로그래밍 방식으로 이동 경로를 사용자 지정할 수 있습니다.

도움이 필요하시면 아래 댓글로 알려주시면 최대한 도와드리겠습니다.

마지막으로 웹사이트에 탐색 기능을 추가하는 방법에 대해 자세히 알아보려면 다음 문서를 확인하는 것이 좋습니다.

  • WordPress에서 404 페이지를 사용자 정의하는 방법
  • WooCommerce에서 관련 제품 숨기기 및 제거
  • WooCommerce 카테고리 페이지를 사용자 정의하는 방법