모든 WordPress 페이지 또는 게시물 유형에 대해 콘텐츠 인식 사이드바를 표시하는 방법

게시 됨: 2017-06-23

자, 콘텐츠 인식 사이드바에 대해 이야기해 보겠습니다. 그러나 그 전에 먼저 사이드바에 대해 일반적으로 이야기해야 합니다.

일반적인 사이드바는 웹 디자인과 많은 WordPress 테마의 필수 요소입니다. 연락처 양식, 최신 또는 가장 인기 있는 블로그 게시물, 광고 또는 사이트의 주요 매력이 아닌 기타 정보와 같은 추가 정보를 표시하기에 좋은 위치입니다. 최근에는 사이드바가 없는 한 페이지 디자인으로 트렌드가 바뀌었지만 여전히 인기 있는 요소입니다.

대부분의 경우 웹 사이트의 사이드바는 현재 어느 페이지에 있든 동일한 콘텐츠를 표시합니다. 그러나 이것이 항상 최적의 방법은 아닙니다. 사실, 사용자 정의 사이드바를 수반하는 콘텐츠를 알고 있는 다른 페이지나 게시물에 표시해야 하는 많은 이유가 있습니다.

이러한 이유로 이 기사에서는 이 주제에 대해 더 자세히 이야기하고자 합니다. 먼저 콘텐츠 인식 사이드바의 사용 사례를 보여드리겠습니다. 이렇게 하면 그들이 당신에게 의미가 있는지 이해할 수 있을 것입니다. 그런 다음 WordPress 웹 사이트에서 이러한 유형의 사이드바를 구현하는 방법을 계속 설명합니다.

갈 준비가 되셨나요? 그럼 파헤쳐 보겠습니다.

콘텐츠 인식 사이드바의 요점은 무엇입니까?

무엇보다 먼저 사이드바 옆에 표시되는 콘텐츠에 따라 사이드바를 사용자 정의하는 데 귀찮은 이유에 대해 이야기해 보겠습니다. 결국 정적 사이드바는 오랫동안 사용되어 왔으며 여전히 트릭을 수행하는 것 같습니다. 왜 작업 시스템을 엉망으로 만들까요?

결과적으로 콘텐츠 인식 사이드바를 사용하는 것이 합리적인 사용 사례가 많이 있습니다.

온보딩 — 처음 방문자는 일반 방문자와 다른 콘텐츠가 필요할 수 있습니다. 예를 들어, 로그인한 사용자는 사람들이 귀하의 사이트나 이메일 목록에 가입하도록 하기 위한 "가입" 클릭 유도문안을 볼 필요가 없습니다.
맞춤형 정보 — 일부 정보는 다른 페이지보다 일부 페이지에서 더 의미가 있습니다. 예를 들어 연락처 페이지의 추가 연락처 정보, 블로그 페이지의 최고 또는 최신 기사, 쇼핑 페이지의 특별 행사가 있습니다.
향상된 SEO — 주요 요소는 아니지만 사이드바 콘텐츠는 검색 엔진 최적화에 여전히 중요합니다(특히 위젯 제목이 제목 태그로 적절히 래핑된 경우). 따라서 콘텐츠 인식 사이드바를 사용하여 페이지를 더욱 타겟팅할 수 있습니다.
클릭 유도문안 — 이 유형의 사이드바를 사용하여 웹사이트의 다양한 위치에 대한 클릭 유도문안을 사용자 정의할 수도 있습니다.
언어 — 또한 사이트의 다양한 언어 버전에 대한 사이드바를 만들고 다양한 시장을 타겟팅할 수 있습니다.

보시다시피 콘텐츠 인식 사이드바를 사용해야 하는 몇 가지 이유가 있으며 이 목록은 완전하지 않습니다. 그러나 이제 이를 구현하는 방법에 중점을 두겠습니다.

WordPress에서 콘텐츠 인식 사이드바를 구현하는 방법

게시물 및 페이지에 대한 사용자 정의 사이드바를 설정하는 세 가지 주요 방법이 있습니다. 이들 모두의 공통점은 사이드바가 표시되는 페이지 또는 게시물에 따라 사이드바의 내용이 변경된다는 것입니다. 조건에는 WordPress 태그, 카테고리, 페이지 이름 또는 사용자 로그인 여부와 같은 기타 속성이 포함됩니다.

그 후 사이드바는 일반적으로 다음 세 가지 방법 중 하나로 변경됩니다.

필터 위젯 — 한 사이드바는 위젯으로 채워지고 백그라운드에서 어떤 종류의 논리가 어떤 위젯이 어떤 위치에 표시되고 어떤 위젯이 숨겨지는지를 결정합니다.
전체 사이드바 설정 — 다른 방법은 다른 조건이 충족될 때 동일한 위치에 표시되는 완전히 별도의 사이드바를 만드는 것입니다. 여기에는 개별 위젯 구성이 포함될 수 있습니다.
테마에 하드코딩 — 물론, 테마 파일에 맞춤 사이드바를 추가할 수도 있습니다.

저는 개인적으로 두 번째 방법이 가장 질서정연한 사용자 인터페이스를 만드는 방법이라고 생각합니다. 그러나 다음에서 각 방법에 대해 자세히 살펴보고 스스로 결정할 수 있도록 하겠습니다. 그런 다음 WordPress 사이트에서 사용자 지정 사이드바를 구현하는 몇 가지 옵션을 더 나열합니다.

Jetpack 위젯 가시성을 사용하여 위젯 필터링

사이트에서 위젯 모양을 필터링하는 가장 쉬운 방법은 Jetpack에 포함된 적절한 이름의 Widget Visibility 모듈입니다. 사이트에 이미 플러그인이 있는 경우 사용자 정의 사이드바를 만드는 것은 모듈을 활성화하는 것만큼 쉽습니다(기본적으로 활성화되어 있지 않은 경우). 또는 이 독립 실행형 버전을 사용할 수도 있습니다.

위젯 메뉴로 이동하면 모든 위젯에서 새로운 가시성 버튼을 찾을 수 있습니다. 그것을 클릭하면 드롭다운 메뉴를 통해 위젯에 대해 원하는 표시 로직을 쉽게 구현할 수 있습니다.

제트팩 위젯 가시성

가시성 조건은 다음과 같습니다.

카테고리 — 위젯은 특정 카테고리 페이지 또는 전체 페이지에 나타날 수 있습니다.
작성자 — 모든 작성자 페이지에 표시되거나 특정 사용자에게만 표시됩니다.
사용자 — 사용자가 로그인했는지 여부를 확인합니다.
역할 — 사용자 역할에 따라 위젯 제어
태그 — 카테고리 페이지처럼 작동하지만 태그용
날짜 — 아카이브 위젯이 표시되는 날짜 제어
페이지 — 첫 페이지, 게시물 페이지, 아카이브 페이지, 404 오류 페이지, 게시물 유형, 게시물 유형 아카이브 및 정적 페이지에 대한 위젯 가시성을 설정합니다.

각 옵션에 대해 위젯을 표시할지 숨길지를 정의할 수 있습니다. 규칙은 별도로 입력해야 하므로 한 번에 여러 페이지를 입력할 수 없습니다. 그러나 이 방법은 다른 솔루션에서 필요에 따라 수동으로 페이지 ID를 입력하는 것보다 훨씬 더 편리합니다(자세한 내용은 아래 참조). 모든 조건이 유효한 경우에만 위젯이 표시되도록 하는 모든 조건 일치 확인란도 있습니다.

콘텐츠 인식 사이드바를 사용하면 사용자 정의 사이드바를 설정할 수 있습니다.

우리가 이야기하고 싶은 두 번째 솔루션은 Content Aware Sidebars 플러그인입니다. 앞서 언급했듯이 이 플러그인을 사용하면 전체 사이드바를 설정한 다음 위젯으로 채우고 게시물과 페이지에 할당할 수 있습니다. 사용 방법은 매우 간단합니다.

설치 후 WordPress 메뉴에서 Sidebars 라는 새 메뉴 항목을 찾습니다.

콘텐츠 인식 사이드바 메뉴

여기에 새로 추가 를 선택하면 다음 화면이 표시됩니다.

콘텐츠 인식 사이드바 플러그인으로 새 사이드바 추가

여기에서 가장 먼저 할 일은 사이드바의 이름을 지정하는 것입니다. 그런 다음 표시 조건을 설정할 차례입니다. 사용 가능한 옵션은 Jetpack과 유사합니다.

정적 페이지 — 첫 페이지, 검색 결과 또는 404 오류 페이지와 같은 사이드바를 표시할 정적 페이지 선택
게시물 — 위와 동일하지만 게시물의 경우
페이지 — 사이드바를 표시할 사이트 페이지 선택
미디어 — 사이드바가 나타나는 미디어 페이지를 결정합니다.
작성자 — 작성자 페이지로 표시 제한
페이지 템플릿 — 사이드바를 표시할 페이지 템플릿 선택
카테고리 — 특정 카테고리 또는 모든 카테고리 아카이브 선택
태그 — 태그에 대한 동일한 옵션
형식 — 형식 아카이브에 대한 동일한 설정
날짜 — 날짜 아카이브를 위해 한 번 더
URL (Pro 버전만 해당) — 사이드바 표시를 특정 URL로 제한

추가 세팅:

일정 — 사이드바 표시 시간을 설정합니다. 하루 종일 사용할 수 있는 무료 버전에서는 Pro 버전이 더 세분화된 시간 슬롯을 제공합니다.
디자인 — 사이드바, 위젯 및 위젯 제목에 사용자 정의 CSS 클래스를 추가하여
고급 — 사이드바의 순서를 설정합니다(둘 이상인 경우).

그 외에도 사이드바를 서로 병합하고 교체하고 위젯 영역으로 설정하고 로그인한 사용자의 가시성을 제어할 수도 있습니다(Pro에서 사용 가능한 사용자 역할).

구성을 마치면 새 사이드바가 일반 위젯 메뉴에 표시되어 이를 채우고 활성화 및 비활성화하고 과거 개정판을 볼 수도 있습니다. 깔끔하고 쉽습니다.

수동으로 사용자 정의 사이드바 만들기

마지막으로 코딩을 통해 사용자 정의 사이드바를 만드는 것도 가능합니다. WordPress는 이에 대한 많은 옵션을 제공하며 프로세스를 신속하게 검토할 것입니다.

사용자 정의 사이드바를 생성하기 위해 가장 먼저 할 일은 새 위젯 영역을 등록하는 것입니다. 이를 위해 (자식) 테마의 functions.php 에 다음 코드를 입력하기만 하면 됩니다.

function custom_sidebar_init() {
	register_sidebar( array(
		'name'          => 'New Custom Sidebar',
		'id'            => 'custom_sidebar_1',
		'description'   => 'Add widgets here to appear for single posts.',
		'before_widget' => '<section id="%1$s" class="widget %2$s">',
		'after_widget'  => '</section>',
		'before_title'  => '<h2 class="widget-title">',
		'after_title'   => '</h2>',
	) );
}
add_action( 'widgets_init', 'custom_sidebar_init' );
[/php
Of course, you can change the name and other elements to your liking. After saving and uploading to your server, it will now appear in your widget menu where you can add widgets to it as usual.

<img class="with-border aligncenter wp-image-53962 size-full" src="https://www.elegantthemes.com/blog/wp-content/uploads/2017/06/new-widget-area.jpg" alt="new widget area" width="672" height="445" />

However, so far the sidebar doesn't show up anywhere on your site. To change that, you need to add it to the template file(s) of where you want them to show up.

In our example, we want the new sidebar to appear for single posts, so we would input it inside <em>single.php</em> of our theme. In the case of the <em>Twenty Seventeen</em> theme, that means we would exchange this:

<?php get_sidebar(); ?>

이것으로:

<?php if ( is_active_sidebar( 'custom_sidebar_1' ) ) : ?>
	<aside id="secondary" class="widget-area" role="complementary">
		<?php dynamic_sidebar( 'custom_sidebar_1' ); ?>
	</aside><!-- #primary-sidebar -->
<?php endif; ?>

그 후 프론트엔드의 최종 결과는 다음과 같습니다.

작동 중인 새 위젯 영역

물론 추가로 개발할 부분이 있다면 로그인한 사용자에게만 사이드바를 표시하는 등의 조건을 더 추가할 수 있습니다. WordPress 템플릿 계층 구조를 사용하여 표시할 위치에 대해 더 세분화할 수도 있습니다. 가장 역동적인 솔루션은 아니지만 트릭을 수행하고 추가 플러그인을 설치할 필요 없이 백그라운드에서 완전히 작동할 수 있습니다.

콘텐츠 인식 사이드바를 구현하는 추가 방법

위의 옵션 외에도 유사한 기능을 가진 플러그인이 몇 개 더 있습니다.

위젯 로직

콘텐츠 인식 사이드바용 위젯 로직 플러그인

이 플러그인은 Jetpack 솔루션과 유사하게 작동하지만 드롭다운 메뉴 대신 WordPress 조건부 태그를 수동으로 입력해야 합니다. 이렇게 하면 원하는 만큼 많은 규칙에 따라 위젯이 표시되는 위치를 결정할 수 있습니다.

그러나 그렇게 하려면 페이지의 ID를 알아야 하며 전반적으로 위에서 본 것보다 약간 더 기술적입니다. 그것이 작동하지 않고 강력한 플러그인이 아니라는 것을 의미하지는 않지만, 덜 기술적인 사람들은 다른 것을 사용하는 것이 더 나을 수 있습니다.

사용자 정의 사이드바

커스텀 사이드바 워드프레스 플러그인

WPMU DEV에서 만든 모든 위젯 영역에서 작동하는 콘텐츠 인식 사이드바를 설정하는 또 다른 솔루션이 있습니다. 플러그인을 사용하면 모든 게시물, 페이지, 카테고리 아카이브, 게시물 유형 등에 위젯을 동적으로 표시할 수 있습니다. 또한 매우 강력하고 사용하기 쉬운 사용자 인터페이스로 이 모든 작업을 수행합니다. 전체 소개를 보려면 웹 사이트에서 Tom Ewer의 기사를 확인하십시오.

간단한 페이지 사이드바

사용자 지정 사이드바를 만드는 최종 솔루션은 단순성을 위해 만들어졌습니다. 페이지 편집기에서 직접 사이드바를 할당하고 일괄적으로 변경할 수 있습니다. 그렇게 한 후 위젯 메뉴에서 평소와 같이 채울 수 있습니다.

불행히도 고급 사용자 정의 옵션이 없습니다. 그러나 페이지에 대해 다른 사이드바만 사용하려는 경우 이것이 원하는 솔루션일 수 있습니다.

간단히 말해서 콘텐츠 인식 사이드바

사이트에서 맞춤형 사이드바를 사용하는 데에는 여러 가지 이유가 있습니다. 모든 콘텐츠가 옆에 표시되기 위해 동일한 정보가 필요한 것은 아닙니다. 콘텐츠 인식 사이드바를 사용하면 하나의 표준 사이드바를 사용하는 대신 적절한 내용을 표시할 수 있습니다.

이 자습서에서는 사용자 지정 사이드바를 만드는 몇 가지 방법을 배웠습니다. 위젯 필터링부터 완전히 새로운 사이드바 생성, 테마에 코딩까지 모든 것이 있습니다.

이 정보로 무장하여 이제 청중에게 향상된 사용자 상호 작용 및 서비스에 필요한 사이드바 콘텐츠를 제공할 수 있습니다. 시도 해봐!

콘텐츠 인식 사이드바에 대한 경험은 어떻습니까? 아래 의견 섹션에서 알려주십시오!

Kit8.net/Shutterstock.com의 기사 축소판 이미지