사용자 정의 홈 페이지 위젯 추가

게시 됨: 2013-02-15

최근에 홈 페이지 위젯을 복사하여 특정 Genesis 하위 테마 홈 페이지에 복제하는 방법에 대한 게시물을 작성했습니다.

이것은 PHP와 CSS가 고유한 위젯 ID에 대한 변경 사항을 제외하고는 정확히 동일하기 때문에 충분히 쉬웠습니다.

하지만 다른 하위 테마에서 홈 페이지 위젯을 추가하는 것은 어떻습니까?

웹 디자이너가 코드를 시도하고 깨뜨린 후 이를 수행하는 방법에 대한 질문을 받았습니다.

이 코드는 사용 중인 상위 테마에 따라 변경하거나 제거할 수 있는 Genesis 테마 프레임워크 후크를 사용합니다.

News 테마에서 Blissful 테마로 4개의 사용자 지정 위젯 영역을 추가하는 방법을 살펴보겠습니다.

우리는 다음을 추가할 것입니다:

  • 홈 상단 위젯
  • 홈 추천 좌우 위젯
  • 홈 하단 위젯

Home.php 파일 복사

첫 번째 단계는 뉴스 테마에서 home.php 파일을 복사하고 모든 뉴스 인스턴스를 Blissful 또는 위젯을 추가할 하위 테마로 변경하는 것입니다.

News 하위 테마를 선택하는 것이 좋은 이유는 Blissful과 콘텐츠 너비가 동일하여 CSS에서 많은 편집이 필요하지 않기 때문입니다.

다음은 새로운 home.php 파일에 있는 전체 코드입니다.

 <?php add_action( 'genesis_meta', 'blissful_home_genesis_meta' ); /** * Add widget support for homepage. If no widgets active, display the default loop. * */ function blissful_home_genesis_meta() { if ( is_active_sidebar( 'home-top' ) || is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) || is_active_sidebar( 'home-bottom' ) ) { remove_action( 'genesis_loop', 'genesis_do_loop' ); add_action( 'genesis_loop', 'news_home_loop_helper' ); add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_content_sidebar' ); add_filter( 'body_class', 'add_body_class' ); function add_body_class( $classes ) { $classes[] = 'blissful'; return $classes; } } } function news_home_loop_helper() { if ( is_active_sidebar( 'home-top' ) ) { echo '<div id="home-top"><div class="border wrap">'; dynamic_sidebar( 'home-top' ); echo '</div><!-- end .border wrap --></div><!-- end #home-top -->'; } if ( is_active_sidebar( 'home-middle-left' ) || is_active_sidebar( 'home-middle-right' ) ) { echo '<div id="home-middle"><div class="border wrap">'; echo '<div class="home-middle-left">'; dynamic_sidebar( 'home-middle-left' ); echo '</div><!-- end .home-middle-left -->'; echo '<div class="home-middle-right">'; dynamic_sidebar( 'home-middle-right' ); echo '</div><!-- end .home-middle-right -->'; echo '</div><!-- end .border wrap --></div><!-- end #home-middle -->'; } if ( is_active_sidebar( 'home-bottom' ) ) { echo '<div id="home-bottom"><div class="border wrap">'; dynamic_sidebar( 'home-bottom' ); echo '</div><!-- end .border wrap --></div><!-- end #home-bottom -->'; } } genesis();

Functions.php 파일

다음 단계는 4개의 모든 사용자 정의 위젯 영역에 대한 지원을 자식 테마 functions.php 파일에 추가하는 것입니다.

 genesis_register_sidebar( array( 'id' => 'home-top', 'name' => __( 'Home Top', 'blissful' ), 'description' => __( 'This is the home top section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-left', 'name' => __( 'Home Middle Left', 'blissful' ), 'description' => __( 'This is the home middle left section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-middle-right', 'name' => __( 'Home Middle Right', 'blissful' ), 'description' => __( 'This is the home middle right section.', 'blissful' ), ) ); genesis_register_sidebar( array( 'id' => 'home-bottom', 'name' => __( 'Home Bottom', 'blissful' ), 'description' => __( 'This is the home bottom section.', 'blissful' ), ) );

다음 단계는 추천 위젯에 대한 새 이미지 크기를 만드는 것입니다.

 /** Add new image sizes */ add_image_size( 'mini-thumbnail', 75, 75, TRUE ); add_image_size( 'small-thumbnail', 110, 110, TRUE ); add_image_size( 'home-middle-left', 280, 165, TRUE ); add_image_size( 'home-middle-right', 50, 50, TRUE ); add_image_size( 'home-tabs', 150, 220, TRUE );

Blissful 테마에 포함되어 있지 않으므로 구조적 랩에 대한 지원을 추가하고 싶을 수도 있으므로 테마에 따라 확인하십시오.

 /** Add support for structural wraps */ add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'subnav', 'inner', 'footer-widgets', 'footer' ) );

Style.css 파일

마무리하려면 CSS를 추가해야 합니다.

 /* Home Top ------------------------------------------------------------ */ #home-top { border-bottom: 1px solid #d5d5d5; overflow: hidden; } #home-top .border { border-bottom: 4px solid #eee; overflow: hidden; } #home-top .wrap { overflow: hidden; padding: 20px 25px 15px; } #home-top .ui-tabs ul.ui-tabs-nav { border-bottom: 1px dotted #ddd; margin: 10px 0; padding: 0 0 13px; } #home-top .ui-tabs ul.ui-tabs-nav li a { background-color: #f5f5f5; font-weight: bold; } #home-top .ui-tabs ul.ui-tabs-nav li a:hover, #home-top .ui-tabs ul.ui-tabs-nav li.ui-tabs-selected a { background-color: #00a7ed; color: #fff; } #home-top .ui-tabs .post { background-color: #fff; margin: 0; padding: 0; } /* Home Middle ------------------------------------------------------------ */ #home-middle { border-bottom: 1px solid #d5d5d5; overflow: hidden; } #home-middle .border { border-bottom: 4px solid #eee; overflow: hidden; } #home-middle .wrap { overflow: hidden; padding: 25px 25px 15px; } .home-middle-left { float: left; width: 290px; } .home-middle-right { float: right; width: 285px; } .home-middle-left-2 { float: left; width: 290px; } .home-middle-right-2 { float: right; width: 285px; } /* Home Bottom ------------------------------------------------------------ */ #home-bottom { overflow: hidden; } #home-bottom .wrap { overflow: hidden; padding: 20px 25px 15px; }

이제 어떻게 생겼습니까?

사용자 정의하는 테마에 따라 홈 가운데 왼쪽 및 오른쪽 위젯의 너비를 편집해야 할 수도 있습니다.

이것은 매우 특정한 주제이기 때문에 이 부분을 스스로 해결해야 하지만 실제로는 그다지 어려운 문제는 아닙니다.

그래서 당신은 그것을 가지고 있습니다.

코드 힙이지만 PHP 프로그래밍을 편집, 작성 또는 배울 필요 없이 대부분 복사 및 붙여넣기입니다.

관련 튜토리얼

  • 사용자 정의 사이드바가 있는 Genesis 첫 페이지 템플릿