CodeWatchers

WordPress의 헤더에 위젯을 추가하는 방법

Muneeb 워드프레스 튜토리얼 Feb 21, 2022

모든 테마에서 헤더 영역에 WordPress 위젯을 추가할 수 있는 것은 아닙니다. 그러나 훨씬 더 나은 모양을 얻기 위해 위젯을 사용하여 WordPress 헤더에 콘텐츠 블록을 포함할 수 있습니다.

WordPress의 헤더에 위젯을 추가하는 방법

헤더 영역에서 WordPress 위젯을 사용하기 위해 사용하는 두 가지 방법이 있습니다. 이 튜토리얼에서는 헤더 영역에서 WordPress 위젯을 사용하는 방법을 이해합니다.

웹사이트 헤더에 WordPress 위젯을 추가해야 하는 이유

누군가 귀하의 WordPress 웹사이트를 방문하면 헤더가 첫 번째 항목 중 하나라는 것을 알게 될 것입니다. 헤더에 WordPress 위젯을 추가하여 독자의 관심을 끌 수 있도록 이 섹션을 개선할 수 있습니다.

방문자가 사이트를 탐색하는 데 도움이 되도록 고유한 로고와 탐색 메뉴가 웹사이트 헤더에 포함되는 경우가 많습니다. 또한 헤더 위젯을 사용하여 이 섹션 위 또는 아래에 유용한 콘텐츠, 배너 광고, 기간 한정 특별 상품, 한 줄 형식 등을 표시할 수 있습니다.

놀라운 웹사이트 만들기

최고의 무료 페이지 빌더 Elementor와 함께

지금 시작

WordPress 테마 옵션을 사용하여 헤더에 WordPress 위젯을 추가하는 방법

헤더 위젯 섹션은 많은 상위 WordPress 테마에 포함되어 있으며 원하는 대로 편집할 수 있습니다. 먼저 기존 WordPress 테마가 헤더의 위젯 섹션으로 구성되어 있는지 확인합니다.

이 옵션을 확인하려면 모양 으로 이동한 다음 사용자 정의 로 이동하여 헤더를 편집할 수 있는지 확인하십시오.

헤더를 편집하고 WordPress 위젯을 추가할 수 있는 필드로 이동합니다. 화면 하단에서 헤더와 그 위아래 공백을 변경할 수 있습니다. 빈 영역 중 하나 위에 마우스를 올려 놓은 상태에서 더하기 기호를 클릭하기만 하면 됩니다.

나타나는 팝업 메뉴에서 위젯 1 을 선택할 수 있습니다. 더 많은 가능성을 사용할 수 있지만 헤더 위젯을 준비하려면 위젯 옵션 중 하나를 선택해야 합니다.

헤더 사용자 정의 섹션에서 위젯 1 상자를 클릭하여 헤더에 위젯 영역을 추가하면 다음 단계에서 위젯을 추가할 수 있습니다.

다음으로, 블록을 필드에 추가하고 선택하려는 위젯을 선택해야 합니다.

같은 방법을 사용하여 원하는 만큼 위젯을 추가하도록 선택할 수 있습니다. 모든 설정이 끝나면 모든 변경 사항을 게시 하고 저장하십시오.

코딩을 사용하여 웹사이트 헤더에 WordPress 위젯을 추가하는 방법

약간의 코딩으로 동일한 작업을 수행할 수 있기 때문에 WordPress 테마가 웹사이트 헤더에 WordPress 위젯 추가를 지원하지 않는 경우 문제가 되지 않습니다.

코드 조각을 사용하려면 세 가지 옵션이 있습니다. 사이트별 플러그인인 functions.php 파일에 배치하거나 코드 스니펫 플러그인 을 사용할 수도 있습니다.

이제 위에 제공된 세 가지 옵션 중 하나를 사용하여 다음 코드를 붙여넣습니다.

function wpb_widgets_init() {
 
    register_sidebar( array(
        'name'          => 'Custom Header Widget Area',
        'id'            => 'custom-header-widget',
        'before_widget' => '<div class="chw-widget">',
        'after_widget'  => '</div>',
        'before_title'  => '<h2 class="chw-title">',
        'after_title'   => '</h2>',
    ) );
 
}
add_action( 'widgets_init', 'wpb_widgets_init' );

이 코드는 테마를 위한 새 사이드바 또는 위젯 준비 공간을 만듭니다. 모양에서 위젯 옵션으로 이동하면 사용자 정의 헤더 위젯 영역 이 표시됩니다.

이제 이 영역에 위젯을 추가하고 웹사이트에 실시간으로 변경 사항을 표시할 수 있습니다.

이렇게 하려면 테마의 header.php 파일을 업데이트해야 합니다. 그런 다음 위젯을 표시할 위치에 다음 코드를 붙여넣습니다.

<?php
 
if ( is_active_sidebar( 'custom-header-widget' ) ) : ?>
    <div id="header-widget-area" class="chw-widget-area widget-area" role="complementary">
    <?php dynamic_sidebar( 'custom-header-widget' ); ?>
    </div>
 
<?php endif; ?>

이 코드는 이전에 구축한 위젯 영역을 웹사이트의 헤더 영역에 배치합니다.

헤더 위젯 영역을 사용자 정의하기 위해 WordPress에 CSS를 추가해야 할 수도 있으며, 테마에 따라 그 안의 각 위젯이 표시됩니다. CSS를 모르는 경우 CSS Hero 와 같은 플러그인을 대신 사용할 수 있습니다.

추가 CSS 옵션이 있는 모양에서 사용자 정의 로 이동하십시오.

이를 통해 테마에 새 CSS를 즉시 추가하고 실시간으로 결과를 볼 수 있습니다. 다음 코드를 샘플로 사용하여 시작할 수 있습니다.

div#header-widget-area {
    width: 100%;
    background-color: #f7f7f7;
border-bottom:1px solid #eeeeee;
    text-align: center;
        padding: 20px;
}
h2.chw-title {
    margin-top: 0px;
    text-align: left;
    text-transform: uppercase;
    font-size: small;
    background-color: #feffce;
    width: 130px;
    padding: 5px;
    }

변경 사항을 저장하려면 CSS 추가를 완료한 후 게시 버튼을 클릭합니다.

다음 두 가지 방법에 따라 웹사이트 헤더에 WordPress 위젯을 추가할 수 있습니다. 이것이 이 튜토리얼의 전부입니다. 우리의 게시물에 대한 최신 정보를 얻으려면 Facebook 및 Twitter 에 가입하십시오.

Divi WordPress Theme