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

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

HTML (+ CSS) 웹 사이트로 시작한 경우 WordPress로 이동할 때 모든 웹 사이트를 버릴 필요가 없습니다. HTML을 WordPress로 변환하고 동적 WordPress 플랫폼에서 (현재 더 강력한) 웹 사이트를 실행할 수 있습니다.


아니면 그렇지 않을 수도 있습니다. 아마도 고객의 HTML 디자인을 본격적인 WordPress 테마로 변환하는 방법이 궁금 할 것입니다. 또는 친숙한 HTML 쪽에서 기본 WordPress (+ PHP) 프로그래밍을 배우고 싶을 수도 있습니다..

현재 사용중인 이유가 무엇이든이 WordPress 자습서는 HTML에서 WordPress 테마를 만드는 기본 사항을 소개합니다. 이 가이드를 따라 처음부터 테마를 만들거나 Github로 가서 WPExplorer 스타터 테마를 다운로드하여“빈 캔버스”를 제공하여 시작하는 데 필요한 모든 템플릿 파일과 코드로 테마를 만들 수 있습니다. 따라서 코드를 통해 배우는 대신 스타터 테마를 다운로드하고 가이드를 건너 뛰고 작동 방식을 확인하는 사람들 중 하나 인 경우 … 그렇지 않으면 코드 편집기를 사용하십시오 (사용하고 권장합니다) 메모장++, 또는 숭고한 텍스트) 및 브라우저가 준비되면이 간단한 가이드를 끝까지 따릅니다..

워드 프레스 테마 이름 지정

먼저, 테마에 고유 한 이름을 지정해야합니다. 웹 사이트 전용 테마를 만드는 경우에는 필요하지 않습니다. 어쨌든 설치시 쉽게 식별 할 수 있도록 테마 이름을 지정해야합니다..

이 시점의 일반적인 가정 :

  • index.html 및 CSS 스타일 시트가 준비되었습니다..
  • 하나 이상의 테마 (예 : 스물 넷
  • 새로운 WordPress 테마를 저장할 테마 폴더를 이미 만들었습니다. ��

워드 프레스 테마의 이름으로 돌아가 보겠습니다. 코드 편집기를 열고 스타일 시트의 내용을 새 파일로 복사하여 붙여 넣기 style.css 테마 폴더에. 맨 위에 다음 정보를 추가하십시오. 새로 만든 style.css:

/ *
테마 이름 : 테마 이름
테마 URI : 테마의 URL
설명 : 테마에 대한 간단한 설명
버전 : 1.0 또는 원하는 다른 버전
저자 : 귀하의 이름 또는 WordPress.org의 사용자 이름
작성자 URI : 웹 주소
태그 : WordPress 테마 저장소에서 테마를 찾기위한 태그
* /

(/ *… * /) 주석 태그를 생략하지 마십시오. 변경 사항을 저장하십시오. 이 정보는 WordPress에 테마 이름, 작성자 및 무료 항목을 알려줍니다. 중요한 부분은 테마 이름이며 WP 대시 보드를 통해 테마를 선택하고 활성화 할 수 있습니다..

HTML 템플릿을 PHP 파일로 나누기

이 자습서에서는 HTML 템플릿이 왼쪽에서 오른쪽으로 정렬되어 있다고 가정합니다 (머리글, 내용, 사이드 바, 바닥 글). 디자인이 다른 경우 코드를 약간 사용해야합니다. 재미 있고 매우 쉽습니다.

다음 단계는 4 개의 PHP 파일을 만드는 것입니다. 코드 편집기를 사용하여 index.php, header.php, sidebar.php 및 footer.php를 생성하고 테마 폴더에 저장하십시오. 이 시점에서 모든 파일이 비어 있으므로 아무 것도 수행하지 않아도됩니다. 설명을 위해 다음 index.html 및 CSS 스타일 시트 파일을 사용하고 있습니다.

INDEX.HTML




WordPress 테마로 HTML 템플릿을 변환하는 방법-WPExplorer



이것은 헤더 섹션입니다. 여기에 로고 및 기타 세부 사항을 입력하십시오.

이것은 주요 내용 영역입니다.

그리고 이것은 바닥 글입니다.

CSS 스타일 시트

#wrap {여백 : 0 자동; 폭 : 95 %; 여백 : -10px; 높이 : 100 %;}
.헤더 {폭 : 99.8 %; 국경 : 1px 단색 # 999; 높이 : 135px;}
.함량 {너비 : 70 %; 테두리 : 1px 단색 # 999; 여백 : 5px;}
.사이드 바 {float : right; 여백 : -54px; 너비 : 29 %; 국경 : 1px 단색 # 999;}
.바닥 글 {너비 : 99.8 %; 테두리 : 1px 단색 # 999; 여백-최고 : 10px;}

작업 할 것이 없으면 두 코드를 모두 잡을 수 있습니다. 코드 편집기에 복사하여 붙여 넣기하고 저장 한 다음 방금 언급 한 4 개의 PHP 파일을 만들고 다음 부분을 준비하십시오. 새로 만든 (열기)를 엽니 다 header.php. 기존 WordPress 설치에 로그인하여 모양 – >> 편집자 열고 header.php. 사이의 모든 코드를 복사하십시오 태그를 붙여서 header.php 파일에 붙여 넣습니다. 다음은 Twenty Fourteen 테마의 header.php 파일에서 얻은 코드입니다.




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




그런 다음 index.html 파일을 작성하고 헤더 코드 (예 :

섹션)을 header.php 바로 아래에 아래와 같이 태그 :




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







이것은 헤더 섹션입니다. 여기에 로고 및 기타 세부 사항을 입력하십시오.

그런 다음 추가하십시오…

… 사이에 stylesheet를 링크하기 위해 header.php 파일에 태그를 추가하십시오. 또한 넣어 과 위와 같이 header.php에서 태그를 여는 중입니다. 모든 변경 사항 저장.

두 번째 섹션을 복사합니다 (예 :.

index.html에서 새로 만든 index.php , 그리고 추가…

… 정상에서…


… 절대적으로. 이 세 줄은 header.php, sidebar.php 및 footer.php (순서대로)를 가져 와서 index.php에 표시합니다. 그러면 코드가 다시 합쳐집니다. 모든 변경 사항을 저장하십시오. 이 시점에서 index.php 파일은 다음과 같아야합니다.



그런 다음 index.html의 사이드 바 및 바닥 글 섹션에서 각각 sidebar.php 및 footer.php로 내용을 복사하십시오..

게시물 추가

HTML 템플릿이 워드 프레스 테마로 변형됩니다. 우리는 단지 당신의 게시물을 추가해야합니다. 블로그에 게시물이있는 경우 사용자 정의 “HTML-to-WordPress”테마에 게시물을 어떻게 표시 하시겠습니까? 다음과 같은 특별한 유형의 PHP 함수를 사용합니다. 고리. 루프는 위치와 장소에 관계없이 게시물과 댓글을 표시하는 특수 코드입니다..

이제 게시물을 콘텐츠 섹션 index.php 템플릿에서 다음 코드를 복사하여 붙여 넣습니다.

아래와 같이 태그 :

>

그것은 당신의 게시물을 돌볼 것입니다. ABC처럼 쉬운. 이 시점에서 (이 튜토리얼에서 제공 한 샘플 파일을 사용하여) header.php는 다음과 같아야합니다.




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




sidebar.php는 다음과 같아야합니다 :

footer.php는 다음과 같아야합니다 :

그리고 이것은 바닥 글입니다

닫는 것을 보셨습니까? 과 바닥 글의 태그? 그것들도 포함시키는 것을 잊지 마십시오.

style.css는 다음과 같아야합니다.

/ *
테마 이름 : HTML에서 WordPress 테마 만들기
테마 URI : http://wpexplorer.com
설명 :이 테마는 HTML에서 WordPress 테마를 만드는 방법을 보여줍니다.
버전 : 1.0
저자 : Freddy @WPExplorer
작성자 URI : http://WPExplorer.com/create-wordpress-theme-html-1/
태그 : wpexplorer, 사용자 정의 테마, HTML to WordPress, WordPress 테마 만들기
* /
신체 {
폰트 패밀리 : arial, helvetica, verdana;
글꼴 크기 : 0.8em;
폭 : 100 %;
높이 : 100 %;
}

.헤더 {
배경색 : # 1be;
왼쪽 여백 : 14 %;
상단 : 0;
국경 폭 : 0.1em;
경계색 : # 999;
테두리 스타일 : 솔리드;
폭 : 72 %;
높이 : 250px;
}

.콘텐츠 {
배경색 : # 999;
왼쪽 여백 : 14 %;
여백 : 5px;
왼쪽으로 뜨다;
폭 : 46 %;
국경 폭 : 0.1em;
경계색 : # 999;
테두리 스타일 : 솔리드;
}

.사이드 바 {
배경색 : # 1d5;
오른쪽 마진 : 14 %;
여백 : 5px;
플로트 : 오른쪽;
국경 폭 : 0.1em;
경계색 : # 999;
테두리 스타일 : 솔리드;
상단 : 180px;
폭 : 23 %;
}

.바닥 글 {
배경색 : 빨간색;
왼쪽 여백 : 14 %;
왼쪽으로 뜨다;
여백 : 5px;
폭 : 72 %;
높이 : 50px;
국경 폭 : 0.1em;
경계색 : # 999;
테두리 스타일 : 솔리드;
}

그리고 index.php는 다음과 비슷해야합니다 :





다시 – 이것은 머리글, 내용, 사이드 바, 바닥 글 레이아웃이있는 왼쪽에서 오른쪽 웹 사이트를 기반으로합니다. 당신은 따르고 있습니까? 5 개 파일 모두 테마 폴더에 저장해야합니다. 원하는 폴더 이름을 지정하고 WinRar 또는 이와 동등한 프로그램을 사용하여 ZIP 아카이브로 압축하십시오. 새 테마를 WordPress 설치에 업로드하고 활성화 한 후 변환 된 테마가 실제로 작동하는지 확인하십시오!

쉬웠어요? 테마를 원하는대로 꾸밀 수 있지만 WordPress에서 우리가 좋아하는 대부분의 기능은 여전히 ​​비활성화되어 있습니다.이 자습서는 HTML 템플릿을 WordPress로 변환하는 기본 사항을 다루며 초보자에게는 큰 가치가 있어야합니다. 다음 튜토리얼에서는 한 단계 더 높은 것을 취하고 WordPress 프로그래밍의 다른 측면 (예 : 템플릿 파일템플릿 태그)를 사용하면 원하는 방식으로 HTML 템플릿을 설정할 수 있습니다.. 계속 지켜봐 주시기 바랍니다!

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map