WordPress Tutorial:처음부터 WordPress 테마 개발
HTML,CSS 및 JavaScript 를 알고 있습니다. 당신은 아름다운 웹 사이트를 만들 수 있습니다. 어쩌면 당신은”ve 에 대해 들어 워드 프레스,그러나”t 전적으로 확인 그것을 구현하는 방법,또는 왜 필요할 수 있습니다. 어쩌면 클라이언트는 워드 프레스를 요청,하지만 당신은”정말 익숙하지 다시. 어쩌면 당신은”전에 함께 일했지만 돈”은 처음부터 자신 만의 테마를 만드는 방법을 알고 있습니다. 어떤 경우이든,이 기사는 당신을위한 것입니다.
전제 조건
시작해야 할 모든 웹 사이트입니다. 모든 웹 사이트가 할 것입니다., 당신은 돈”t 는 어떤 PHP 를 알 필요가,또는 워드 프레스에 대한 사전 경험이. 귀하의 웹 사이트는 사용자 정의,또는 부트 스트랩/다른 프레임 워크를 기반으로 구축 할 수 있습니다.로컬 서버 환경을 설정하는 방법을 알아야합니다. 다행히,만약 당신이 돈”t 방법을 알고,내가 쓴 짧은,하나 설정 얻기에 대 한 달콤한 기사. 그것은 단지 몇 분 정도 걸릴 것입니다,그래서 가서 먼저 그렇게.,
목표
- 워드프레스 설치 로컬
- 기존 HTML 웹사이트와 변환로 사용자 지정 워드 프레스 테마
부분
I”ve 만들어 추가적인 튜터리얼에 추가하려면 이 하나입니다.
WordPress 는 나를 위해 무엇을 할 수 있습니까?
WordPress 는 원래 블로깅 플랫폼으로 구축되었지만 현재는 Cms-콘텐츠 관리 시스템으로 알려져 있습니다.
업데이트하려는 모든 웹 사이트는 CMS 의 혜택을 누릴 수 있습니다. 블로그 인 경우 게시물을 추가 할 수 있기를 원합니다. 레스토랑 웹 사이트 인 경우 메뉴를 추가하고 업데이트 할 수 있기를 원합니다., 회사 웹 사이트 인 경우 가격,패키지 등을 업데이트 할 수 있기를 원합니다.
경우는 사람은 당신이 지불하는 웹사이트,그것은”s 기 때문에 그들은”t 는 방법을 알고 또는”t 는 시간이 있을 다루는 코드입니다. 그것은 클라이언트를 위해 가능한 한 간단해야합니다. 워드 프레스는이 모든 것을 더 도울 수 있습니다.
시작하기:자
I can”t 스트레스를 충분히 얼마나 많은지 않”t 리 당신이 무엇을 사용하여 당신의 디자인-부트스트랩,파운데이션,골격,사용자 정의 CSS. 요점은 당신이 웹 사이트를 가지고 있고 그것이 어떻게 보이는지 좋아한다는 것입니다.,이 기사를 위해 기존의 간단한 스타터 템플릿을 가져 와서 WordPress 로 변환하려고합니다. 여기에 부트 스트랩 블로그 템플릿이 있습니다. 이것은 부트 스트랩의 공식 웹 사이트의 기본 테마 중 하나입니다.L
나이 편리하게 설치 GitHub 저장소의할 수 있는 코드를 당겨하는 로컬 디렉토리고 나와 함께 다음과 같다.git/GitHub 를 사용하는 방법을 알고 있습니까? 내 Git 시작하기 기사를 읽음으로써 해결할 수 있습니다., 힘내를 다루지 않고 시작하려는 경우 인덱스가있는 컴퓨터에 디렉토리를 만들기 만하면됩니다.html 및 블로그.css 와 당신은”갈 준비가되었습니다.
WordPress 설치
WordPress 설치 방법에 대한 기사가 많이 있습니다. 그들이 만드는 과정을 보이는 길고 무서운,그리고 첫 번째 시간에 당신이 그것을,그것은 확실히 수 있습니다: 다음은 설정 얻기에 공식 가이드입니다.
때문에 우리는”다시 사용하여 로컬 서버 및 MAMP,이미 알고 있 모든 필수 구성 요소를 설치하고,FTP 이 필요하지 않습니다.,
장소를 만들기에 대한 워드 프레스 라이브
게 빈 디렉토리에서 컴퓨터,어딘가 및점 localhost 이나 가지고 가상호스트는 디렉토리에 있습니다.
WordPress 다운로드
WordPress 다운로드 페이지로 이동하여 최신 버전의 WordPress 를 다운로드하십시오.
압축 해제 워드 프레스
워드 프레스의 압축을 풀고 디렉토리에 폴더의 내용을 배치합니다.
데이터베이스 만들기
업데이트 2017:최신 버전의 MAMP 와 함께 오지 않는 phpMyAdmin 을 미리 설치되어 있습니다., 대신,당신은”Windows 에서 Mac 또는 SQLYog 에 SequelPro,모두 무료 프로그램을 다운로드 할 수 있습니다. 를 입력 데이터베이스 다운로드 후,로그인을 호스트에는
locahost(또는 127.0.0.1),사용자 이름root와 비밀번호root. 나머지 지침은 동일합니다.
면,지금 당신은 서버라고 가정하면,서버에 있는 모든 것이 지적하고,오른쪽 방향으로”당신을 얻을 것이 이 메시지입니다.그 메시지를 사랑하는 법을 배우게 될 것입니다., MAMP 에서Open WebStart page를 클릭하십시오. 상단 근처에서 이것을 찾으십시오.
phpMyAdmin 을 클릭하십시오. 이 작업을 수행하려면 다음을 수행하십시오. 나는 나의 startwordpress 를 부를 것이다. 즉”당신이 phpMyAdmin 에서 할 필요가 모든이야!나는 이것이 어떻게 작동하는지 잘 모르겠습니다. 디렉토리에서wp-config-sample.php를 찾으십시오.다음과 같이 보일 것입니다.
돈”t 긴장. 데이터베이스 이름,사용자 이름 및 암호를 변경하십시오.
이다.
과 변경은 그것을 그대로 다른 것으로 숫자 및 문자입니다. 보안을 위해. xyz_또는735hjq9_등파일을 wp-config 로 저장하십시오.디렉토리에 php.이제 웹 사이트로 돌아가서 새로 고침하면이 화면이 나타납니다.
“당신 ll 입력해야 몇 일-사용자 이름,비밀번호,전자 메일 주소,그리고 당신은”다시 한다. 축하합니다,당신은 성공적으로 워드 프레스를 설치했습니다!, 당신은로 리디렉션됩니다/wp-로그인.php,여기서 당신은 백엔드에 로그인 자격 증명을 입력 할 수 있습니다. 기본 URL 로 이동하면 기본 WordPress 블로그와”Hello,World!”게시.
사용자 지정 테마를 만드는
외부 구성하는 워드프레스,거의 모든 것을 당신에서는 워드 프레스에있을 것입니다wp-content폴더를 다른 모든 것은 핵심 코드,그리고 당신은 don”t 리고 싶어합니다.
이 시점부터 WordPress Codex 와 StackOverflow 가 가장 친한 친구가 될 것입니다., I”ll 을 구축하는 방법을 보여줍 기본 테마,그러나 당신이 선택하는 방법을 사용자 정의 테마 넘어서는 전적으로 당신에게 달려 있습니다.
Finder 에서 wp-content>테마의 경로를 따라 테마 폴더에 도착합니다. 당신은”워드 프레스 기본 테마-twentyfifteen,twentyfourteen,twentythirteen-및 색인을 볼 수 있습니다.php. 테마에 대한 새 디렉토리 만들기;나는 광산 startwordpress 라고.
WordPress 테마는 존재하는 스타일에 두 개의 파일 만 필요합니다.css 및 색인.php.
사용자 정의 테마 폴더에서 스타일을 만듭니다.css., 그것은 단순히 테마가 여기에 존재 워드 프레스를 경고 주석이 포함되어 있습니다. 이름,저자,설명 등을 변경하십시오.
기억이트 스트랩 블로그에서 소스 코드는 이전에서 문서? 이 두 개의 파일을-index.html및blog.css-사용자 지정 테마 폴더에 있습니다. 이 작업을 수행하려면 다음 작업을 수행해야합니다.
이제 테마가 생성되었습니다. WordPress 대시 보드로 이동하여Appearance > Themes를 클릭하십시오., 당신은”모든 기본 테마로 컬렉션의 테마를 볼 수 있습니다.
테마를 활성화하고 기본 URL 로 돌아갑니다. 네,그렇게 간단합니다. 당신은 기술적으로 이미 사용자 정의 테마를 만들었습니다. 물론,그것은”정적 HTML 사이트가 할 수있는 것 이상으로 아직 아무것도하지 않지만,당신은”지금 모든 설정을 다시합니다.
당신이 알아 차릴 수있는 한 가지가 있습니다-blog.css가로드되지 않습니다. 부트 스트랩”의 기본 CSS 및 JS 파일은 CDN 을 통해로드되지만 내 로컬 css 파일은로드되지 않습니다. 왜?,내 로컬 URL 은startwordpress.dev일 수 있지만wp-content/themes/startwordpress에서 실제로 가져옵니다. 내가 블로그에 링크하는 경우.css 와<link href="blog.css">,존재하지 않는startwordpress.dev/blog.css를로드하려고합니다. 당신은 몇 가지 PHP 없이 워드 프레스 페이지에서 아무것도 링크 할 수 없습니다 지금 알아보세요.
참고:Chrome 은 더 이상
.dev로컬 Url 을 허용하지 않습니다. 이 예제의 사용.dev지만,당신이 사용할 수 있는.test또는 다른 뭔가를 당신의 선택입니다.,이 문제를 해결하려면 어떻게해야합니까? 이 작업을 수행하는 몇 가지 방법이 있지만 시작하는 가장 쉬운 방법을 보여 드리겠습니다.인덱스의 머리에서 CSS 스타일 시트에 링크 된 위치를 찾습니다.php. 이것은 지금처럼 보이는 것입니다.하지만 우리는”그것을 바꿔야 할 것입니다.테마 폴더에 동적으로 링크하도록 지시해야합니다. 위의 코드를 아래 코드로 바꿉니다.
페이지를 다시로드하면 CSS 가 지금로드되고 있음을 알 수 있습니다., 로드 중이 아닌 경우 하드 새로 고침을 수행하십시오. 개념은 PHP 파일을 제외하고 이미지,javascript 및 themes 폴더에있는 대부분의 다른 파일에 대해 동일합니다.
로드 할 CSS 를 성공적으로 얻을 수 없다면”소스보기”를 클릭하고 코드에서 CSS 파일의 경로를 찾으십시오. 그것은 시작되어야합니다.스트레스.dev/wp-콘텐츠/테마/startwordpress/블로그.css. 확인 블로그.css 는 올바른 위치에 저장됩니다.사이트에 스크립트를로드하는 가장 올바른 방법은 아닙니다., 그것은 이해하는 것이 가장 쉽고 작동하므로 당분간 우리가 어떻게 할 것인가입니다.
페이지를 섹션으로 나누기
지금 모든 것이 색인에 있습니다.php. 그러나 분명히 우리는 모든 페이지의 머리글,바닥 글 및 사이드 바가 동일하기를 원합니다. (어쩌면 일부 페이지에는 약간의 사용자 정의가 있지만 나중에 제공됩니다.)
우리는”다시 인덱스를 나눌 것입니다.네 개의 섹션으로 php-헤더.php,바닥 글.php,사이드 바.php 및 콘텐츠.php.여기서는 원래 인덱스입니다.php. 이제 우리는 자르고 붙여 넣기를 시작합니다.,
<!DOCTYPE html>에서 기본 블로그 헤더까지의 모든 것이 헤더 파일에 있습니다. 헤더에는 일반적으로 필요한 모든 헤드 스타일과 웹 사이트에 대한 상단 탐색 기능이 포함되어 있습니다. 유일한 나이에 코드를 추가<?php wp_head(); ?>기 전에 오른쪽 닫기</head>.
대부분의 웹사이트가 특히,블로그,이 있을 것이 사이드 지역 등과 같은 콘텐츠는 아카이브,태그,카테고리,광고,이것 저것. (간결함을 위해 콘텐츠가 제거되었습니다.)
사이드 바가 모든 보조 정보가가는 곳이면 내용은 웹 사이트의 모든 기사와 주요 내용이가는 곳입니다. (간결함을 위해 콘텐츠가 제거되었습니다.)
Index
인덱스 파일은 이제 꽤 희소해야합니다. 사실,수있는 기능을 제공합니다:
이제 우리는”다시는 것을 추가하는 것입니다. 나는 이것이 내가 할 수있는 유일한 방법이라고 생각한다.
당신이”전에 PHP 를 사용한 적이 없다하더라도,이 코드는 모두 매우 자명합니다., get_header();,get_sidebar();및get_footer();는 모든 기능을 찾기 위해 해당.php 파일 및 코드를 삽입합니다. 물론,그들은 모두 자신의<?php ?>태그 안에 들어가서 서버가 HTML 로 구문 분석하도록 알려줍니다. 콘텐츠 기능은 약간 다르지만 동일한 작업을 수행합니다.URL 을 다시로드하면 이전과 마찬가지로 전체 사이트가로드됩니다. 당신은”백 엔드에 다시 로그인하면 상단 표시 줄을 알 수 있습니다.,
주요 설정
우리가 시작하기 전에 당기 게시물에 페이지고,우리를 구성해야 할 몇 가지 기본 설정 워드 프레스. 예를 들어,지금 내 제목은 HTML 로 하드 코딩 된”부트 스트랩 블로그”입니다. 내가 원하는<title>및<h1>의 내 사이트를 변경을 통해 다시 끝입니다.
대시 보드에서Settings > General로 이동하십시오. 제목을 설정하십시오.헤더에서”fd477b1015″>
id=”fd477b1015″>
.,php 변경,내용의 제목표 및 주요 h1 태그를 이 코드:
고 설명이다.
마지막으로,내가 원하는 타이틀을 항상 나를 데려하는 메인 블로그 페이지입니다. bloginfo("wpurl");는 그렇게 할 코드입니다.
여기에서”s 전체 코드의 경우에”다시 혼동된다.
We”ve 는 마침내 페이지에 대한 첫 번째 동적 변경을 수행했습니다. 프런트 엔드는 설정에 넣은 내용을 반영해야합니다.,
이제는 설정>영구. 기본적으로 WordPress 는 요일과 이름으로 설정되어 있으며 이는 정말 추악한 URL 구조입니다. 게시물 이름을 클릭하고 변경 사항을 적용하십시오.
루프
가장 흥미로운 부분은 콘텐츠를 동적으로 삽입 할 수 있고 WordPress 에서는 루프로 그렇게합니다. 그것은 워드 프레스의 가장 중요한 기능입니다. 모든 콘텐츠는 루프를 통해 생성됩니다.
대시 보드에서 게시물을 클릭하면”안녕하세요,세상!”기본적으로 거기에 게시하십시오., 우리의 목표는 블로그에 해당 게시물을 표시하는 것입니다.루프 자체는 매우 간단합니다.
그것은 설명 그 자체이 있는 경우 게시물이 있는 동안에는 게시물을 표시합니다. 루프 내부의 모든 것이 반복 될 것입니다. 블로그의 경우 게시물 제목,날짜,내용 및 댓글이 될 것입니다. 각 개별 게시물이 끝나야하는 곳은 루프가 끝날 곳입니다. 우리는”index.php에 루프를 추가 할 것입니다.다음은 새 인덱스 파일입니다.
색인.php
루프 내부의 유일한 것은 내용입니다.,php 는 하나의 단일 게시물의 내용을 포함합니다. 그래서 오픈 콘텐츠.이 작업을 수행 할 수있는 방법이 있습니까? 뿐만 아니라 사이드 바를 동적으로 만들 수 있습니다. 사이드 바에 설명 및 보관 목록이 있어야합니다. 대시 보드에서 프런트 엔드 웹 개발자 및 전문 괴상한 말을 내 사용자 설명을 편집 할 것입니다.”
아카이브 아래의 모든<li>s 를 삭제하고이 코드로 변경하십시오.
한 설명,나는”m 를 끌어가는 메타데이터에서 내 계정입니다.
이제는 콘텐츠를 뽑아서 동적으로뿐만 아니라.지금까지 내 블로그가 있습니다.나는 이것이 어떻게 작동하는지 잘 모르겠습니다. 이제 블로그를 만들고 일부 사이드 바 콘텐츠를 편집하는 방법을 알았습니다. 이 페이지의 한 가지 주요 측면 만 남아 있습니다-탐색 및 리드 위치. 게시물과 페이지-음,워드 프레스에 두 가지 주요 측면이있다., 그들은”둘 다 루프를 사용한다는 점에서 매우 유사합니다. 그러나 페이지는 블로그 게시물 인 콘텐츠를 넣는 곳입니다. 워드 프레스의 CMS 측면이 들어오는 곳이다-각 개별 페이지는 당신이 원하는대로 사용자 정의 할 수 있습니다.대시 보드에서 두 개를 볼 수 있도록 페이지를 추가했습니다. 첫째,우리는”링크가 페이지로 연결되도록 탐색 막대를 편집 할 것입니다. 헤더로 돌아 가기.php,이 코드를 찾아서 변경하십시오.
헤더.php
wp_list_pages();는 정렬되지 않은 목록에있는 모든 페이지를 나열합니다., "title_li="는 코드에 목록 앞에”페이지”제목을 추가하지 말라고 말하고 있습니다. 불행하게도 우리를 위해,이 끔찍한 보인다;원래 블로그.css 에는a태그가 아닌li태그로 코딩 된 링크가 있습니다.
다행히도,이것은 매우 쉽게 수정입니다. 나는 단지 하나에서 다른 스타일을 적용 할 것입니다. 이것을 블로그에 추가하십시오.css
블로그.css
이제 올바르게 표시되어야합니다., 그러나 CSS 가 적용되지 않는 경우 HTML 출력의 출처를보고 CSS 의 URL 이 무엇인지 알아보십시오. 그것은startwordpress.dev/wp-content/themes/startwordpress/blog.css여야합니다. 하드 새로 고침을 할 수 있는지 확인하십시오.나는 이것이 어떻게 작동하는지 잘 모르겠습니다.
Pages
페이지가 블로그 게시물과 다른 레이아웃을 갖기를 원합니다. index.php를 블로그 색인으로 생각하고page.php를 페이지 색인으로 생각하십시오., 나는”m 을 만들기page.php될 것이다,매우 유사하다는 인덱스를 제외하고 전체 12-넓은 격자를 대신 8 넓은 콘텐츠는 4-와이드 사이드.
페이지.내 샘플 페이지를 클릭하면 레이아웃이 이제 블로그 게시물 레이아웃과 다릅니다.
결론
WordPress 에 대해 배울 것이 훨씬 더 많습니다. 나는이 기사가 당신에게 가능성의 세계를 열었 으면 좋겠다. 이제 플러그인,위젯 또는 다른 사람의 테마를 사용하지 않고 모든 웹 사이트가 WordPress 테마로 변환 될 수 있음을 알고 있습니다.,명확하지 않은 것이 있으면 알려주십시오. 내가”뻔뻔스럽게 잘못된 정보를 게시 한 경우 알려주십시오! 모든 의견은 크게 감사합니다! 나의 목표하는 문서 내가 네 앞에서 저를 처음 시작했을 때 사용하는 방법을 배우는 워드 프레스와 PHP.
이 로컬 인스턴스를 라이브 서버로 마이그레이션하는 방법을 알고 싶다면이 작은 자습서를 참조하십시오.