Genesis 하위 테마에 대한 간단한 사용자 지정

웹 디자이너로서 우리는 항상 보다 효율적으로 작업하기를 기대합니다. 내 포트폴리오를 재설계하는 기한이 지난 작업을 시작하면서 내가 WordPress를 얼마나 좋아하는지, 그리고 Genesis 프레임워크를 사용할 때 얼마나 빨리 시작하고 실행했는지를 상기했습니다. 프레임워크는 기본적으로 구축할 장소에 배치되는 WordPress 테마 구조입니다. StudioPress의 Genesis 프레임워크는 레고 블록과 비슷합니다. 테마의 다양한 구성 요소를 작업하기 쉽고 이동하기 쉽게 만듭니다. Genesis는 잘 지원되고 프로세스 중에 막히면 ​​존재하는 많은 자습서가 있기 때문에 매우 인기 있는 프레임워크입니다.

우리 모두 알고 있듯이 우리는 WordPress 코어를 편집하지 않습니다. 창세기 프레임워크도 마찬가지입니다. 우리는 프레임워크 파일을 편집하지 않습니다. 우리의 모든 테마 구축은 Genesis Child 테마로 이루어지므로 완벽한 사이트를 만들 수 있는 유연성을 제공합니다. 자식 테마를 개발하거나 사용자 정의할 때 모든 빌드를 테스트 환경에서 수행하는 것이 좋습니다. 광범위한 테스트는 유익하므로 공식적으로 세계와 공유하기 전에 모든 것이 올바르게 보이고 작동하는지 안심할 수 있습니다.

자식 테마를 만들거나 수정할 때 향상시키기 위해 만들 수 있는 사용자 지정 사항이 있습니다. 이러한 사용자 정의 중 일부의 경우 하위 테마에서 functions.php 파일을 사용합니다. 이 파일은 사용자 정의를 할 때 필수적입니다.

초보자용 창세기 테마를 찾고 계십니까?

하위 테마를 생성할 때 상위 테마로 Genesis 테마가 설치되어 있어야 합니다. 이 하위 테마는 Genesis의 기능에 따라 다릅니다. 일단 설치하면 구매하지 않으려는 경우 사용할 수 있는 훌륭한 시작 테마가 있습니다. 이 창세기 샘플 테마는 StudioPress 사이트에서 찾을 수 있습니다.

Genesis 샘플 테마가 매우 단순해 보이지만 시작하려면 functions.php 파일과 styles.css 파일만 있으면 되며 진행하면서 빌드하거나 조정할 수 있습니다.

Genesis Framework 및 StudioPress 테마를 무료로 받으세요!

Flywheel에서 사이트를 호스팅하면 멋진 대시보드에서 바로 30개 이상의 프리미엄 WordPress 테마(Genesis! 포함)에 액세스할 수 있습니다. $2,000가 넘는 금액으로 월 $15에 시작할 수 있습니다! 여기에서 자세히 알아보세요.

Google 애널리틱스 추적 코드 추가

사이트의 트래픽을 측정하기 위해 일종의 분석을 사용하고 있을 가능성이 있습니다. 구글 애널리틱스는 훌륭한 도구입니다. 고유한 추적 코드만 있으면 바로 사용할 수 있습니다. Google Analytics 계정에 가입하는 것은 빠르고 쉽습니다. 추가 보너스로 무료입니다.

추적 코드가 이미 있는 경우 새 테마와 함께 이 코드를 가져와 Genesis 테마 설정 페이지를 통해 삽입할 수 있습니다. 이것은 하기 쉽지만 항상 찾기가 쉽지는 않습니다.

먼저 WordPress 관리자 계정에 로그인합니다. 로그인한 후 Genesis > 테마 설정 을 클릭합니다. 머리글 및 바닥글에 대한 옵션이 표시됩니다. 헤더 필드에 붙여넣습니다.

다음과 같이 표시되어야 합니다.

위의 스크린샷에서 볼 수 있듯이 추적 코드를 추가하고 Google Analytics의 도구를 사용하여 사이트 데이터를 보는 것은 매우 간단합니다. 그러나 사용 가능한 데이터의 양에 따라 제한될 수 있습니다.

Google 애널리틱스에서 제공하는 것 외에 다른 비즈니스 데이터를 보려면 어떻게 해야 합니까? 파워 유저라면 귀중한 통계를 볼 수 있는 플러그인이 있습니다. 언급할 가치가 있는 것 중 하나는 MonsterInsights의 WordPress용 Google 애널리틱스입니다. 사이트를 Google Analytics와 연결하여 성능 데이터를 볼 수 있습니다. 라이트 및 프로 버전이 있으므로 다양한 유형의 분석을 사용할 수 있습니다. 플러그인을 사용하는 경우 헤더에 Google Analytics 추적 코드를 수동으로 추가할 필요가 없으며 플러그인 지침을 따를 수 있습니다. 종종 플러그인 설정에 귀하의 계정에 연결하기 위해 스니펫에 대한 참조를 추가할 위치가 있습니다.

위젯 영역 추가

텍스트 블록, 작성자 상자 또는 각 게시물 뒤에 표시하려는 항목을 추가할 수 있습니다. 위젯을 추가하면 이 기능을 빠르게 생성할 수 있습니다.

Genesis Visual Hook Guide 플러그인은 페이지의 다양한 영역을 표시하며 기능의 위치를 ​​지정할 때 유용합니다. 위젯이 올바른 위치에 표시되도록 함수에서 genesis_before_comments 를 참조하는 방법을 알 수 있습니다.

이것은 functions.php 파일에서 수행됩니다. 먼저 위젯 영역을 등록합니다. 그런 다음 실제로 페이지에 추가하는 함수를 사용합니다.

//* Register widget area called 'after-post'
genesis_register_sidebar( array(
	'id'            => 'after-post',
	'name'          => __( 'After Post', 'sample' ),
	'description'   => __( 'This is a widget area that can be placed after the post', 'sample' ),
) );

//* Hook after-post widget area located after post content
add_action( 'genesis_before_comments', 'after_post_widget' );
	function after_post_widget() {
	if ( is_singular( 'post' ) ) {
		genesis_widget_area( 'after-post', array(
			'before' => '<div class="after-post widget-area">',
			'after' => '</div>',
		) );
	}
}

사용자 정의 홈 페이지 만들기

이것은 사용자 정의 홈페이지 파일에 대한 사용자 정의 템플릿 파일을 생성하는 시나리오입니다. 이 예에서는 여러 위젯 영역을 사용하여 홈 페이지를 구축합니다. 위젯을 사용하면 콘텐츠를 쉽게 만들고 유지 관리하고 업데이트할 수 있습니다.

테마에 front-page.php가 있는 경우 사용자 정의 홈페이지가 이미 포함되어 있습니다. 그렇지 않은 경우 front-page.php라는 이름으로 쉽게 만들 수 있습니다.

생성되면 front-page.php 에 다음 코드를 추가하기만 하면 됩니다.

<?php

genesis();

첫 페이지에 사용자 정의 위젯 영역 추가

홈페이지에 사용자 정의 위젯 영역을 추가하려면 functions.php로 이동하여 해당 영역을 추가합니다. 하나만 추가하거나 필요한 만큼 추가할 수 있습니다. 이 예는 세 개의 위젯 영역을 보여줍니다.

이 코드를 php 태그 뒤에 붙여넣었는지 확인하십시오.

// Register widget areas
genesis_register_sidebar ( array(
	'id'          => 'front-page-1',
	'name'        => __( 'Front Page Widget #1', 'sample' ),
    'description'     => __( 'This is a front page widget area', 'sample' ),
));
genesis_register_sidebar ( array(
	'id'          => 'front-page-2',
	'name'        => __( 'Front Page Widget #2', 'sample' ),
    'description'     => __( 'This is a front page widget area', 'sample' ),
));
genesis_register_sidebar ( array(
	'id'          => 'front-page-3',
	'name'        => __( 'Front Page Widget #3', 'sample' ),
    'description'     => __( 'This is a front page widget area', 'sample' ),
));

위젯 영역은 모양 > 위젯으로 이동하면 표시되지만 실제 홈페이지에는 아직 표시되지 않습니다. 홈페이지에 표시하려면 실제로 위젯을 표시하기 위한 마크업이 필요합니다.

위젯을 표시하는 작업 만들기

실제로 페이지에 나타나게 하려면 front-page.php 에 액션과 기능을 추가해야 합니다. 이것은 genesis(); .

add_action( 'genesis_meta', 'digital_front_page_genesis_meta' );

/* Widget support for front page */

function digital_front_page_genesis_meta() {

	if ( is_active_sidebar( 'front-page-1' ) || is_active_sidebar( 'front-page-2' ) || is_active_sidebar( 'front-page-3' ) ) {

add_action( 'genesis_after_header', 'digital_front_page_widgets');

}
}

작업이 연결되었으며 활성 위젯이 있는지 확인하고 후크 위치를 결정합니다. 여기에서 위젯은 헤더 뒤에 올 것이지만 위젯이 갈 수 있는 다른 장소가 많이 있습니다.

다음은 몇 가지 예입니다.

• Genesis_before_header
• Genesis_before_sidebar_widget_area
• Genesis_before_footer
• Genesis_before_comments

거기에 도달했지만 위젯을 표시하기 위해 함수가 호출될 때 진짜 마술이 일어납니다.

프론트 페이지에 위젯을 추가하는 기능

종종 이 단계는 작업을 연결하기 전에 수행되지만 작업 스니펫 아래에 있어야 합니다. 여기에서 사용자 정의 함수가 생성됩니다. genesis_widget_area 함수가 호출됩니다.

여기에 원하는 만큼 div를 추가할 수 있습니다. 나는 도움이 되는 .wrap 클래스를 가진 내부 것을 가지고 있습니다. 이것을 원하는 대로 변경할 수 있습니다. 조직 목적을 위한 한 가지: 인식 가능한 명명 규칙으로 위젯을 참조하는 ID/클래스를 갖는 것은 매우 유용합니다. 이 배열에는 위젯을 감쌀 수 있는 마크업이 포함되어 있어 CSS 스타일 지정에 적합하며 이 예제와 다르게 수정할 수 있습니다. 이 스니펫도 거기에 속하기 때문에 여전히 front-page.php 를 보고 있는지 다시 확인하십시오.

//* Add widgets on front page
function digital_front_page_widgets() {

	genesis_widget_area( 'front-page-1', array(
		'before' => '<div id="front-page-1" class="front-page-1"><div class="wrap">',
		'after'  => '</div></div>',
	));

	genesis_widget_area( 'front-page-2', array(
		'before' => '<div id="front-page-2" class="front-page-2"><div class="wrap">',
		'after'  => '</div></div>',
	));

	genesis_widget_area( 'front-page-3', array(
		'before' => '<div id="front-page-3" class="front-page-3"><div class="wrap">',
		'after'  => '</div></div>',
	));

}

그런 다음 레이아웃을 만들고 홈페이지 콘텐츠에 대한 위젯 영역을 사용할 수 있습니다.

로고 추가

로고는 필수 브랜딩 요소이므로 사이트에 로고를 추가하면 사용자가 집처럼 편안하게 느낄 수 있습니다.

테마에 로고 파일을 업로드할 수 있는 기능이 있을 수 있습니다. Genesis 샘플 테마를 사용하고 있다면 그렇게 할 것입니다. 가장 쉬운 방법은 모양 > 사용자 정의 및 로고 파일 업로드로 이동하는 것입니다. CSS를 약간 조정하고 필요한 경우 여백과 패딩을 추가해야 할 수도 있습니다.

functions.php 파일에서 다음과 유사한 것을 찾을 수 있습니다.

// Add support for custom header
add_theme_support( 'genesis-custom-header', array(
	'width' => 500,
	'height' => 120
) );

다른 크기 기본 설정이 있는 경우 로고에 맞게 너비 및 높이 값을 변경할 수 있습니다.

바닥글 크레딧 변경

대부분의 테마는 기본적으로 테마 및 저작권 정보에 대한 링크와 함께 제공됩니다. 바닥글 크레딧을 변경하는 빠르고 쉬운 방법 중 하나는 functions.php 파일과 단축 코드를 사용하는 것입니다. 바닥글 크레딧을 간단하게 변경할 수 있는 플러그인이 있으므로 어떤 방법이 가장 적합한지 결정할 수 있습니다.

바닥글의 테마 정보는 원하지 않지만 저작권 정보는 유지하고 싶다고 가정해 보겠습니다. 이렇게 하면 바닥글이 전체적으로 변경되고 더 이상 바닥글에서 테마 정보를 볼 필요가 없습니다.

//* Customize the footer credits
add_filter( 'genesis_footer_creds_text', 'my_custom_footer_creds' );
function my_custom_footer_creds(){

    $creds = ' 2015 Your Name.';
    return $creds;
}

그것은 작동하지만 연도가 변경될 때 정보가 자동 업데이트되도록 하려면 어떻게 해야 합니까?

연도를 자동으로 업데이트하는 트릭이 있습니다. 단축 코드 [footer_copyright] 를 포함하면 설정하고 잊어버릴 수 있습니다.

//* Use a shortcode instead
add_filter( 'genesis_footer_creds_text', 'my_custom_footer_creds' );
function my_custom_footer_creds(){

    $creds = '[footer_copyright] Your Name.';
    return $creds;

}

테마에서 바닥글을 업데이트하거나 플러그인을 사용하여 업데이트하는지 여부는 중요하지 않습니다. 그것은 모두 선호도에 달려 있습니다. 테마를 자주 변경할 계획이라면 바닥글 콘텐츠에 플러그인을 사용하는 것이 좋습니다. 그 이유는 테마 파일에 분석 코드가 있는 경우 새 테마로 업데이트하는 것을 기억해야 하기 때문입니다. 플러그인은 모든 테마에서 작동합니다. Genesis Simple Edits는 이와 같은 경우에 완벽한 솔루션입니다. 사용이 간편하고 작은 조각으로 바닥글이 여러 테마에서 최신 상태로 유지됩니다.

창세기 제목 아래에 단순 편집을 위한 옵션이 왼쪽에 표시됩니다. 이 플러그인을 사용하면 Genesis 설정 페이지에 액세스할 수 있습니다. "바닥글 출력"까지 아래로 스크롤하면 단축 코드와 텍스트를 추가하여 전역 변경을 허용하는 방법을 볼 수 있습니다. [footer_copyright] 단축 코드는 저작권 연도가 항상 최신 상태인지 확인합니다.

이 플러그인으로 수정할 수 있는 것은 바닥글만이 아닙니다. 바닥글 외에도 Simple Edits를 사용하면 모든 Genesis 테마의 포스트 정보(바이라인) 및 포스트 메타를 수정할 수 있습니다. 제공된 텍스트 상자의 텍스트, 단축 코드 및 HTML을 사용하여 이러한 영역을 쉽게 편집할 수 있습니다.

테마에 개인적인 느낌을 더하는 것은 디자인 과정의 재미있는 부분입니다! 이러한 사용자 정의는 웹 사이트를 개인화하고 실제로 자신의 웹 사이트를 만드는 데 도움이 되는 간단한 변경의 좋은 예입니다.

계속 배우도록!

개발자를 위한 가장 권장되는 플러그인 목록을 보려면 이 eBook을 다운로드하십시오! 우리는 이 모든 플러그인이 사용하기 간편하고 사이트에서 성능이 너무 무겁지 않으며 완전히 신뢰할 수 있다는 것을 발견했습니다.

좋아하는 새로운 플러그인을 설치할 준비가 되셨습니까? 아래를 클릭하세요!