WordPress 하위 테마를 만드는 방법(2021)

만드는 방법을 알고 있습니까? WordPress 자식 테마 ?

물론, 귀하의 테마는 귀하의 웹사이트에 적합하게 보일 것이지만 어떤 시점에서는 테마를 편집해야 합니다. 하위 테마를 변경하는 것은 사이트를 편집하는 데 선호되는 선택입니다. 또한 하위 테마에 대해 배우는 것은 알아야 할 기본 WordPress 사항 중 하나입니다. 여기에서 WordPress에 대한 학습을 ​​시작할 수 있습니다.

WordPress 자식 테마를 만드는 과정을 살펴보겠습니다.

WordPress에 하위 테마를 사용해야 하는 이유는 무엇입니까?

워드프레스에서 자식 테마는 부모 테마의 모든 특징, 기능 등을 획득합니다. 반면에 부모 테마를 변경하지 않고 자식 테마를 편집할 수 있습니다. 그것은 당신을 위해 사이트를 편집하는 시간과 노력을 단축시킬 것입니다. 또한 WordPress 테마 업데이트는 더 안전하고 안정적으로 유지됩니다. 하위 항목을 사용자 정의하면 상위 항목의 모든 변경 사항 및 사용자 정의가 동일하게 유지됩니다. 사용자는 다른 WordPress 웹 사이트에서도 이 하위 테마를 사용할 수 있습니다.

하위 테마 만들기 전 주의사항

자식테마를 워드프레스 로 만들기 위해서는 HTML과 CSS를 다루게 되므로 코딩 기술이 필요합니다. 무엇을 변경해야 하는지 아는 것은 상당히 중요합니다. 게다가, 적어도 다른 소스에서 코드 조각을 복사/붙여넣기와 같은 PHP에 대한 기본 지식이 필요합니다.

개발 환경에서 연습하는 것이 좋습니다. 메인 사이트를 엉망으로 만드는 것을 두려워하지 않고 할 수 있는 곳입니다. 그것은 하나의 돌로 두 마리의 새를 죽이는 것과 같습니다. 하나는 테스트 필드로 옮기고 하나는 테마 개발로 사용됩니다.

한 가지 더, 부모 테마는 목적에 맞게 모양과 기능에 맞아야 합니다. 실제로 변경 사항이 적을수록 사이트가 더 좋아질 것입니다.

아래 부분에서는 WordPress create child 테마 의 더 나은 그림을 위해 LearnPress 테마를 예로 사용합니다.

첫 번째 자식 테마 만들기

자식 테마 WordPress를 만들 때 2가지 옵션이 있습니다. 수동 방법을 사용하여 모든 파일에 익숙해질 수 있습니다. 그렇지 않으면 플러그인을 적용하면 복잡한 파일 및 폴더에서 작동합니다.

이제 커스터마이징을 시작하겠습니다.

코드 사용

시작하려면 WordPress 설치에서 /wp-content/themes/를 열고 하위 테마를 위한 새 폴더를 만듭니다. 원하는 대로 이름을 지정합니다.

그런 다음 하위 테마에 대한 처음 2개의 파일을 만들어야 합니다. 텍스트 편집기를 열고 아래 코드를 빈 문서에 붙여넣습니다.

 1 Theme Name: LP Child Theme 2 Theme URI: https://www.wpbeginner.com/ 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild

계획한 대로 정보를 변경하고 이 파일을 최근 하위 테마 폴더의 style.css 파일에 저장할 수 있습니다. 자, 이제 막 자식 테마의 메인 스타일시트를 만들었습니다.

다음으로 상위 테마에서 스타일시트를 가져올 두 ^번째 파일을 만듭니다. 텍스트 편집기에서 새 문서를 만들고 다음 코드를 복사합니다.

 1 /* enqueue scripts and style from parent theme */ 2 3 function learnpress_styles() { 4 wp_enqueue_style( 'child-style', get_stylesheet_uri(), 5 array( 'learn-press-style' ), wp_get_theme()->get('Version') ); 6 ( 7 add_action( 'wp_enqueue_scripts', 'learnpress_styles');

LearnPress를 상위 테마로 사용하면 이 코드가 작동하기 시작합니다. 따라서 대부분의 테마는 다음과 같이 작동합니다. 이 파일을 저장하면 하위 테마의 functions.php 폴더가 됩니다.

이 단계를 거치면 기본 하위 테마가 생성됩니다. "모양"에서 "테마"와 "활성화"를 선택합니다. 따라서 귀하의 사이트는 하위 테마를 사용하기 시작합니다. 커스터마이징이 필요한 경우 다음 부분으로 이동합니다.

플러그인 사용

Child Theme Configurator 플러그인을 사용할 수 있습니다. 코딩이 필요하지 않으므로 쉽게 변경 및 사용자 정의할 수 있습니다.

먼저 사이트에 플러그인을 설치합니다. 플러그인 설치에 대한 자세한 내용을 보려면 여기를 클릭하십시오.

활성화할 때 "도구" -> "하위 테마"로 이동하고 팝업을 묻는 상위 테마에서 LearnPress를 선택합니다. "분석"을 선택하여 상위 테마와의 호환성을 확인합니다. 다음으로 파일을 저장할 하위 테마의 폴더 이름과 저장할 위치를 지정해야 합니다. 기본 설정에서 "하위 테마 속성을 편집하려면 클릭"을 선택하십시오. 그런 다음 하위 테마의 정보를 수행합니다.

자식 테마를 수동으로 만들 때 자식 테마는 부모 테마의 메뉴와 도구를 상속하지 않습니다. 이를 해결하려면 Child Theme Configurator를 사용하십시오. 마지막으로 "Create New Theme Child"를 선택하여 완료합니다. 이 단계에서 차일드 테마에는 추가 개발을 위한 functions.php 및 style.css가 있습니다. 분명히 자식 플러그인을 미리 보는 것을 잊지 마십시오. 그런 다음 "활성화 및 게시"를 선택하여 자식 테마를 게시합니다.

이제 자녀 테마를 사용자 정의하기 시작합니다.

WordPress 하위 테마의 사용자 정의

"style.css" 파일에 코드를 추가하여 상위 테마와 조금 다른 하위 테마 WordPress를 생성 합니다.

Firefox/Chrome Inspector에서 코드 복사

Chrome 및 Firefox의 Inspector 위젯을 사용하여 필요한 CSS 코드를 찾을 수 있습니다. 게다가 이러한 도구를 사용하여 모든 사이트의 CSS 및 HTML 요소에 액세스할 수 있습니다.

게시물 또는 o 사이트의 CSS 파일을 보려면 마우스 오른쪽 버튼을 클릭하고 "검사"를 선택하십시오. 화면이 절반으로 분할되고 페이지의 CSS와 HTML을 볼 수 있습니다. HTML 라인 위로 마우스를 이동하면 인스펙터 도구가 상단 창에 사용자를 표시합니다. CSS 규칙도 수행합니다.

뒷면에 일시적인 색상 변화가 있습니다. 영구적으로 만들려면 이 CSS 규칙 줄을 복사하고 하위 테마의 style.css 파일에 붙여넣습니다.

 1 body { 2 background-color: #fdf8ef; 3 )

변경 사항을 저장하고 사이트를 미리 봅니다. 게다가 테마의 스타일시트에 있는 모든 요소에 대해 이를 다시 실행할 수 있습니다. 음, 여기에서 하위 테마에 대한 전체 스타일시트를 제공합니다.

 1 Theme Name: WPB Child Theme 2 Theme URI: https://www.thimpress.com 3 Description: A LearnPress child theme 4 Author: ThimPress 5 Author URI: https://www.thimpress.com 6 Template: learnpress 7 Version: 1.0.0 8 Text Domain: learnpresschild 9 */ 10 11 .site-title { 12 color: #7d7b77; 13 ) 14 .site-description { 15 color: #aba8a2; 16 ) 17 body { 18 background-color: #fdf8ef; 19 color: #7d7b77; 20 ) 21 .entry-footer { 22 color: #aba8a2; 23 ) 24 .entry-title { 25 color: #aba8a2; 26 font-weight: bold; 27 ) 28 .widget-area { 29 color: #7d7b77; 30 )

상위 테마의 style.css 파일에서 코드 복사

보시다시피 상위 테마의 style.css 파일에서 복사하여 하위 테마에 붙여넣고 사용자 정의할 수 있습니다.

예를 들어 페이지의 배경색 코드는 다음과 같습니다.

 1 background-color: var(--global--color-background);

'-global-color-background'는 테마의 다양한 위치에서 사용되는 변수입니다. 해당 위치의 색상을 동시에 변경해야 하는 경우 변수 값을 변경해야 합니다. WordPress 설치 폴더의 /wp-content/themes/learnpress로 이동하고 텍스트 편집기에서 style.css 파일을 열어 –global-color-background의 위치를 ​​찾습니다. 해당 변수는 다른 변수로 변경할 수 있습니다. 상위 테마의 style.css 파일에서 많은 색상 변수를 찾을 수 있습니다. 적절한 색상 옵션을 선택한 후 해당 코드 줄을 복사하여 자식 테마의 style.css 파일에 붙여넣고 이전 항목을 색상 경향에 맞게 선택한 새 항목으로 바꿉니다. 그런 다음 계획된 색 구성표에 따라 색을 나눕니다. 이 프로세스를 통해 색 구성표를 일관되고 빠르게 편집할 수 있습니다.

템플릿 파일 사용자 정의

테마에서 웹 사이트의 파일 처리 영역을 템플릿이라고 합니다. 템플릿은 일반적으로 처리하는 섹션의 이름을 따서 명명됩니다. 따라서 일부 중요한 섹션은 다양한 파일 또는 콘텐츠 템플릿으로 관리됩니다.

템플릿을 사용자 지정하려면 상위 테마에서 해당 파일을 찾아 하위 테마에 복사합니다. 그런 다음 텍스트 편집기에서 열고 수정을 시작합니다.

footer.php 파일로 이 과정에 대한 튜토리얼을 보여드리겠습니다. 하위 테마의 폴더에 복사하고 일반 텍스트 편집기에서 엽니다. 예를 들어 바닥글에서 "Proudlypowered by WordPress" 링크를 삭제하고 저작권 표시를 추가해 보겠습니다. 시작하려면 <div class=”powered-by”> 태그 사이를 모두 삭제합니다.

 1 <div class="powered-by"> 2 <?php 3 printf( 4 /* translators: %s: WordPress. */ 5 esc_html__( 'Proudly powered by %s.', 'learnpress' ), 6 '<a href="' . esc_url( __( 'https://wordpress.org/', 7 'learnpress' ) ) . '">WordPress</a>' 8 ); 9 ?> </div><!-- .powered-by -->

그런 다음 아래 예에서 해당 태그 아래에 있는 코드를 붙여넣습니다.

 1 <div class="powered-by"> 2 <p>&copy; Copyright <?php echo date("Y"); ?>. All rights reserved.</p> 3 </div><!-- .powered-by -->

"변경 사항 저장"을 선택하고 사이트로 돌아오면 새로운 저작권 고지가 표시됩니다.

WordPress 하위 테마에 기능 추가

사이트에 기능을 변경하거나 추가하려면 functions.php 파일을 찾아야 합니다. 이 파일은 PHP 코드를 사용하여 이 프로세스를 실행합니다.

일반적으로 코드 조각을 복사하여 function.php 파일에 붙여넣으라고 안내하지만 PHP 또는 테마를 업데이트하면 코드 조각이 삭제됩니다. 따라서 하위 테마를 사용하여 코드 조각을 추가하는 것이 좋습니다. 자, 이제 위젯 추가 프로세스로 이동해 보겠습니다. 하위 테마의 functions.php 파일에 코드 조각을 추가합니다.

 1 <?php 2 // Register Sidebars 3 function custom_sidebars() { 4 5 $args = array( 6 'id' => 'custom_sidebar', 7 'name' => __( 'Custom Widget Area', 'text_domain' ), 8 'description' => __( 'A custom widget area', 'text_domain' ), 9 'before_title' => '<h3 class="widget-title">', 10 'after_title' => '</h3>', 11 'before_widget' => '<aside class="widget %2$s">', 12 'after_widget' => '</aside>', 13 ); 14 register_sidebar( $args ); 15 16 ) 17 add_action( 'widgets_init', 'custom_sidebars' ); 18 ?>

저장하고 "모양" -> "위젯"으로 이동하여 새 도구를 확인합니다. 또한 기능 영역 추가에 대한 자세한 정보를 찾을 수 있습니다. 사이트의 functions.php 파일에 코드 조각을 추가하여 많은 기능을 추가할 수 있습니다.

이것이 WordPress에서 자식 테마를 만드는 방법에 관한 것입니다. 오류 수정 부분으로 넘어가 보겠습니다.

오류 수정

아이 테마를 만드는 모든 문제는 언제든지 만날 수 있습니다. 그러므로 쉽게 포기해서는 안됩니다.

구문 문제는 코딩 과정에서 일부 누락으로 인해 발생할 수 있습니다. 또한 모든 사용자가 만날 수 있는 가장 흔한 오류입니다. 게다가 일이 제대로 진행되지 않으면 언제든지 삭제하고 다시 시작할 수 있습니다.

WordPress 하위 테마를 만드는 방법: 결론

우리 기사를 통해 어린이 테마 만들기에 대한 지식을 얻을 수 있기를 바랍니다. 읽어주셔서 감사합니다!

더 읽어보기: HTTP 오류 500 WordPress(2021)를 수정하는 방법