워드 프레스 사용자 정의 테마 튜토리얼

워드 프레스 사용자 정의 테마 튜토리얼

사용자 정의 워드 프레스 테마를 만드는 학습 당신이 탐험에 대한 완전히 새로운 세계를 엽니 다. 그것은 당신이 자신,고객을 위해 사용자 정의 디자인을 구축하고 심지어 오픈 소스 커뮤니티에 다시 기여할 수 있습니다.

이 가이드에서,우리는에 제출 될 수있는 모든 기능을 테마를 가지고 0 에서 당신을 데려 갈거야 WordPress.org 테마 디렉토리.

이 가이드에 사용된 모든 코드는 이 깃허브 리포지토리에서 참조할 수 있습니다.


목차:

  1. 사용자 지정 테마에 필요한 파일 만들기
  2. 함수 만들기.템플릿 파트를 추가
  3. 단수를 추가합니다.째챈짹창쨉쨉쩌짯째체검색.404,404.페이지 템플릿 만들기
  4. 항상 모범 사례를 따르십시오
  5. 워드 프레스 테마 배포
  6. 코드 테스트 및 개선

단계#1:사용자 정의 테마에 대한 필수 파일 만들기

기능 워드 프레스 테마는 두 개의 파일로 구성 될 수 있습니다:스타일.및 색인. 이 때문에 워드 프레스의 템플릿 계층 구조의 가능합니다.

워드프레스가 웹페이지를 출력할 때 사용 가능한 가장 구체적인 템플릿을 검색하며,템플릿이 존재하지 않으면 해당 템플릿을 찾을 때까지 계층 아래로 이동합니다. 다음은 실용적인 예입니다:

사용자가 페이지인https://example.com/practical-example에 있습니다. 워드 프레스는이 순서로 템플릿을 찾기 위해 노력할 것입니다:

      • 페이지-{슬러그}.예를 들어,워드 프레스는-테마/페이지-실제-예를 사용하여 볼 것이다.2018 년 11 월 15 일워드 프레스는 테마/페이지-42 를 사용하여 볼 것이다.
      • 페이지.테마/페이지를 시도 할 것이다.템플릿.
      • 단수.단수 템플릿은 게시물과 페이지를 렌더링 할 수 있으므로 더 구체적인 페이지 이후에 시도됩니다.4186>인덱스.마지막으로 테마/색인.다른 템플릿이 없는 경우 사용됩니다.

그냥 필수 파일과 테마를 구축하여 시작하자 우리는 그들이 어떻게 작동하는지 탐구 한 후 우리는 더 많은 기능에 레이어 수 있습니다.

/wp-content/themes/에서my-custom-theme라는 폴더를 만들고 다음 두 파일을 만듭니다.

스타일.워드 프레스에 대한 우리의 테마를 인식하고 제대로 출력 할 수있는 모양***테마 목록 우리는 스타일의 상단에 몇 가지 워드 프레스 특정 코드를 배치해야합니다.그것은 다음과 같습니다:

/*Theme Name: My Custom ThemeTheme URI: https://yourwebsite.com/themeAuthor: Your NameAuthor URI: https://yourwebsite.comDescription: This is my first custom theme!Version: 1.0.0License: GNU General Public License v2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Text Domain: my-custom-themeTags: custom-background*/

기술적으로 필드 중 어느 것도 필요하지 않습니다,하지만 당신은 당신의 테마가 포스트 관리자에서 잘보고 싶은 경우에 그들은 매우 좋습니다. 당신은 워드 프레스에 테마를 배포하는 경우 그들은 또한 필요합니다.

      • 테마 이름-항상 테마 이름을 제공해야 합니다. 그렇지 않으면 폴더 이름이 사용됩니다,우리의 예에서 내-사용자 정의 테마.
      • 테마 우리당–사용하는 경우,테마 우리당 방문자가 테마에 대한 자세한 내용을 배울 수있는 페이지에 대한 링크를 제공해야합니다.
      • 저자-당신의 이름은 여기에 간다.
      • 저자 우리당-귀하의 개인 또는 비즈니스 웹 사이트에 대한 링크를 여기에 배치 할 수 있습니다.
      • 설명-설명은 포스트-관리자 테마 모달에 또한 워드 프레스 테마 목록에 표시됩니다.
      • 버전-버전 번호는 개발자가 변경 사항을 추적하고 사용자가 최신 버전을 사용하는지 여부를 알 수 있도록 도와줍니다. 우리는 업데이트의 변경의 심각도를 나타 내기 위해 셈버 번호 시스템을 따릅니다.
      • 라이센스-당신이 당신의 테마를 라이센스하는 방법은 당신에게 달려 있습니다,하지만 당신은 워드 프레스에 테마를 배포 할 수 없습니다.
      • 라이센스 우리-이것은 단순히 위에 나열된 라이센스에 대한 링크입니다.
      • 텍스트 도메인-텍스트 도메인은 테마를 다른 언어로 번역할 때 사용됩니다. 걱정하지 마세요,우리는 나중에 깊이 탐구 할 것입니다. 지금은 테마 폴더와 텍스트 도메인이 공백 대신 하이픈으로 구분된 테마 이름이 되는 것이 좋습니다.
      • 태그-당신이 당신의 테마를 업로드하는 경우 태그는 사용됩니다 WordPress.org 테마 디렉토리. 그들은’기능 필터’메커니즘의 기초입니다.

위의 내용을 복사하여 스타일에 붙여 넣습니다.참고:우리는 아직 스크린 샷이 없기 때문에 그것은 순간에 조금 빈 보인다. 우리는 나중에 추가 할 것입니다.

색인.

색인.이 파일은 엄격하게 필요한 유일한 파일입니다. 그 작업은 우리의 테마에 대한 모든 프런트 엔드 출력을 렌더링하는 것입니다.

인덱스 이후.모든 페이지(홈,게시물,카테고리,아카이브)는 많은 작업을 수행 할 것입니다. 시작 하려면 우리는 머리 부분을 다룰 것입니다.이 예제에서는 다음과 같이 설명합니다. wp_head은 워드프레스 및 타사 플러그인이 템플릿 파일을 수정하지 않고 코드를 헤더에 삽입할 수 있는 핵심 기능입니다. 이를 액션 후크라고 합니다.<제목>페이지 제목을 출력하는 태그가 없습니다. 워드 프레스는 동적으로 제목을 삽입 할 포스트 _헤드 후크를 사용할 수 있기 때문이다.

(.2018. 하드코딩하는 대신 이 작업을 수행하는 데에는 매우 좋은 이유가 있습니다.

다음으로,우리는 페이지의 본문이:

<body <?php body_class(); ?>>

워드프레스에서 제공하는 헬퍼 함수입니다.:

class="page page-id-2 page-parent page-template-default logged-in"

또한 매개 변수를 허용하므로 고유한 클래스를 추가할 수 있습니다.:

<body <?php body_class( 'wide-template blue-bg' ); ?>>

다음으로 템플릿 헤더가 있습니다.

<header class="site-header"><p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>"><?php bloginfo( 'name' ); ?></a></p><p class="site-description"><?php bloginfo( 'description' ); ?></p></header><! – .site-header – >

여기서 우리는 출력 사이트 제목과 설명에 워드 프레스’내장 템플릿 기능을 사용하고 있습니다. 또한 사이트 제목을 홈페이지에 다시 링크하기 위해 도우미 기능인 홈 _헐()을 사용했습니다.

다음 페이지 본문:

<div class="site-content"><?phpif ( have_posts() ) :while ( have_posts() ) :the_post();?><article <?php post_class(); ?>><header class="entry-header"><?php the_title( '<h1 class="entry-title">', '</h1>' ); ?></header><! – .entry-header – ><div class="entry-content"><?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?></div><! – .entry-content – ></article><! – #post-## – ><?php// If comments are open or we have at least one comment, load up the comment template.if ( comments_open() || get_comments_number() ) :comments_template();endif;endwhile;else :?><article class="no-results"><header class="entry-header"><h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1></header><! – .entry-header – ><div class="entry-content"><p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p></div><! – .entry-content – ></article><! – .no-results – ><?phpendif;?></div><! – .site-content – >

이것은 흥미로운(그리고 조금 더 복잡한)곳입니다. 여기에서 우리는 워드 프레스,루프의 가장 중요한 기능을 사용하고 있습니다. 루프는 사용자가 어떤 페이지에 있는지,무엇을 표시해야 하는지를 파악하는 작업을 수행합니다. 그런 다음 템플릿 기능을 사용하여 데이터를 반복하고 출력 할 수있는 하나 이상의’게시물’목록을 반환합니다.

루프가 404 페이지 또는 삭제 된 게시물과 같은 결과를 반환하지 않으면 다른 연산자를 사용하여 미리 정의 된 메시지를 표시합니다.

주변 코드가 없으면 단순화 된 루프는 다음과 같습니다:

if ( have_posts() ) : // check if the loop has returned any posts.while ( have_posts() ) : // loop through each returned post.the_post(); // set up the content so we can use template tags like the_title().the_title(); // output the post title.the_content(); // output the post content.endwhile;else : echo 'No Page Found'; // output an error message if there are no posts.endif;?>

참고:워드 프레스는 블로깅의 기원을 가지고 있기 때문에,기능의 많은 그들이 반환 및 출력 내용의 모든 유형(게시물,페이지,사용자 정의 포스트 유형)할 수 있지만,’포스트’용어를 사용합니다.

마지막으로 바닥글이 있습니다. 적극적으로 페이지를 렌더링하는 데 필요한 바닥 글에 스크립트를 포함하는 워드 프레스와 플러그인에 의해 사용되는 또 다른 액션 후크가있다.

<?php wp_footer(); ?></body></html>

당신이 지금까지 함께 다음 봤는데 경우에 당신은 다음과 같이 보이는 모든 기능을 워드 프레스 테마를해야합니다:

스타터 테마 미리보기

우리의 테마는 어떤 디자인 상을 수상하지 않을 것이며,그것은 사용자가(사이드 바,탐색,메타 데이터,썸네일,페이지 매김 등)필수 고려 기능을 많이 누락되었습니다.)그러나 그것은 좋은 시작입니다!

의 계속 우리가 그것을 개선 할 수있는 방법을 살펴 보자.

단계#2:함수를 만듭니다.4164>

함수.필수 파일은 아니지만 99.99%의 테마가 가질 수있는 많은 이점을 제공합니다. 에 기능.당신은 워드 프레스’에 내장 된 테마 기능을 활용하고 또한 자신 만의 코드를 추가 할 수 있습니다.

함수를 만듭니다.우리는 다음 섹션에서 코드를 추가 할 예정입니다.

탐색 메뉴 추가

대부분의 경우 모든 웹 사이트는 탐색 메뉴를 사용하지만,지금까지 우리의 주제는 하나를 지원하지 않습니다. 워드 프레스에게 우리의 테마 탐색 메뉴를 제공합니다,우리는 기능에 등록해야합니다.이 같은:

register_nav_menus( array( 'menu-1' => __( 'Primary Menu', 'my-custom-theme' ),);

필요한 경우 둘 이상의 메뉴를 등록할 수 있습니다.

워드 프레스는 이제 우리의 메뉴에 대해 알고 있지만,우리는 여전히 우리의 테마에 출력해야합니다. 우리는 인덱스에 사이트 설명 아래에 다음 코드를 추가하여 그렇게.2015 년:

wp_nav_menu( array( 'theme_location' => 'menu-1',) );

이제(스타일이없는)탐색 메뉴가 있습니다:

탐색 메뉴와 스타터 테마

사이드 바 추가

우리의 테마 중 사이드 바(위젯 영역)이 없습니다,이제 해결하자.

먼저 함수에 사이드바를 등록해야 합니다.2015 년:

function my_custom_theme_sidebar() { register_sidebar( array( 'name' => __( 'Primary Sidebar', 'my-custom-theme' ), 'id' => 'sidebar-1', ) );}add_action( 'widgets_init', 'my_custom_theme_sidebar' );

이제 사이드 바를 만듭니다.다음 코드를 추가합니다:

<?php if ( is_active_sidebar( 'sidebar-1' ) ) { ?> <ul class="sidebar"> <?php dynamic_sidebar('sidebar-1' ); ?> </ul><?php } ?>

여기서 우리는 코드를 출력하기 전에 사이드 바가’활성’인지 확인하기 위해 만약 문을 사용하고 있습니다. 활성 사이드바는 사용자가 적어도 하나의 위젯을 추가한 사이드바입니다.

마지막 단계는 사이드바를 색인에 포함하는 것이다.이 문제를 해결하려면 다음을 수행하십시오.

추천 이미지 추가

사이드 바 및 탐색 메뉴처럼,우리는 단지 출력은 우리의 테마에 이미지를 추천하고 작동 할 것으로 예상 할 수 없습니다,우리는 우리가 먼저 그 기능을 지원 워드 프레스를 알려야합니다. 에 기능.추가:

add_theme_support( 'post-thumbnails' );

이제 우리는 추가 할 수 있습니다.; 우리의 루프 내에서 썸네일이 작동합니다. 유일한 문제는 그들이 대부분의 용도에 너무 큰 1920 픽셀 2560 픽셀의 워드 프레스의 최대 크기에서 출력 것입니다. 사용자가 이미지를 업로드할 때,이미지 크기가 정의된 경우,워드프레스는 업로드된 이미지의 버전을 그 크기로 생성합니다(원본을 유지하면서). 사용자의 이미지가 크기보다 작은 경우는 원본보다 더 큰 이미지를 만들 수 없기 때문에 워드 프레스는 아무것도 할 것입니다 설정했습니다.

원본 대신 최적화된 기능 이미지를 사용하려면 다음 코드를 함수에 배치합니다.2015 년:

add_image_size( 'my-custom-image-size', 640, 999 );

첫 번째 매개 변수는 핸들,두 번째 매개 변수는 이미지 너비 및 세 번째 매개 변수는 높이입니다. 한 차원 만 제한하려는 경우 높이와 너비는 모두 선택 사항입니다.색인에서

.2015 년:

the_post_thumbnail( 'my-custom-image-size' );

스타일 및 스크립트 대기열

앞서 스타일과 스크립트를 템플릿 파일에 직접 하드 코딩하는 대신 대기열에 넣는 것이 더 낫다고 말했습니다. 큐를 사용하면 훨씬 더 많은 유연성을 얻을 수 있기 때문입니다.

제대로 완료되면 대기열은 워드프레스에 어떤 리소스가 로드되고 있는지 알려줍니다. 워드 프레스는 자원이 필요한 알고있는 경우는 동일한 자원이 두 번 이상로드되지 않도록 할 수 있습니다. 이것은 특히 중요 한 경우 매우 인기 있는 라이브러리 같은 여러 테마와 플러그인 활용 될 것입니다.

큐의 또 다른 이점은 큐에 저장된 리소스가 플러그인에 의해 큐를 해제하여 템플릿 파일을 수정할 필요가 없다는 것입니다.

우리의 테마는 스타일을 가지고 있지만.그것은 아직 그것을 사용하지 않는 파일,이제 큐를 보자:

function my_custom_theme_enqueue() { wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

get_stylesheet_uri() 현재 테마의 스타일시트를 검색하는 도우미 함수입니다. 우리가 다른 파일을 대기열 경우 우리는 대신이 작업을 수행해야합니다:

wp_enqueue_style( 'my-stylesheet', get_template_directory_uri() . '/css/style.css' );

그것은 우리가 이런 식으로 대기열 것 그랬다면 우리의 주제는 어떤 스크립트가없는:

function my_custom_theme_enqueue() {wp_enqueue_style( 'my-custom-theme', get_stylesheet_uri() );wp_enqueue_script( 'my-scripts', get_template_directory_uri() . '/js/scripts.js' );}add_action( 'wp_enqueue_scripts', 'my_custom_theme_enqueue' );

위의 예외는 워드 프레스에 의해 사전 등록 된 스크립트입니다,이러한 경우에 당신은 단지 첫 번째 매개 변수를 제공해야합니다($핸들):

wp_enqueue_script( 'jquery' );

우리의 주제는 강력한 기반을 가지고 있지만 스타일에 몇 가지 기본 연사 추가,어떤 디자인이 부족하다.카톡은 큰 차이를 만들 것입니다. 우리는 데모로 우리의 샘플 테마에 약~100 라인을 추가 한 결과는 다음과 같습니다:

제목 태그

모든 테마는 워드 프레스의 내장 기능을 사용하여 제목 태그를 생성해야합니다.이 기능은 함수에이 코드를 추가하여 사용할 수 있습니다.파일: add_theme_support( 'title-tag' );그게 다야,워드 프레스는 페이지의 출력을 처리합니다<제목>필요한 경우 플러그인은 필터를 사용하여 출력을 수정할 수 있습니다. 검색 엔진 최적화 플러그인은 종종 더 제목을 최적화하기위한 노력으로이 작업을 수행.

3 단계:템플릿 파트 추가

지금 템플릿 코드의 80%가 색인에 있습니다.

이것이 작동하는 동안 단수와 같은 다른 템플릿 파일이있을 때 많은 코드 반복이 발생합니다.검색.그 이유는 무엇입니까? 템플릿 부분은 우리가 템플릿에서 코드를 다시 사용할 수 있도록하여 테마 개발을 쉽게. 우리의 머리글과 바닥 글은 모든 페이지에 동일하므로 그들은 템플릿 부분을 사용하기위한 완벽한 후보입니다. 먼저 헤더를 만듭니다.색인에서 다음 코드를 이동합니다.2015 년:

<!DOCTYPE html><html <?php language_attributes(); ?>><head><meta charset="<?php bloginfo( 'charset' ); ?>"><meta name="viewport" content="width=device-width, initial-scale=1"><link rel="profile" href="<https://gmpg.org/xfn/11>"><?php wp_head(); ?></head> <header class="site-header"> <p class="site-title"> <a href="<?php echo esc_url( home_url( '/' ) ); ?>"> <?php bloginfo( 'name' ); ?> </a> </p> <p class="site-description"><?php bloginfo( 'description' ); ?></p><?phpwp_nav_menu( array( 'theme_location' => 'menu-1',) );?> </header><! – .site-header – >

색인.위의 코드를 다음과 같이 바꿉니다:

<?php get_template_part( 'header' ); ?>

참고:템플릿 파트를 가져올 때는 생략해야 합니다.템플릿 부분 핸들에서.

그런 다음 이 코드를 바닥글로 이동하여 바닥글 템플릿 파트를 만듭니다.위의 과정을 반복:

<?php wp_footer(); ?></body></html>

마지막으로’결과 없음’코드를 여러 템플릿에서 사용할 수 있으므로 템플릿 부분으로 이동합니다. 콘텐츠 만들기-없음.이 코드를 새 파일로 옮깁니다.

<article class="no-results"> <header class="entry-header"> <h1 class="page-title"><?php esc_html_e( 'Nothing Found', 'my-custom-theme' ); ?></h1> </header><! – .entry-header – > <div class="entry-content"> <p><?php esc_html_e( 'It looks like nothing was found at this location.', 'my-custom-theme' ); ?></p> </div><! – .entry-content – ></article><! – .no-results – >

이제 색인은 다음과 같습니다:

<?php get_template_part( 'header' ); ?> <div class="site-content"> <?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?> <article <?php post_class(); ?>> <?php the_post_thumbnail(); ?> <header class="entry-header"> <?php the_title( '<h1 class="entry-title">', '</h1>' ); ?> </header><! – .entry-header – > <div class="entry-content"> <?php the_content( esc_html__( 'Continue reading &rarr;', 'my-custom-theme' ) ); ?> </div><! – .entry-content – > </article><! – #post-## – > <?php // If comments are open or we have at least one comment, load up the comment template. if ( comments_open() || get_comments_number() ) : comments_template(); endif; endwhile; else : get_template_part( 'content-none' ); endif;?></div><! – .site-content – ><?phpget_sidebar();get_template_part( 'footer' );

위의 완벽하게 작동하는 동안,우리가 할 수있는 약간의 개선이있다. 워드 프레스는 머리글,바닥 글 및 사이드 바 템플릿 부분을 포함 도우미 기능이 있습니다. 가능한 경우 핵심 기능을 사용하는 것이 가장 좋은 방법이므로 대신 사용해야 합니다.

get_template_part( 'header' );을get_header();로 바꾸고get_template_part( 'footer' );을get_footer();

로 바꿉니다.째챈짹창쨉쨉쩌짯째체검색.404,404.우리는 우리의 테마에 새 템플릿 파일을 추가 할 때 우리는 템플릿 부분으로 완료 토대는 배당금을 지불 할 것이다. 우리는 가장 일반적인 나열했습니다 아래. 코드 예제로 당신을 압도하는 것을 피하기 위해 우리는 대신 소스 코드에 연결했습니다.

단수.대부분의 경우 레이아웃은 이러한 두 페이지 유형 모두에 대해 동일하므로 게시물과 페이지는’단수’로 간주됩니다. 그러나 그렇지 않은 경우 더 구체적인 페이지를 사용할 수 있습니다.단일 및 단일.대신.

예제 코드–단수.2018 년 11 월 1 일전체 내용이 아닌 발췌 내용을 표시하고 내용을 설명하는 아카이브 헤더가 있습니다.

템플릿 계층 구조를 다시 참조하면 아카이브 템플릿이 모든 유형의 아카이브(작성자,범주,태그,분류,날짜)를 포함하는 것을 볼 수 있습니다.:

      • 저자.
      • 카테고리.
      • 태그.
      • 분류.2018 년 11 월 15 일2015 년

예제 코드-아카이브.2018.09.29………..워드 프레스 웹 사이트를 사용하여 검색 할 수 있습니다?예를 들어yourwebsite.com?s=test입니다. 검색.이러한 검색 결과를 출력합니다.

예제 코드–검색.5511>

404.우리가 색인에 추가 한 다른 진술.”페이지를 찾을 수 없습니다”오류를 잡는다,하지만 당신은 출력을 더 제어 할 수 있도록 자신의 템플릿 파일로 그 기능을 분리 할 수 있습니다. 이것이 404 의 사용 사례입니다.템플릿 파일.

예제 코드–404.5 단계:보조 파일

테마를 대중에게 배포하는 경우 다음 파일이 필수적입니다. 이것들이 없으면 테마 저장소 및 마켓플레이스에서 테마가 거부됩니다.

스크린 샷.사용자가 새 테마를 선택할 때 스크린샷이 포스트-관리자 테마 목록에 표시됩니다. 다음은 따라야 할 몇 가지 모범 사례입니다:

      • 스크린 샷은 1200 픽셀이어야한다 900 픽셀
      • 스크린 샷에 있어야합니다.또는.스크린 샷 테마의 정확한 표현해야한다
      • 스크린 샷을 최적화해야한다(사용 tinypng.com 또는 유사한)

추가 정보.워드프레스는 추가 정보의 정보를 사용하지 않습니다.그것은 스타일에서 필요한 모든 것을 가져옵니다.-네 반면에,워드 프레스 테마 디렉토리는 추가 정보 파일에서 중요한 정보를 끌어 않으며 필요한 파일을 고려한다.

대부분의 개발자는 추가 정보를 사용합니다.테마에 대한 모든 정보를 저장합니다. 간단한 추가 정보.다음과 같이 보입니다:

=== Theme Name ===Requires at least: 5.0Tested up to: 5.2Requires PHP: 5.6License: GPLv2 or laterLicense URI: <https://www.gnu.org/licenses/gpl-2.0.html>Short description. No more than 150 chars.== Description ==Theme desc.== Changelog === 1.0 =* Added new option== Resources ==* normalize.css <https://necolas.github.io/normalize.css/>, (C) 2012-2016 Nicolas Gallagher and Jonathan Neal, (<https://opensource.org/licenses/MIT>)
      • 적어도 필요-이 테마와 호환되는 워드 프레스의 최소 버전입니다.
      • 까지 테스트-이 필드는 테마가 테스트되었습니다 워드 프레스의 최신 버전을 나타냅니다.
      • 이 필요합니다.
      • 설명-이 설명 필드는 현재 어디에도 표시되지 않습니다.
      • 변경 내역-변경 내역은 어디에도 사용되지 않지만 개발자와 일부 사용자는 이 파일을 참조하여 변경된 내용을 확인합니다.
      • 리소스-대부분의 타사 리소스에는 어떤 종류의 속성이 필요합니다. 자원 섹션은 그 넣어 널리 받아 들여지는 장소입니다. 명시적으로 기여가 필요하지 않은 리소스의 경우에도 사용자가 사용 중인 리소스의 라이선스를 알 수 있도록 여기에 나열하는 것이 좋습니다.

6 단계: 페이지 템플릿 만들기

페이지 템플릿을 사용하면 개발자가 개별 게시물 및 페이지에 사용할 수 있는 사용자 지정 템플릿을 만들 수 있습니다. 예를 들어 대부분의 테마에는 2 열(콘텐츠-사이드바)레이아웃이 있지만 일부 페이지에서는 사용자가 콘텐츠에만 집중하고 사이드바를 표시하지 않으려고 할 수 있습니다. 페이지 템플릿이 도움이 될 수있는 곳입니다.

“페이지 템플릿”은 어떻게 생성됩니까?

테마 폴더에서’페이지 템플릿’이라는 새 폴더를 만들고 해당 폴더 내에서 단일 열이라는 파일을 만듭니다. 속도를 높이려면 모든 코드를 단수에서 복사하십시오.페이지 템플릿/단일 열.이 템플릿은 필요하지 않습니다.

이제 우리는이 페이지 템플릿입니다 워드 프레스를 알려주는 특별한 헤더를 추가해야합니다,그것은 다음과 같습니다:

/*Template Name: Single Column TemplateTemplate Post Type: post, page*/

이 코드는 자명하다,우리는 단순히 워드 프레스에게이 함께 사용할 수있는 템플릿과 포스트 유형의 이름을 말하고있다.

그게 전부입니다,우리의 새로운 페이지 템플릿은’페이지 속성’의 편집기에서 사용할 수 있습니다.

페이지 템플릿 드롭 다운

단계#7:테마를 호환되도록 만듭니다.모든 언어가 왼쪽에서 오른쪽으로 읽히는 것은 아닙니다. 예를 들어 아랍어 및 히브리어는 오른쪽에서 왼쪽으로 읽습니다. 간단한 방법으로 테마를 호환할 수 있습니다.

테마 폴더에 새 파일을 만듭니다.다음 코드를 복사하여 붙여 넣습니다:

body {direction: rtl;unicode-bidi: embed;}

워드프레스 웹 사이트의 활성 언어인 경우 워드프레스 파일을 자동으로 로드할 수 있습니다.

당신이 더 많은 학습에 관심이 있다면 여기에 두 개의 환상적인 자원이다:단계#8:항상 모범 사례를 따르십시오

모범 사례는 워드 프레스 테마를 쉽게 구축하고 유지 관리 할 수 있도록 시간이 지남에 따라 진화했다. 이러한 원칙을 따르는 것이 도움이 될 뿐만 아니라 다른 개발자가 코드를 사용하여 작업해야 할 때 더 쉽게 만들 수 있습니다.

1)스타터 테마 사용

스타터 테마는 테마를 구축 할 수있는 견고한 기반을 제공합니다. 일반적으로 그들은 경량,아니 스타일과 아무 구성 옵션을 거의 포함. 을 통해 시간은 당신을 만들 수 있습니다 당신의 자신의 시동기 테마할 수 있는 기지의 모든 프로젝트에,하지만 지금 여기에 몇 가지 인기있는 옵션:

      • 밑줄
      • 발
      • HTML5 빈

2) 알 WordPress 코딩 표준을

코딩 표준을 사용하는 방법 서식하는 코드에서 일관된 방식으로 전체에 걸쳐 codebase. 워드프레스 코딩기준은 워드프레스 코딩기준을 가지고 있습니다. 코딩 표준을 사용하는 것은 최종 사용자 환경에 영향을 미치지 않지만 코드를 훨씬 더 읽기 쉽게 만듭니다. 당신은 워드 프레스 코딩 표준을 사용하지 않는 경우에도,우리는 항상 표준을 사용하는 것이 좋습니다 것입니다.

      • WordPress.org 코딩 표준

3) 현지화 사용

자원봉사자들의 노력 덕분에 워드프레스는 수백 개의 언어로 제공됩니다. 테마가 공개적으로 출시 될 경우 너무 번역 할 수있는 방식으로 구축 할 필요가있다.

걱정하지 마세요,그것은 매우 쉽게 할 수 있습니다. 우리가해야 할 일은 모든 문자열이 직접 출력되는 것이 아니라’지역화 기능’을 통과하는지 확인하는 것입니다.

이 대신:

<?php echo 'Previous Post'; ?>

우리는 대신이 작업을 수행:

<?php echo __( 'Previous Post', 'my-custom-theme' ); ?>

__() 문자열 및 텍스트 도메인을 허용하는 지역화 함수입니다. 이 함수는 제공된 문자열의 번역을 반환하거나 번역을 사용할 수 없는 경우 원래 문자열을 반환합니다.

4)플러그인 기능 방지

사용자가 테마를 변경하면 프레젠테이션 계층만 변경해야 합니다. 내용 및 기능은 대개는 동일물에 체재해야 한다. 이것이 의미하는 것은 워드 프레스 역할이 플러그인에 포함되어야하는 방법에 영향을 미치는 모든 기능,하지 테마. 플러그인 기능의 몇 가지 예는 다음과 같습니다:

      • 사용자 정의 포스트 유형
      • 페이지 빌더
      • 소셜 미디어 공유
      • 검색 엔진 최적화)

이 테마에 검색 엔진 최적화 컨트롤을 포함하는 편리(그리고 아마도 판매 포인트)보일 수 있지만,실제로 장기적으로 사용자를 아파요. 미래에,그들은 그들의 테마를 변경 해야 하지만 그들의 검색 엔진 최적화 구성의 모든 현재 테마에 밀접 하 게 결합 되어 있기 때문에 수 없습니다. 구성이 플러그인에 저장된 경우 대조적으로,그들은 걱정없이 테마를 변경할 수 있습니다.

5)접두사(충돌 방지)

충돌을 방지하려면 테마에서 만든 모든 함수,클래스 및 전역 변수 앞에 접두사를 붙여야 합니다. 이는 사용자의 웹 사이트에서 실행되는 다른 코드를 알 수 없기 때문에 중요합니다. 접두사는 이름 충돌 및 치명적인 오류를 방지합니다.

대시 또는 밑줄로 구분된 테마 이름은 대부분의 경우 접두사로 작동합니다. 테마 이름이 매우 긴 경우 이니셜 대신 작업 할 수 있습니다.

Theme Name: Scaffoldclass Scaffold_Class {}function scaffold_function() {}global $scaffold_globalTheme Name: My Long Theme Nameclass MLTN_Class {}function mltn_function() {}global $mltn_global

6) 핵심 기능 사용

이 있는 경우 휠을 다시 발명하는 대신 항상 핵심 기능을 사용해야 합니다. 여기에는 사이드 바,탐색 메뉴,게시물 축소판,사용자 정의 헤더 및 사용자 정의 배경이 포함되지만 이에 국한되지 않습니다. 이러한 기능은 수백만 명의 사용자에 의해 테스트되었으며 적극적으로 유지 관리 및 개선되었습니다.

핵심 기능의 기능이나 출력을 변경해야하는 경우 워드 프레스가 제공하는 많은 후크 및 필터 중 하나를 사용하여 가능합니다. 예를 들어wp_nav_menu()에는’워커’매개 변수가 있으므로 출력을 완전히 제어 할 수 있습니다.

7)데이터 이스케이프 및 삭제

테마 개발자는 잠재적 악용으로부터 사용자를 보호하기 위해 데이터 이스케이프 및 삭제에 대해 잘 알고 있어야 합니다.

이스케이프 처리

이스케이프 처리는 데이터가 출력되기 전에 안전한지 확인하는 프로세스이며 삭제 작업은 데이터베이스에 저장되기 전에 데이터를 검사하는 프로세스입니다.

워드프레스에는 데이터를 이스케이프하는 데 사용할 수 있는 도우미 기능이 있으므로 직접 만들 필요가 없습니다. 이스케이프 함수의 한 예입니다. 이스케이프되지 않은 출력은 다음과 같습니다:

echo get_theme_mod( 'error_page_title' );

출력을 탈출하기 위해 우리는 이렇게:

echo esc_html( get_theme_mod( 'error_page_title' ) );

당신이 알아야 할 다른 이스케이프 함수는 다음과 같습니다.

단일 함수를 사용하여 문자열을 변환하고 이스케이프할 수도 있습니다:

echo esc_html( __( '404 Not Found', 'my-custom-theme' ) );

된다:

echo esc_html__( '404 Not Found', 'my-custom-theme' );// oresc_html_e( '404 Not Found', 'my-custom-theme' );

팁:테마에서echo $이 있는 곳에서는 이스케이프해야 하는지 확인해야 합니다.

삭제

테마에 설정을 추가하는 경우 사용자가 해당 설정에 입력하는 데이터가 데이터베이스에 들어가기 전에 안전한지 확인해야 합니다. 워드 프레스는 입력을 살균하는 데 도움이되는 기능을 가지고 있습니다.

사용자 정의 프로그램을 사용하여 테마에 설정을 추가할 때’살균 _콜백’이라는 매개 변수가 있습니다. 이 설정을 사용하는 모든 입력은 데이터베이스에 들어가기 전에’삭제 _콜백’에 제공하는 함수에 의해 확인됩니다.

그것은 당신의 설정 중 하나라도 살균_콜백이 누락 된 경우는 워드 프레스 테마 디렉토리에 허용되지 않습니다 위생 처리의 중요성을 강조한다.

$wp_customize->add_setting( 'my_custom_theme_setting', array( 'sanitize_callback' => 'sanitize_text_field' // A core sanitization function. ));

위생 및 이스케이프 기능의 공식 목록은 여기에서 볼 수 있습니다:데이터 위생/이스케이프

단계#9:워드 프레스 테마 배포

테마는 달성하려는 결과에 따라 다른 채널을 통해 배포 할 수 있습니다. 당신의 결과는 단순히 오픈 소스 커뮤니티에 기여하는 경우 다음 워드 프레스 디렉토리에 테마를 업로드하는 것보다 그렇게 할 수있는 더 좋은 방법이 없습니다. 대신,당신은 당신의 테마를 판매하고 직접 돈을 벌 찾고 있다면,너무 그렇게 할 수있는 방법이 있습니다.

다음은 테마 배포를위한 주요 웹 사이트입니다:

1)WordPress.org (다운로드 및 사용자를 얻을 수있는 가장 좋은 장소)

워드 프레스에 테마를 호스팅의 주요 이점은 당신이 당신의 테마에서 가시성 향상을 얻을 수 있다는 것입니다 워드 프레스에뿐만 아니라 볼 수있다.조직 웹 사이트뿐만 아니라 포스트-관리 대시 보드에.

워드 프레스와 테마를 호스팅의 또 다른 장점은 내장 된 업데이트 시스템입니다. 당신이 당신의 테마를 업데이트하는 경우 모든 사용자는 포스트-관리자 대시 보드 내부에 통보하고 최신 버전으로 업데이트 할 수있는 쉬운 경로가 제공됩니다.

WordPress.org 무료 테마 만 허용하지만 그렇다고 돈을 벌 수 없다는 의미는 아닙니다. 무료 테마는 프리미엄 테마,플러그인 또는 서비스를 홍보하는 훌륭한 채널이 될 수 있습니다.

2)WordPress.com

WordPress.com 무료 및 프리미엄 테마를 모두 호스팅합니다. 그러나,그들은 몇 년 동안 새로운 저자 제출에 열려 있지 않았습니다.

3)테마포레스트

테마포레스트는 프리미엄 테마의 주요 시장입니다. 최고 판매 테마(아바다)초과 매출이$5,000,000.

일반적으로 테마 포레스트의 구매자는 완전한 기능을 갖춘”다목적”테마를 기대합니다. 상단 테마의 모든 페이지 빌더 기능을 가지고 있으며,개발자의 팀에 의해 지원됩니다. 새로운 저자를 위해 침입할 것이다 아주 단단한 시장 이다.

4)크리에이티브 마켓과 모조 마켓 플레이스

크리에이티브 마켓과 모조 마켓 플레이스는 프리미엄 테마 마켓의 소규모 플레이어이므로 함께 그룹화했습니다. 그들은 둘 다 효과적으로 동일한 서비스를 제공합니다.숲 그러나 더 작은 규모.이 응용 프로그램은 당신에게 아름다운 욕실 꾸미기의 갤러리를 보여줍니다. 검토 과정 및 따라야 할 지침이 없습니다. 그러나,당신은 가시성에서 이득이 되지 않을 것입니다 wordpress.org 그리고 사용자가 최신 버전을 얻을 수 있도록 자신의 업데이트 메커니즘을 구축해야합니다.

단계#10: 코드 테스트 및 개선

1)테마 테스트

테마 단위 테스트

테마 단위 테스트는 다양한 콘텐츠 형식과 에지 케이스를 포함하는 표준 워드프레스 콘텐츠 가져오기 파일입니다. 개발 환경에 쉽게 업로드 할 수 있으며 간과했을 수있는 많은 시나리오를 강조 할 것입니다.테마 개발자로서,테마가 활성화 된 상태에서 테마를 테스트하는 것은 당신이 일을해야 최소한의 것입니다. 테마 오류 또는 경고를 반환 해야 합니다.

테마가 지원하는 여러 가지 버전으로 테스트를 반복하는 것도 중요합니다. 각 주요 릴리스에는 새로운 변경 사항,경고 및 감가 상각이 있습니다. 이 테마를 즐길 희망.다음 코드를 추가합니다.2015 년:

DEFINE( 'WP_DEBUG', true );

몬스터 위젯

몬스터 위젯은 한 번에 사이드 바에 13 코어 위젯을 추가 할 수있는 유용한 플러그인입니다. 이 도구는 당신의 시스템의 모든 것을 통제하에 관리하는데 도움을 줍니다.

테마 스니퍼

테마 스니퍼는 테마 검토 팀에 의해 생성 된 플러그인입니다. 이스케이프 및 현지화 오류가 많이 발생합니다(전부는 아님). 또한 워드 프레스 코딩 표준에 대한 테마를 확인합니다.

2)에 테마를 제출 WordPress.org

이 가이드의 시작 부분에서,우리는 당신이 마지막에 도달 할 때까지는 당신이 제출할 수있는 테마를 가질 것이라고 말했다 wordpress.org.그 과정을 살펴 봅시다.

업로드 프로세스

업로드 프로세스는 간단합니다. 만들거나 워드 프레스 계정에 로그인 한 다음이 페이지로 이동– https://wordpress.org/themes/upload/

당신은 당신의 테마를 압축 지금 그것을 업로드 할 수 있지만,여기에 당신이 먼저 알고 할 수있는 몇 가지 있습니다.

요구 사항

테마 검토 팀은 엄격한 요구 사항을 가지고 있습니다. 테마가 모든 요구 사항을 충족할 때까지 디렉터리에 허용되지 않습니다.

검토 프로세스

테마를 업로드할 때 디렉터리에 허용되기 전에 통과해야 하는 2 단계 검토 프로세스가 있습니다.

먼저 업로드를 누르면 자동 검사가 수행됩니다. 무대 뒤에서,자동 검사기는 테마 스니퍼 플러그인과 매우 유사한 방식으로 작동합니다. 이 오류를 발견하면 그것은 테마를 거부하고 업로드 프로세스가 끝납니다.

테마가 자동 검사를 통과하면 사용자 검토를 기다리는 테마 대기열에 합류합니다. 인간의 검토는 토트넘에서 자원 봉사자에 의해 완료됩니다. 대기열의 테마 수가 검토자 수를 훨씬 초과하므로 테마가 대기열 앞에 도달하는 데 2~3 개월이 걸릴 수 있습니다.

테마가 오류가 없으며,3 개 이상의 중대한 오류가 거부될 수 있는 것처럼 사용자 검토 단계에 도달할 때까지 모든 요구 사항을 준수해야 합니다. 휴먼 검토 단계에서 테마가 거부되면 다시 대기열에 다시 가입해야 하며,이는 다른 휴먼 검토를 위해 2~3 개월을 다시 기다리는 것을 의미합니다.

유용한 리소스: 가장 일반적인 워드 프레스 테마 개발 실수(및이를 해결하는 방법)

그것은 자원 봉사는 훌륭한 학습 경험과 오픈 소스 커뮤니티에 기여할 수있는 방법이 될 수 있습니다,항상 새로운 검토를 찾고 있음을 주목할 필요가있다.

3)테마 목록

축하합니다,테마가 승인되었습니다! 너는 지금 이것 보는 너의 자신의 명부작성이 있는다.

이 페이지에서 기대할 수 있는 것에 대한 개요는 다음과 같습니다:

      • 스크린 샷-스크린 샷은 잠재적 인 사용자가 가장 먼저 볼 수 있으므로 가능한 한 매력적으로 만듭니다. 하지만 여전히 테마의 정확한 표현이 아닌 포토샵 렌더링해야합니다 기억하십시오. 가장 인기있는 테마에서 영감을 얻으십시오.
      • 설명-스타일에서 가져온 설명입니다.당신의 테마를 설명 할 수있는 이상적인 장소이며 주요 기능입니다. 또한 여기에 권장 또는 필요한 플러그인을 나열하는 데 도움이됩니다. 설명은 서식(굵게,기울임 꼴,하이퍼 링크)또는 줄 바꿈을 지원하지 않습니다.
      • 태그-스타일에 나열된 태그의 표현입니다.-네 이 태그 만 허용됩니다.
      • 미리보기 버튼-미리보기는 다음에 의해 생성됩니다 wordpress.org 그리고 테마 개발자로서,우리는 출력을 제어 할 수 없습니다. 불행하게도,미리보기는 기본 내용없이 구성을 사용하기 때문에 그것은 종종 완벽한 미리보기보다 결과.
      • 테마 홈페이지 링크-미리보기 버튼의 주소가’테마 우리당’필드에서 가져온 것입니다.-네 이 페이지는 테마에 대한 정보를 표시하는 페이지에만 사용해야 한다는 엄격한 요구 사항이 있습니다.
      • 활성 설치-이 적극적으로 테마를 사용하는 웹 사이트의 수입니다. 이 숫자는 가장 가까운 10,100 또는 1000 으로 반올림됩니다. 정확한 숫자를 찾는 것은 불가능합니다.
      • 하루 다운로드-이 테마를 다운로드 한 횟수입니다. ‘다운로드’는 새로운 다운로드 또는 테마 업데이트 일 수 있습니다.
      • 리뷰-사용자가 리뷰를 남기려면 로그인해야 합니다.wordpress.org 계정. 일반적으로 사용자가 리뷰를 제출하도록 명시적으로 요청하지 않으면 리뷰를 얻기 어렵습니다.
      • 지원-내장 된 지원 플랫폼 관리 및 테마 문제를 해결하기위한 좋은 곳입니다. 지원 스레드를 만들려면 사용자가 로그인해야 합니다.
      • 번역-번역 플랫폼은 환상적인 자원이다. 당신이 당신의 테마를 현지화하는이 가이드를 통해 조언을 다음 된 경우 사용자는 다른 언어로 번역하고 영어 사용자를 넘어 잠재적 인 사용자 기반을 확장 할 수있을 것입니다.

4) 테마 업데이트

당신이 미래에 테마를 변경하고 워드 프레스에서 호스팅 된 버전을 업데이트해야 할 때 과정은 간단합니다.

먼저 추가 정보에서’버전:’필드 및 변경 로그를 업데이트합니다.티에스트 그런 다음 파일을 압축하고 이전과 동일한 업로드 페이지를 사용하여 다시 업로드하십시오.

시스템은 이를 업데이트로 인식하고 자동으로 승인하여 다른 사람의 검토가 필요하지 않습니다.

Leave a Reply

이메일 주소는 공개되지 않습니다.