Genesis 하위 테마를 사용하여 WordPress에서 사용자 정의 위젯을 만드는 방법
게시 됨: 2018-02-15
Genesis는 웹사이트 레이아웃 스타일 지정에 가장 널리 사용되는 WordPress 프레임워크 중 하나입니다. 부모-자식 테마 아키텍처로 인해 개발자들 사이에서 인기가 있습니다. 이를 통해 부모 테마의 핵심 기능에 영향을 주지 않고 요구 사항에 따라 자식 테마를 사용자 지정할 수 있습니다.
이 기사에서는 Genesis Framework와 함께 무료로 제공되는 Genesis Sample 테마 내부에 4개의 위젯 영역을 만들어 Genesis 자식 테마를 사용자 지정하는 것이 얼마나 쉬운지 보여줍니다.
1. 개발 환경 설정
Genesis Framework를 설치하려면 로컬 또는 서버에 WordPress가 설치되어 있어야 합니다. 이미 서버에 WordPress를 설치했다고 가정하고 그렇지 않은 경우 Cloudways Platform을 사용하여 WordPress를 시작합니다.
이제 StudioPress에서 Genesis Framework 및 샘플 테마 사본을 다운로드하고 WordPress 웹 사이트에서 프레임워크를 활성화하십시오.
참고: Genesis 테마 사용자 지정을 위해 Sublime Text 3 를 텍스트 편집기로 사용하고 있습니다. 그러나 다른 텍스트 편집기를 선택할 수 있습니다.
2. 하위 테마 사용자 정의
텍스트 편집기에서 Sample Genesis 테마를 열고 루트 디렉토리에 새 파일 front-page.php 를 만듭니다 .
이제 front-page.php를 열고 다음 스니펫을 추가하십시오.
<?php 창세기();
이것은 Genesis Framework를 초기화합니다.
샘플 테마는 front-page.php 와 함께 제공되지 않으므로 위젯 영역을 등록하려면 이 페이지를 명시적으로 생성해야 합니다.
사용자 정의 위젯 영역
테마의 function.php 파일을 수정하여 위젯 추가를 시작하겠지만 실제로 코드 작성을 시작하기 전에 백엔드 로직을 설명하겠습니다.
여기에서 매개변수 배열을 취하는 함수를 선언하고 있습니다.
- id – 코드를 식별합니다.
- name – 워드프레스 대시보드에서 볼 수 있는 것입니다.
- 설명 – 이것은 WordPress 대시보드에도 표시됩니다.
참고: 함수의 "id"와 "name"은 고유해야 합니다.
이제 function.php를 열고 파일 끝에 다음 코드 조각을 추가합니다.
슬라이더 위젯의 경우
genesis_register_sidebar( 배열(
'id' => '앞 페이지-1',
'이름' => __( '홈페이지 슬라이더 위젯', '제네시스 샘플' ),
'description' => __( '첫 페이지에 들어가는 위젯입니다.', 'genesis-sample' ),
) );콘텐츠 위젯 1의 경우
genesis_register_sidebar( 배열( 'name' => __( '홈 콘텐츠 왼쪽 상단', 'genesis-sample' ), '아이디' => '콘텐츠-1', '설명' => __( '왼쪽 상단 홈', '제네시스 샘플' ), ) );
콘텐츠 위젯 2의 경우
genesis_register_sidebar( 배열( 'name' => __( '홈 콘텐츠 상단 중간', 'genesis-sample' ), '아이디' => '콘텐츠-2', '설명' => __( '상위 중간 홈', '제네시스 샘플' ), ) );
콘텐츠 위젯 3의 경우
genesis_register_sidebar( 배열( 'name' => __( '홈 콘텐츠 상단 오른쪽', 'genesis-sample' ), '아이디' => '콘텐츠-3', '설명' => __( '오른쪽 상단 홈', '제네시스 샘플' ), ) );
아래에서 볼 수 있듯이 3개의 다른 위젯을 성공적으로 만들었습니다. 이제 WordPress 대시보드에 사용자 정의 테마를 업로드해 보겠습니다.
위젯은 위젯 탭에서 볼 수 있습니다. 그러나 활성화해도 테마 프론트 엔드에는 영향을 미치지 않습니다. 이는 front-page.php 파일에 이러한 위젯을 표시하는 마크업을 추가하지 않았기 때문입니다.
표시 위젯에 마크업을 추가하기 위해 front-page.php 파일에 사용자 정의 함수를 선언하고 있습니다. 해당 함수에서 일부 HTML 마크업과 함께 function.php 파일에서 이전에 생성된 "id"에서 위젯을 호출합니다.
이 기능을 추가해도 아직 이 기능을 어떤 작업에도 연결하지 않았기 때문에 아무 작업도 수행하지 않습니다.
이를 위해 'genesis-meta' 후크가 포함된 액션을 선언하고 그 안에 'my_homepage_setup' 함수를 호출합니다. 이 기능에서는 위젯 영역이 활성화되어 있는지 확인하고 있습니다. 그렇다면 해당 위젯을 지정된 위치에 연결한 다음 해당 위젯 함수를 호출하여 위젯 마크업을 표시해야 합니다.
이제 front-page.php 파일에 다음 코드 스니펫을 추가합니다.
슬라이더 위젯
add_action( '제네시스_메타', 'my_homepage_setup' );
함수 my_homepage_setup() {
if ( is_active_sidebar( '프론트 페이지-1' ) ) {
//* 슬라이더 위젯 추가
add_action( '제네시스_후_헤더', '디스플레이_프론트_페이지_1_위젯');
}
}
// 슬라이더 위젯을 표시하기 위해 마크업을 추가합니다.
기능 display_front_page_1_widget() {
genesis_widget_area( '앞 페이지-1', 배열(
'전' => '<div class="front-page-1-widget"><div class="wrap">',
'뒤에' => '</div></div>',
) );
}콘텐츠 위젯(1, 2, 3)
add_action( 'genesis_before_content', 'ng_home_page_widgets' );
//* 홈 위젯을 제자리에 추가합니다.
함수 ng_home_page_widgets() {
if ( is_front_page('') )
genesis_widget_area('콘텐츠-1', 배열(
'before' => '<div class="1/3 first hometopcol toplefthome">',
'뒤에' => '</div>',));
if ( is_front_page('') )
genesis_widget_area('콘텐츠-2', 배열(
'전' => '<div class="one-third hometopcol topmiddlehome">',
'뒤에' => '</div>',));
if ( is_front_page('') )
genesis_widget_area('콘텐츠-3', 배열(
'전' => '<div class="one-third hometopcol toprighthome">',
'뒤에' => '</div>',));
}마지막으로 style.css 파일 내부의 일부 CSS 스타일링
스타일 위젯 영역에 CSS를 추가하고 있습니다. 그러나 원하는 대로 스타일을 지정할 수 있습니다.
단순함을 위해 콘텐츠 위젯의 크기와 패딩만 정의합니다. 웹사이트 컨테이너의 테두리와 배경색입니다.
.첫 번째 {여백-왼쪽:0px;}
.site-container {배경: #fff;}
.site-inner {padding-top:0px;}
홈 콘텐츠 {
색상:#7e7467;
글꼴 크기: 16px;
라인 높이: 1.3;
상자 그림자:1px 2px 5px 0px rgba(0, 0, 0, 1);
여백 상단: 25px;
위치: 상대;}
.textwidget {패딩: 12%;텍스트 정렬: 센터;}
.hometopcol {
여백 상단: 0px;
높이:280px;
테두리: 4px 단색 rgb(255,69,0);}
.widgettitle {
색상:#c4421b;
패딩: 15px 0px 0px 15px;
border-bottom: 4px 솔리드 rgba(162, 152, 135, 1);
여백-하단: 10px;
텍스트 변환: 없음;
글꼴 크기: 16px;}
.widgettitle:{
콘텐츠: " ";
위치: 절대;
상단: 43px;
왼쪽: 5px;
오른쪽: 5px;
테두리: 1px 솔리드 rgba(162, 152, 135, 1);}WordPress 웹사이트로 돌아가서 변경 사항을 살펴보겠습니다. 슬라이더 위젯의 경우 Smart Slider 3을 사용합니다. 원하는 슬라이더 위젯을 사용할 수 있습니다. 콘텐츠 위젯의 경우 단순히 텍스트를 사용하겠습니다.
최종 모습
이 기사의 끝에서 나는 Genesis Sample 자식 테마를 위한 4개의 사용자 정의 위젯을 만들 수 있습니다. 기본적으로 Genesis 테마에는 헤더 위젯이 포함되어 있지 않지만 이제 슬라이더에 사용하거나 다른 정보를 표시하는 데 사용할 수 있는 나만의 사용자 지정 위젯이 있습니다. 다른 3개의 콘텐츠 위젯을 사용하여 제품이나 서비스 또는 기타 기능을 강조할 수 있습니다.
모든 위젯을 활성화한 후 첫 페이지는 다음과 같아야 합니다.
요약
이 기사의 시작 부분에서는 Genesis WordPress 테마를 샘플 하위 테마로 사용하는 방법만 알고 있었지만 계속 진행하면서 WordPress Genesis 샘플 테마 내부에 사용자 지정 위젯 영역을 만드는 방법과 전면 페이지 디자인에 배치하는 방법을 배웠습니다.
이 기사를 통해 자신만의 Genesis 하위 테마를 사용자 지정하거나 만들 수 있다는 자신감을 얻었습니다. 모범 사례를 위해 공식 Genesis 및 WordPress 문서를 확인하는 것이 좋습니다.