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

  1. 1. 워드 프레스 튜토리얼 : HTML에서 워드 프레스 테마를 만드는 방법 (1 부)
  2. 2. 현재 읽고있는 내용 : 워드 프레스 튜토리얼 : HTML에서 워드 프레스 테마를 만드는 방법 (2 부)
  3. 삼. 워드 프레스 테마 분석에 대한 소개

이 학습서의 1 부에서는 HTML 템플리트를 WordPress 테마로 변환하는 기본 사항에 대해 설명했습니다. 가장 궁금한 점이 있다면 HTML 템플릿을 PHP 파일로 분할하여 다시 정리하고 WordPress 테마의 스타일을 지정하고 이름을 지정하는 방법에 대해 알아 봤습니다. 실제로, 우리는 많은 것을 배웠으며,이 두 번째 서빙을 즐기기 위해 첫 번째 자습서에서 다룬 개념에 익숙해지기를 원할 것입니다. 오늘 포스트에서는 일을 한 단계 더 높입니다. 모든 기능을 갖춘 WordPress 테마를 만들 수 있도록 몇 가지 영역을 더 다룰 것입니다. 그래서 더 이상 고민하지 않고, 우리는 간다.


이미지 및 JavaScript 파일 구성

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

your_logo_alt_text

… 코드를 약간 가지고 놀아야합니다. 잠시 후에 내가 공개 할 코드는 브라우저가 사용자의 로고 (또는 다른 이미지)를 찾는 데 도움이됩니다. 이미지 폴더, 테마 기본 디렉토리의 하위 폴더 여야합니다. 따라서 헤더 섹션에 로고를 표시하려면 header.php 파일을 열고 위 코드를 다음으로 바꿉니다.

your_logo_alt_text

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

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

JavaScript로 넘어 갑시다. HTML 웹 사이트가 JavaScript를 사용하는 경우 이름이 지정된 폴더를 만듭니다. js 거기에 스크립트를 배치하십시오. 다음 코드를 사용하여 header.php 파일에서 호출 할 수 있습니다.

위의 코드는 example.js 예를 들어. 해당 부분을 JavaScript 파일 이름으로 바꾸는 것을 잊지 마십시오.

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

템플릿 파일

이 튜토리얼의 1 부에서 네 가지 기본 템플릿 파일 즉 index.php, header.php, 사이드 바 .php footer.php. 템플릿 파일은 웹 사이트가 웹에 표시되는 방식을 제어합니다. 템플릿은 WordPress의 MySQL 데이터베이스에서 정보를 가져와 웹 브라우저에 표시되는 HTML 코드로 변환합니다. 즉, 템플릿 파일은 워드 프레스 테마의 구성 요소입니다. 템플릿에 대한 이해를 높이기 위해 다음과 같은 개념을 탐구하겠습니다. 템플릿 계층.

우리는 유추를 사용할 것입니다. 방문자가 http://www.yoursite.com/blog/category/your-category/와 같은 범주 링크 (예 : 범주 링크)를 클릭하면 WordPress는 템플릿 계층 구조를 사용하여 다음과 같이 올바른 파일 (및 내용)을 생성합니다. 아래 설명 :

  • 먼저 워드 프레스는 카테고리 ID와 일치하는 템플릿 파일을 찾습니다.
  • 카테고리의 ID가 예를 들어 2이면 WordPress는 category-2.php라는 템플릿 파일을 찾습니다.
  • category-2.php를 사용할 수없는 경우 WordPress는 category.php와 같은 일반 카테고리 템플릿 파일로 이동합니다
  • 이 템플릿 파일도 사용할 수 없으면 WordPress는 archive.php와 같은 일반 아카이브 템플릿을 찾습니다.
  • 일반 아카이브 템플릿이 존재하지 않으면 WordPress는 기본 템플릿 파일 인 index.php로 대체됩니다.

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

home.php 또는 index.php블로그 게시물 색인을 렌더링하는 데 사용
front-page.php프론트 페이지 디스플레이에 설정된 정적 페이지 또는 최신 게시물을 렌더링하는 데 사용
single.php단일 게시물 페이지를 렌더링하는 데 사용
single- {post-type} .php사용자 정의 게시물 유형을 렌더링하는 데 사용됩니다 (예 : post-type이 제품인 경우 WordPress는 single-product.php를 사용합니다.
page.php정적 페이지를 렌더링하는 데 사용
category.php 또는 archive.php카테고리 아카이브 색인을 렌더링하는 데 사용
author.php저자를 렌더링하는 데 사용
date.php날짜를 렌더링하는 데 사용
search.php검색 결과를 렌더링하는 데 사용
404.php서버 404 오류 페이지를 렌더링하는 데 사용

이것은 단지 짧은 목록입니다. 다른 많은 것들이 있습니다. 워드 프레스 템플릿. 템플릿 주제는 큰 주제이며 템플릿 파일로 재생하는 방법을 배우는 가장 좋은 방법은 테마 개발 워드 프레스의 도서관. 또는 더 짧게 읽을 수 있습니다 WordPress 코덱스의 템플릿 섹션.

템플릿 태그

템플릿 파일을 방금 소개 했으므로 템플릿 태그와 WordPress 테마에서의 역할에 대해 한두 가지만 언급하면됩니다. WordPress.org에 따르면 “… 템플릿 태그는 블로그 템플릿 내에서 정보를 동적으로 표시하거나 다른 방식으로 블로그를 사용자 정의하여 개인적이고 흥미롭게 만드는 도구를 제공하는 데 사용됩니다.”

이전 자습서에서 다음과 같은 몇 가지 템플릿 태그를 만났습니다. get_header, get_sidebar, get_footerbloginfo. 다음 섹션에서는 새로 만든 WordPress 테마에 몇 가지 템플릿 태그를 추가합니다. header.php 파일에 DOCTYPE 선언이 이미 포함되어 있다고 가정합니다. 그렇지 않은 경우 코드는 다음과 같습니다.

DOCTYPE 선언은 HTML 코드에 의미를 부여합니다. 그 방법으로 시작 HTML 태그를 수정하겠습니다. 다음을 사용하여 lang 속성을 포함시킵니다. language_attributes 태그 이렇게 :

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

DOCTYPE 선언과 language_attribute 태그를 사용하면 테마 구조가 합법적이며 브라우저가 코드를 이해합니다. 블로그 테마를 작성하는 경우 핑백 URL 및 RSS 피드에 대한 링크를 헤드에 배치하는 것이 중요합니다. header.php에 다음 코드를 추가하십시오 :

우리가 어떻게 고용했는지 눈치 채 셨나요? bloginfo 태그 RSS 피드 ( ‘rss2_url’)와 핑백 ( ‘pingback_url’)을 포함 하시겠습니까? header.php 파일을 저장하기 전에 다음 코드도 추가하십시오 :

위의 wp_head 태그는 플러그인에 필요한 스타일 시트와 JavaScript 파일을 가져옵니다. 이 작은 코드를 제외하면 플러그인이 원하는대로 작동하지 않을 수 있습니다. 그렇게하지 않으면 bloginfo 태그를 사용하여 WordPress 테마에 페이지 제목을 추가해 보겠습니다. header.php 파일에서 다음 코드를 추가하십시오 :

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

첫 번째 태그 wp_title 페이지 또는 게시물의 제목을 추가합니다 두 번째 태그 인 블로그 정보 (‘이름’)에 블로그 이름이 추가됩니다. WordPress 테마에 페이지 제목이 있으므로 테마의 스크린 샷을 만들고 테마를 다시 패키지하고 휴식을 취하는 방법은 어떻습니까??

테마를위한 스크린 샷 만들기

테스트 테마를 처음 업로드했을 때 워드 프레스 테마 패널에 스크린 샷이없는 것을 눈치 채 셨을 것입니다. 화려한 스크린 샷이있는 다른 테마가있는 경우 특히 칙칙한 것처럼 보였습니다. 그러나 테마의 스크린 샷을 만드는 것은 매우 쉽습니다. 좋아하는 이미지 편집기 (예 : Adobe Photoshop)를 사용하여 이미지를 만들거나 테마를 화면에서 가져옵니다. 이미지의 폭이 600px, 높이가 450px인지 확인하십시오. 이미지를 다른 이름으로 저장 screenshot.png 테마 폴더에. 모든 변경 사항을 저장하고 테마 폴더를 ZIP 아카이브로 압축하십시오. 테마를 업로드하고 활성화하여 새로운 변경 사항을보십시오.

결론

이 두 번째 자습서는 정적 HTML에서 WordPress 테마를 만드는 데 대한 심층적 인 통찰력을 제공했다고 생각합니다. 가까운 장래에 WordPress 테마의 다른 측면을 소개하지만 그 동안 다음과 같은 리소스를 준비했습니다.

행복한 창조!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me