WordPress 사용자 정의 테마를 만드는 방법

게시 됨: 2021-08-06

WordPress는 현재 온라인 에 있는 모든 사이트의 37%를 차지하는 전 세계 웹사이트의 엄청난 비율을 차지합니다 . 이러한 성공에는 많은 이유와 요인이 있지만 주요 이유 중 하나는 모든 사용자가 사용할 수 있는 기능의 인기입니다. 플러그인, 테마, 게시물, 페이지, 카테고리, 분류, 사용자 역할 및 미디어 처리 등을 예로 들 수 있습니다. WordPress를 최대한 활용하려면 사용자가 이러한 모든 기능을 사용하는 방법을 연구하고 배우는 것이 좋습니다. 이 블로그에서는 WordPress 테마에 중점을 두고 논의하고 WordPress 사용자 정의 테마를 만드는 방법에 필요한 기본 사항을 안내합니다.

커스텀 테마란?

사이트 프론트엔드의 모든 것이 '테마'라는 것을 사용하여 실행되고 제어됩니다. 웹사이트의 테마는 웹사이트의 특정 디자인과 기능을 담당합니다. 테마 예제 는 WordPress 테마 저장소 또는 Themeforest 에서 확인할 수 있습니다 . 여기에서 탐색하고 다운로드할 수 있는 수천 개의 테마를 찾을 수 있습니다.

확립된 WordPress 테마는 훌륭하지만 능력과 필요가 있다면 클라이언트나 자신을 위해 또는 판매할 의도로 시장에 제출할 사용자 정의 테마를 구축할 수도 있습니다. 상업용 테마를 만들 때 코딩 표준, 파일 및 폴더 구조 등에 대한 마켓플레이스 지침을 따라야 합니다. 이러한 지침에 대한 자세한 내용은 마켓플레이스 웹사이트 에서 찾을 수 있습니다 .

이 블로그에서는 튜토리얼을 통해 프로세스와 관련된 모든 기본 사항과 단계를 다루면서 자신만의 WordPress 테마를 만드는 방법에 대한 기본 개요를 보여줍니다.

WordPress 사용자 정의 테마 만들기

WordPress 테마는 템플릿 파일, 스크립트, 스타일, 이미지 등으로 구축됩니다. 계속하려면 사용자 정의 테마를 구축하는 데 필요한 PHP, HTML 및 CSS에 대한 실무 지식이 있어야 합니다. JavaScript를 이해하는 것도 추가적인 이점이 될 수 있습니다.

시작하기 위해 먼저 테마 이름을 'Updraft'로 지정하겠습니다. wp-content/themes 안에 'Updraft'라는 폴더를 만듭니다 . 이 'Updraft' 폴더 내에서 테마 관련 코드를 작성하고 파일, 이미지, 글꼴 등을 저장합니다.

사용자 정의 WordPress 테마의 기본 파일은 다음과 같습니다.

  • 스타일.css
  • index.php
  • 기능.php

style.css 는 기본 스타일시트 파일이며 이 파일에 모든 CSS를 추가할 수 있습니다. 테마에 대한 정보 헤더를 포함해야 함을 기억하십시오. 헤더는 아래 형식과 유사해야 하며 style.css 상단에 있어야 합니다 .

 [암호]
/*
테마 이름: Updraft
테마 URI: https://updraftplus.com
저자: UpdraftPlus
작성자 URI: https://updraftplus.com
설명: 웹사이트용으로 제작된 사용자 정의 테마입니다.
버전: 1.0
라이선스: GNU 일반 공중 라이선스 v2 이상
라이선스 URI: http://www.gnu.org/licenses/gpl-2.0.html
텍스트 도메인: updraft
*/
[/암호]

다음으로 Appearance >>Themes로 이동하면 테마가 나열됩니다. 활성화합니다. 사이트의 프론트엔드를 확인하면 아직 테마에 아무것도 추가하지 않았기 때문에 빈 화면이 표시됩니다.

이미지, 스크립트 및 스타일을 테마 디렉토리에 저장하는 것을 잊지 마십시오. 테마 디렉토리는 'wp-content/themes/Updraft' 폴더를 참조합니다. 좋은 폴더 구조를 사용하여 이미지, 스크립트 및 스타일에 대한 특정 폴더를 만들어 정리하도록 하십시오. 파일을 해당 디렉토리에 복사합니다.

함수 파일

functions.php 는 다양한 목적으로 코드를 추가할 수 있는 파일입니다 . 이 파일은 WordPress 초기화 중에 자동으로 로드되며 작성된 코드가 자동으로 실행됩니다.

functions.php 파일 에서 다음 작업 은 일반적으로 이 순서로 수행됩니다.

  • 테마 스타일시트 및 스크립트를 대기열에 추가합니다(JS 및 CSS 파일을 웹사이트에 추가).
  • 사이드바, 탐색 메뉴, 게시물 썸네일 등을 활성화합니다.
  • 애플리케이션 전체에서 사용되는 기능을 정의합니다.
  • 등.

사용자는 다음과 같이 functions.php 파일 에서 스타일과 스크립트를 추가할 수 있습니다 . 자세한 문서 는 다음 링크를 참조하십시오 .

 [암호]
함수 include_js_css() {
wp_register_style( "부트스트랩", get_stylesheet_directory_uri() .
"/styles/bootstrap.min.css", array(), false, "all" );
wp_enqueue_style( "부트스트랩" );
wp_register_script('부트스트랩', get_stylesheet_directory_uri() .
'/scripts/bootstrap.min.js', array(), 거짓, 참);
wp_enqueue_script('부트스트랩');
}
add_action('wp_enqueue_scripts', 'include_js_css');
[/암호]

get_stylesheet_directory_uri () 함수는 활성 테마 디렉토리의 상대 경로를 제공합니다. 나머지 코드는 자산의 경로로 볼 수 있습니다.

마찬가지로 탐색 메뉴를 추가하려면 썸네일 게시:

 [암호]
기능 updraft_theme_setup() {
add_theme_support( '포스트 썸네일' );
register_nav_menus(
정렬(
'기본' => __( '기본 메뉴' ),
'바닥글1=' => __( '바닥글 메뉴' ),
'샵' => __( '샵 페이지 메뉴' ),
)
);
}
add_action( 'after_setup_theme', 'updraft_theme_setup' );
[/암호]

다음으로 WordPress 대시보드로 이동하여 게시물 또는 페이지를 추가합니다. '추천 이미지' 섹션이 표시되어야 합니다. 또한 모양 >> 메뉴 아래에 위치 관리 아래에 기본 메뉴와 바닥글 메뉴가 있습니다.

이들은 'Function' 파일을 사용하는 동안 다룰 수 있는 몇 가지 기본 기능에 불과합니다. 원하는 경우 이 파일에 더 많은 것을 추가할 수 있습니다.

템플릿 파일

테마를 만들 때 템플릿 파일을 사용하여 웹사이트의 다른 부분의 레이아웃과 디자인에 영향을 줄 수 있습니다. 예를 들어 header.php 템플릿을 사용하여 헤더를 만들거나 comments.php 템플릿을 사용하여 사이트에 댓글을 포함할 수 있습니다. 템플릿 파일의 확장자는 .php 입니다. PHP 파일이므로 모든 페이지가 HTML로 출력됩니다.

개발자는 템플릿을 사용하여 여러 파일에 코드를 배포할 수 있습니다. 아래 목록은 문제의 파일 중 일부입니다.

  • index.php : 기본 템플릿입니다. 이 파일은 게시물 목록을 담당해야 합니다. 설정 >> 읽기 에서 게시물 페이지를 설정 하면 이 템플릿이 실행됩니다.
  • page.php : 이 템플릿은 페이지 렌더링을 담당합니다. 이 설정은 개별 페이지에 사용자 지정 페이지 템플릿을 할당하여 재정의할 수 있습니다.
  • single.php : 단일 게시물을 조회할 때 사용합니다.
  • header.php : 이 템플릿에 헤더 부분을 추가합니다.
  • footer.php : 이 템플릿에 바닥글 부분을 추가합니다.
  • sidebar.php : 이 템플릿에 위젯을 추가합니다.

여기에서 사용 가능한 모든 템플릿 파일 목록을 가져옵니다 .

사용자 정의 페이지 템플릿

기본적으로 모든 페이지는 page.php 템플릿을 통해 렌더링됩니다. 그러나 실제로는 다른 페이지에 별도의 흐름을 표시해야 하는 경우가 있습니다. 이 시나리오에서는 강력한 사용자 지정 페이지 템플릿을 사용하는 것이 좋습니다.

예를 들어, '경력' 페이지가 있고 이 페이지에 코드를 추가하려는 경우, 이를 달성하려면 테마 디렉토리에 Career.php 파일을 만들고 파일 맨 위에 아래에 주석을 추가해야 합니다.

 [암호]
<?php
/*
템플릿 이름: 경력
*/
[/암호]

그런 다음 페이지 편집 섹션으로 이동하여 페이지 속성 상자 아래에서 이 '경력' 템플릿을 할당합니다.

이제 Career 페이지를 방문하면 Career.php 의 코드 가 실행됩니다.

헤더 파일

귀하의 웹사이트에는 모든 페이지에 공통 헤더가 있습니다. 이 공통 헤더를 header.php 에 넣을 수 있습니다 . 헤더 코드는 다음과 같을 것입니다.

 [암호]
<!DOCTYPE HTML>
<html <?php 언어 속성(); ?>>
<머리>
<메타 문자 집합="<?php 블로그 정보('문자 집합'); ?>">
<메타 이름="viewport" content="width=device-width, initial-scale=1.0" />
<?php wp_head(); ?>
</head>
<바디 <?php 바디 클래스(); ?>>
<?php wp_body_open(); ?>
<!-- 메뉴 -->
[/암호]

위의 코드에서 WordPress에서 사용할 수 있는 일부 기능을 사용했음을 알 수 있습니다.

  • wp_head() : 이 메소드는 스크립트, 스타일 및 메타 태그와 같은 중요한 요소를 문서에 삽입합니다.
  • body_class() : 이것은 body 요소에 다른 클래스를 추가합니다.
  • wp_body_open() : body 태그를 연 직후에 코드를 삽입할 때 사용합니다. 이에 대한 예는 - Google Analytics 스크립트입니다.

메뉴는 wp_nav_menu() 함수를 통해 동적으로 추가할 수 있습니다. 먼저 모양 >> 메뉴 아래에 메뉴를 만들고 '기본' 위치를 할당했다고 가정합니다. 아래 코드는 메뉴 요소를 동적으로 생성합니다.

 [암호]
<?php
wp_nav_menu(
정렬(
'theme_location' => '기본',
'container_class' => '메뉴',
)
);
?>
[/암호]

헤더 파일이 설정되면 get_header() 함수를 사용하여 이 파일을 다른 템플릿에 포함합니다.

바닥글 파일

헤더 파일과 유사하게 바닥글에 대한 공통 코드는 footer.php 템플릿 내부로 이동합니다.

 [암호]
<!-- 바닥글 요소 -->
<?php wp_footer(); ?>
</바디>
</html>
[/암호]

여기서 요소, 특히 스크립트를 이 위치에 삽입 하는 wp_footer() 를 사용합니다. get_footer() 를 사용하면 이 파일의 내용이 다른 위치에 포함됩니다.

사이드바 파일

사이드바는 기본 콘텐츠에는 표시되지 않는 사이트 정보를 표시하는 데 사용되는 세로 열입니다. 여기에는 인기 있는 기사, 광고 배너, 뉴스레터 제출 양식 등이 포함될 수 있습니다. 사이드바에는 관리자가 사용자 정의할 수 있는 위젯이 포함되어 있습니다. sidebar.php 템플릿에는 사이트 위젯이 포함됩니다 .

이 예제에서는 functions.php 파일에 아래 코드를 추가하여 기본 사이드바를 생성합니다.

 [암호]
기능 updraft_widgets_init() {
레지스터_사이드바(
정렬(
'이름' => esc_html__( 홈 사이드바' ),
'id' => '사이드바-1',
'description' => esc_html__( '사이드바에 표시하려면 여기에 위젯을 추가하세요.' ),
'before_widget' => '<섹션 클래스="위젯">',
'after_widget' => '</섹션>',
'before_title' => '<h2 class="widget-title">',
'after_title' => '</h2>',
)
);
}
add_action( 'widgets_init', 'updraft_widgets_init' );
[/암호]

그런 다음 모양 >> 위젯 으로 이동합니다 . 여기에서 위의 사이드바를 찾을 수 있습니다. 이 예에서는 이 사이드바에 위젯을 추가할 것입니다. 이 사이드바를 프런트엔드에 추가하려면 sidebar.php에 다음 코드를 추가하세요.

 [암호]
<div 클래스="사이드바">
<?php
if ( is_active_sidebar( '사이드바-1' ) ) {
dynamic_sidebar( '사이드바-1' );
}
?>
</div>
[/암호]

마지막으로, 필요할 때 다른 페이지의 어느 위치에나 쉽게 사이드바를 포함할 수 있도록 메소드 이름을 ' get_sidebar()' 로 지정하는 것을 잊지 마십시오.

페이지 및 게시물 렌더링

이미 언급했듯이 모든 WordPress 페이지는 사용자 정의 페이지 템플릿이 있는 페이지를 제외하고 page.php 파일에 작성한 코드를 사용하여 렌더링 및 실행됩니다. 아래 코드는 페이지 제목, 설명 및 추천 이미지가 포함된 페이지를 표시하는 예입니다.

 [암호]
<?php
get_header();
?>
<div class="콘텐츠 영역">
<메인 클래스="사이트-메인">
<?php
동안 ( have_posts() ) :
the_post();
?>
<?php
if ( has_post_thumbnail() ) :
the_post_thumbnail();
엔디프;
?>
<헤더 클래스="항목 헤더">
<?php the_title(); ?>
</헤더>
<div class="항목 내용">
<?php the_content(); ?>
</div>
<?php
그 동안;
?>
</메인>
</div>
<?php
get_footer();
[/암호]

유사한 코드가 single.php 파일 내부로 이동하여 게시물 정보를 표시합니다. 위의 방법 외에도 게시물 목록( index.php )을 올바르게 렌더링하려면 다음을 사용할 수도 있습니다.

  • the_catgeory() : 게시물의 카테고리 목록을 표시합니다.
  • the_permalink() : 현재 게시물에 대한 영구 링크를 표시합니다.
  • the_excerpt() : 게시물 발췌문을 표시합니다.

WordPress 사용자 정의 테마용 I18n

사용자 정의 테마를 구축하는 동안 국제화를 지원하는 방식으로 개발되어야 함을 기억하십시오. 이렇게 하면 테마를 다른 언어로 쉽게 번역할 수 있습니다.

I18n 지원을 추가하려면 소스 파일을 구문 분석하고 번역 가능한 문자열을 추출할 수 있는 텍스트 도메인을 사용해야 합니다. 이 예에서는 텍스트 도메인 'Updraft'를 사용하고 있지만 고유 식별자를 선택할 수 있습니다. 다음과 같이 텍스트 도메인을 정의할 수 있습니다.

 [암호]
기능 i18n_setup() {
load_theme_textdomain( '업그레이드', get_stylesheet_directory() . '/언어' );
}
add_action( 'after_setup_theme', 'i18n_setup' );
[/암호]

이제 테마 파일에서 정적 문자열을 사용할 때마다 __() 또는 _e() 함수로 묶습니다.

 [암호]
<h2><?php _e('이름', 'updraft); ?></h2>
<?php echo __('사용자 이메일', '업데이트'); ?>
[/암호]

번역된 언어 파일을 생성하는 데 도움이 되는 POEDIT와 같은 특수 도구가 있습니다. 자세한 내용은 이 블로그 를 참조하십시오.

이 블로그에서는 WordPress 사용자 정의 테마를 만드는 기본 사항을 다뤘습니다. 그러나 많은 시간과 인내가 필요한 방대한 주제입니다. 다음은 WordPress 테마 생성을 시작하는 데 도움이 되는 몇 가지 유용한 리소스입니다.

  • 워드프레스 루프
  • 템플릿 태그
  • 카테고리 페이지
  • 기능_참조
  • 조건부 태그
  • 워드프레스 코딩 표준

WordPress 사이트에 대한 새 테마를 만들 때 모든 변경 후에 백업해야 하며 그렇지 않으면 모든 작업이 손실될 위험이 있습니다. UpdraftPlus를 사용하십시오 – 세계에서 가장 신뢰할 수 있는 WordPress 백업, 복원 및 복제 플러그인.

워드프레스 사용자 정의 테마를 만드는 방법 게시물이 UpdraftPlus에 처음 등장했습니다. UpdraftPlus – WordPress용 백업, 복원 및 마이그레이션 플러그인.