WordPress에 사이드바를 추가하는 방법 » 궁극적인 단계별 가이드

게시 됨: 2020-01-22

WordPress에 사이드바를 추가하는 방법 WordPress 사이트를 만들 때 WordPress 사이트의 레이아웃 섹션 중 하나로 사이드바를 추가해야 합니다. 기본 HTML 사이트에서 사이드바를 만드는 것은 사이드바 태그 <aside> </aside>만 사용하면 되므로 간단하지만 WordPress에 사이드바를 추가하려면 다른 접근 방식이 필요합니다.

사이드바 템플릿 태그: WordPress에서 사이드바가 표시되는 방식

WordPress는 템플릿 태그와 함께 작동하고 헤더는 get_header() 함수로 호출되고 바닥글은 get_footer() 함수로 호출된다는 것을 기억하는 것이 중요합니다. 사이드바의 경우 get_sidebar() 템플릿 태그와 함께 표시됩니다.

이 템플릿 태그는 WordPress 사이드바를 추가하려는 모든 위치에 추가할 수 있습니다. 그러나 WordPress 사이드바를 표시하기 시작하기 전에 템플릿에서 호출하기 전에 테마 코드에 존재하도록 생성 방법을 배워야 합니다.

WordPress에 사이드바를 추가하려면 두 가지 주요 단계를 따라야 합니다. 이러한 단계에는 다음이 포함됩니다. 사이드바 등록, 사이드바 호출

WordPress에 사이드바를 단계별로 추가하는 방법

WordPress에 새 사이드바를 성공적으로 추가하거나 WordPress에서 사용자 정의 사이드바를 생성하려면 다음 단계를 따라야 합니다.

먼저 WordPress 테마의 백업 복사본을 만듭니다.
상위 WordPress 테마에서 하위 테마를 만들고 하위 테마에는 functions.php 파일이 있어야 합니다.
이 하위 테마의 functions.php 파일 내에서 register_sidebar() 함수를 사용하여 사이드바를 생성합니다.
sidebar.php 파일을 만들고 이 파일에 다음과 같이 사이드바 이름으로 dynamic_sidebar() 함수를 추가합니다. dynamic_sidebar( 'sidebar-1' ) 여기서 sidebar-1은 사이드바를 등록할 때 추가한 사이드바의 ID입니다.
테마 템플릿 파일 에서 이제 get_sidebar() 템플릿 태그 를 사용하여 사이드바를 호출 할 수 있습니다.
사용자 정의 사이드바를 만든 경우 dynamic_sidebar() 함수를 사용하여 사용자 정의 사이드바를 표시할 수 있습니다.

WordPress 사이드바의 구조

WordPress의 사이드바 작동 방식을 깊이 이해하려면 사이드바 코드가 여러 WordPress 테마 파일에 어떻게 퍼져 있는지 알아야 합니다.

워드프레스 사이드바 기능

WordPress 사이드바 추가와 관련된 세 가지 WordPress 기능은 다음과 같습니다.

사이드바 등록 – register_sidebar()
동적 사이드바 – dynamic_sidebar()
사이드바 가져오기 – get_sidebar()

사이드바 등록 – 1단계

이 함수 register_sidebar()는 사이드바를 생성하는 첫 번째 함수이며 테마의 functions.php 파일에 있습니다.

테마 functions.php 파일을 열면 테마에 표시되는 다양한 사이드바를 등록하는 이 register_sidebar() 함수가 표시되어야 합니다.

기본 Twenty Seventeen WordPress 테마의 경우와 마찬가지로 해당 테마에 사이드바를 등록하는 코드 아래의 이미지에서 볼 수 있습니다.

WordPress에 사이드바를 추가하는 방법

기본적으로 이 기능은 모든 것을 시작하는 기능입니다.

사이드바 매개변수 등록

레지스터 사이드바 함수는 배열이나 문자열의 데이터 형식이 될 수 있는 다양한 인수를 취하는 함수로 표현됩니다. 일반적으로 다음과 같이 표현할 수 있습니다.

register_sidebar( array|string $args = array() )

다음은 함수 호출 내에서 전달되는 배열에 다른 매개변수가 추가되는 WordPress 테마에서 사용되는 register_sidebar 함수 의 이미지입니다.

WordPress에 사이드바를 추가하는 방법

이 WordPress 함수에는 PHP 문자열 또는 PHP 배열이 될 수 있는 다양한 인수가 있습니다. 인수는 다음과 같습니다.

이름 – 문자열이어야 하는 사이드바의 이름 또는 제목입니다.
ID – 이것은 dynamic_sidebar() 함수를 사용하여 사이드바를 호출할 사이드바의 고유 식별자입니다.
설명 – 위젯 인터페이스에 표시되는 사이드바에 대한 설명이며 문자열입니다.
클래스 스타일 지정에 도움이 되는 사이드바용 추가 CSS 클래스를 추가하기 위한 인수입니다.
Before_widget – 각 사이드바가 출력되기 전에 추가되는 HTML 콘텐츠입니다.
After_widget – 각 사이드바가 출력된 후 추가되는 HTML 콘텐츠입니다.
Before_title 이것은 사이드바 제목이 표시될 때 추가할 HTML 콘텐츠이며 기본값은 일반적으로 여는 <h2> HTML 태그입니다.
After_title 표시될 때 사이드바 제목에 추가할 HTML 콘텐츠이며 기본값은 일반적으로 여는 <h2> HTML 태그입니다.

이 함수는 functions.php 파일에 추가되고 아래에 공유된 것과 같은 작업 후크를 사용하여 WordPress 사이드바를 등록합니다.

add_action( 'widgets_init', ' njengah_tutorial_sidebars' ' );

사이드바를 등록하려면 widgets_init 이벤트에 연결해야 하며 이 경우 콜백 함수의 이름을 'njengah_tutorial_sidebars' 로 지정했습니다.

사이드바를 등록하기 위해 functions.php 파일에 추가해야 하는 전체 코드는 다음과 같습니다.

 <?php

//콜백 함수 

함수 njengah_register_sidebar_tutorial() {
	
	//사이드바 기능 등록 - https://developer.wordpress.org/reference/functions/register_sidebar/
	레지스터_사이드바(
		정렬(
			'이름' => __( '사이드바 예제', 'textdomain' ),
			'id' => '사이드바-1',
			'description' => __( '블로그 게시물 및 아카이브 페이지의 사이드바에 표시하려면 여기에 위젯을 추가하십시오.', 'textdomain' ),
			'before_widget' => '<섹션 ID="%1$s" 클래스="위젯 %2$s">',
			'after_widget' => '</섹션>',
			'before_title' => '<h2 class="widget-title">',
			'after_title' => '</h2>',
		)
	);
	
} 

// 액션 후크 

add_action( 'widgets_init', 'njengah_register_sidebar_tutorial' );

동적 사이드바 – 2단계

이 함수 dynamic_sidebar()는 이제 위의 1단계 에서 등록한 사이드바를 호출하고 코드는 sidebar.php 파일 또는 첫 번째 단계에서 생성한 사이드바를 표시하려는 다른 파일에 배치됩니다.

dynamic_sidebar() 함수의 일반적인 표현은 다음과 같습니다.

dynamic_sidebar( int|string $index = 1 )

이 함수는 정수 또는 문자열 인수를 취하며 첫 번째 단계에서 사이드바를 등록할 때 사용되는 이름 또는 ID 매개변수일 수 있습니다.

27개의 기본 WordPress 테마에서 sidebar.php 파일을 열면 아래 이미지와 같이 dynamic_sidebar() 함수가 표시됩니다.

WordPress에 사이드바를 추가하는 방법

이 경우, 우리가 그 사이드바를 기본 사이드바로 표시할 수 있도록 register_sidebar 함수의 id 매개변수를 dynamic_sidebar 함수에 전달하는 것을 볼 수 있습니다. 아래 이미지와 같이:

WordPress에 사이드바를 추가하는 방법

이 사이드바를 사용자 정의 사이드바로 등록하는 경우 위의 코드를 사용하여 다음을 포함할 수 있는 테마 템플릿 파일에 표시합니다. 머리글, 바닥글, 본문 등. 따라서 사이드바를 표시하는 코드는 다음과 같아야 합니다.

 <?php if ( is_active_sidebar( 'custom' ) ) : ?>
  <div id="사이드바">
    <?php dynamic_sidebar( '맞춤' ); ?>
   </div>
<?php endif; ?>

에서 볼 수 있듯이 우리는 사이드바가 활성화되어 있는지 확인하기 위해 if 문을 사용하고 있으며 여기서 사용하는 함수는 is_active_sidebar() 입니다. 이 함수는 dynamic_sidebar() 에 전달된 사이드바가 사용 중인지 여부를 단순히 알아냅니다. 이것은 WordPress 조건부 태그 중 하나입니다.

사이드바 가져오기 – 3단계

테마에서 기본 WordPress 사이드바를 만들 때 등록 해야 하고 sidebar.php 파일 을 만들고 마지막으로 get_sidebar() t emplate 태그 를 사용하여 템플릿에서 사이드바를 로드해야 합니다.

기본적으로 함수는 사이드바의 이름과 동일한 하나의 문자열 인수를 취하기 때문에 get_sidebar를 사용하여 다른 페이지에 다른 사이드바를 표시할 수 있습니다. 위 단계에서 설명한 대로 사이드바 또는 ID 매개변수를 등록하는 데 사용한 이름입니다.

get_sidebar( string $name = null )

따라서 ' cool-sidebar '라는 이름의 사이드바가 있는 경우 다음과 같이 사용자 정의 페이지 템플릿에서 사이드바를 호출할 수 있습니다.

get_sidebar('cool-sidebar');

또한 각 페이지에 대해 여러 개의 사이드바를 가질 수 있으며 if/else 문을 사용하여 세 개의 사이드바가 있는 이 코드와 같이 조건부로 각 사이드바를 다른 페이지에 표시할 수 있습니다. 하나는 홈페이지용, 다른 하나는 404 및 기본 사이드바용:

 if ( is_home() ) :

      get_sidebar( '홈' );

   elseif ( is_404() ) :

      get_sidebar( '404' );

   또 다른 :

     get_sidebar();

엔디프;

WordPress 사이드바 파일

사이드바 코드가 추가되는 7개의 일반적인 WordPress 테마 파일은 다음과 같습니다.

functions.php File
sidebar.php File
Pages Files
Posts Files
Custom Posts Type Files
footer.php File
header.php File

가장 일반적인 WordPress 위젯 플러그인과 같은 사이드바 위젯을 등록하고 표시하는 플러그인에 코드를 추가할 수도 있습니다.

WordPress 개발자 또는 WordPress 초보자 인 경우 WordPress 작동 방식 을 배우는 경우 이러한 파일이 WordPress 사이드바 추가 및 표시와 관련된 방식을 이해하는 것은 전문가가 되기 위한 좋은 단계가 될 것입니다.

각 테마 WordPress 파일에서 사이드바 코드가 작동하는 방식

빠른 요약에서 WordPress에서 사이드바를 추가하는 세 가지 기능은 아래 표에 각각 설명된 이러한 파일 각각에 배치됩니다.

테마 파일	기능
함수.php	register_sidebar() , dynamic_sidebar()
사이드바.php	dynamic_sidebar()
헤더.php	dynamic_sidebar()
페이지.php	dynamic_sidebar(), get_sidebar();
싱글.php	dynamic_sidebar(), get_sidebar();
사용자 정의 페이지 템플릿	dynamic_sidebar(), get_sidebar();

WordPress에 사이드바를 추가하려면 다음을 포함하는 이 WordPress 개발 자습서에서 설명한 세 단계를 따라야 합니다.

등록 – register_sidebar()를 사용하여 functions.php에 사이드바를 등록합니다.
기본 사이드바/사용자 정의 사이드바 호출 – 기본 사이드바에 대해 sidebar.php 파일에서 사이드바를 호출하거나 dynamic_sidebar()를 사용하여 모든 템플릿 파일에서 호출할 수 있는 사용자 정의 사이드바
WP 게시물 템플릿에 사이드바 표시 – 페이지, 게시물 및 사용자 지정 페이지 템플릿과 사용자 지정 게시물 템플릿에서 get_sidebar() 템플릿 태그를 사용하여 사이드바를 호출할 수 있습니다.

WordPress 코드 예제에 사이드바를 추가하는 방법

다음은 Njengah Tutorial Sidebar 로 이름을 지정할 WordPress 테마에 기본 사이드바를 추가하는 방법의 코드 예입니다.

사이드바 등록

첫 번째 단계는 다음과 같이 등록합니다.

 /**
* 위젯 영역을 등록합니다.
*
* @링크 https://gist.github.com/Njengah/010453c11d170df9b9c8de2f31954a5d
*/

함수 njengah_register_sidebar_tutorial() {

  //사이드바 기능 등록 - https://developer.wordpress.org/reference/functions/register_sidebar/

  레지스터_사이드바(

        정렬(
                  'name' => __( 'Njengah 튜토리얼 사이드바 ', 'textdomain' ),
                   'id' => 'njengah-sidebar-default',
                   'description' => __( '블로그 게시물 및 아카이브 페이지의 사이드바에 표시하려면 여기에 위젯을 추가하십시오.', 'textdomain' ),
                   'before_widget' => '<섹션 ID="%1$s" 클래스="위젯 %2$s">',
                   'after_widget' => '</섹션>',
                   'before_title' => '<h2 class="widget-title">',
                   'after_title' => '</h2>',
                  )
             );
    
        }

add_action( 'widgets_init', 'njengah_register_sidebar_tutorial' );

결과는 아래 이미지와 같이 WordPress 대시보드의 모양 > 위젯 에서 볼 수 있습니다.

Sidebar.php 파일에서 기본 사이드바 호출

sidebar.php 또는 인덱스 파일에서 다음과 같이 사이드바를 호출해서는 안 됩니다.

 if ( ! is_active_sidebar('njengah-sidebar-default') ) {
   반품;
}

  dynamic_sidebar('njengah-sidebar-default');

사이드바 표시

마지막으로 페이지 템플릿에서 다음 코드를 사용하여 사이드바를 호출하기만 하면 됩니다.

get_sidebar();

마무리

이 게시물에서는 WordPress 테마에 사이드바를 추가하는 방법에 대한 단계별 접근 방식을 포괄적으로 설명했습니다. 간단히 요약하자면 2~3단계만 있다는 것을 기억해야 합니다. WordPress에 기본 사이드바를 추가하려면 functions.php 에 사이드바를 등록 해야 하고, 1단계에서 등록한 사이드바를 호출 하는 sidebar.php 파일을 만들고 페이지 또는 게시물 템플릿에서 get_sidebar 함수를 사용하여 기본 사이드바를 호출합니다. 사이드바 .

사용자 정의 사이드바를 추가하는 경우 사이드바를 표시하려는 템플릿이나 파일에 dynamic_sidebar() 코드를 직접 배치하기 때문에 마지막 부분이 필요하지 않습니다. 예를 들어 바닥글에서 dynamic_sidebar() 함수를 사용하여 표시되는 바닥글 위젯을 일반적으로 볼 수 있습니다.

이 튜토리얼에서 새로운 것을 배웠거나 functions.php 파일에 코드를 복사하여 붙여넣지 않고도 WordPress 테마에 사이드바를 추가하는 방법을 더 잘 이해했으면 합니다. 이 영역에서 더 많은 도움이 필요하거나 전문 WordPress 개발자의 조언이 필요하면 주저하지 말고 저에게 연락하십시오.