나만의 WordPress 테마 만들기

게시 됨: 2021-12-21

이전 기사에서 WordPress 웹 사이트를 사용자 정의하고 자신의 하위 테마 또는 템플릿을 만드는 방법을 조사했습니다.

오늘은 자신만의 워드프레스 테마를 만드는 방법에 대해 알아보겠습니다. 가자!

왜 나만의 WordPress 테마를 만드세요?

워드프레스는 웹사이트를 맞춤화할 수 있는 다양한 방법을 제공합니다. 그렇다면 자신만의 테마를 만들어야 할 필요성을 느끼는 이유는 무엇입니까? 어떤 경우에는 기성품 테마가 브랜드 디자인에 맞지 않거나 필요한 기능이 없을 수 있습니다. 사용자 지정 테마는 이 문제를 해결하고 타사 테마에 의존할 필요 없이 필요한 모든 기능으로 원하는 사이트 스타일을 정확하게 제공할 수 있습니다.

테마를 만들기 전 요구 사항

아래 예에서 다음 단계를 복제할 수 있으려면 WordPress 설치 설정이 필요하고 로컬로 또는 귀하가 관리하는 서버 공간에서 사용할 준비가 되어 있어야 합니다. 라이브 사이트에서 이것을 시도하지 마십시오. 대신 테스트 환경을 만드십시오.

CSS, PHP 및 HTML에 대한 실무 지식과 이해도 필요합니다.

테마 만들기

테마 이름은 "My First Theme"로 지정하겠습니다. 첫 번째 단계는 테마가 관리 영역에 표시되는 데 필요한 파일을 만드는 것입니다. 이를 위해 style.css 및 index.php 파일을 생성합니다.

wp-content/themes/ 폴더 아래에 "my-first-theme"라는 이름의 하위 폴더를 만들고 이 2개의 파일을 해당 폴더에 추가합니다.

이 시점에서 테마는 관리 영역에서 선택 항목으로 표시되어야 합니다.

해당 파일 중 하나가 누락된 경우 테마가 손상되었다는 경고 메시지가 표시됩니다. 예를 들어 index.php가 없으면 다음과 같이 표시됩니다.

style.css 파일 내에서 WordPress에 테마에 대해 알려주는 몇 가지 주석을 추가합니다. 가장 중요한 정보는 아래에 나열될 이름입니다. 그 외에도 작성자가 누구인지 말하거나 작성자 URI를 제공하여 사용자가 웹사이트를 방문하여 테마에 대해 자세히 알아볼 수 있도록 할 수 있습니다. 관리자 테마 모달 팝업에 표시할 설명과 설치 버전을 제공합니다.

 /* Theme Name: My First Theme Author: Dev Loper Author URI: https://my-first-theme.com Description: This is my theme's description Version: 1.0 */

참고: 라이선스를 정의할 수도 있습니다. WordPress에 테마를 배포하려면 테마가 GPL과 호환되어야 합니다.

로고 이미지를 표시해야 하는 경우 style.css 및 index.php 파일이 있는 동일한 공간에 스크린샷.png 파일을 삽입합니다.

이제 테마의 관리 화면에서 테마를 활성화하면 다음과 같이 표시되어야 합니다.

"테마 세부 정보"를 클릭하면 다음과 같이 표시됩니다.

테마 파일

이제 index.php 파일에 코드를 작성할 차례입니다. 테스트로 즐겨 사용하는 편집기로 파일을 열고 모든 종류의 HTML 요소를 삽입하십시오.

 <h1>My First Theme's Content</h1>

파일을 저장하고 프런트 엔드를 방문하십시오. "My First Theme's Content"라는 제목만 표시되어야 합니다.

이 시점에서 테마의 레이아웃을 결정해야 합니다.

테마 레이아웃

여기에서 따라가는 경로는 무제한입니다. 시간을 내서 WordPress 테마가 작동하는 방식을 연구하는 것이 좋습니다. 더 중요한 것은 자신의 테마를 구성하기 전에 템플릿 계층 구조를 완전히 이해하고 있는지 확인하는 것입니다.

간단히 말해서 WordPress가 하는 일은 콘텐츠 유형에 따라 다른 php 파일을 호출하는 방법을 제공하는 것입니다. 이것은 쿼리로 수행됩니다. 쿼리는 현재 보고 있는 페이지에 게시물이 있는지, 검색 결과 페이지 또는 기타 콘텐츠인지 확인하고 해당 코드를 출력합니다.

고전적인 예는 각각에 대한 개별 파일을 생성하여 머리글과 바닥글을 분리하는 것입니다. 이 작업을 직접 수행하는 방법에 대한 매우 간단한 예를 보려면 index.php 파일에 이 코드를 삽입하십시오.

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

wp_head() 및 wp_footer() 빌드 WordPress 함수를 사용하는 이 코드는 로고, 제목 및 메뉴가 있는 헤더, 쿼리가 올바른 콘텐츠를 표시하는 본문 및 사이트 정보가 포함된 바닥글을 포함하는 기본 콘텐츠 레이아웃을 제공합니다.

이 코드를 분할하고 별도의 header.php 및 footer.php 파일을 사용하려면 테마 폴더 아래에 파일을 생성해야 합니다.

그리고 다음과 같이 코드를 나눕니다.

인덱스.php

 <?php get_header(); ?> <main class="site-main"> <h1>My First Theme's Content</h1> <?php // POSTS LOOP ?> </main> <?php get_footer();

헤더.php

 <!doctype html> <html> <head> <?php wp_head(); ?> </head> <body> <div class="site"> <header class="site-header"> <?php // LOGO // TITLE // MENU ?> </header>

바닥글.php

 <footer class="site-footer"> <?php // FOOTER INFO ?> </footer> </div> <?php wp_footer(); ?> </body> </html>

그리고 그게 다야! 첫 번째 테마를 만들었습니다!

스타터 테마

위에서 수동으로 테마를 만드는 방법을 살펴보았습니다. 어떤 파일을 만들고 어떤 코드를 포함할 수 있는지 살펴보았습니다. 그러나 이미 이에 익숙하다면 몇 초 만에 WordPress 스타터 테마를 다운로드하여 시간을 절약할 수 있습니다. 예를 들어 이름을 지정하고 테마 zip 파일을 즉시 다운로드할 수 있는 Underscore를 사용해 보십시오.

대단해, 그렇지?

결론

사용자 정의 WordPress 테마는 개발자로서 더 많은 유연성이 필요할 때 훌륭한 솔루션입니다. 테마를 만드는 것은 힘든 과정처럼 보일 수 있습니다. 이 기사에서 보여주듯이 실제로 하기가 매우 쉽습니다. 핵심은 코딩을 시작하기 전에 서두르지 않는 것입니다. 한 발 물러서서 요구 사항을 충족하는 테마 구조를 연구한 다음 선택하십시오.