WordPress 사이트를 만들려면 반드시 테마를 추가해야 합니다. 템플릿이라고도 합니다. 이것은 모든 웹 리소스의 기초입니다.

이 문서에서는 템플릿을 만드는 단계를 다루고 psd 파일의 레이아웃을 설명합니다.

또한 WordPress 테마에 대한 기본 기술 요구 사항, WordPress 코어에서 작동하도록 하려면 템플릿이 무엇이어야 하는지에 대해서도 배우게 됩니다. 결과적으로 요구 사항을 정확히 충족하는 고유한 테마로 웹 사이트를 만들 수 있습니다.

점에 유의하시기 바랍니다 이 설명서기성 테마 추가에 대한 설명은 포함되어 있지 않습니다. 이것은 자신의 템플릿을 생성하기 위한 매뉴얼입니다. 테마를 다운로드했는데 설치 방법을 모르는 경우 WordPress 관리자 패널로 이동하여 " 모습"하고 거기에 사용 가능한 스킨 중 하나를 추가하십시오. 이제 테마가 무엇인지, 왜 필요한지, 직접 만드는 방법을 더 자세히 분석합니다.

수동으로 테마를 만드는 목적은 무엇입니까?

테마(템플릿)는 리소스의 디자인을 함께 정의하는 기능 및 스타일 파일의 모음입니다. 테마는 사이트의 모양을 결정하므로 템플릿을 만드는 과정에 올바르게 접근하는 것이 매우 중요합니다. 많은 사람들이 "인터넷에서 기성품을 무료로 다운로드할 수 있다면 왜 나만의 테마를 만드나요?"라는 질문을 하고 있습니다. 이것은 논리적인 질문이며 이에 대한 매우 포괄적인 대답이 있습니다. "요구 사항을 완벽하게 충족하는 완벽한 템플릿을 만들기 위해"입니다.

디자인을 구매하거나 카탈로그에서 다운로드할 때 무료 템플릿 WordPress, 일반적으로 품질을 희생합니다. 일반적으로 이러한 템플릿에는 귀하에게 적합한 모든 것이 없습니다. 하지만 스스로 사임하고, 한두 가지 뉘앙스가 전체 그림이 아니며 나중에 주제를 편집할 것이라고 생각합니다. 그러나 실제로 사이트에는 귀하가 좋아하지 않는 미완성 테마가 남아 있습니다. 따라서 즉시 직접하는 것이 좋습니다. 레이아웃이 처음에는 복잡해 보일 수 있지만 나중에 배우면 사용자 정의 템플릿을 만들 수도 있습니다.

또한 템플릿을 만든 후에는 WordPress "의료"처럼 느껴질 것입니다. 사이트 내부에 무엇이 있는지 알 수 있습니다. 어떤 요소가 무엇을 담당하는지 이해하십시오. 그런 다음 사이트와 당신에 대해 이야기합니다. WordPress 태그, 구조 및 주기를 숙지하십시오. 아니면 전문적으로 하고 생계를 위한 템플릿 만들기를 시작하고 싶을 수도 있습니다.

따라서 자신의 웹사이트 템플릿을 만들어야 하는 주요 이유는 다음과 같습니다.

  • HTML, CSS 및 PHP에 대한 모든 것을 배우십시오.
  • 웹 디자인도 예술이기 때문에 만들 수 있습니다.
  • 테마를 판매하여 돈을 벌 수 있습니다.
  • 새로운 기술을 발견하다;
  • 귀하의 미래 사이트에 100% 적합한 디자인을 만드십시오.

테마는 어떤 기준을 충족합니까?

템플릿을 작성할 때 공식 규칙을 따르는 것이 매우 중요합니다. 코드 위반, 잘못된 위치에 태그 삽입 및 건너뛰기 - 디자인을 손상시키고 외관을 완전히 망칠 수 있습니다. 이러한 언어에 아직 익숙하지 않은 경우 HTML뿐만 아니라 PHP 코드 작성 규칙에 대해서도 잘 알고 있어야 합니다. 또한 계단식 테이블을 처리해야 합니다. CSS 스타일, 따라서 기본 사항도 기억하십시오. 인터넷에는 이에 대한 정보가 많이 있습니다. 글쎄, 그리고 마지막으로 가장 덜 중요한 요구 사항 - 학생이 아닌 디자이너와 같은 사이트를 만들어 진지한 프로젝트를 얻으십시오. 그렇지 않으면 이 사건을 받아들일 의미가 없습니다.

모든 WordPress 테마는 wp-content/themes/ 폴더에서 호스팅됩니다. 이 폴더 안에는 별도의 테마가 있는 다른 폴더가 있습니다. 추가 기능(functions.php), 스타일 파일 및 이미지. 특정 주제에 대한 데이터를 찾으려면 해당 디렉토리로 이동해야 합니다. 그러면 wp-content/themes/western/ 폴더에 "서양" 테마가 배치됩니다.

시작하기 전에 미리 만들어진 테마의 구조를 최소한 몇 번 이상 살펴봐야 합니다. 기본 WordPress 사이트에는 검토할 수 있는 두 가지 기본 템플릿이 제공됩니다. 이것은 기본 및 클래식 템플릿입니다. 서버의 원하는 디렉토리에서 파일을 열고 차이점을 비교하십시오.

템플릿은 일반적으로 세 가지 파일 형식으로 구성됩니다.

  1. Style.css는 다음을 담당하는 스타일 파일입니다. 외부 디자인대지.
  2. 함수.php 함수 파일페이지에 다양한 기능을 추가하는 A.
  3. 사이트의 템플릿 출력 기능, WordPress와의 테마 통합을 담당하는 기타 PHP 파일. PSD 레이아웃을 본격적인 템플릿으로 변환할 수 있는 것은 이 파일입니다.

WordPress 테마의 레이아웃이 어떻게 진행되는지 이해하기 위해 이러한 각 파일을 더 자세히 분석해 보겠습니다.

style.css 파일 생성 규칙

첫째, 모든 CSS 마크업 기능을 준수해야 합니다. 이 파일은 사이트의 모양을 결정합니다. 그러나 생성된 템플릿에 대한 설명을 추가하지 않으면 작동하지 않습니다. 이 먼저 워드프레스 기능, psd 레이아웃을 WordPress 엔진으로 전송할 때 고려해야 합니다. 다음 매개변수를 지정해야 합니다.

  1. 템플릿 이름.
  2. 주제로 연결되는 URL입니다.
  3. 템플릿의 주요 기능을 나타내는 설명입니다. 간단히.
  4. 저자의 이름. 이 경우 이름을 입력합니다.
  5. 저자, 즉 당신에 대한 링크. 소셜 미디어 프로필에 대한 링크를 제공할 수 있습니다.
  6. 상위 테마의 이름은 선택 사항입니다.
  7. 테마 버전. 생성된 경우에만 v. 1.0.
  8. 템플릿에 대한 전체 설명입니다. 광범위하게 쓸 수 있습니다.

가장 간단한 WordPress 테마를 만들려면 하나의 style.css 파일로 편집된 버전을 추가하기만 하면 됩니다. 이 파일에서 "템플릿" 줄 옆에 상위 테마의 이름을 지정합니다. 예를 들어 표준 템플릿을 편집하는 경우 클래식입니다. 이제 생성된 테마는 클래식 템플릿을 완전히 준수합니다. 따라서 wp-content/themes/classic 디렉토리에 파일을 업로드해야 합니다.

따라서 기성품 템플릿의 "후손"이 될 가장 간단한 첫 번째 테마를 만들 수 있습니다. 그러나 이것은 사이트의 본격적인 디자인이 아니라 그것을 보완하려는 시도 일뿐이므로 계속 연구해야합니다.

추가 기능 파일 functions.php의 기능

템플릿이 항상 functions.php 파일을 사용하는 것은 아니지만 대부분의 경우 필요합니다. 적절한 테마의 디렉토리에 배치해야 합니다. 이 파일이 템플릿 폴더에 있는 경우 테마를 초기화할 때 고려됩니다. 플러그인처럼 작동합니다. 그리고 그것은 당신이 그것을 주는 것과 같은 기능을 수행할 것입니다.

functions.php 파일의 주요 목적은 주어진 테마에 대한 관리 영역에서 사용 가능한 사용자 정의 기능을 정의하는 것입니다. 즉, functions.php에 입력하는 모든 기능은 관리자 패널이나 사용자 페이지에 표시됩니다. 일반적으로 이것은 WordPress 사이트의 색 구성표를 변경하고 글꼴을 변경하는 등의 작업입니다. 그러나 이 파일에는 많은 용도가 있습니다. 그러나 그것은 완전히 다른 이야기입니다 ...

PHP 템플릿 파일의 기능

PHP 형식 파일은 사이트의 개별 부분을 담당합니다. 이들은 구성 페이지와 사용자에게 표시될 제목, 범주 및 기타 섹션을 모두 정의합니다. 이제 테마의 작성자이므로 선택할 템플릿 파일과 수는 사용자만이 결정할 수 있습니다. 선택하면 관리자 패널에 새로운 기능이 나타납니다. 선택하는 파일이 적을수록 사이트는 더 빠르게 작동하지만 기능은 줄어듭니다. 어떤 파일이 필요하고 어떤 파일 없이 할 수 있는지 신중하게 생각하십시오.

사이트에 최소한의 테마를 추가하거나 자신만의 psd 레이아웃을 시도하려면 템플릿 디렉토리에 두 개의 파일만 있으면 됩니다.

  1. 스타일.css
  2. 인덱스.php

숙련된 웹마스터는 바닥글, 사이드바, 검색, 아카이브, 카테고리, 페이지 등에 대한 설정을 하는 것만으로도 충분하도록 index.php 파일을 변경할 수 있습니다. 파일이 해당 기능을 수행합니다.

실수로 템플릿 파일을 지정하지 않더라도 WordPress는 자동으로 자체 기본 설정을 사이트에 추가합니다. 예를 들어, 주석을 담당하는 파일을 추가하지 않으면 엔진은 디렉토리에서 이 함수의 자체 버전을 찾습니다(예: wp-comments.php). 그러면 "외부" 댓글이 사이트 구조에 충돌하여 템플릿의 요구 사항을 충족하지 않습니다. 이런 일이 발생하지 않도록 하려면 페이지의 다른 구성 요소를 표시하기 위해 모든 기본 파일을 추가해야 합니다.

  • header.php - 사이트 헤더를 담당합니다.
  • sidebar.php - 사이드바;
  • footer.php - 리소스 바닥글(하단 부분)
  • comment.php 및 comments-popup.php는 주석입니다.

이러한 파일을 각각 생성한 후 사이트에서 해당 파일을 표시하려면 템플릿의 기본 index.php 파일에 해당 파일에 대한 데이터를 입력해야 합니다. 이렇게 하려면 이름이 지정된 파일로 연결되는 태그를 index.php에 지정하십시오. 예를 들어:

  • 사이트 헤더 파일(header.php)을 추가하려면 태그를 작성하세요.

    get_header() 템플릿 태그;

  • 바닥글의 경우 비슷하지만 머리글 대신 바닥글 등을 지정합니다.

index.php에 템플릿 파일 중 하나를 포함하는 예는 다음과 같습니다. 별도의 정보를 보려면 지정된 각 키 템플릿 파일을 검색해야 합니다. 템플릿에 규정된 모든 기능을 이해할 수 있도록 각 파일에 대한 매뉴얼과 샘플을 찾으십시오.

템플릿 기능 선택

시간이 지남에 따라 어떤 유형의 템플릿을 선택해야 하는지 딜레마에 직면하게 됩니다. 엔진은 선택을 제공합니다. 템플릿 계층이 연결된 템플릿이나 조건부 태그가 있는 레이아웃을 선택할 수 있습니다.

첫 번째 옵션은 이미 고려되었습니다. 모든 파일 PHP 템플릿- 이것은 템플릿 계층입니다. 즉, 이 계층 구조의 규칙에 따라 점진적으로 별도의 레이아웃 파일을 생성합니다. 따라서 다양한 기능의 PHP 구성 요소에서 본격적인 템플릿을 만들 수 있습니다. 이 경우 계층 구조는 요청 시 로드 원칙에 따라 작동합니다. 예를 들어 카테고리 파일(category.php)이 있고 사용자가 요청한 경우 이 특정 사이트 구성 요소가 브라우저에 로드됩니다. 그렇지 않은 경우 키 템플릿 파일 index.php가 로드됩니다.

따라서 템플릿 계층 원칙을 사용하여 사이트의 개별 부분에 대한 모양을 변경할 수 있습니다. 각 페이지에는 고유한 고유 ID가 있습니다. 테마 디렉토리에 category-6.php 파일을 추가하고 ID가 6인 카테고리를 요청하면 이 디자인이 열립니다. 없으면 설정이 표준으로 유지됩니다. index.php가 확장됩니다.

템플릿 계층 구조의 원칙만으로는 템플릿을 가장 편안하게 표시할 수 없는 경우가 있습니다. 이 경우 프로그래머는 조건부 태그를 도입하는 두 번째 원칙을 사용합니다. 이 태그는 사이트의 규정 준수 여부를 확인합니다. 특정 조건, 그리고 그것들을 존중하지 않으면 모양이 바뀝니다. 즉, 이러한 태그는 if/else(if/then)의 원칙에 따라 작동합니다. 그래서 카테고리 별로 php 파일의 바다를 추가할 필요는 없지만, 아이디별로 조건을 한 번만 작성하면 됩니다.

WordPress의 psd 레이아웃 레이아웃은 어떻습니까?

어떤 사람들은 먼저 다양한 프로그램을 사용하여 미래 디자인의 레이아웃을 만든 다음 특정 엔진으로 전송하는 것을 좋아합니다. 일부 응용 프로그램에서는 기술 없이도 뛰어난 디자인을 생성할 수 있기 때문에 이것은 정말 편리합니다. 이미 파일이 있는 경우 psd 형식, 코드를 사용하지 않고 WordPress 엔진에서 만들고 싶다면 인기있는 서비스 중 하나의 도움을 사용할 수 있습니다.

이 유료 서비스, 템플릿이 귀하의 절반일 것이기 때문입니다. 레이아웃이 좋아 보이지만 더 이상 구성 할 힘이없는 경우 최후의 수단으로 그러한 서비스를 주문하십시오. 말 그대로 하룻밤 사이에 저렴한 가격으로 psd를 WordPress로 전송할 준비가 된 많은 프로그래머가 있습니다.

PSD는 Photoshop 응용 프로그램의 파일입니다. 그것은 마치 그래픽 이미지당신의 디자인. 구성하려면 다음을 수행해야 합니다. 텍스트 에디터 html 마크업을 추가합니다. 점차적으로 이 마크업의 각 지점을 변경하여 레이아웃에 표시되는 최종 결과를 얻습니다. 템플릿의 중심과 다른 부분의 치수를 즉시 표시하십시오.

다음 단계는 배경 이미지. 동일한 Photoshop 응용 프로그램을 사용하여 직접 만들 수도 있습니다. 가장 쉬운 옵션은 그라데이션 배경 이미지를 만드는 것입니다. 다음으로 로고 만들기를 시작합니다. 발생하는 모든 요청을 점차적으로 해결하십시오 - 만들어진 레이아웃에 따라 사이트 헤더, 바닥글, 사이드바 및 모든 부분을 조정하십시오. 사이트가 요구 사항에 따라 로드되도록 디렉터리에 중요한 템플릿 파일을 추가하는 것을 잊지 마십시오.

이런식으로만 기초를 차츰차츰 익히고 다른 언어들프로그래밍을 통해 웹 사이트를 직접 만드는 방법을 배울 수 있습니다. 아무도 오늘이나 내일 성공할 것이라고 말하지 않습니다. 아마도 레이아웃 프로세스의 모든 기능을 이해하는 데 몇 달이 걸릴 것입니다. 그러나 걱정하지 마십시오. 일부는 몇 년이 걸립니다. 이제 템플릿을 처음부터 만들고 WordPress 엔진의 인터넷 리소스에 대한 기성품 테마로 psd 레이아웃을 전송하는 대략적인 절차를 알게 되었습니다.

호스팅에 설치할 준비가 된 기성 WordPress 템플릿이 어떻게 만들어지는지 살펴보겠습니다. 이를 위해 index.htm 파일을 기반으로 PHP 파일이 생성되며, 각 파일은 WordPress 템플릿의 해당 부분을 담당합니다. 특히, 이들은 사이트 헤더, 메인 페이지의 모양, 사이드바, 아카이브, 검색 페이지, 단일 게시물, 단일 페이지 및 댓글을 제어하는 ​​파일입니다. 이 단계에서는 특히 템플릿 태그가 무엇인지 이해하기 위해 몇 가지 기본 지식이 있으면 좋을 것이라고 즉시 말하고 싶습니다.

이 수업을 공부하기 전에 한 가지 ... 흠 ... 수업 작성자의 속임수에 대해 경고하고 싶습니다. 이 수업 주기를 번역하기 시작했을 때 나는 결국 우리가 직접 만든 기성품 템플릿을 갖게 될 것이라고 확신했습니다. 그러나 상황은 조금 더 복잡합니다. 마지막 수업에서 저자는 이전 수업과 같이 텍스트 형식이 아닌 설명이 포함된 그림 형식으로 WordPress 코드를 제공했습니다. 그리고 전체 준비된 템플릿소액의 비용으로 기성품 아카이브로 다운로드할 수 있습니다. 이 아카이브를 구입하여 여기에 게시할 수 있지만 합법적인지 확실하지 않습니다. 일반적으로 이것이 상황입니다. 따라서 이 수업은 교육 및 교육 목적으로만 충족되어야 합니다.

디자인된 사이트 레이아웃
따라서 처음 두 수업에서는 먼저 HTML 및 CSS 도구를 사용하여 학습합니다. 아래 이미지를 클릭하시면 사이트 레이아웃이 어떻게 되는지 확인하실 수 있습니다.

모든 WordPress 템플릿 파일
이제 사이트 레이아웃을 기반으로 WordPress 템플릿을 만드는 일만 남았습니다. 아래 그림은 보여줍니다 표준 세트워드프레스 템플릿 파일. 이전 자습서에서 폴더를 만들었습니다. 이미지그리고 파일 스타일.css. 파일도 있습니다 index.htm, 코드 조각을 가져와 적절한 파일로 복사합니다. PHP. 그리고 나중에 PHP파일은 WordPress 명령에 의해 삽입되어 형성됩니다. PHP워드프레스 템플릿 파일.

style.css 파일 편집
파일의 시작 부분에 먼저 삽입 스타일.css템플릿 정보. 귀하의 데이터(템플릿 이름, url, 설명, 작성자 정보)에 따라 편집되는 표준 코드입니다.

헤더.php
이 파일은 사이트 헤더를 표시하는 역할을 합니다. 핵심은 파일에서 코드 조각을 가져오는 것입니다. index.htm(위 및 포함

)이 파일에 삽입됩니다. 헤더.php그런 다음 WordPress 명령 코드에 통합됩니다. 그들은 그림에서 빨간색으로 표시되어 있습니다. 사진을 클릭하시면 큰 사이즈로 보실 수 있습니다.

인덱스.php
이 파일은 사용자가 보는 것을 표시하는 역할을 합니다. 홈페이지대지. 파일도 같은 방식으로 생성됩니다. index.php. 에서 코드 조각 복사 index.htm WordPress 명령으로 가득 차 있습니다. 사진을 클릭하시면 큰 사이즈로 보실 수 있습니다.

사이드바.php
이 파일은 사이드바에 요소를 표시하는 역할을 합니다. 우리는 또한 코드를 잘라 index.htm(전부의 div id="측면") 파일에 붙여넣기 사이드바.php. 다음으로 이전과 마찬가지로 WordPress 명령을 삽입합니다. 사진을 클릭하시면 큰 사이즈로 보실 수 있습니다.

아카이브.php
사이트의 보관 기록 발행을 담당합니다. 이 파일을 만들기 위해 파일의 내용을 완전히 복사합니다. index.php에 삽입 아카이브.php, 다음 줄 사이에 코드 조각(7줄)을 삽입합니다. 그리고

검색.php
이 파일은 검색 결과를 담당합니다. 이 파일을 만들기 위해 파일의 내용을 완전히 복사합니다. index.php에 삽입 검색.php, 다음 줄 사이에 코드 조각(1줄)을 삽입합니다. 그리고 . 아래 그림에서 수행되는 방법을 참조하십시오. 사진을 클릭하시면 큰 사이즈로 보실 수 있습니다.

싱글.php
이 파일은 단일 게시물을 출력합니다. 사진을 클릭하시면 큰 사이즈로 보실 수 있습니다.

이 단계에서 테마를 설치하고 테스트할 수 있습니다. 여러 게시물을 만들어 탐색, 버튼 및 링크를 테스트할 수 있습니다.

라이브 데모 템플릿
사진을 클릭하시면 완성된 워드프레스 템플릿을 온라인에서 보실 수 있습니다.

추신. 경비원. 그리고 디자인을 시작하려면 Photoshop의 도구와 기능을 마스터해야 합니다. 이 경우 필요한 기본 지식 수준을 제공하는 Photoshop 과정이 도움이 될 것입니다.

이 기사를 읽고 있다면 아마도 아주 아름다운 웹사이트 디자인을 가지고 있을 것입니다. 어도비 포토샵 PSD, JPG, PDF, AI 또는 PNG 형식으로 저장합니다. 이제 이 이미지 파일을 WordPress 테마로 변환하여 새로 만든 웹사이트나 블로그에 적용할 수 있습니다. 당신은 또한 다음을 원할 수도 있습니다 PSD에서 WordPress로 변환기 -하지만 이 변신을 혼자서도 할 수 있다면 어떨까요? 무료입니다!

그래픽 디자인을 잘하는 많은 사람들이 PSD를 워드프레스 테마로 변환하는 이 지점까지 옵니다. 그리고 그들은 갇힌 느낌! 그러나 그것은 그들의 잘못이 아닙니다. 웹사이트를 구축하려면 멋진 디자인을 제작할 수 있을 뿐만 아니라 프로그래밍 기술도 필요합니다. 최소한 HTML, CSS, JavaScript, jQuery 및 PHP 프로그래밍당신의 PSD 파일웹 페이지에. 문제는 대부분의 사람들이 훌륭한 디자이너이거나 훌륭한 프로그래머라는 것입니다!

그러나 걱정하지 마십시오. PSD를 WordPress 테마로 변환하는 것은 그리 어렵지 않습니다. 올바른 조치를 취하기만 하면 됩니다. 이 기사에서 나는 당신에게 똑같이 말할 것입니다! 학습을 시작합시다.

PSD 파일이란?

모르시는 분들 PSD는 Photoshop 문서를 의미합니다. Adobe Photoshop에서 실행 파일을 저장하는 파일 형식입니다. Photoshop에서 PSD 파일을 열고 원하는 대로 디자인을 추가로 변경할 수 있습니다. 따라서 PSD 파일은 열린 파일 (이러한 파일은 편집할 수 있다는 사실을 참조).

꿈의 웹 사이트 디자인을 만들고 싶다면 아마도 Photoshop을 선택하여 구체화할 것입니다. Photoshop은 의심할 여지 없이 가장 훌륭하고 인기 있는 그래픽 디자인 도구입니다.

워드프레스란?

WordPress는 본질적으로 무료 블로깅 플랫폼입니다. 열려있다 소스 코드이 프로그램을 통해 프로그래머가 아닌 사람들도 자신의 웹사이트나 블로그를 쉽게 만들 수 있었습니다. WordPress는 강력하고 확장 가능하며 PHP로 작성되었습니다.

WordPress를 기반으로 한 웹사이트 디자인이라고 합니다. 주제(그리고 어떨 때에는, 견본).

PSD를 WordPress 테마로 변환

1단계: PSD 파일 자르기

PSD 파일이 준비되면 가장 먼저 해야 할 일은 파일을 청크로 나누는 것입니다. 무엇 때문에? 하나의 이미지는 크기가 크고 로드하는 데 시간이 오래 걸리기 때문입니다. 또한 다른 이미지 세그먼트와 다른 동작을 연결해야 합니다. 그래서 잘라야 합니다.

하지만 그렇다고 해서 이미지를 무작위로 잘라낼 수 있는 것은 아닙니다. 논리적인 방식으로 일을 처리해야 합니다. 예를 들어 머리글은 한 조각이 될 수 있고 바닥글은 분리되어야 합니다... 그런 다음 배경, 버튼 및 메뉴 등을 잘라낼 수 있습니다.

Adobe Photoshop에서는 레이어를 사용할 수 있습니다. PSD를 슬라이스하고 결과 세그먼트를 별도의 이미지 파일로 저장하는 내장 객체가 있습니다. 이 이미지를 JPG 또는 PNG 형식으로 저장할 수 있습니다. 이러한 세그먼트에서 작업하기 위해 투명도가 필요한 경우 다음 위치에 저장해야 합니다. PNG 형식 JPG는 투명도를 지원하지 않기 때문입니다.

이미지를 자를 때는 정확해야 합니다. 한 픽셀의 오차로도 두 부분이 복제품에 적합하지 않을 수 있습니다.

워드프레스 테마로 만들기 위해 PSD를 슬라이싱하는 동안 현재 CSS 시간매우 강력하며 몇 줄의 코드로 다양한 요소를 생성할 수 있습니다. 예를 들어 단색 배경, 그라데이션 배경, 버튼을 만들 수 있습니다. 다른 유형, 선, 화살표 및 특수 문자, 로만 CSS 사용. 이렇게 하면 이러한 것들을 이미지로 저장할 필요가 없습니다. 이미지가 적을수록 사이트가 더 빨리 로드됩니다.

다음 YouTube 비디오는 PSD 파일을 분할하고 다른 이미지로 저장하는 방법을 정확히 보여줍니다.

자, 이제 사이트 디자인의 다양한 시각적 요소가 생겼으므로 다음 단계로 넘어갈 차례입니다.

2단계: HTML 및 CSS 파일 만들기

이제 PSD를 웹 사이트로 변환하는 프로세스의 주요 코딩 부분을 시작합니다. 기본적으로 웹 페이지를 만들고 PSD와 똑같은 방식으로 슬라이스된 모든 이미지를 조합해야 합니다.

먼저 HTML 파일을 만들어야 합니다. 원하는 대로 부를 수 있지만 관례에 따라 index.htm.이 파일에서 PSD에서 이미지의 다른 부분을 표시하려면 HTML 또는 XHTML 코드를 작성해야 합니다. 기초 레이아웃을 만들려면 DIV 요소를 사용할 수 있습니다. DIV 요소는 매우 다양합니다. DIV 요소를 서로 겹치게 나란히 배치할 수 있습니다. DIV 요소의 중심을 왼쪽과 오른쪽으로 정렬할 수 있으며 웹 페이지의 특정 좌표에 매우 구체적으로 배치할 수 있습니다.

이러한 DIV 요소에서 저장된 이미지를 호출하여 DIV에서 그대로 또는 배경으로 표시할 수 있습니다.

웹 페이지의 이 기본 레이아웃을 완료한 후 다음을 수행해야 합니다. 스타일 PSD와 동일하게 만들 수 있습니다. 스타일을 지정하려면 CSS(Cascading Style Sheets) 규칙을 사용해야 합니다. 이 규칙을 사용하면 다양한 글꼴 스타일, 크기, 색상, 텍스트 그림자, 이미지 회색조, 테두리 등을 사용할 수 있습니다.

CSS 스타일 규칙을 작성하려면 스타일.css그런 다음이 CSS 파일을 호출하십시오. index.htm.에 존재하는 스타일 스타일.css에 적용됩니다 다양한 요소 HTML 파일에서.

좋아 기다려! HTML이나 CSS 코딩에 대해 전혀 모르더라도 걱정하지 마세요! 이들은 매우 간단한 스크립팅 언어이며 온라인에서 쉽게 배울 수 있습니다. 다음은 CSS 및 HTML을 배울 수 있는 온라인 리소스 중 일부입니다.

HTML 튜토리얼

  1. W3Schools HTML 튜토리얼
  2. TutorialsPoint HTML 튜토리얼
  3. HTML.net
  4. HTML 개

CSS 튜토리얼

  1. CSS 튜토리얼
  2. W3Schools CSS 튜토리얼
  3. 투츠 플러스
  4. CSS 기초

3단계: WordPress 테마 파일에서 HTML 파일 깨기

에 이 순간 PSD를 WordPress 테마로 변환하는 과정에서 하나의 HTML 파일이 있습니다. (index.html)그리고 하나의 CSS 파일 (styles.css).세 번째 단계에서는 HTML 파일을 다음과 같이 분할해야 합니다. 워드프레스 구조 테마.혼란스러운? 글쎄, WordPress에는 웹 페이지를 만들기 위해 함께 명명된 미리 정의된 파일 세트가 있습니다. 예를 들어, 게시물을 표시할 때 WordPress는 무엇보다도 파일 헤더, zip 파일, 사이드바 파일 및 바닥글의 내용을 요구합니다. 그러나 하나의 파일에 모든 코드가 있습니다. index.htm.따라서 코드를 재배포해야 합니다. index.htm다양한 wp 파일에 기본적으로 잘라내기 작업입니다! 다음은 WordPress의 중요한 테마 파일 목록입니다.

  • 아카이브.php
  • 카테고리.php
  • comment.php
  • 바닥글.php
  • 헤더.php
  • index.php
  • 페이지.php
  • 검색.php
  • 사이드바.php
  • 단일.php
  • 스타일.css
  • 404.php

핵심 WordPress 테마를 만들려면 최소한 헤더.php, 바닥글.php, 사이드바.php 단일.php그리고 index.php

메모장 텍스트 편집기에서 이러한 PHP 파일을 만들고 관련 코드를 복사하기만 하면 됩니다. index.htm이러한 파일에. 코드, 제목 부분이 들어갈 생성 헤더.php,각주 코드는 다음으로 이동합니다. 바닥글.php... 등등.

PHP에 익숙하지 않은 경우 이러한 파일을 올바르게 생성하기 어려울 수 있습니다. 정말 좋고 무료입니다. 온라인 수업~을 위한 PHP 배우기. W3Schools와 PHP.net은 이해하기 쉽게 제공합니다. PHP 도움말. 이 튜토리얼을 통해 PHP에 대한 느낌을 얻을 수 있습니다.

수행원 유튜브 영상"네이키드 워드프레스 테마"를 설정하는 방법을 이해하는 데 도움이 될 것입니다(기본적으로 -A 빈 WodPress 테마를 의미합니다.

4단계: WordPress 기능 및 태그 추가

이제 간단한 PHP 파일을 WordPress 테마 파일로 변환할 차례입니다. 이렇게 하려면 파일에 WordPress 태그를 추가해야 합니다. 그러나 당신은 물을 수 있습니다 WordPress 태그는 정확히 무엇입니까?

앞서 말했듯이 WordPress는 훌륭하고 안정적인 플랫폼입니다. 그것은 당신에게 큰 금액쉽게 호출하고 작업을 수행할 수 있는 내장 함수.

더 잘 이해하기 위해 예를 살펴보겠습니다. 홈페이지에서 (인덱스.php), 목록을 표시할 수 있습니다 최근 게시물. 이 목록은 새 게시물을 작성하는 방법과 시기를 자동으로 변경해야 합니다. 당신은 당신의 자신을 작성할 수 있습니다 PHP 함수데이터베이스에서 게시물 데이터를 추출하여 메인 페이지에 표시합니다. 그러나 WordPress 제작자는 당신의 삶을 더 쉽게 만들었습니다! 당신은 당신 자신을 쓸 필요가 없습니다 세부 기능. 그냥 사용 wp_get_recent_posts($arg, $output) WordPress에서 표시되는 최근 게시물 목록을 확인하세요!

WordPress에는 WordPress에서 사용할 수 있는 모든 기능 및 기타 항목에 대한 정보를 제공하는 포괄적인 온라인 설명서가 있습니다. 설명서에는 또한 많은 예가 포함되어 있으므로 매우 이해하기 쉽습니다. 이 문서에 액세스하려면 아래 링크를 따르십시오.

  • 워드프레스 템플릿 태그
  • 워드프레스 기능 링크

이 테마 파일이 준비되면 폴더에 넣어야 합니다. 이 폴더는 사용자 이름과 같아야 합니다. 새로운 주제. 이 폴더에는 CSS 파일, JavaScript 파일 및 이미지 파일을 저장할 다른 폴더도 있을 수 있습니다.

다음과 같은 이미지 파일에 포함할 수도 있습니다. 스크린샷.jpg또는 스크린샷.png.이 파일은 테마의 축소판 이미지로 표시됩니다. 스크린샷을 찍는 방법을 배우는 것은 쉽습니다.

일반적인 WordPress 테마의 파일 목록은 다음과 같습니다.

폴더에 테마 폴더를 업로드해야 합니다. /wp-content/테마 워드프레스 설치. 예를 들어 테마 이름을 Minerva -Then로 지정하면 테마 파일은 다음 위치에 있어야 합니다. / wp-content / 테마 / 미네르바

테마 폴더를 업로드한 후 WordPress 대시보드로 이동한 다음 외모 > 테마.여기에서 활성화할 수 있는 테마 중에서 새로운 테마의 디자인을 직접 볼 수 있습니다. 테마를 선택하고 활성화하기만 하면 됩니다.

추가 프로세스를 보려면 다음 비디오를 보십시오.

5단계: 검색 및 사용자 지정 기능과 같은 기능 추가

WordPress 테마가 이미 실행 중입니다. PSD에서 WordPress 테마로의 여정이 완료되었습니다. 하지만 더 추가할 수 있습니다. 기능당신의 주제에.

예를 들어 다음을 만들 수 있습니다. 검색.php사이트의 검색 결과를 표시하는 코드가 포함된 파일입니다.

또한, 자신만의 PHP 함수를 생성하여 다양한 기타 환경에서 사용할 수 있습니다. PHP 파일. 파일을 생성해야 합니다. 기능.php사용자 정의 기능을 한 곳에 보관합니다.

404(페이지를 찾을 수 없음) 오류를 처리하기 위해 파일을 생성할 수 있습니다. 404.php. WordPress는 누군가가 존재하지 않는 사이트 URL에 액세스하려고 할 때마다 이 파일의 내용을 표시합니다.

당신은 또한 일부를 추가할 수 있습니다 자바스크립트 함수. JavaScript는 가장 널리 사용되는 클라이언트 측 스크립팅 언어입니다. 파일에 JavaScript 함수를 작성할 수 있습니다. .js PHP 파일에서 이러한 함수를 호출합니다. 예를 들어 양식 유효성 검사는 일반적으로 JavaScript로 수행되는 작업입니다. 사용자가 입력하지 않고 사이트에서 무언가를 찾으려고 하는 경우 키워드검색 상자에서 사용자에게 검색 기준을 입력해야 한다고 알려주는 것은 JavaScript입니다.

이 단계를 거친 후에는 자신만의 WordPress 테마를 쉽게 만들 수 있습니다. 이 단계는 PSD 파일을 기능적인 WordPress 테마로 변환합니다. 그러나 어떤 사람들은 찾고 있습니다. 무료 PSD to WordPress 변환기. PSD 파일을 정확한 테마로 변환한다고 주장하는 회사가 많이 있습니다. 프로그래밍 방법을 배우는 번거로움을 겪고 싶지 않다면 PSD를 이러한 회사에 제공할 수 있습니다. 그러나 물론 그들은 그것에 대한 비용을 청구합니다!

무료 PSD to WordPress 변환기

나는 우연히 소프트웨어 DivineProjects의 Elemente. 이 프로그램을 무료로 다운로드할 수 있으며 PSD를 바로 사용할 수 있는 완전한 기능을 갖춘 WordPress 테마로 변환합니다. 이 소프트웨어는 Photoshop 플러그인처럼 작동합니다.

이 기사가 도움이 되었기를 바랍니다. 이 주제에 대해 질문이 있는 경우 언제든지 질문하십시오. 최선을 다해 도와드리겠습니다. 테크웰킨을 이용해 주셔서 감사합니다.

불과 몇 년 전에 Photoshop 파일에서 웹 사이트 디자인을 자동으로 변환하는 새로운 서비스 라인이 나타났습니다. .PSD코드로 HTML + CSS무료입니다. 작업을 자동화하려는 서투른 시도처럼 보였습니다. 최고의 품질, 그러나 이제 이러한 서비스는 콘텐츠 관리 시스템(예: WordPress)과의 완전한 통합을 제공하도록 발전했습니다.

이 기사에서는 시간과 비용을 절약하는 데 도움이 되는 꽤 좋은 서비스를 소개합니다.

1 DevPress

이 서비스의 저자는 Tung Do입니다. 그는 그의 새 제품에 대해 저를 기쁘게 해준 뛰어난 WordPress 디자이너이자 개발자입니다. 제공하는 서비스는 테마 디자인, XHTML/CSS 코딩, XHTML-to-WordPress 테마 개발 및 사이트 관리가 가능합니다.

2. PSD에서 WP


전문 코더 팀이 디자인을 표준 크로스 브라우저 WordPress 테마로 마이그레이션하는 데 도움을 줄 것입니다. 모든 작업은 최고 수준으로 수행될 것을 약속합니다. 낮은 가격그리고 안에 최대한 빨리. 우리는 남자들을 믿기만 하면 됩니다 :)

3. 코딩 피플


이 서비스는 정적 XHTML, HTML5 작업을 제공하며 온라인 상점을 위한 기성품 템플릿 세트도 제공합니다. Codingpeople은 코드 품질에 대한 독일의 권위자로 간주됩니다.

4. WP 캔버스


이 서비스는 디자인을 W3C 표준 Valid WordPress Theme와 호환되는 고품질 크로스 브라우저 레이아웃으로 쉽게 전환할 수 있도록 보장합니다.

5. PSD에서 WP로


훌륭한 웹사이트 디자인을 만들고 빠르고 고품질의 레이아웃이 필요한 경우 PSDtoWordPress 서비스가 도움이 될 것입니다. PSDtowordpress를 사용하여 디자인을 기성품 WordPress 테마로 바꾸십시오.

6.픽셀WP


PixelWP.com은 고객에게 신뢰할 수 있는 워드프레스 템플릿 변환기에 대한 우수한 PSD를 제공합니다. 귀하의 디자인이 고품질로 적시에 구현될 것이라고 확신할 수 있습니다.

7. 모든 PSD


서비스는 첨부된 디자인 레이아웃에서 기성품 WordPress 테마를 생성할 수 있습니다. 프로그래밍 기술이 없고 테마 파일로 작업하는 경우 이 서비스가 확실히 유용할 것입니다!

8. PSD 2 HTML


서비스는 2005년에 처음 시작되었습니다. P2H.com / PSD2HTML.com은 최초의 서비스로 50,000명 이상의 고객을 유치했습니다.

9.HTML 컷


HTMLcut은 구현하는 단계별 서비스입니다. 완성된 코드당신의 디자인에서. 업로드 중입니다 PSD 레이아웃, - 나머지는 HTMLcut에 달려 있습니다.

10. RapidXHTML


디자인으로 바꾸고 싶다면 준비된 블로그또는 CMS의 사이트라면 RapidxHTML이 적합합니다. 이 서비스는 wordpress, Blogger, Drupal, Joomla 및 Magento와 같은 인기 있는 플랫폼을 지원합니다.