구텐베르크용 워드프레스에서 탭 콘텐츠를 추가하는 방법

Wondering how to add tabbed content in WordPress for Gutenberg is familiar. But newbies still need help using it and wonder if it is required. In this blog, we’ll share the details on how to use tabbed content, why you should use it, and how easily you can do it in a few steps.

사용자 친화적인 웹사이트를 만들려면 콘텐츠를 접근 가능한 섹션으로 구성하세요. 효과적인 방법 중 하나는 워드프레스 사이트에 탭 콘텐츠를 추가하는 것입니다.

Tabbed content mostly allows you to group related information into tabs. It makes it easier for visitors to navigate and find the content they want. Without blabbering let’s get started, shall we?

탭 콘텐츠란 무엇인가요?

탭 콘텐츠는 콘텐츠가 섹션으로 나뉘고 각 섹션이 탭으로 연결된 디자인입니다. 사용자는 스크롤하거나 페이지를 벗어나지 않고도 탭 사이를 전환하여 다른 섹션을 볼 수 있습니다. 이 디자인은 웹사이트, 앱 및 소프트웨어에서 정보를 효율적으로 구성하기 위해 일반적으로 사용됩니다.

탭 콘텐츠 섹션을 추가하는 이유는 무엇인가요?

탭 콘텐츠는 사용자 경험과 웹사이트 기능을 향상시키는 여러 가지 이점을 제공합니다. 다음은 워드프레스 사이트에 탭 콘텐츠 섹션을 추가하는 주요 이유 중 일부입니다:

• 빠른 탐색: 쉽게 찾고 액세스할 수 있습니다.
• 집중된 관심: 탭 아래에 관련 콘텐츠를 그룹화하면 사용자가 한 번에 한 섹션에 집중할 수 있습니다. 이렇게 하면 정보 과부하가 줄어듭니다.
• 향상된 미학: 탭은 보다 깔끔하고 정돈된 페이지 레이아웃에 기여합니다.
• 효율적인 공간 사용: 탭을 사용하면 페이지를 깔끔하게 유지하면서 더 많은 콘텐츠를 더 작은 공간에 표시할 수 있습니다.
• 이탈률 감소: 탭은 탐색과 사용자 참여를 개선하여 이탈률을 낮추고 SEO를 향상시킵니다.
• 더 빨라진 로드 시간: 탭은 필요한 콘텐츠만 로드합니다. 이렇게 하면 페이지 로드 시간을 단축할 수 있습니다.

플러그인 없이 구텐베르크용 워드프레스에서 탭 콘텐츠를 추가하는 방법은 무엇인가요?

Creating tabs within the WordPress Gutenberg editor enhances your content’s readability and organization. You can create tabbed content using the default blocks available in Gutenberg.

1단계: 콘텐츠 준비

탭 만들기를 시작하기 전에 각 탭 아래에 포함할 콘텐츠를 계획하세요. 이렇게 하면 디자인 과정에서 콘텐츠를 더 쉽게 구성할 수 있습니다.

2단계: 탭을 위한 새 섹션 만들기

먼저 새 글 또는 페이지를 작성하거나 탭을 추가할 기존 글을 편집합니다. 탭을 추가하려면 “+” 버튼을 클릭하여 블록을 추가합니다. 그룹 블록을 검색하여 선택합니다. 이 블록은 탭의 컨테이너 역할을 합니다.

3단계: 탭 제목 디자인하기

그룹 블록 내에서 열 블록을 추가합니다. 만들려는 탭 수와 동일한 열 수를 선택합니다. 예를 들어 3개의 탭이 필요한 경우 3개의 열 레이아웃을 선택합니다. (선택 사항)

Within each column, add a Buttons block. Inside each Button block, add a Button block for the tab title. Customize the button text to reflect the tab content (e.g., “Tab 1”, “Tab 2”, “Tab 3”).

4단계: 링크 추가

각 탭 버튼을 클릭하고 임시 링크를 사용하여 “#tab”. 이를 통해 개별 버튼을 특정 콘텐츠와 연결할 수 있습니다.

5단계: 내비게이션 추가

어머니 탭을 클릭하고 중앙 집중화합니다. 이제 고급 탭 블록을 클릭하고 CSS “tabs-nav”. 나중에 코딩할 때 이 정보가 필요합니다.

6단계: 미디어 및 텍스트 추가

이제 “+” 을 클릭하고 미디어 및 텍스트. 이 위젯을 사용하면 이미지와 콘텐츠를 동시에 추가할 수 있습니다.

표시하려는 이미지와 콘텐츠를 추가합니다. 간격과 패딩을 추가할 수 있습니다.

7단계: 복제

다른 탭에 대한 콘텐츠를 더 만들 수 있습니다. 또는 첫 번째 탭을 복제하고 콘텐츠를 편집할 수 있습니다.

8단계: 클래스 ID

이제 버튼 링크에 추가한 것과 동일한 아이디와 클래스를 추가합니다. 미디어 및 텍스트 > 블록 > 고급을 클릭하고 HTML 앵커를 추가합니다. 추가 CSS에 콘텐츠를 추가합니다.

9단계: 게시

이제 페이지를 게시합니다. 하지만 이것이 끝이 아닙니다. 따라야 할 몇 가지 단계가 있습니다.

10단계: 스니펫

이제 워드프레스 대시보드로 이동하여 스니펫 플러그인을 활성화합니다. 이미 가지고 있다면 새 스니펫 추가를 클릭하고 탭을 연결할 스니펫을 만듭니다. 코드를 복사하여 생성한 스니펫에 붙여넣고 변경 사항을 저장합니다.

<script src=’https://code.jquery.com/jquery-3.6.0.min.js’></script>    

<script>

$(document).ready(function(){

$(‘.tab-content’).hide();

    $(‘.tab-content:first’).show();

  $(‘.tabs-nav .wp-block-button__link’).click(function() {

    let currentTab = $(this).attr(‘href’);

    $(‘.tab-content’).hide();

    $(currentTab).fadeIn();

    거짓을 반환합니다;

  });

});

</script>

스니펫은 다음과 같이 표시되어야 합니다. HTML 섹션에 코드를 추가했는지 확인하세요. 그리고 “<>Display in site section”. 저장 후 활성화합니다.

11단계: 미리보기

이제 페이지를 보고 모든 것이 제대로 작동하는지 확인하세요.

ZoloBlocks로 구텐베르크용 워드프레스에서 탭 콘텐츠를 추가하는 방법은 무엇인가요?

If you’re not comfortable working with code or want a more user-friendly approach, you can use a plugin like ZoloBlocks 를 클릭해 탭 콘텐츠를 추가하세요. ZoloBlocks는 구텐베르크용 사용자 친화적인 블록 라이브러리 플러그인입니다.

미리 디자인된 다양한 위젯이 제공되어 웹사이트를 더욱 유연하고 재미있게 만들 수 있습니다. 간단한 4단계로 ZoloBlocks로 워드프레스 웹사이트에 탭을 추가하는 방법을 보여드렸습니다.

1단계: ZoloBlocks 플러그인 설치하기

워드프레스 대시보드로 이동합니다. 다음으로 이동합니다. 플러그인 > 신규 추가. 검색 “ZoloBlocks“. Install and activate the plugin.

2단계: ZoloBlocks 탭 콘텐츠 블록 추가하기

탭 콘텐츠를 추가하려는 글 또는 페이지를 엽니다. 탭에서 “+” 를 검색하고 “Tabs” 를 입력합니다. ZoloBlocks에서 제공하는 탭 블록을 선택합니다.

3단계: 콘텐츠 추가

탭 내에서 콘텐츠, 이미지, 버튼 등을 원하는 방식으로 추가할 수 있습니다. 여기서는 다음을 선택했습니다. 탭 > 탭 1 > 칼럼 (50:50) > 이미지 > 단락. 또는 미디어 및 텍스트를 추가하여 훨씬 쉽게 처리할 수 있습니다.

4단계: 변경 사항 게시

After you’ve customized the tabbed content, simply publish or update your page. ZoloBlocks will handle the necessary styling and scripting.

최종 생각

페이지에 탭을 추가하면 정보가 표시되고 액세스되는 방식을 크게 개선할 수 있습니다. 이렇게 하면 콘텐츠를 더 쉽게 구성하고 사용자 경험을 향상시킬 수 있습니다. 코딩을 통해 또는 ZoloBlocks와 같은 플러그인을 사용하여 이 작업을 수행할 수 있습니다.

한 가지 큰 소식은 ZoloBlocks가 확장되어 더 많은 창의적인 위젯이 추가되었다는 것입니다. 새롭고 색다른 것을 경험하고 싶다면 ZoloBlocks가 최고의 소스입니다. Get ZoloBlocks 지금!

자주 묻는 질문