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

웹 사이트의 헤더 영역에 WordPress 위젯을 추가 하시겠습니까? 위젯을 사용하면 테마의 지정된 섹션에 컨텐츠 블록을 쉽게 추가 할 수 있습니다. 이 기사에서는 사이트 헤더에 WordPress 위젯을 쉽게 추가하는 방법을 보여줍니다..


사이트 헤더에 워드 프레스 위젯 추가

노트 : 이것은 중급 튜토리얼입니다. WordPress 테마 파일에 코드를 추가하고 CSS를 작성해야합니다..

사이트에 헤더 위젯이 필요한 이유와시기?

위젯을 사용하면 WordPress 테마의 지정된 영역에 컨텐츠 블록을 쉽게 추가 할 수 있습니다. 이러한 지정된 영역을 사이드 바 또는 위젯 준비 영역이라고합니다..

헤더 또는 컨텐츠 이전의 위젯 준비 영역을 사용하여 광고, 최근 기사 또는 원하는 항목을 표시 할 수 있습니다..

이 특정 영역을 ‘접은 곳 아래’라고하며 모든 인기있는 사이트는이 영역을 사용하여 매우 중요한 자료를 보여줍니다..

인기있는 List25 웹 사이트의 헤더 섹션

일반적으로 WordPress 테마는 내용 옆 또는 바닥 글 영역에 사이드 바를 추가합니다. 컨텐츠 위에 또는 헤더에 위젯 준비 영역을 추가하는 워드 프레스 테마는 많지 않습니다..

그렇기 때문에이 기사에서는 WordPress 웹 사이트 헤더에 위젯 영역을 추가하는 방법을 다룹니다..

1 단계. 헤더 위젯 영역 만들기

먼저 커스텀 위젯 영역을 만들어야합니다. 이 단계에서는 사용자 정의 위젯 영역을 볼 수 있습니다. 모양»위젯 WordPress 대시 보드의 페이지.

이 코드를 테마의 functions.php 파일에 추가해야합니다.

기능 wpb_widgets_init () {

register_sidebar (배열 (
‘이름’=> ‘맞춤 헤더 위젯 영역’,
‘id’=> ‘custom-header-widget’,
‘before_widget’=> ”,
‘after_widget’=> ”,
‘before_title’=> ‘

‘,
‘after_title’=> ‘

‘,
));

}
add_action ( ‘widgets_init’, ‘wpb_widgets_init’);

이 코드는 테마에 대한 새로운 사이드 바 또는 위젯 준비 영역을 등록합니다.

이제 갈 수 있습니다 모양»위젯 페이지에 ‘맞춤 헤더 위젯 영역’이라는 새 위젯 영역이 표시됩니다..

맞춤 헤더 위젯 영역

계속해서 새로 만든이 위젯 영역에 텍스트 위젯을 추가하고 저장하십시오. 위젯 추가에 대한 자세한 지시 사항은 WordPress에서 위젯을 추가하고 사용하는 방법에 대한 안내서를 참조하십시오..

2 단계 : 사용자 정의 헤더 위젯 표시

지금 웹 사이트를 방문하면 새로 만든 헤더 위젯에 방금 추가 한 텍스트 위젯을 볼 수 없습니다.

아직이 위젯 영역을 표시 할 위치를 WordPress에 알리지 않았기 때문입니다..

이 단계에서 해봅시다.

테마에서 header.php 파일을 편집하고 사용자 정의 위젯 영역을 표시하려는 위치에이 코드를 추가해야합니다..

<?PHP

if (is_active_sidebar ( ‘custom-header-widget’)) : ?>

<?PHP dynamic_sidebar ( ‘custom-header-widget’); ?>

<?PHP endif; ?>

변경 사항을 저장하는 것을 잊지 마십시오.

이제 웹 사이트를 방문하면 헤더 위젯 영역이 표시됩니다.

스타일이없는 헤더 위젯

약간 닦지 않은 것처럼 보입니다. 그것이 더 좋아 보이도록 CSS가 필요한 곳입니다..

3 단계 : CSS를 사용하여 헤더 위젯 영역 스타일 지정

테마에 따라 헤더 위젯 영역과 그 안에있는 각 위젯이 표시되는 방식을 제어하기 위해 CSS를 추가해야합니다..

가장 쉬운 방법은 CSS Hero 플러그인을 사용하는 것입니다. 직관적 인 사용자 인터페이스를 사용하여 WordPress 테마의 CSS를 변경할 수 있습니다. 자세한 내용은 CSS Hero 리뷰를 참조하십시오.

플러그인을 사용하지 않으려면 다음을 방문하여 테마에 맞춤 CSS를 추가하십시오. 모양»사용자 정의 페이지.

WordPress 테마 사용자 정의 인터페이스가 시작됩니다. ‘추가 CSS’탭을 클릭해야합니다..

WordPress 테마에 사용자 정의 CSS 추가

테마 사용자 정의 프로그램의 추가 CSS 탭을 사용하면 변경 사항이 실시간 미리보기에 나타나는 것을 보면서 사용자 정의 CSS를 추가 할 수 있습니다.

이 튜토리얼을 위해이 영역 만 사용하여 배너 광고를 표시하는 단일 위젯 또는 사용자 정의 메뉴 위젯을 추가한다고 가정합니다..

시작하는 데 도움이되는 몇 가지 샘플 CSS는 다음과 같습니다..

div # header-widget-area {
폭 : 100 %;
배경색 : # f7f7f7;
border-bottom : 1px solid #eeeeee;
텍스트 정렬 : 가운데;
}
h2.chw-title {
여백 : 0px;
텍스트 정렬 : 왼쪽;
텍스트 변환 : 대문자;
글꼴 크기 : 작음;
배경색 : #feffce;
너비 : 130px;
패딩 : 5px;
}

이것이 우리의 커스텀 헤더 위젯 영역이 기본 스물 열일곱 테마에서 보이는 방식입니다..

헤더 위젯 미리보기

테마에 맞게 CSS를 조정해야 할 수도 있습니다. WordPress 위젯에 사용자 정의 스타일을 추가하는 방법에 대한 안내서를 살펴보십시오.

이 기사가 귀하의 사이트 헤더에 WordPress 위젯을 추가하는 방법을 배우는 데 도움이 되었기를 바랍니다. 귀하의 사이트에 가장 유용한 25 개의 워드 프레스 위젯 목록을보고 싶을 수도 있습니다.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map