웹사이트 검색

WordPress 튜토리얼: HTML에서 WordPress 테마를 만드는 방법(2부)

  1. <스팬>1. WordPress 튜토리얼: HTML에서 WordPress 테마를 만드는 방법(1부)
  2. 2. 현재 읽고 있는 내용: WordPress 튜토리얼: HTML에서 WordPress 테마를 만드는 방법(2부)
  3. <스팬>3. WordPress 테마의 구조 소개

이 튜토리얼의 1부에서는 HTML 템플릿을 WordPress 테마로 변환하는 기본 사항을 다루었습니다. 조금이라도 궁금하신 분을 위해 HTML 템플릿을 PHP 파일로 분할하고, 다시 합치고, WordPress 테마의 스타일을 지정하고 이름을 지정하는 방법에 대해 몇 가지 배웠습니다. 실제로 우리는 많은 것을 배웠으며, 이 두 번째 서빙을 즐기려면 첫 번째 튜토리얼에서 다룬 개념을 숙지하고 싶을 것입니다. 오늘 포스팅에서는 한 단계 더 높은 수준의 내용을 다루겠습니다. 완전한 기능을 갖춘 WordPress 테마를 만들 수 있도록 몇 가지 영역을 더 다룰 것입니다. 그럼 더 이상 고민하지 말고 여기로 가겠습니다.

이미지 및 JavaScript 파일 구성

원본 HTML 템플릿(index.html)에 이미지가 있는 경우 템플릿을 PHP 파일로 자른 후 표시가 중단된 것을 발견했을 것입니다. 전혀 걱정하지 마십시오. 이는 PHP의 방식입니다. 예를 들어, 헤더 섹션에 다음과 같은 로고가 있다면…

<img alt="your_logo_alt_text" src="images/logo.jpg" />

...코드를 조금 가지고 놀아봐야 할 것입니다. 잠시 후에 공개할 코드는 브라우저가 테마 기본 디렉토리의 하위 폴더인 images 폴더에서 로고(또는 다른 이미지)를 찾는 데 도움이 됩니다. 따라서 헤더 섹션에 로고를 표시하려면 header.php 파일을 열고 위 코드를 다음으로 바꾸십시오.

<img alt="your_logo_alt_text" src="<?php echo get_template_directory_uri(); ?>/images/logo.jpg" />

get_template_directory_uri() 함수는 테마 디렉토리의 URL을 반환합니다. 따라서 이미지 폴더에 로고를 추가하면 코드가 해당 로고를 가져옵니다.

차이점이 있나요? 분명히 이 코드는 로고만 수정합니다. 다른 이미지를 수정하려면 비슷한 방식으로 코드를 다시 작성해야 합니다. 쉬운 일.

JavaScript로 넘어 갑시다. HTML 웹사이트에서 JavaScript를 활용한 경우 js라는 폴더를 만들고 여기에 스크립트를 배치하세요. 다음 코드를 사용하여 header.php 파일에서 호출할 수 있습니다:

<script type="text/javascript" src="<?php echo get_template_directory_uri(); ?>/js/example.js"></script>

위 코드는 예시로 example.js를 사용합니다. 해당 부분을 JavaScript 파일 이름으로 바꾸는 것을 잊지 마십시오.

물론 다른 사람을 위한 테마를 만드는 경우 wp_enqueue_scripts를 사용하여 js 파일을 로드해야 합니다. 더 많은 정보와 팁을 보려면 WordPress 테마에 JavaScript를 추가하는 방법에 대한 AJ의 게시물을 확인하세요.

템플릿 파일

이 튜토리얼의 1부에서는 index.php, header.php, sidebar.php 및 footer.php라는 네 가지 기본 템플릿 파일을 언급했습니다. 템플릿 파일은 웹 사이트가 웹에 표시되는 방식을 제어합니다. 템플릿은 WordPress의 MySQL 데이터베이스에서 정보를 가져와 이를 웹 브라우저에 표시되는 HTML 코드로 변환합니다. 즉, 템플릿 파일은 WordPress 테마의 구성 요소입니다. 템플릿을 더 잘 이해하기 위해 템플릿 계층 구조라는 개념을 자세히 살펴보겠습니다.

우리는 비유를 사용할 것입니다. 방문자가 http://www.yoursite.com/blog/category/your-category/와 같은 카테고리 링크(예: 카테고리 링크)를 클릭하면 WordPress는 템플릿 계층 구조를 활용하여 다음과 같이 올바른 파일(및 콘텐츠)을 생성합니다. 아래에 설명되어 있습니다:

  • 먼저 WordPress는 카테고리 ID와 일치하는 템플릿 파일을 찾습니다.
  • 예를 들어 카테고리 ID가 2인 경우 WordPress는 카테고리-2.php라는 템플릿 파일을 찾습니다.
  • Category-2.php를 사용할 수 없는 경우 WordPress에서는 Category.php와 같은 일반 카테고리 템플릿 파일을 사용합니다.
  • 이 템플릿 파일도 사용할 수 없는 경우 WordPress는 archive.php와 같은 일반 아카이브 템플릿을 찾습니다.
  • 일반 아카이브 템플릿이 존재하지 않는 경우 WordPress는 기본 템플릿 파일인 index.php를 사용합니다.

이것이 바로 WordPress 템플릿이 작동하는 방식이며, 이러한 파일을 사용하여 필요에 맞게 WordPress 테마를 사용자 정의할 수 있습니다. 기타 템플릿 파일은 다음과 같습니다.

home.php or index.php

블로그 게시물 색인을 렌더링하는 데 사용됩니다.

front-page.php

첫 페이지 디스플레이에 설정된 대로 정적 페이지 또는 최신 게시물을 렌더링하는 데 사용됩니다.

single.php

단일 게시물 페이지를 렌더링하는 데 사용됩니다.

single-{post-type}.php

사용자 정의 게시물 유형을 렌더링하는 데 사용됩니다. post-type이 제품인 경우 WordPress에서는 Single-product.php를 사용합니다.

page.php

정적 페이지를 렌더링하는 데 사용됩니다.

category.php or archive.php

Category Archive 색인을 렌더링하는 데 사용됩니다.

author.php

작성자를 렌더링하는 데 사용됨

date.php

날짜를 렌더링하는 데 사용됩니다.

search.php

검색결과를 렌더링하는 데 사용됩니다.

404.php

서버 404 오류 페이지를 렌더링하는 데 사용됩니다.

이것은 단지 짧은 목록일 뿐이며 다른 WordPress 템플릿도 많이 있습니다. 템플릿이라는 주제는 매우 큰 주제이며, 템플릿 파일을 다루는 방법을 배우는 가장 좋은 방법은 WordPress의 광범위한 테마 개발 라이브러리를 읽는 것입니다. 또는 WordPress Codex에서 더 짧은 템플릿 섹션을 읽을 수도 있습니다.

템플릿 태그

방금 템플릿 파일을 소개했으니 템플릿 태그와 WordPress 테마에서 템플릿 태그가 수행하는 역할에 대해 한두 가지 언급하는 것이 타당할 것입니다. WordPress.org에 따르면, "...템플릿 태그는 블로그 템플릿 내에서 정보를 동적으로 표시하거나 블로그를 사용자 정의하는 데 사용되며, 블로그를 개인적이고 흥미롭게 만드는 도구를 제공합니다."

이전 튜토리얼에서는 get_header, get_sidebar, get_footer 및 bloginfo와 같은 몇 가지 템플릿 태그를 만났습니다. 다음 섹션에서는 새로 생성된 WordPress 테마에 몇 가지 템플릿 태그를 추가하겠습니다. 나는 당신이 header.php 파일에 DOCTYPE 선언을 이미 포함했다고 가정합니다. 그렇지 않은 경우 코드는 다음과 같습니다.

<!DOCTYPE HTML>

DOCTYPE 선언은 HTML 코드에 의미를 부여합니다. 이를 해결하고 여는 HTML 태그를 수정해 보겠습니다. 다음과 같이 언어_속성 태그를 사용하여 lang 속성을 포함합니다.

<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>

위의 코드는 다음을 생성합니다.

<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US">

DOCTYPE 선언과 Language_attribute 태그가 있으면 테마 구조가 합법적이며 브라우저가 코드를 이해할 것입니다. 블로그 테마를 만드는 경우 핑백 URL 및 RSS 피드에 대한 링크를 머릿속에 배치하는 것이 중요합니다. header.php에 다음 코드를 추가하세요.

<link title="<?php bloginfo('name'); ?> RSS Feed" href="<?php bloginfo('rss2_url'); ?>" rel="alternate" type="application/rss+xml" /><link href="<?php bloginfo('pingback_url'); ?>" rel="pingback" />

RSS 피드('rss2_url') 및 핑백('pingback_url')을 포함하기 위해 bloginfo 태그를 어떻게 사용했는지 확인하셨나요? header.php 파일을 저장하기 전에 다음 코드도 추가하세요:

<?php wp_head(); ?>

위의 wp_head 태그는 플러그인에 필요한 스타일시트와 자바스크립트 파일을 가져옵니다. 이 작은 코드 조각을 생략하면 플러그인이 원하는 대로 작동하지 않을 수 있습니다. 그 방법으로 다시 한 번 bloginfo 태그를 사용하여 WordPress 테마에 페이지 제목을 추가하겠습니다. header.php 파일에 다음 코드를 추가하세요.

<title><?php wp_title( '|', true, 'right' ); ?><?php bloginfo('name'); ?></title>

첫 번째 태그인 wp_title은 페이지나 게시물의 제목을 추가하고 두 번째 태그인 bloginfo('name')는 블로그 이름을 추가합니다. 이제 WordPress 테마에 페이지 제목이 있으므로 테마에 대한 스크린샷을 만들고 테마를 다시 패키지한 후 휴식을 취하는 것은 어떨까요?

테마에 대한 스크린샷 만들기

테스트 테마를 처음 업로드했을 때 WordPress 테마 패널에 스크린샷이 없다는 것을 눈치채셨을 것입니다. 특히 다채로운 스크린샷이 포함된 다른 테마가 있는 경우에는 칙칙해 보였습니다. 하지만 걱정하지 마세요. 테마에 대한 스크린샷을 만드는 것은 매우 쉽습니다. 즐겨 사용하는 이미지 편집기(예: Adobe Photoshop)를 사용하여 이미지를 만들거나 테마의 화면을 캡처하세요. 이미지의 너비가 600px, 높이가 450px인지 확인하세요. 테마 폴더에 이미지를 screenshot.png로 저장하세요. 모든 변경 사항을 저장하고 테마 폴더를 ZIP 아카이브로 압축하세요. 테마를 업로드하고 활성화하여 새로운 변경 사항을 확인하세요 ?

결론

저는 이 두 번째 튜토리얼이 여러분에게 정적 HTML에서 WordPress 테마를 만드는 데 대한 더 깊은 통찰력을 제공했다고 믿고 싶습니다. 가까운 시일 내에 WordPress 테마의 다른 측면을 소개할 예정입니다. 그동안 여러분을 위해 다음 리소스를 준비했습니다.

  • 템플릿 – WordPress Codex
  • 템플릿 태그 – WordPress Codex
  • HTML 템플릿에서 나만의 WordPress 테마 만들기 – SitePoint
  • 정적 HTML에서 WordPress 테마 만들기 – WPtuts+

즐거운 창작이 되세요!