[워드프레스] 페이지나 글마다 다른 사이드바 사용하기

[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=””][fusion_builder_row][fusion_builder_column type=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”no”][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=””]

[워드프레스] 페이지나 글마다 다른 사이드바 사용하기

페이지나 글 혹은 카테고리 등에 따라 다른 위젯을 사용하려는 경우 Widget Options와 같은 플러그인을 사용할 수 있습니다(“페이지별/장치별 위젯 표시 여부를 설정하는 Widget Options” 참고). 개인적으로는 깔끔하게 코드 한 두 줄로 쉽게 위젯을 원하는 곳에 표시하거나 표시되지 않도록 할 수 있는 Widget Logic을 선호하지만 이 플러그인은 2년 이상 업데이트가 되지 않았기 때문에 문제가 발생할 소지가 있습니다.

Widget Options을 활용하면 페이지나 글, 카테고리 등에 따라 특정 위젯을 표시하거나 숨겨서 페이지/글마다 사이드바에 표시되는 요소를 달리 할 수 있습니다. 이와 달리 페이지나 글에 따라 사이드바 자체를 다르게 지정하려는 경우 아래에서 설명하는 방법을 참고해보시기 바랍니다.

[이 글은 2017년에 작성되었지만, 그 동안 업데이트된 내용을 반영하고 내용을 새로 추가하여 재발행되었습니다.]

Custom Sidebars – 워드프레스용 동적 위젯 영역 관리 플러그인

Widget Options와 같은 플러그인과 달리 사이드바를 여러 개 만들어서 원하는 페이지나 글에 표시할 수 있는 방법이 있습니다. Custom Sidebars라는 플러그인을 사용하면 워드프레스의 개별 페이지나 글에 대하여 사용자가 지정한 위젯 영역을 표시할 수 있습니다.

커스텀 사이드바

Custom Sidebars는 현재 20만 개 이상의 사이트에 사용되고 있는 인기 플러그인 중 하나입니다. 그리고 다행히 업데이트도 자주 되는 것 같습니다.

이 플러그인을 설치하여 테스트해보니, 테마 디자인 (또는 외모) > 위젯에서 새로운 사이드바를 만들어서 구성할 수 있고, 페이지 등에서 다른 사이드바를 선택할 수 있는 옵션이 표시되었습니다.

실제 어떻게 작동하는지를 다음 유튜브 동영상을 통해 살펴볼 수 있습니다.

페이지 빌더 사용

비주얼 컴포저(현재 명칭 “WPBakery Page Builder) 같은 페이지 빌더를 사용하면 페이지의 경우 사이드바를 배치할 수 있습니다. 가령, 페이지 템플릿을 전체 폭 페이지 템플릿(Full-width)을 선택하고 콘텐츠 부분과 사이드바 부분을 적절히 배분한 후에 사이드바 부분에 위젯 영역(Widgetised Sidebar)을 할당할 수 있습니다.

비주얼 컴포저 사이드바 추가하기

요즘 나오는 대부분의 페이지 빌더에서 이러한 기능을 제공합니다. 아바다 테마의 Fusion Builder에서는 Widget Area 요소를 선택할 수 있습니다.

아바다 테마의 위젯 영역 요소

Divi 테마에서도 사이드바 모듈을 선택하여 위젯 영역을 할당할 수 있습니다.

Divi 테마 - 사이드바 모듈

테마에 포함된 기능 사용 (글/페이지 옵션)

참고로 AvadaEnfold, Newspaper, Jupiter 등 일부 유료 테마에서 사이드바를 설정할 수 있는 옵션을 별도로 제공합니다.

다음은 엔폴드 테마에서 제공되는 사이드바 선택 옵션입니다.

Enfold 테마에서 제공되는 사이드바 선택 옵션

이 블로그에 사용 중인 뉴스페이퍼에서는 개별 글/페이지 편집 화면 하단의 Post Settings 섹션에서 해당 글/페이지에만 다른 사이드바를 선택할 수 있습니다.

워드프레스 뉴스페이퍼 테마
뉴스페이퍼 테마에서 제공되는 Custom sidebar(사용자 정의 사이드바) 선택 옵션

아바다 테마의 경우 “워드프레스 아바다 테마에서 페이지/글마다 다른 사이드바 사용하기“에서 개별 글/페이지에 대하여 다른 사이드바를 지정하는 방법을 참고할 수 있습니다.

테마에서 사이드바를 새롭게 생성하여 지정할 수 있는 옵션이 없는 경우 Custom Sidebars나 Widget Options 등의 플러그인을 사용해볼 수 있습니다.

출처 : https://www.thewordcracker.com/basic/%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%ed%8e%98%ec%9d%b4%ec%a7%80%eb%82%98-%ea%b8%80%eb%a7%88%eb%8b%a4-%eb%8b%a4%eb%a5%b8-%ec%82%ac%ec%9d%b4%eb%93%9c%eb%b0%94-%ec%82%ac%ec%9a%a9%ed%95%98/

[/fusion_text][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

포스트에서 특성이미지 숨기기

[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=””][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” last=”no”][fusion_title hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”1″ font_size=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” style_type=”default” sep_color=””]

개별 글에서 특성 이미지(썸네일)가 표시되지 않도록 설정하는 방법

워드프레스 테마에 따라 개별 글의 본문 상단에 특성 이미지(썸네일 이미지)가 표시되는 경우가 있습니다.

워드프레스 뉴스페이퍼 테마

위의 그림은 Newspaper 테마의 개별 글(Single Post)에 특성 이미지가 표시되는 경우를 보여주고 있습니다. (※ 워드프레스가 업데이트되면서 용어가 ‘특성 이미지’에서 ‘대표 이미지’로 바뀌었습니다.)

테마 옵션에서 제어하기

개별 글 상단에 특성 이미지(대표 이미지)가 표시되지 않도록 하고 싶은 경우가 있을 수 있습니다. 이 경우 먼저 테마 옵션에서 싱글 포스트에 특성 이미지를 표시하거나 숨기는 옵션을 제공하는지 체크하도록 합니다.

유료 테마에서는 이 기능이 제공되는 경우가 많습니다. 예를 들어, Newspaper 테마에서는 워드프레스 대시보드 > Newspaper > Theme panel > Post Settings > Featured images > Show Featured Image 옵션을 켜거나 끌 수 있습니다.

워드프레스 Newspaper 테마

베스트셀링 테마인 아바다(Avada)에서는 Avada > Theme Options > Blog > Blog Single Post > Featured Image / Video on Single Post 옵션을 On 또는 Off로 설정할 수 있습니다.

아바다 테마 옵션

CSS로 숨기기

사용하는 테마의 테마 옵션에 블로그 싱글 포스트의 썸네일 이미지를 표시하지 않도록 하는 옵션이 제공되지 않는 경우에는 CSS로 숨기는 방법을 이용할 수 있습니다.

예를 들어, Twenty Seventeen 테마에서는 다음 CSS 코드를 사용할 수 있습니다.

.single-featured-image-header {
display: none;
}

CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS 섹션에 추가하면 됩니다.

이 방법은 매우 간편하지만 실제로는 대표 이미지가 브라우저에서 로드되지만 CSS에 의해 표시되지 않을 뿐입니다. 특성 이미지가 아예 로드되지 않도록 하면 사이트 성능에 약간의 이득이 있을 것입니다.

개별 글에서 썸네일 이미지가 로드되지 않도록 하려면 테마의 소스를 분석하여 썸네일 이미지를 표시하는 코드를 삭제할 수 있습니다. 테마 소스를 수정하는 경우 반드시 차일드 테마를 이용하세요. 수정해야 할 파일은 테마에 따라 다릅니다(예: single.php 또는 content.php).

예를 들어, Twenty Seventeen 테마의 경우 header.php 파일에서 아래 그림에 하이라이트 표시된 부분을 삭제하면 개별 글과 페이지에서 썸네일 이미지가 표시되지 않습니다.

Twenty Seventeen 테마

출처 : https://www.thewordcracker.com/basic/%EA%B0%9C%EB%B3%84-%EA%B8%80%EC%97%90%EC%84%9C-%ED%8A%B9%EC%84%B1-%EC%9D%B4%EB%AF%B8%EC%A7%80%EA%B0%80-%ED%91%9C%EC%8B%9C%EB%90%98%EC%A7%80-%EC%95%8A%EB%8F%84%EB%A1%9D-%EC%84%A4%EC%A0%95/

[/fusion_title][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

개별 글에서 특성 이미지(썸네일)가 표시되지 않도록 설정하는 방법

워드프레스 테마에 따라 개별 글의 본문 상단에 특성 이미지(썸네일 이미지)가 표시되는 경우가 있습니다.

워드프레스 뉴스페이퍼 테마

위의 그림은 Newspaper 테마의 개별 글(Single Post)에 특성 이미지가 표시되는 경우를 보여주고 있습니다. (※ 워드프레스가 업데이트되면서 용어가 ‘특성 이미지’에서 ‘대표 이미지’로 바뀌었습니다.)

테마 옵션에서 제어하기

개별 글 상단에 특성 이미지(대표 이미지)가 표시되지 않도록 하고 싶은 경우가 있을 수 있습니다. 이 경우 먼저 테마 옵션에서 싱글 포스트에 특성 이미지를 표시하거나 숨기는 옵션을 제공하는지 체크하도록 합니다.

유료 테마에서는 이 기능이 제공되는 경우가 많습니다. 예를 들어, Newspaper 테마에서는 워드프레스 대시보드 > Newspaper > Theme panel > Post Settings > Featured images > Show Featured Image 옵션을 켜거나 끌 수 있습니다.

워드프레스 Newspaper 테마

베스트셀링 테마인 아바다(Avada)에서는 Avada > Theme Options > Blog > Blog Single Post > Featured Image / Video on Single Post 옵션을 On 또는 Off로 설정할 수 있습니다.

아바다 테마 옵션

CSS로 숨기기

사용하는 테마의 테마 옵션에 블로그 싱글 포스트의 썸네일 이미지를 표시하지 않도록 하는 옵션이 제공되지 않는 경우에는 CSS로 숨기는 방법을 이용할 수 있습니다.

예를 들어, Twenty Seventeen 테마에서는 다음 CSS 코드를 사용할 수 있습니다.

.single-featured-image-header {
display: none;
}

CSS 코드는 외모 > 사용자 정의하기 > 추가 CSS 섹션에 추가하면 됩니다.

이 방법은 매우 간편하지만 실제로는 대표 이미지가 브라우저에서 로드되지만 CSS에 의해 표시되지 않을 뿐입니다. 특성 이미지가 아예 로드되지 않도록 하면 사이트 성능에 약간의 이득이 있을 것입니다.

개별 글에서 썸네일 이미지가 로드되지 않도록 하려면 테마의 소스를 분석하여 썸네일 이미지를 표시하는 코드를 삭제할 수 있습니다. 테마 소스를 수정하는 경우 반드시 차일드 테마를 이용하세요. 수정해야 할 파일은 테마에 따라 다릅니다(예: single.php 또는 content.php).

예를 들어, Twenty Seventeen 테마의 경우 header.php 파일에서 아래 그림에 하이라이트 표시된 부분을 삭제하면 개별 글과 페이지에서 썸네일 이미지가 표시되지 않습니다.

Twenty Seventeen 테마

참고:

 

 

 

출처 https://www.thewordcracker.com/basic/%EA%B0%9C%EB%B3%84-%EA%B8%80%EC%97%90%EC%84%9C-%ED%8A%B9%EC%84%B1-%EC%9D%B4%EB%AF%B8%EC%A7%80%EA%B0%80-%ED%91%9C%EC%8B%9C%EB%90%98%EC%A7%80-%EC%95%8A%EB%8F%84%EB%A1%9D-%EC%84%A4%EC%A0%95/