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

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

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


전자 상거래 웹 사이트에서 작동하는 탭의 예

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

wordpress.org 플러그인 설명 페이지의 탭

다른 많은 웹 사이트 소유자는 다른 유형의 웹 사이트에서 탭을 사용합니다. 그러나 탭과 혼동해서는 안됩니다 아코디언, 정보를 공개하기 위해 확장합니다. 아래에서 내 웹 사이트에서 아코디언을 어떻게 사용했는지 관찰하십시오..

vistamedia.xyz의 아코디언

하지만 아코디언은 제쳐두고 , 그러므로 우리의 초점을 잃지 않도록합시다. 탭과 아코디언을 명확하게 구분해야했습니다. 이제 같은 페이지에 있기를 바랍니다.

본질적으로 웹 소유자는 탭을 사용하여 다른 방법으로 전체 페이지 나 게시물을 가져간 정보를 분할합니다. 즉, 탭을 사용하면 사용자가 스크롤 휠을 백만 번 누르지 않아도 정보를 훨씬 쉽게 소화 할 수 있습니다..

다시 말해, 탭은 특히 다음과 같은 세상에서 웹 사이트의 유용성을 향상시킵니다. 짧은 관심 범위. 따라서 긴 페이지로 인해 사용자를 지루하게 만들지 않고 사이트에 더 오래 머 무르려면 탭 사용을 고려해야합니다..

오늘 게시물에서는 WordPress 게시물 및 페이지에 탭을 추가하는 방법을 정확하게 보여줍니다. 이 게시물이 끝나기 전에 탭을 사용하는 데 필요한 모든 지침을 활용할 수 있습니다. 우리는 당신이 끝까지 즐기기를 바랍니다. 의견 섹션에서 생각을 나누지 않고 떠나지 마십시오. 그 길에서 시작합시다.

페이지 빌더 사용

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

Elementor Free Page Builder

Elementor 페이지 빌더 탭

정보 및 다운로드 데모보기

인기있는 Elementor 페이지 빌더에는 플러그인 무료 버전의 일부로 탭이 포함되어 있습니다. 페이지에 탭 요소를 삽입 한 다음 제목, 콘텐츠, 스타일 등을 수정하기 만하면됩니다.!

WPBakery 프리미엄 페이지 빌더

WPBakery 페이지 빌더 탭

WPBakery 페이지 빌더 (예 : 자체 토탈 테마)가 포함 된 프리미엄 테마를 사용하십니까? 큰! 내장되어 사용하기 쉬운 탭.

WPBakery 탭 모듈은 탭을 추가 할 때 처음에 비어 있으므로 이전 예제와 약간 다릅니다. 콘텐츠를 추가하려면 탭 내에 추가 페이지 요소 (텍스트 영역, 이미지, 아이콘 등)를 삽입해야합니다. 그러나 이것은 내장 스타일 옵션 외에 원하는 방식으로 탭을 자유롭게 만들 수 있습니다. 이전에 블로그에서이 페이지 작성 도구를 다루었습니다. 자세한 지침을 보려면 WPBakery 안내서를 확인하십시오 (참고 –이 플러그인은 이전에 Visual Composer라고했기 때문에 미리 혼동하여 죄송합니다).

탭 워드 프레스 플러그인 설치

탭 무료 워드 프레스 플러그인

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

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

무료 버전을 사용하고 있지만 나중에 추가 기능으로 업그레이드하려면 프리미엄 버전이 있습니다..

탭 워드 프레스 플러그인 설치

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

탭 워드 프레스 플러그인 설치

그런 다음 활성화 단추. 이제 탭 응답 형 WordPress 플러그인을 사용할 수 있습니다. 이제이 플러그인이 제공하는 것을 발견하기 위해 몇 개의 탭을 만들어 봅시다..

탭 반응 형 WordPress 플러그인 구성

플러그인을 활성화하면 WordPress 관리 메뉴에 새 항목이 추가됩니다. 새 탭을 만들려면 반응 형 탭> 새 탭 추가 아래 스크린 샷에서 자세히 설명 하듯이.

탭 반응 형 워드 프레스 플러그인을 사용하여 새 탭 추가

이렇게하면 보스처럼 멋진 탭을 만드는 데 필요한 모든 기능이 가득한 탭 응답 빌더가 표시됩니다. 무엇을 기대할 수 있는지 아래 이미지를 참조하십시오.

탭 반응 워드 프레스 플러그인 탭 빌더

꽤 스크롤 아닌가요? 오른쪽 사이드 바에서 대부분의 기능을 찾을 수 있습니다. 또한 개별 탭에는 설정이 있습니다. 탭에서 WYSIWYG 편집기를 사용할 수도 있습니다. 즉, 탭을 충분히 제어 할 수 있습니다..

이제 몇 개의 샘플 탭을 만들어 페이지 나 게시물에 표시하겠습니다..

제목 추가

탭 제목 추가

위의 그림과 같이 탭에 설명 제목 (탐색 메뉴와 마찬가지로)을 제공하십시오. 이렇게하면 나중에 편집해야 할 경우 WordPress 관리 대시 보드에서 탭을 쉽게 식별 할 수 있습니다. 이 튜토리얼의 목적을 위해 탭 “테스트 홈 탭”을 세례 화했습니다.

탭 디자인 템플릿 선택

탭 디자인 템플릿 선택

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

탭 추가

그런 다음 아래 표시된대로 원하는만큼 탭을 추가하십시오..

새 탭 추가

우리는 당신이 할 수있는 일을 자세히 설명하는 번호 매기기 목록을 만들었습니다. 탭 추가 위의 섹션. 각 영역에 해당하는 숫자.

  1. 탭 제목 –이 필드에 탭 제목을 추가하십시오 (예 :. 설명, 사양, 세부 사항, 기타.
  2. 탭 설명 – 여기에 탭 설명을 추가하십시오. 이 필드에서는 탭의 내용을 추가 할 수 있습니다. 가장 좋은 점은 WYSIWYG 편집기 (아래 3 번 참조)를 사용하여 이미지, 음악 및 비디오를 포함하여 탭에 풍부한 내용을 추가 할 수 있다는 것입니다
  3. WYSIWYG 사용 – 익숙한 사람을 사용하려면 모자-와이ou-에스ee-나는에스-모자-와이ou-et 편집기로 탭 내용을 만들려면이 버튼을 눌러 팝업 창을 시작하십시오.
  4. 탭 아이콘 –이 필드를 사용하면 탭에서 사용할 아이콘을 선택할 수 있습니다. 탭 워드 프레스 플러그인은 프로처럼 탭을 재즈하기 위해 많은 글꼴 멋진 아이콘에 액세스 할 수 있습니다
  5. 아이콘 위에 표시 – 아이콘과 함께 탭 제목을 표시하려면이 기능이 마음에 듭니다. 또한 탭 제목을 터치하지 않고도 아이콘을 비활성화 할 수 있습니다
  6. 지우다 – 특정 탭을 삭제하려면이 버튼을 누르십시오
  7. 새 탭 추가 – 더 많은 탭을 추가하려면이 버튼을 클릭하십시오
  8. 모두 삭제 – 모든 탭에 지쳤습니까? 그냥 모두 삭제 모든 것을 재설정하는 버튼

당신을 도울 수있는 몇 가지 보너스 팁. 먼저, 탭을 드래그 앤 드롭하여 순서를 변경하고 원하는대로 정렬 할 수 있습니다..

둘째 – 명중하는 것을 잊지 마십시오 임시 보관함에 저장 탭을 만들 때 실수로 탭 작성기에서 벗어날 때 변경 사항을 잃지 않도록 버튼을 한두 번.

마지막으로 – 지원이 필요한 경우 큰 파란색이 있습니다. 지원을 받다 바로 아래 버튼 탭 추가 섹션 및 대부분의 플러그인 페이지에서 WordPress.org의 공식 탭 지원 포럼으로 연결됩니다. 언제든지 도움이 필요하면 언제든지 지원 버튼을 누르십시오..

탭 단축

탭 단축 코드

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

탭 위젯

탭 위젯 지원

웹 사이트의 위젯 영역에 탭을 추가하려고하십니까? 그 말이 맞다면 탭 워드 프레스 플러그인과 함께 제공되는 위젯 지원을 좋아할 것입니다..

때리는 여기를 클릭하십시오 위 이미지의 링크를 클릭하면 WordPress 위젯 화면으로 이동합니다. 여기서 테마의 위젯 영역이있는 위치에 탭을 자유롭게 추가 할 수 있습니다..

탭 위젯

맞춤 CSS

탭 워드 프레스 플러그인에는 다양한 탭 사용자 정의 옵션이 제공되지만 (오른쪽 사이드 바에서 한 눈에 볼 수 있습니다. 스타일 옵션으로 가득합니다!) 아래에 표시된대로 고유 한 사용자 정의 CSS 스타일을 추가 할 수 있습니다..

탭 워드 프레스 플러그인 사용자 정의 CSS

또한 간단하게 클릭하여 모든 새 탭에 대한 사용자 정의 설정을 기본 설정으로 설정할 수 있습니다 기본 설정 업데이트 위 이미지와 같이 버튼.

오른쪽 사이드 바

탭 워드 프레스 플러그인 스타일 옵션

위 이미지에서 강조 표시된 오른쪽 사이드 바에는 진정으로 하루가 있습니다. 이 탭에는 마음의 내용에 맞게 탭의 스타일을 지정하는 데 필요한 모든 옵션이 들어 있습니다. 주목할만한 옵션은 다음과 같습니다.

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

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

탭 내용 및 스타일 옵션을 추가 한 후 위로 스크롤하여 게시 아래와 같이 버튼.

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

게시물 편집기를 실행합니다 (사용중인 경우에도) 구텐베르크)하고 단축 코드를 게시물 / 페이지에 붙여 넣습니다. 그 후 게시 아래와 같이 버튼.

약 5 분 동안 설정 한 후; 나는 Twenty Seventeen 테마와 많은 Lorem Ipsum을 사용하고 있는데 다음과 같은 결과를 얻었습니다..

색상이나 기타 항목을 맞춤 설정하지 않았습니다. 네가 어떻게 생각하는지 내게 말해 줘; 그렇게 쉽지 않았다?


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

WordPress 페이지와 게시물에 탭을 어떻게 추가합니까? 가장 좋아하는 WordPress 플러그인은 무엇입니까? 의견에 의견을 공유하십시오. 행복한 창조!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map