탭을 사용하여 사이트 혼란을 최소화하고 참여도를 향상하세요

사이트를 간소화하기 위해 할 수 있는 모든 일은 좋은 일입니다. 결국, 원하는 정보를 얻기 위해 작업 현장 방문자가 수행해야 하는 작업이 적을수록 좋습니다. 그러나 사이트의 특성상 많은 정보를 포함해야 하는 경우 이는 어려울 수 있습니다. 이러한 사이트의 최종 결과에는 일반적으로 거의 아무도 스크롤하지 않을 정도로 매우 긴 페이지가 있는 사이트와 마찬가지로 거의 아무도 클릭하지 않는 페이지가 많은 사이트가 포함됩니다.

그렇다면 너무 긴 페이지나 너무 많은 페이지에 대한 대안은 무엇일까요? 물론 탭이죠! 그리고 걱정하지 마세요. 사이트를 살펴보기 위해 코딩 천재가 될 필요는 없습니다. 이 기능을 활성화하는 플러그인은 많이 있습니다. WordPress 사이트에 탭 콘텐츠를 빠르고 쉽게 추가하는 데 도움이 되는 몇 가지 최고의 정보를 모아봤습니다.

포스트 UI 탭

게시물 UI 탭을 사용하면 게시물, 페이지, 기타 게시물 유형 등 콘텐츠 내에 jQuery 탭을 쉽게 추가할 수 있습니다. 편집기에 단축 코드를 삽입하기만 하면 탭이 활성화됩니다.

플러그인에는 기존 테마와 더 쉽게 일치시킬 수 있도록 24개의 다양한 UI 테마가 포함되어 있습니다. 또는 필요한 경우 사용자 정의 스타일시트를 만들어 모양과 느낌을 더욱 향상시킬 수 있습니다.

플러그인이 설치되면 게시물 편집기에서 관련 TinyMCE 버튼을 클릭하여 적절한 단축 코드를 삽입하기만 하면 됩니다. 포스트 UI 탭에 대한 공식 WordPress 디렉토리 목록에 따르면 다음 단축 코드를 직접 사용하여 탭을 삽입할 수도 있습니다.

이 탭에 HTML을 자유롭게 삽입하세요. 문제 없이 처리되어야 하며, 짐작할 수 있듯이 사이트의 다른 곳에 있는 것처럼 콘텐츠가 탭에 포함되어 표시되는 것을 보게 될 것입니다.

쉬운 반응형 탭

사이트에 탭을 추가하고 싶다면 반드시 확인해야 할 또 다른 플러그인은 Easy Responsive Tabs입니다. 부트스트랩 3.0과 호환될 뿐만 아니라 비주얼 편집기에 TinyMCE 버튼을 추가하여 버튼 클릭만으로 반응형 탭을 매우 간단하게 삽입할 수 있습니다.

이 버튼을 클릭하면 제목, 활성 탭, 마우스 오버, 배경 등을 포함하여 탭의 여러 측면에 대한 색상을 선택할 수 있는 설정 패널이 열립니다. 상단이나 하단에 탭이 표시되도록 설정할 수도 있습니다. 이 플러그인은 설치와 작업이 매우 쉽기 때문에 정말 인기가 많습니다.

얼룩 무늬 반응형 탭

반응성이 주요 관심사 중 하나라면 Tabby Responsive Tabs가 좋은 선택입니다. 간단히 말해서, 이 플러그인을 사용하면 단축 코드를 사용하여 게시물과 페이지 내에 반응형 탭을 삽입할 수 있습니다. 간단한 페이지나 게시물에서 두 개 이상의 탭 세트를 지원하고 jQuery를 사용하여 작은 화면에서 탭과 아코디언 효과를 만듭니다. 키보드를 사용하여 탭에 액세스할 수도 있습니다.

탭을 삽입하려면 [tabby]와 [tabbyending]이라는 두 개의 단축 코드를 삽입하기만 하면 됩니다. 구체적으로 [tabby title=“tabname ”]을 사용하여 탭 이름을 설정합니다. 그런 다음 원하는 HTML을 포함하여 이 탭에 포함되어야 하는 콘텐츠를 작성합니다. 원하는 경우 더 많은 탭을 삽입할 수 있습니다. 그런 다음 해당 탭 세트를 마무리하려면 [tabbyending] 단축 코드를 사용하여 탭 그룹을 닫습니다.

이제 이러한 탭의 스타일을 변경하려면 코드를 좀 더 자세히 살펴봐야 합니다. 플러그인의 WordPress 디렉토리 페이지에 따르면 플러그인의 스타일시트를 하위 테마에 복사하고 거기에 맞게 탭 스타일이나 아코디언 스타일을 수정해야 합니다.

탭의 위젯

때로는 개별 탭 내의 요구 사항이 좀 더 복잡할 수도 있습니다. 이러한 경우에는 Widgets in Tabs 플러그인이 있습니다. 원하는 모든 위젯을 탭 안에 배치하여 공간을 절약하고 웹 사이트에서 보다 체계적인 경험을 만들 수 있습니다. 그것은 다양한 용도로 사용됩니다.

예를 들어 탭을 사용하여 최근 게시물 및 최근 댓글 위젯을 표시하도록 선택할 수 있습니다. 카테고리를 추가하여 탭 표시를 더욱 마무리할 수 있습니다. 또는 Facebook Like Box, Twitter 피드, Google+, Pinterest 핀보드 등과 같은 내장된 소셜 미디어 위젯 전용 탭 그룹을 만들 수 있습니다.

탭의 위젯에서 제가 정말 좋아하는 점 중 하나는 자체 스타일이 포함되어 있지 않아 테마에 따라 스타일을 지정할 수 있다는 것입니다. 탭은 귀하의 사이트와 조화를 이루며 마치 속한 것처럼 보입니다.

탭 제목도 스크롤 가능하며 이는 기존 스택 방식에 대한 좋은 대안입니다. 위젯 간의 전환을 위한 애니메이션 옵션도 있으며, 한 탭에서 다음 탭으로 이동하는 데 몇 초를 기다려야 하는지 설정할 수 있습니다.

여기에 나열된 다른 모든 탭 플러그인과 마찬가지로 단축 코드 [wit] 덕분에 쉽게 삽입할 수 있습니다.

WP UI – 탭, 아코디언, 슬라이더

여기서 이야기할 마지막 플러그인은 WP UI(탭, 아코디언, 슬라이더)입니다. 이 플러그인을 사용하면 게시물과 페이지에 탭을 간단하게 포함할 수 있을 뿐만 아니라 아코디언, 슬라이더, 대화 상자와 같은 다른 서식 스타일을 간단하게 통합할 수도 있습니다. 플러그인은 jQuery로 구동되며 원하는 경우 각 페이지에서 두 개 이상의 jQuery UI 테마를 사용할 수 있습니다.

설정과 사용법을 간단하게 해주는 사용하기 쉬운 옵션 페이지가 함께 제공됩니다. 또한 더 간단한 탐색을 위해 전용 메뉴와 대화 상자를 추가합니다. 위의 모든 플러그인과 마찬가지로 이 플러그인도 빠른 구현을 위해 주로 단축 코드에 의존합니다. 단축 코드 [wp 탭]은 스타일 인수를 사용하여 쉽게 향상될 수 있습니다. 이 인수는 "wpui-blue"와 같이 약 24가지 다른 방식으로 수정되어 탭에 테마와 더욱 응집력 있는 모양을 제공할 수 있습니다.

하지만 이 플러그인의 가장 큰 장점은 탭이나 아코디언에 게시물과 피드를 표시하는 기능입니다. 단축 코드는 [wptabposts]이며 이를 통해 일련의 탭 내에 게시물을 표시할 수 있습니다. 또는 페이지나 게시물 내에 피드를 표시하려면 [wpuifeeds] 단축 코드를 사용하세요. WP UI에 대한 WordPress 디렉토리 목록에 따르면 [wpspoiler post=“3028 ”]를 사용하여 이 특수 형식으로 하나의 게시물만 표시할 수 있습니다.

간단한 단축 코드

물론 기본 탭만 필요한 경우 여기 WPExplorer에서 직접 제작한 Symple Shortcodes WordPress 플러그인을 고려해 보세요. 플러그인에는 사이트의 모든 페이지에서 사용할 수 있는 멋진 최소한의 탭과 기타 훌륭한 콘텐츠 구성 기능이 많이 포함되어 있습니다. 열, 토글, 아코디언 및 기타 다양한 액센트(버튼, 소셜 아이콘 등)를 추가하세요.

처음에는 복잡해 보일 수도 있지만 사이트에 탭을 추가하는 과정은 실제로 매우 간단합니다. 위의 플러그인을 사용하면 간단하게 만들 수 있으며 최종 결과는 매력적이고 기능적입니다. 제 생각에는 확인해 볼 가치가 충분히 있는 것 같습니다. 귀하의 사이트 방문자는 전체 디자인을 어지럽히지 않고 액세스하는 데 필요한 만큼의 정보에 액세스할 수 있습니다. 리소스와 콘텐츠가 많은 사이트를 위한 빠른 솔루션입니다.

사이트에서 탭을 사용하시나요? 특히 이러한 플러그인은 어떻습니까? 그렇다면 그들이 당신을 위해 일해 주었나요? 사이트에 탭을 통합하는 다른 방법을 찾았습니까? 댓글을 통해 이 멋진 조직적 트릭에 대한 여러분의 경험을 듣고 싶습니다!