웹사이트 검색

WordPress 게시물 및 페이지에 탭을 추가하는 방법

탭은 많은 웹사이트, 특히 전자상거래 상점에서 매우 일반적인 기능입니다. 전자상거래 상점 소유자는 일반적으로 제품 설명 영역의 탭을 사용하여 리뷰, 설명, 기술 사양 등을 여러 탭으로 나눕니다.

그럼에도 불구하고 탭은 전자상거래 웹사이트뿐만 아니라 다른 다양한 유형의 웹사이트에서도 사용되고 있습니다. 공식 WordPress.org 웹사이트에서도 플러그인 설명 페이지의 탭을 사용합니다. WP.org에서 강조 표시된 탭을 보려면 아래 이미지를 참조하세요.

다른 많은 웹사이트 소유자는 다양한 유형의 웹사이트에서 탭을 사용합니다. 그러나 탭을 확장하여 정보를 표시하는 아코디언과 혼동하지 마십시오. 아래에서는 내 웹사이트에서 아코디언을 어떻게 사용했는지 살펴보시기 바랍니다.

하지만 아코디언은 제쳐두고, 우리는 탭에 대해 이야기하려고 왔으니 초점을 잃지 않도록 하세요. 탭과 아코디언의 구분을 명확하게 해야 했습니다. 이제 우리가 같은 페이지에 있기를 바랍니다 ?

본질적으로 웹 소유자는 탭을 사용하여 전체 페이지나 게시물을 차지했을 정보를 분할합니다. 이는 탭을 사용하면 사용자가 스크롤 휠을 백만 번 누르도록 강요하지 않고도 정보를 훨씬 더 쉽게 소화할 수 있다는 의미입니다.

즉, 탭은 특히 집중 시간이 짧은 세상에서 웹사이트의 유용성을 향상시킵니다. 따라서 긴 페이지로 인해 사용자가 지루해하지 않고 사이트에 더 오랫동안 머물게 하려면 탭 사용을 고려해야 합니다.

오늘 게시물에서는 WordPress 게시물과 페이지에 탭을 추가하는 방법을 정확하게 보여줍니다. 이 게시물이 끝나기 전에 탭을 활용하는 데 필요한 모든 지침을 얻을 수 있습니다. 끝까지 즐겁게 감상하시길 바라며, 댓글로 여러분의 생각을 공유하지 않고 떠나지 말아주세요. 이제 시작하겠습니다.

페이지 빌더 사용

페이지 빌더가 이미 설치되어 있다면 운이 좋을 것입니다. 손끝에 탭 모듈이 이미 있을 것입니다. 대부분의 주요 페이지 빌더는 핵심 페이지 빌더 요소 세트의 일부로 탭을 제공합니다. 우리가 가장 좋아하는 두 가지를 간략하게 살펴보겠습니다.

Elementor 무료 페이지 빌더

인기 있는 Elementor 페이지 빌더에는 플러그인 무료 버전의 일부로 탭이 포함되어 있습니다. 여러분이 해야 할 일은 페이지에 탭 요소를 삽입한 다음 제목, 내용, 스타일 등을 편집하는 것뿐입니다. 그게 전부입니다!

WPBakery 프리미엄 페이지 빌더

WPBakery Page Builder가 포함된 프리미엄 테마(예: 자체 Total 테마)를 사용하시나요? 엄청난! 탭이 내장되어 있어 사용하기 쉽습니다.

WPBakery 탭 모듈은 탭을 추가할 때 처음에는 비어 있기 때문에 이전 예제와 약간 다릅니다. 콘텐츠를 추가하려면 탭 내에 추가 페이지 요소(텍스트 영역, 이미지, 아이콘 등)를 삽입해야 합니다. 하지만 이를 통해 (내장된 스타일 옵션 외에도) 원하는 방식으로 탭을 생성할 수 있는 자유가 커졌습니다. 이전에 블로그에서 이 페이지 빌더를 다룬 적이 있으므로 더 자세한 지침을 원하시면 WPBakery 가이드를 확인하세요. (참고 – 이 플러그인은 이전에 Visual Composer라고 불렸으므로 혼동을 드려 죄송합니다.)

탭 WordPress 플러그인 설치

페이지 빌더를 사용하지 않는 경우 탭용으로만 사용할 필요는 없습니다. WP Shop Mart의 Tabs라고 알려진 무료 WordPress 플러그인과 같은 훌륭한 대안이 많이 있습니다. Tabs는 땀을 흘리지 않고도 아름다운 탭을 무제한으로 만들 수 있도록 도와주는 멋진 WordPress 플러그인입니다.

Tabs WordPress 플러그인을 설치하는 것부터 시작해 보겠습니다. 공식 WordPress 플러그인 저장소에서 사용할 수 있으므로 WordPress 관리 대시보드 내부에서 직접 플러그인을 설치할 수 있습니다.

우리는 무료 버전을 사용하고 있지만 나중에 추가 기능을 위해 업그레이드하려는 경우 프리미엄 버전을 사용할 수 있습니다.

탭 WordPress 플러그인 설치

WordPress 관리 대시보드에 로그인하고 플러그인 > 새로 추가로 이동하여 키워드 검색창에 'tabs wpshopmart'를 입력하세요. 올바른 플러그인을 찾으면 아래와 같이 지금 설치 버튼을 누르세요.

그런 다음 활성화 버튼을 클릭하세요. 이제 Tabs Responsive WordPress 플러그인을 사용할 준비가 되었습니다. 이제 이 플러그인이 제공하는 기능을 알아보기 위해 몇 개의 탭을 만들어 보겠습니다.

탭 반응형 WordPress 플러그인 구성

플러그인을 활성화하면 WordPress 관리 메뉴에 새 항목이 추가됩니다. 새 탭을 만들려면 아래 화면 캡처에 자세히 설명된 대로 반응형 탭 > 새 탭 추가로 이동하세요.

그렇게 하면 상사처럼 아름다운 탭을 만드는 데 필요한 모든 기능이 가득한 탭 반응형 빌더로 연결됩니다. 아래 이미지를 통해 예상되는 내용을 엿볼 수 있습니다.

꽤 두루마리 아닌가요? 대부분의 기능은 오른쪽 사이드바에서 찾을 수 있습니다. 또한 개별 탭에는 고유한 설정이 있다는 점에 유의하세요. 탭에서 WYSIWYG 편집기를 사용할 수도 있습니다. 즉, 탭을 충분히 제어할 수 있습니다.

이제 몇 가지 샘플 탭을 만들어 페이지나 게시물에 표시해 보겠습니다.

제목 추가

위 이미지에 표시된 대로 탭에 설명적인 제목(탐색 메뉴와 마찬가지로)을 지정하는 것부터 시작하세요. 이렇게 하면 나중에 편집해야 할 경우 WordPress 관리 대시보드에서 탭을 쉽게 식별할 수 있습니다. 이 튜토리얼의 목적을 위해 저는 탭 이름을 "홈 탭 테스트"로 명명했습니다.

탭 디자인 템플릿 선택

위 스크린샷에서 볼 수 있듯이 다음 단계에서는 탭에 사용할 디자인 템플릿을 선택하는 것입니다. Tabs WordPress 플러그인의 무료 버전은 하나의 디자인 템플릿만 제공하지만 언제든지 19개 이상 프리미엄 버전으로 업그레이드할 수 있습니다. 디자인의 자유에 대해 이야기하세요.

탭 추가

다음으로, 아래와 같이 원하는 만큼 탭을 추가하세요.

위에 표시된 탭 추가 섹션에서 수행할 수 있는 작업을 자세히 설명하는 번호가 매겨진 목록을 만들었습니다. 숫자는 각 영역에 해당합니다.

  1. 탭 제목  – 이 필드에 탭 제목을 추가합니다. 설명, 사양, 세부정보 등 등
  2. 탭 설명 - 여기에 탭 설명을 추가하세요. 이 필드를 사용하면 탭의 내용을 추가할 수 있습니다. 가장 좋은 점은 WYSIWYG 편집기(아래 3번 참조)를 사용하여 이미지, 음악, 비디오를 포함한 풍부한 콘텐츠를 탭에 추가할 수 있다는 것입니다.
  3. WYSIWYG 사용 – 친숙한 What-You-See-<를 사용하려는 경우 Strong>IWhat-YYou-G탭 콘텐츠를 만들 수 있는 편집기를 선택하세요. 언제든지 이 버튼을 누르세요. 팝업창을 실행하는 버튼
  4. 탭 아이콘 – 이 필드는 탭에 사용할 아이콘을 선택하는 데 도움이 됩니다. Tabs WordPress 플러그인을 사용하면 수많은 Font Awesome 아이콘에 액세스하여 전문가처럼 탭을 멋지게 꾸밀 수 있습니다.
  5. 아이콘 위에 표시 – 아이콘 옆에 탭 제목을 표시하려는 경우 이 기능이 유용할 것입니다. 또한 탭 제목을 터치하지 않고도 아이콘을 비활성화할 수 있습니다.
  6. 삭제 – 특정 탭을 삭제하려면 이 버튼을 누르세요.
  7. 새 탭 추가 - 더 많은 탭을 추가하려면 이 버튼을 클릭하세요.
  8. 모두 삭제 – 모든 탭이 지겹나요? 모든 항목을 재설정하려면 모두 삭제 버튼을 누르세요.

도움이 될 몇 가지 보너스 팁. 먼저, 탭을 끌어서 놓아 원하는 대로 재정렬하고 정렬할 수 있습니다.

둘째 – 실수로 탭 작성기에서 다른 곳으로 이동하는 경우 변경 사항이 손실되지 않도록 탭을 만들 때 초안 저장 버튼을 한두 번 누르는 것을 잊지 마세요.

마지막으로 – 지원이 필요한 경우 탭 추가 섹션(및 대부분의 플러그인 페이지) 바로 아래에 공식 탭으로 연결되는 커다란 파란색 지원 받기 버튼이 있습니다. WordPress.org의 지원 포럼. 언제든지 도움이 필요하면 주저하지 말고 지원 버튼을 누르세요.

탭 단축 코드

다음으로, 원하는 페이지나 게시물에 탭을 추가하고 표시하는 데 사용하는 탭 단축 코드를 찾습니다. 예를 들어 단축 코드는 [TABS_R id=443]입니다. 페이지에 탭을 표시하려면 위의 단축 코드를 해당 페이지에 복사하여 붙여넣기만 하면 됩니다.

탭 위젯

웹사이트의 위젯 영역에 탭을 추가하려고 하시나요? 그렇다면 Tabs WordPress 플러그인과 함께 제공되는 위젯 지원이 마음에 드실 것입니다.

위 이미지에서 여기를 클릭하세요 링크를 누르면 WordPress 위젯 화면으로 이동하며, 여기서 테마의 위젯 영역이 있는 어느 곳에나 자유롭게 탭을 추가할 수 있습니다.

맞춤 CSS

Tabs WordPress 플러그인에는 다양한 탭 사용자 정의 옵션이 제공되지만(오른쪽 사이드바를 보면 스타일 옵션이 가득합니다!) 아래와 같이 사용자 정의 CSS 스타일을 추가할 수 있습니다.

또한 위 이미지에 표시된 대로 기본 설정 업데이트 버튼을 클릭하기만 하면 사용자 정의 설정을 모든 새 탭의 기본 설정으로 설정할 수 있습니다.

오른쪽 사이드바

위 이미지에서 강조 표시된 오른쪽 사이드바는 귀하의 하루를 진정으로 전달합니다. 탭 스타일을 마음대로 꾸미는 데 필요한 모든 옵션이 포함되어 있습니다. 주목할만한 옵션은 다음과 같습니다:

  • 탭 배경색
  • 탭 글꼴 색상
  • 글꼴 계열 및 스타일
  • 탭 제목 및 아이콘 표시 옵션
  • 탭 아이콘 위치 정렬(예: 탭 제목 앞 또는 뒤)
  • 탭 테두리
  • 여러 탭 설명 애니메이션
  • 그리고 훨씬 더

WordPress 페이지 또는 게시물에 탭 추가

탭 콘텐츠와 스타일 옵션을 추가한 후 아래 표시된 대로 위로 스크롤하여 게시 버튼을 클릭하세요.

이제 탭이 준비되었습니다. WordPress 페이지나 게시물에 탭을 추가하기만 하면 됩니다. 앞서 본 탭 단축 코드를 복사하기만 하면 됩니다. 우리 회사는 [TABS_R id=443]입니다.

게시물 편집기를 실행하고(Gutenberg를 사용하는 경우에도) 게시물/페이지에 단축 코드를 붙여넣습니다. 그런 다음 아래와 같이 게시 버튼을 누르세요.

약 5분 정도 설정을 마친 후; Twenty Seventeen 테마와 Lorem Ipsum을 많이 사용하고 있는데 다음과 같은 결과가 나왔습니다.

색상이나 기타 사항을 맞춤설정하지 않았습니다. 네 생각은 어떤지 말해봐; 쉽지 않았어?

WordPress 페이지와 게시물에 탭을 추가하는 것은 4학년 학생들의 일입니다. 특히 WP Shop Mart의 Tabs와 같은 플러그인을 사용하는 경우에는 문제가 발생할 것으로 예상하지 않습니다.

WordPress 페이지와 게시물에 탭을 어떻게 추가하나요? 가장 좋아하는 탭 WordPress 플러그인은 무엇입니까? 댓글로 여러분의 생각을 공유해주세요. 즐거운 창작이 되세요!