특정 WordPress 메뉴에 사용자 정의 항목을 추가하는 방법
게시 됨: 2022-04-04특정 WordPress 메뉴에 사용자 정의 항목을 추가하시겠습니까?
워드프레스 메뉴는 대부분의 웹사이트 상단에 표시되는 탐색 메뉴입니다. 탐색 메뉴에 일반 링크가 아닌 사용자 지정 항목을 표시하려는 경우가 있습니다.
이 기사에서는 특정 WordPress 메뉴에 사용자 정의 항목을 쉽게 추가하는 방법을 보여줍니다.
WordPress 메뉴에 사용자 정의 항목을 추가하는 이유
WordPress 메뉴는 일반적으로 웹사이트 상단에 표시되는 탐색 링크입니다. 모바일 장치에서 메뉴 아이콘을 탭하면 종종 표시됩니다.
이것은 일반적인 WordPress 웹 사이트 레이아웃에서 눈에 띄는 위치이므로 메뉴에 일반 링크가 아닌 사용자 정의 항목을 배치하여 이를 활용하는 것이 현명합니다.
예를 들어, 일부 사용자는 WPBeginner에서와 같이 검색 양식을 표시하기를 원할 수 있습니다. 회원 웹사이트는 로그인 및 로그아웃 링크를 표시하거나 메뉴에 아이콘이나 이미지를 추가할 수 있습니다.
기본적으로 탐색 메뉴는 일반 텍스트 링크를 표시하도록 설계되었습니다. 그러나 여전히 WordPress 메뉴에 사용자 정의 항목을 배치할 수 있습니다.
즉, 나머지 탐색 메뉴는 그대로 유지하면서 WordPress의 특정 메뉴에 사용자 정의 항목을 추가하는 방법을 살펴보겠습니다.
WordPress의 특정 탐색 메뉴에 사용자 정의 항목 추가
WordPress의 탐색 메뉴에 사용자 정의 항목을 추가하는 방법에는 여러 가지가 있습니다. 추가하려는 사용자 정의 항목 유형에 따라 다릅니다.
가장 일반적인 몇 가지 예를 보여드리겠습니다. 일부는 플러그인을 사용해야 하고 다른 일부는 일부 코드를 추가해야 합니다.
특정 섹션으로 건너뛰려면 다음 목차를 사용할 수 있습니다.
- WordPress 메뉴에 검색 팝업 추가
- 메뉴에 아이콘 또는 이미지 추가
- 메뉴에 로그인/로그아웃 링크 추가
- WordPress 메뉴에 사용자 정의 텍스트 추가
- 메뉴에 현재 날짜 추가
- 메뉴에 사용자 이름 표시
- 다른 페이지에 다른 메뉴 표시
시작하자.
1. 워드프레스 메뉴에 검색 팝업 추가하기
일반적으로 기본 검색 위젯 또는 블록을 사용하여 WordPress 사이드바에 검색 양식을 추가할 수 있습니다. 그러나 기본적으로 탐색 메뉴에 검색을 추가하는 방법은 없습니다.
일부 WordPress 테마에는 기본 메뉴 영역에 검색 상자를 추가하는 옵션이 있습니다. 하지만 그렇지 않은 경우 아래 방법을 사용할 수 있습니다.
이를 위해서는 SearchWP Modal Search Form 플러그인을 설치하고 활성화해야 합니다. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하세요.
이 플러그인은 시장에서 최고의 WordPress 검색 플러그인인 SearchWP용 애드온입니다.
애드온은 무료이며 기본 WordPress 검색에서도 작동합니다. 그러나 WordPress 검색을 개선하려면 SearchWP와 함께 사용하는 것이 좋습니다.
애드온을 설치한 후 모양 » 메뉴 페이지로 이동하십시오. '메뉴 항목 추가' 열 아래에서 'SearchWP 모달 검색 양식' 탭을 클릭하여 확장합니다.
검색 엔진을 선택한 다음 메뉴에 추가 버튼을 클릭합니다.
플러그인은 탐색 메뉴에 검색을 추가합니다. 메뉴 항목 아래의 '모달 검색 양식'을 클릭하여 확장하고 레이블을 검색 또는 원하는 다른 것으로 변경합니다.
변경 사항을 저장하려면 메뉴 저장 버튼을 클릭하는 것을 잊지 마십시오.
이제 웹사이트를 방문하여 탐색 메뉴에 추가된 검색을 볼 수 있습니다. 그것을 클릭하면 라이트박스 팝업에서 검색 양식이 열립니다.
자세한 내용은 WordPress 메뉴에 검색 버튼을 추가하는 방법에 대한 가이드를 참조하세요.
2. 특정 메뉴에 아이콘 및 사용자 정의 이미지 추가
사용자가 특정 메뉴에 추가하고 싶어하는 또 다른 인기 있는 사용자 지정 항목은 이미지 또는 아이콘입니다.
이를 위해서는 메뉴 이미지 아이콘 플러그인을 설치하고 활성화해야 합니다. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하세요.
활성화되면 모양 » 메뉴 페이지로 이동하여 아이콘이나 이미지를 표시하려는 메뉴 항목 위로 마우스를 이동합니다.
계속하려면 파란색 메뉴 이미지 버튼을 클릭하십시오.
팝업이 나타납니다. 여기에서 해당 메뉴 항목과 함께 표시할 이미지 또는 아이콘을 선택할 수 있습니다.
메뉴 항목에 대한 이미지 또는 아이콘의 위치를 선택할 수도 있습니다. 예를 들어, 아래 예제와 같이 메뉴 항목 바로 앞에 아이콘을 표시하거나 아이콘만 표시되도록 메뉴 제목을 숨길 수도 있습니다.
변경 사항 저장 버튼을 클릭하여 설정을 저장하는 것을 잊지 마십시오. 다른 메뉴 항목에 아이콘이나 이미지를 추가해야 하는 경우 이 과정을 반복하십시오.
그런 다음 웹 사이트를 방문하여 특정 메뉴 항목에서 사용자 정의 이미지 또는 아이콘을 볼 수 있습니다.
자세한 지침은 WordPress 메뉴에 이미지를 추가하는 방법에 대한 자습서를 참조하십시오.
3. 특정 WordPress 메뉴에 로그인/로그아웃 링크 추가
WordPress 멤버십 플러그인을 사용하거나 온라인 상점을 운영하는 경우 사용자가 계정에 쉽게 로그인할 수 있도록 허용할 수 있습니다.
기본적으로 WordPress에는 탐색 메뉴에 로그인 및 로그아웃 링크를 표시하는 쉬운 방법이 없습니다.
플러그인을 사용하거나 코드 스니펫을 사용하여 추가하는 방법을 보여드리겠습니다.
1. 플러그인을 사용하여 메뉴에 로그인/로그아웃 링크 추가
이 방법은 모든 사용자에게 더 쉽고 권장됩니다.
먼저 로그인 또는 로그아웃 메뉴 항목 플러그인을 설치하고 활성화해야 합니다. 그런 다음 모양 » 메뉴 페이지를 방문하여 로그인/로그아웃 탭을 클릭하여 확장해야 합니다.
여기에서 '로그인|로그아웃' 항목을 선택하고 메뉴에 추가 버튼을 클릭해야 합니다.
변경 사항을 저장하려면 메뉴 저장 버튼을 클릭하는 것을 잊지 마십시오. 이제 웹사이트를 방문하여 사용자 정의 로그인 로그아웃 링크가 작동하는 것을 볼 수 있습니다.
링크는 사용자의 로그인 상태에 따라 로그인 또는 로그아웃으로 동적으로 변경됩니다.
WordPress 메뉴에 로그인 및 로그아웃 링크를 추가하는 방법에 대한 자습서에서 자세히 알아보세요.
2. 사용자 정의 코드를 사용하여 로그인/로그아웃 링크 추가
이 방법을 사용하려면 WordPress 웹사이트에 코드를 추가해야 합니다. 이전에 이 작업을 수행하지 않았다면 WordPress에 사용자 지정 코드를 추가하는 방법에 대한 가이드를 살펴보세요.
먼저 WordPress 테마가 특정 탐색 메뉴 위치에 사용하는 이름을 찾아야 합니다.
이것을 찾는 가장 쉬운 방법은 모양 » 메뉴 페이지를 방문하여 메뉴 위치 영역으로 마우스를 가져가는 것입니다.
검사 도구를 마우스 오른쪽 버튼으로 클릭하여 선택하면 아래 소스 코드에 위치 이름이 표시됩니다. 예를 들어 데모 테마는 기본, 바닥글 및 상단 표시줄 메뉴를 사용합니다.
로그인/로그아웃 링크를 표시하려는 대상 위치에 사용된 이름을 기록해 두십시오.
다음으로 테마의 functions.php 파일이나 사이트별 플러그인에 다음 코드를 추가해야 합니다.
add_filter( 'wp_nav_menu_items', 'add_loginout_link', 10, 2 );
function add_loginout_link( $items, $args ) {
if (is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. wp_logout_url() .'">Log Out</a></li>';
}
elseif (!is_user_logged_in() && $args->theme_location == 'primary') {
$items .= '<li><a href="'. site_url('wp-login.php') .'">Log In</a></li>';
}
return $items;
}
그런 다음 웹사이트를 방문하면 탐색 메뉴에 로그인 로그아웃 링크가 표시됩니다.
이 동적 링크는 사용자의 로그인 상태에 따라 자동으로 로그인 또는 로그아웃으로 전환됩니다.
4. WordPress 탐색 메뉴에 사용자 정의 텍스트 추가하기
탐색 메뉴에 대한 링크가 아닌 텍스트를 추가하고 싶다면 어떻게 하시겠습니까?
두 가지 방법이 있습니다.
1. 특정 메뉴에 사용자 정의 텍스트 추가(쉬운 방법)
모양 » 메뉴 페이지로 이동하여 # 기호를 URL로 사용하고 표시하려는 텍스트를 링크 텍스트로 사용하는 사용자 지정 링크를 추가하기만 하면 됩니다.
계속하려면 메뉴에 추가 버튼을 클릭하십시오.
WordPress는 사용자 정의 텍스트를 왼쪽 열의 메뉴 항목으로 추가합니다. 이제 클릭하여 확장하고 # 기호를 삭제합니다.
메뉴 저장 버튼을 클릭하고 웹사이트를 미리 보는 것을 잊지 마십시오. 탐색 메뉴에 사용자 정의 텍스트가 나타납니다.
그것은 여전히 링크이지만, 그것을 클릭해도 사용자를 위해 아무 것도 하지 않습니다.
2. 코드를 사용하여 탐색 메뉴에 사용자 정의 텍스트 추가
이 방법의 경우 웹사이트에 코드 스니펫을 추가합니다. 먼저 로그인/로그아웃 링크 섹션에서 위에서 설명한 대로 테마 위치의 이름을 찾아야 합니다.
그런 다음 테마의 functions.php 파일이나 사이트별 플러그인에 다음 코드를 추가해야 합니다.
add_filter( 'wp_nav_menu_items', 'your_custom_menu_item', 10, 2 );
function your_custom_menu_item ( $items, $args ) {
if ( $args->theme_location == 'primary') {
$items .= '<li><a title="">Custom Text</a></li>';
}
return $items;
}
'사용자 정의 텍스트'라고 표시된 부분을 자신의 텍스트로 바꾸기만 하면 됩니다.
이제 변경 사항을 저장하고 웹사이트를 방문하여 탐색 메뉴 끝에 추가된 사용자 정의 텍스트를 볼 수 있습니다.
이 코드 방법은 프로그래밍 방식으로 특정 WordPress 메뉴에 동적 요소를 추가하려는 경우에 유용할 수 있습니다.
5. WordPress 메뉴에 현재 날짜 추가
WordPress의 탐색 메뉴에 현재 날짜를 표시하시겠습니까? 이 트릭은 자주 업데이트되는 블로그나 뉴스 웹사이트를 운영하는 경우에 유용합니다.
테마의 functions.php 파일이나 사이트별 플러그인에 다음 코드를 추가하기만 하면 됩니다.
add_filter('wp_nav_menu_items','add_todaysdate_in_menu', 10, 2);
function add_todaysdate_in_menu( $items, $args ) {
if( $args->theme_location == 'primary') {
$todaysdate = date('l jS F Y');
$items .= '<li><a>' . $todaysdate . '</a></li>';
}
return $items;
}
'기본'을 메뉴 위치로 바꾸는 것을 잊지 마십시오.
이제 웹사이트를 방문하여 WordPress 메뉴에서 현재 날짜를 볼 수 있습니다.
날짜 형식을 원하는 대로 변경할 수도 있습니다. WordPress에서 날짜 및 시간 형식을 변경하는 방법에 대한 자습서를 참조하십시오.
6. WordPress 메뉴에 사용자 이름 표시
탐색 메뉴에 개인화 기능을 조금 더 추가하고 싶으십니까? 탐색 메뉴에서 로그인한 사용자를 이름으로 인사할 수 있습니다.
먼저 테마의 functions.php 파일이나 사이트별 플러그인에 다음 코드를 추가해야 합니다.
add_filter( 'wp_nav_menu_objects', 'username_in_menu_items' );
function username_in_menu_items( $menu_items ) {
foreach ( $menu_items as $menu_item ) {
if ( strpos($menu_item->title, '#profile_name#') !== false) {
if ( is_user_logged_in() ) {
$current_user = wp_get_current_user();
$user_public_name = $current_user->display_name;
$menu_item->title = str_replace("#profile_name#", " Hey, ". $user_public_name, $menu_item->title . "!");
} else {
$menu_item->title = str_replace("#profile_name#", " Welcome!", $menu_item->title . "!");
}
}
}
return $menu_items;
}
이 코드는 먼저 링크 텍스트로 #profile_name#이 있는 메뉴 항목을 추가했는지 확인합니다. 그런 다음 해당 메뉴 항목을 로그인한 사용자의 이름으로 바꾸거나 로그인하지 않은 사용자를 위한 일반 인사말로 바꿉니다.
다음으로 모양 » 메뉴 페이지로 이동하여 링크 텍스트로 #profile_name# 이 있는 새 사용자 정의 링크를 추가해야 합니다.
변경 사항을 저장하려면 메뉴 저장 버튼을 클릭하는 것을 잊지 마십시오. 그런 다음 웹 사이트를 방문하여 WordPress 메뉴에서 로그인한 사용자의 이름을 볼 수 있습니다.
7. WordPress에서 조건부 메뉴를 동적으로 표시
지금까지 특정 WordPress 메뉴에 다양한 유형의 사용자 정의 항목을 추가하는 방법을 보여 주었습니다. 그러나 때로는 사용자에게 다른 메뉴 항목을 동적으로 표시해야 할 수도 있습니다.
예를 들어 로그인한 사용자에게만 메뉴를 표시할 수 있습니다. 또 다른 시나리오는 사용자가 보고 있는 페이지에 따라 메뉴를 변경하려는 경우입니다.
이 방법을 사용하면 여러 메뉴를 만들고 특정 조건이 일치할 때만 표시할 수 있습니다.
먼저 Conditional Menus 플러그인을 설치하고 활성화해야 합니다. 자세한 내용은 WordPress 플러그인 설치 방법에 대한 단계별 가이드를 참조하세요.
활성화 시 외모 » 메뉴 페이지를 방문해야 합니다. 여기에서 표시하려는 새 메뉴를 만들어야 합니다. 예를 들어, 이 예에서는 로그인한 사용자만을 위한 새 메뉴를 만들었습니다.
메뉴를 만든 후 위치 관리 탭으로 전환합니다.
여기에서 메뉴 위치 옆에 있는 조건부 메뉴 링크를 클릭해야 합니다.
그런 다음 드롭다운 메뉴에서 이전에 생성한 메뉴를 선택해야 합니다.
그런 다음 '+ 조건' 버튼을 클릭하여 계속합니다.
그러면 팝업 창이 나타납니다.
여기에서 이 메뉴를 표시하기 위해 충족해야 하는 조건을 선택할 수 있습니다.
플러그인은 선택할 수 있는 다양한 조건을 제공합니다. 예를 들어 특정 페이지, 카테고리, 게시물 유형, 분류 등을 기반으로 메뉴를 표시할 수 있습니다.
사용자 역할 및 로그인 상태에 따라 다른 메뉴를 표시할 수도 있습니다. 예를 들어, 회원 웹사이트에서 기존 회원에게 다른 메뉴를 표시할 수 있습니다.
이 기사가 특정 WordPress 메뉴에 사용자 정의 항목을 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 또한 최고의 웹 디자인 소프트웨어를 선택하는 방법에 대한 가이드나 소규모 비즈니스를 위한 최고의 라이브 채팅 소프트웨어에 대한 전문가 비교를 보고 싶을 수도 있습니다.
이 기사가 마음에 들면 WordPress 비디오 자습서용 YouTube 채널을 구독하십시오. Twitter와 Facebook에서도 찾을 수 있습니다.