로컬로 Wordpress 테마 만들기

게시 됨: 2022-02-23

다목적에서 집중된 틈새 옵션에 이르기까지 선택할 수 있는 수천 개의 WordPress 테마가 있습니다. 그러나 때로는 웹 사이트를 원하는 대로 정확하게 표시하는 유일한 방법은 고유한 테마를 만드는 것입니다.

웹 개발에 대한 광범위한 배경 지식이 없더라도 WordPress 테마를 만드는 것은 완벽하게 할 수 있습니다. 테마에 필요한 파일과 파일을 배치할 위치만 배우면 됩니다. 그런 다음 모든 것이 원하는 대로 작동할 때까지 코드를 변경합니다.

이 기사에서는 WordPress 테마 개발과 시작하는 데 필요한 도구를 소개합니다. 4단계로 기본 WordPress 테마를 만드는 방법도 보여 드리겠습니다. 뛰어들자!

WordPress 테마 개발 소개

WordPress 테마는 사이트의 모양과 레이아웃에 영향을 주는 템플릿입니다. 예를 들어 다음은 기본 Twenty Seventeen 테마를 사용하는 새로운 WordPress 웹사이트입니다.

샌드박스 환경의 스물세븐틴 워드프레스 테마 웹사이트 스크린샷

다음은 동일한 웹사이트이지만 이번에는 인기 있는 Stout 테마를 사용합니다.

샌드박스 환경의 스타우트 워드프레스 테마 웹사이트 스크린샷

올바른 테마를 사용하면 코드를 변경하지 않고도 WordPress 웹사이트를 원하는 대로 볼 수 있습니다. 그러나 요구 사항과 일치하는 테마가 없는 경우 고유한 테마를 만들 수도 있습니다. 이 접근 방식의 장점은 사이트의 모양과 테마의 기능을 완전히 제어할 수 있다는 것입니다.

자신만의 테마를 만들려면 최소한 기본적인 웹 개발 배경이 필요합니다. 전문가가 될 필요는 없지만 HTML, PHP 및 CSS에 대한 일반적인 이해가 없으면 프로세스가 답답할 수 있습니다.

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

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

마찬가지로 테마를 만들고 제대로 표시하고 작동하는 데 시간이 걸릴 수 있습니다. 따라서 자신의 테마를 만들지 여부를 결정하는 것은 사이트가 사용자 지정 테마의 이점을 누릴 수 있는지 여부에 달려 있습니다. 또한 기존 테마를 사용하는 것과 비교하여 자신만의 테마를 만드는 것이 얼마나 시의적절하고 비용 효율적인지 고려해야 합니다.

마지막으로 많은 사람들이 워드프레스 테마 개발로 꽤 많은 돈을 벌고 있다는 점을 고려할 가치가 있습니다. 경쟁이 매우 치열한 비즈니스 분야이지만 승자를 개발하고 작업에서 이익을 얻을 수 없다고 누가 말할 수 있습니까?

테마 개발을 위해 로컬 WordPress 설정이 필요한 이유

사용자 정의 테마를 설정하고 테스트하려면 WordPress 설치가 필요합니다. 이를 수행하는 가장 좋은 방법은 다음과 같은 이유로 로컬 환경을 사용하는 것입니다.

  • 더 효율적입니다. 로컬 WordPress 설정을 사용하면 로딩 시간이 거의 없으며 외부 서버에 파일을 업로드할 필요가 없습니다.
  • 라이브 환경을 사용하는 것보다 안전합니다. 웹 개발에는 항상 많은 시행착오가 수반되므로 안전한 로컬 환경에서 수행하는 것이 좋습니다.
  • 여러 테스트 환경을 만들 수 있습니다. 여러 WordPress 웹 사이트를 실행하는 것은 로컬 설정에서 훨씬 쉽습니다.
  • 전문 소프트웨어를 사용할 수 있습니다. Mac, Windows 및 Linux 시스템용 무료 앱인 Local과 같이 로컬 WordPress 개발 속도를 높이는 데 사용할 수 있는 많은 응용 프로그램이 있습니다.

Local을 사용하면 몇 번의 클릭만으로 WordPress 웹사이트를 원하는 만큼 설정할 수 있습니다. 또한 모든 테스트 사이트를 관리할 수 있는 간단한 대시보드에 액세스할 수 있습니다.

더 중요한 것은 각 로컬 웹사이트를 구성할 수 있다는 것입니다. 즉, 다양한 버전의 PHP, MySQL, nginx 또는 Apache를 사용할 수 있습니다. 나중에 다시 사용할 수 있도록 일부 사이트를 "청사진"으로 저장할 수도 있습니다.

마지막으로, 플라이휠 사용자라면 소프트웨어에 "푸시" 옵션이 포함되어 있다는 사실을 알게 되어 기쁩니다. 즉, 로컬 웹사이트를 Flywheel로 직접 푸시하여 라이브로 만들 수 있습니다. 예를 들어 Local을 사용하여 새 WordPress 테마를 만들고 웹사이트의 스테이징 복사본에서 테스트하고 의도한 대로 작동한다는 것을 알게 되면 라이브 사이트로 푸시할 수 있습니다.

Local로 WordPress 테마를 만드는 방법(4단계)

이 튜토리얼에서는 테마 개발을 위해 로컬 WordPress 환경을 설정하는 방법, 필요한 모든 파일에 대해 설명하고 테스트하는 방법을 보여 드리겠습니다. 일하러 가자!

1. 로컬을 사용하여 WordPress 웹 사이트 설정

가장 먼저 해야 할 일은 Local을 무료로 다운로드하는 것입니다. 완료했으면 응용 프로그램을 설치합니다. Local이 작동하도록 가상 머신 소프트웨어를 설정해야 하기 때문에 몇 분이 걸릴 수 있다는 점을 염두에 두십시오. 로컬이 준비되면 새 사이트를 만들라는 메시지가 표시됩니다.

플라이휠로 로컬 스크린샷 새 사이트 만들기

그것을 클릭하면 사이트 이름을 선택하라는 메시지가 표시됩니다.

플라이휠 이름으로 로컬 스크린샷 사이트 프롬프트

Advanced Options 이라는 탭도 있음을 알 수 있습니다. 그것을 클릭하면 로컬 사이트의 도메인을 편집하고 루트 디렉토리를 선택하고 청사진을 사용할지 여부를 선택할 수 있습니다.

지금은 사이트의 도메인과 디렉토리를 자유롭게 편집할 수 있습니다. 나중에 청사진을 사용하는 방법을 다루겠습니다. 준비가 되면 오른쪽 하단에 있는 Continue 버튼을 클릭합니다.

다음 페이지에서는 웹사이트에 로컬의 기본 WordPress 환경을 사용할 수 있는 옵션이 표시됩니다. Preferred 옵션에는 최신 버전의 PHP 및 MySQL이 포함되며 서버에 nginx + Varnish 조합을 사용합니다.

플라이휠 서버 설정에 의한 로컬 스크린샷 기본 설정 옵션 설정 프롬프트

앞서 언급한 모든 설정을 변경할 수 있는 Custom 옵션을 선택할 수도 있습니다.

플라이휠 서버 설정 사용자 지정 환경 프롬프트에 의한 로컬 스크린샷

일반적으로 최신 버전의 PHP와 MySQL을 사용하는 것은 항상 좋은 방법입니다. 그러나 로컬을 사용하여 스테이징 사이트를 설정하는 경우 라이브 서버를 에뮬레이트하기 위해 해당 소프트웨어의 이전 버전을 사용해야 할 수도 있습니다.

또한 사용자 지정 환경을 선택하는 경우 로컬의 Connect to Flywheel 옵션을 사용할 수 없다는 점에 유의하십시오. 즉, 사이트를 라이브로 푸시할 수는 없지만 수동으로 마이그레이션할 수는 있어야 합니다.

이 자습서에서는 Preferred 설정을 계속 사용하므로 이를 선택하고 Continue 을 클릭합니다. 이제 관리자 사용자 이름, 비밀번호 및 이메일을 선택하고 다중 사이트 활성화 여부를 선택할 수 있습니다.

플라이휠로 로컬 스크린샷 새 사이트 가입 다중 사이트 프롬프트

로컬이 설정한 기본 이메일을 사용하면 애플리케이션 내에서 메시지를 확인할 수 있으므로 계속 사용하는 것이 좋습니다. Continue 을 다시 클릭하고 로컬이 사이트에 필요한 모든 종속성을 다운로드하고 구성할 때까지 기다립니다. 완료되면 사이트 정보가 오른쪽에 표시되고 2단계로 이동할 수 있습니다.

2. 새 테마 디렉토리 설정

이제 로컬 WordPress 웹 사이트가 준비되었으므로 구성한 URL을 사용하여 일반 사이트처럼 액세스할 수 있습니다. 오른쪽 상단 모서리에 있는 Admin 설정을 클릭하여 대시보드로 바로 이동할 수도 있습니다.

플라이휠 설정 옵션별 로컬 스크린샷

그러나 지금은 모든 WordPress 파일이 있는 로컬 사이트의 루트 폴더에 액세스해야 합니다. 그것을 찾으려면 로컬 화면 상단의 사이트 제목 바로 아래를 보십시오. 거기에 디렉토리가 나열되어야 하고 오른쪽에 클릭할 수 있는 화살표가 있어야 합니다.

해당 화살표를 클릭하면 파일 탐색기에서 디렉토리가 열립니다. 내부로 이동한 다음 앱/공용 폴더를 열어 WordPress 파일을 찾습니다.

컴퓨터 파일 wp-admin 공용 폴더의 스크린샷

FTP 클라이언트를 사용하여 WordPress 사이트에 액세스한 적이 있다면 매우 친숙할 것입니다. wp-content/themes 디렉토리로 이동하면 내부에 세 개의 폴더가 표시됩니다. 다음은 WordPress가 새 사이트에 설치하는 기본 테마입니다.

컴퓨터 로컬 파일 테마 폴더의 스크린샷

계속해서 새 폴더를 만드십시오. 테마에 사용할 이름을 지정합니다.

컴퓨터 로컬 파일 테스트 테마 폴더의 스크린샷

폴더는 자연스럽게 비어 있습니다. 다음으로, 우리는 몇 가지 콘텐츠를 추가할 것입니다.

3. 테마 레이아웃 파일 만들기

기본 WordPress 테마는 index.php 와 style.css 의 두 파일만 있으면 작동합니다. index.php 파일은 모든 최신 블로그 게시물을 표시하고 style.css 에서 스타일을 가져오는 WordPress 기본 페이지에 해당합니다. 이제 두 파일을 모두 생성해 보겠습니다.

컴퓨터 로컬 파일 테스트 테마 색인 폴더의 스크린샷

두 파일 모두 현재 코드가 없으므로 변경해 보겠습니다. 먼저 style.css 를 열고 테마에 대한 간단한 설명을 추가합니다. 

/* Theme Name: Test Theme Author: John Doe Description: A basic WordPress theme Version: 0.0.1 Tags: bootstrap */

index.php 로 같은 과정을 반복하세요. 비록 이 코드가 좀 더 복잡하긴 하지만: 

<!DOCTYPE html>
<html>
<head>
<title><?php bloginfo('title'); ?></title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1><?php bloginfo('title'); ?></h1>
<h3><?php bloginfo('description'); ?></h3>
<?php while (have_posts()) {
the_post();
?>
<h5><?php the_date(); ?></h5>
<h2>
<a href="index.php?p=<?php the_ID(); ?>">
<?php the_title(); ?>
</a>
</h2>
<p><?php the_content(); ?></p>
<hr/>
<?php } ?>
</body>
</html>

그것은 당신이 얻을 수있는 기본적인 레이아웃에 관한 것입니다. 해당 코드 내에서 이전에 설정한 style.css 파일을 호출하여 블로그 제목을 표시하고 WordPress '루프'를 사용합니다. 혹시 모를 경우 루프는 테마가 게시물을 표시하는 데 사용하는 코드의 이름이며 실제 구조는 테마마다 많이 다를 수 있습니다.

지금 두 파일에 대한 변경 사항을 저장하고 WordPress 대시보드로 이동합니다. Appearance > Themes 탭으로 이동하여 내부에 대기 중인 새로운 테마를 확인하십시오.

스크린샷 WordPress 모양 테마 대시보드

즉시 활성화하고 홈 페이지를 확인하십시오.

URL 스크린샷 테마 미리보기 활성화

홈페이지에 관한 한 어떤 상도 받지 못할 것입니다. 그러나 중요한 것은 나머지 테마를 구축할 수 있는 기반이 마련되어 있다는 것입니다. 다음 단계는 style.css 파일을 사용하여 테마에 약간의 감각을 더하는 것입니다.

좀 더 예쁘게 만들고 나면 더 복잡한 레이아웃에서 작업하고 싶을 것입니다. 예를 들어, header.php 파일과 함께 사이드바와 바닥글을 테마에 추가할 수 있습니다.

테마를 어떤 모양으로 만들고 싶은지 확실하지 않은 경우 일부 WordPress 스타터 테마를 자세히 살펴보는 것이 좋습니다. 시각적인 관점에서 보면 매우 단순하지만 현대 웹사이트에 필요한 모든 기능이 포함되어 있습니다.

4. WordPress 테마 테스트

라이브 사이트에서 테마를 사용하기 전에 철저히 테스트해야 합니다. 빠른 시각적 개요는 대부분의 버그를 나타내지만 일반적으로 충분하지 않습니다. 테마를 검토하여 WordPress의 검토 표준을 충족하는지 확인하는 Theme Check와 같은 플러그인을 사용할 수도 있습니다.

테마 체크 플러그인 스크린샷

테마 검토 표준은 WordPress.org에 테마를 게시하려는 경우에만 중요합니다. 그러나 여전히 주제를 측정하는 좋은 척도입니다.

테마를 라이브로 사용할 준비가 되면 두 가지 옵션이 있습니다. 테마 폴더를 패키징하여 FTP를 통해 사이트에 업로드하거나 Flywheel에 연결 옵션을 사용하여 전체 사이트를 Flywheel에 직접 게시할 수 있습니다.

마무리하기 전에 잠시 시간을 내어 새 테마에 대해 만든 테스트 설정의 청사진을 만드는 것이 좋습니다. 그렇게 하면 필요할 때를 대비하여 라인을 따라 복제할 수 있습니다.

결론

웹 개발에 대한 기본 지식이 있다면 자신만의 WordPress 테마를 만드는 것을 막을 수 없습니다. 시간이 걸릴 수 있지만 노력할 가치가 있습니다. 또한 일반 테마를 사용하는 것보다 사이트 모양을 훨씬 더 많이 제어할 수 있습니다.

Local을 사용하여 WordPress 테마를 만드는 네 가지 기본 단계를 요약해 보겠습니다.

  1. 로컬을 사용하여 WordPress 웹 사이트를 설정합니다.
  2. 새 테마 디렉토리를 설정합니다.
  3. 테마 레이아웃 파일을 만듭니다.
  4. WordPress 테마를 테스트하십시오.

워드프레스 테마 개발 전반에 대해 궁금한 점이 있으신가요? 아래 코멘트 섹션에서 그들에 대해 이야기합시다!

무료 전자책: 완벽한 WordPress 개발 워크플로

완벽한 워드프레스 개발 워크플로우에 대한 해군 배경의 무료 전자책

WordPress 사이트를 개발하는 것은 어렵지 않습니다. 사실, 올바른 도구와 몇 가지 간단한 소프트웨어만 있으면 개발 워크플로가 완전히 즐거워질 수 있습니다! 로컬에서 개발하는 것부터 사이트를 활성화하는 것까지, 우리는 프로세스를 단순화하고 앞으로 수년간 사이트를 유지하기 위한 최고의 팁과 트릭을 수집했습니다. 워크플로를 간소화하고 개발 속도를 높일 준비가 되셨습니까? 여기에서 다운로드하십시오!

이 기사는 원래 2018년 9월 4일에 게시되었습니다. 2022년 2월 22일에 마지막으로 업데이트되었습니다.