Good Mood

이 될 것입니다 재미있는 튜토리얼은 우리가 검사하는 방법을 만드는 워드프레스에서 테마니다. 사실,우리는 절대적으로 제로 파일과 제로 라인의 코드로 시작할 것입니다. 는 유일한 방법을 이해하는 방법 WordPress Themes 일을 정말로 이동에서 낮은 수준에서와 매일 일을 자신입니다. 네,그것은 유혹이 이를 방지하기 위해 만들 수 있기 때문에 워드 프레스에 대한 모든 것을 할 수없이 당신의 이해 코드는 능력을니다., PHP,JavaScript,CSS 또는 기본 HTML 일 수 있습니다. 이 단계별 WordPress 테마토는 방법을 이해할 수 있습니다 모두가 함께 어떻게 구부러 WordPress 당신의 것입니다.

당신이 워드 프레스 웹 사이트를 실행할 때 당신에게 사용할 수있는 많은 무료 테마가 있습니다. 넘는 무료 테마,하도록 선택할 수도 있습 프리미엄을 지불을 위해 전문적으로 만들어진 WordPress themes 좋아 보인다고 환상적인 특징입니다. 그렇다면 처음부터 자신 만의 테마를 만드는 방법을 배우는 이유는 무엇입니까?, 대답은 아무리 당신이 사용하는 어떤 테마,당신이 당신의 웹 사이트에 간단한 변경을 할 때 시간이 올 것입니다. 이러한 변경 사항 중 일부는 간단한 플러그인 또는 위젯으로 수용 될 수 있습니다. 그러나 여러 번,그것은 더 이해하는 것이 무엇인지 이해하려는 변경을 변경하는 방법,그것을 돌려 너의 워드 프레스 웹 사이트를 엉망으로 플러그인 기능 추가가 어렵습니다. 기초 수준의 지식을 조금만 사용하면 테마를 수정하거나 단순히 처음부터 자신을 구축하는 데 자신감을 가질 수 있습니다., 편집 할 파일과 원하는 결과를 만들기 위해 추가하거나 수정할 코드를 알 수 있습니다.

1 단계:테마 파일을 보관할 폴더를 만듭니다.

우리가 테마를 구축 할 예정이라면 WordPress 설치에서 WordPress 테마를 구성하는 파일이 어디에 살고 있는지 알아야합니다. 이것은 꽤 쉽습니다. WordPress 설치에는 일반적으로wordpress라는 루트 디렉토리가 있다는 것을 알고 있습니다. 다음은 PHP Storm 에서 루트 디렉토리의 모습입니다.,

이 디렉토리에는 다음이 포함 파일 및 폴더:

파

폴더

• wp-admin
• wp-content
• wp-이 포함됩

폴더 우리는 가장 관심이있는 지금은 wp-content 폴더에 있습니다. Wp-content 폴더 내에 themes 라는 폴더가 있습니다. 이 폴더가 무엇인지 아십니까? 그래,맞아! 그것은 당신이 당신의 워드 프레스 웹 사이트와 함께 사용하고자하는 하나 이상의 테마를 보유하고있는 폴더입니다., 이 테마 폴더에서 우리는 twentyfifteen,twentysixteen 및 twentyseventeen 의 세 가지 추가 폴더를 찾을 수 있습니다. 이 폴더에는 WordPress 가 기본적으로 제공하는 세 가지 테마가 포함되어 있습니다. 아래에 customtheme 라는 폴더도 있음을 알 수 있습니다. 가서를 작성하는 폴더에서뿐만 아니라 귀하의 설치로 이것은 우리를 만드는 것입니다 우리는 워드 프레스에서 테마니다.

2 단계:스타일 만들기.css 및 색인.php 에서 사용자 지정 테마 폴더

우리가 알고 있는 워드 프레스는 테마 파일에 있는 파일 시스템입니다., 우리는 또한 우리의 테마 폴더에 customtheme 라는 새 폴더를 만들었습니다. 이제이 디렉토리에 두 개의 빈 파일을 만들 예정입니다. 하나는 색인이라고합니다.php 와 다른 하나는 스타일이라고합니다.css.

우리가 지금은 채우는 이 파일에 최소한으로 우리가 필요한 새로운 테마가에서는 워드 프레스.

스타일.Css

WordPress 는 실제로 스타일에 배치 한 주석을 읽습니다.css 파일. 이것은 당신이 구축하고있는 테마에 대한 특정 정보를 지정하는 곳입니다.

스타일.,css 는 모든 WordPress 테마에 필요한 스타일 시트(css)파일입니다. 웹 사이트 페이지의 프리젠 테이션(시각 디자인 및 레이아웃)을 제어합니다.

여기 스 니펫에서는 테마 이름,작성자,작성자 URI 및 테마의 버전 번호를 지정하면됩니다.,

인덱스입니다.,php

이 파일에서,우리는 그냥하고 싶은 출력하는 뭔가가 화면을 증명하는 sgs 사용자 지정 테마니다.

좋은 직업입니다! 믿거 나 말거나,당신은 당신의 첫 번째 워드 프레스 테마를 만들었습니다.,

3 단계 활동에서 테마 WordPress 대시보드

이 시점에서 우리를 방문 할 수 있습 WordPress 대시보드로 이동 외관->테마로 보내면,우리는 새로운 테마 우리가 만들어집니다.

리 클릭 할 수 있습니다”테마 자세히”을 드릴다운 우리의 사용자 정의 테마는 정보는 우리가 들어 스타일입니다.css 파일이 작동했습니다. 우리는 그들이 저자 Vegibit 에 의해 버전 1.0,customtheme 의 이름을 가지고 볼 수 있으며,우리가 제공 한 URI 에 대한 링크. 아주 멋지다.,

그리고 이제 진실의 순간! 가서 새로운 customtheme 에”활성화”를 클릭 한 다음 사이트를 방문하십시오. 그것은 우승하 Webby awards,하지만 우리는 우리 자신에 좋은 시작 새로운 사용자 지정 테마!

4 단계:코드를 추가하는 출력 이 글 제목과 게시 Text

우리는 자유를 채우는의 몇 가지 예는 게시물에 데이터베이스 그래서 우리는 작업할 수 있는 데이터 동안 이습니다. 지금,우리의 테마는 사용자 정의 테마를 출력합니다!, 데이터베이스에 얼마나 많은 게시물이 있더라도 사이트를 방문 할 때 페이지로 이동합니다. 이제 데이터베이스에서 일부 데이터를 가져 와서 페이지로 출력하는 것으로 넘어 갑시다. 특히 모든 게시물의 게시물 제목과 게시물 내용을 가져 와서 홈페이지에서보고 싶습니다. 이제 그 기회를 줘 보자. 먼저 우리가 워드 프레스 대시 보드에서 게시물에 대해 무엇을 보자.

WordPress 루프 활용

이제 WordPress 루프에 대해 조금 이야기 할 수 있습니다. 워드 프레스 루프는 정말 워드 프레스 실행을 만드는 엔진입니다., 이 루프를 통해 테마 개발자가 게시물을 확인하고 필요에 따라 페이지에 표시합니다. 다음과 같이 형식을 따르는 경우. 데이터베이스에 있는 경우 게시물,의복하면서 그들은 여전히 있다는 게시물,그렇지 않으면 우리는 것이 사용자가 없는지 알고 게시물이 있습니다. PHP 코드에서 다음과 같이 보입니다.,

주는 루프를 사용한 두 개의 기능에서 그것은 가장 기본적인 형태입니다. 이 문제를 해결하려면 어떻게해야합니까? Have_posts()함수는 한 가지만 수행합니다. 반복 할 데이터베이스에 게시물이 있는지 알려줍니다., 이 함수는true또는false를 반환합니다. true를 반환하면 루프 오버 할 수있는 게시물이 있습니다. false를 반환하면 반복 할 게시물이 없습니다. 다른 함수 인 the_post()는 아무 것도 반환하지 않습니다. 그것은 작업이 출력 게시물에 워드 프레스 준비를 얻는 것입니다. 특히,그것을 검색하 next post,세트는 게시물을 설정하는in_the_loop속성을true., 지금까지,우리 페이지가 출력되지 않는 모든 정보에 대한 우리의 블로그 게시물이지만,업데이트할 수 있습니다 지금 우리에 index.php 파일.

좋아 멋진. 이제 The_title()및 the_content()라는 두 가지 추가 WordPress 함수를 사용했습니다. 대부분의 경우,이러한 기능을 사용되는 루프 안에서 그리고 그들을 가져 제목 및 내용의 각 게시물로는 루프 반복하는 각 하나 이상에서 데이터베이스입니다. 그래서 루프가 실행됨에 따라 첫 번째 게시물을 가로 질러 올 것입니다., 그 시간에 the_title()함수를 출력하여 게시물의 제목 페이지 the_content()출력할 것입니다 몸의 해당 게시물을 페이지입니다. 다음 루프에서 이러한 함수는 다시 다음 제목과 내용을 가져 와서 페이지로 출력합니다. 그래서 장소에 이것들과 함께,우리는 지금 우리의 게시물이 화면에 전송지고에 대한 몇 가지 정보를 볼 수 있어야합니다. 그것을 시도하자! 우리는http://wordpresstutorial.dev를 방문하여 작동하는 것을 봅니다!,

5 단계:에 대한 링크를 추가 각 게시물

에 대해 무엇을 연결하는 각 게시할 수 있도록 보기 게시물은 그 자체보다는 부분의 홈페이지에 있습니다. 우리는 워드 프레스가 제공하는 특별한 기능을 다시,아주 쉽게 할 수 있습니다. 이 작업을 위해 the_permalink()함수를 사용할 수 있습니다. 업데이트할 수 있습니다 우리의 코드는 다음과 같이

이제,우리가 할 수 있습을 클릭 각 게시 제목 페이지로 이동만 있는 것 중 하나다. 아주 멋지다!,

6 단계:헤더를 추가하고 바닥에게 사용자 지정 테마

제목과 내용을 게시의 중심은 만들기 좋 테마입니다. 테마의 머리글과 바닥 글 섹션을 갖는 것만 큼 중요합니다. 이러한 섹션에는 웹 사이트의 모든 페이지에 항상 표시되는 내용이 포함됩니다. 이 섹션은 게시물 내용의 위와 아래에 있습니다. 이를 위해,당신은 그것을 짐작,우리 사이의 특별한 기능을 제공 by WordPress 을 얻을 머리글을 취득합니다. 패턴이 아직 개발되기 시작하는 것을 보십니까?, 거의 아무것도 할 수 있는 주제로 개발 워드프레스에서 이미 수행에 대한 당신의 방법으로 이러한 사용자 정의 기능입니다. 그래서 당신은 워드 프레스 테마 개발에 이러한 일반적으로 사용되는 기능을 암기 지불 것을 발견 할 것이다. 이제 get_header()및 get_footer()함수를 테마 파일에 추가하겠습니다.

잘 보시겠습니까?! 우리가 볼 수있는 우리의 사용자 정의 테마를 지금은 헤더 영역뿐만 아니라 바닥 글 영역에 있습니다., 헤더에서는 이름을 그의 슬로 사이트에있는 동안 바닥글 우리는 친숙한 텍스트,워드 프레스 자가 자랑스럽게 powered by WordPress. 이러한 기능을 사용할 때 기본 머리글 및 바닥 글 옵션입니다. 사용자 정의 머리글과 바닥 글을 갖고 싶을 때 어떻습니까? 바로 올라오고!

에서 2 개의 테마 파일을 4

지금까지 이 튜토리얼에서는,우리는 두 개의 파일을에 살고있는 우리의 customtheme 폴더(자 테마 폴더에). 그 파일은 스타일입니다.css 및 색인.php. 이 시점에서,우리는 함께 더 얻기 위해 더 많은 파일을 추가해야 할 것입니다., 가서 customtheme 폴더에 두 개의 새 파일을 만듭니다. 이러한 파일은 편리하게 헤더라고합니다.php 및 바닥 글.php.

이제 이러한 파일을 덮어쓰고 기본 헤더 바닥글 레이아웃에 의해 제공되는 경우 기본적으로 중 하나를 호출 get_header()또는 get_footer()함수입니다. 사실 웹 사이트를 새로 고치면 머리글과 바닥 글이 사라진 것처럼 보입니다. 아직 해당 파일에 마크 업을 추가하지 않았기 때문입니다. 그냥 미소를 위해,이 밖으로 테스트 할 수 있도록 같은 파일을 설정합니다.

헤더.,php

footer.,php

Working with header.,php

위의 예는 훌륭하게 작동했으며,이 파일이 가장 기본적인 수준에서 어떻게 작동하는지 보여줍니다. 헤더입니다.php 파일은 실제로 그러나 매우 중요하다,그래서 너무 빨리 그것의 세부 사항을 통해 광택하지 말자! 이것은 당신이 당신의 사이트에 모든 페이지가 한 가지 방법 또는 다른에 액세스해야합니다 코드를 포함하는 곳입니다. 시작하려면 모든 HTML 페이지에 doctype 이 있습니다. 이 파일에 그 지정합니다. 또한 모든 페이지에는 오프닝 html 태그,헤드 섹션 및 오프닝 바디 태그가 있습니다. 이 모든 헤더에 갈 수 있습니다.php 파일., 신속 하 게 모든 웹 페이지의 사용을 만들 것 이라고 이러한 것 들의 일부를 추가 하자. 우리는뿐만 아니라 여기에 몇 가지 새로운 워드 프레스 기능을 사용합니다. Language_attributes(),bloginfo()및 body_class()가됩니다.

헤더.php

경우 우리는 페이지를 다시 로드한 다음 페이지의 소스에서 우리의 브라우저,우리는 우리의 아이디어를 얻을 수 있습 그냥 이러한 기능을 하고 있다. 우리가 강조 표시가 있는 줄을 출력에서 온 그러한 기능은 아래

다시는 우리가 볼 수 있는 아주 자유롭게 사용하는 워드 프레스 기능을 개발할 때 자신의 테마를 워드프레스에서., 사실,우리는 아직 사용자 정의 코드를 전혀 작성하지 않았습니다. 우리는 단순히 무엇을 배우는 다양한 워드프레스는 기능을 제공할 수 있고,그 일을 그들에서 우리의 사용자 정의 테마입니다.Wp_head()를 포함하여

Wp_head()는 WordPress 테마로 작업 할 때 일종의 특수 기능입니다. 우리가 지금까지 보았던 다른 모든 사람들만큼 간단하지는 않습니다. 의 목적을 이 기능을 완성하는 출력에서<머리>섹션에서 당신의 헤더가 있습니다.php 파일., 실제로 닫는</head>태그 바로 전에 이동하기위한 것입니다. 이것은 당신이 당신의 사이트에 다양한 플러그인을 추가하기 시작할 때 중요해진다. 프런트 엔드의 헤드 태그에 스크립트 또는 데이터를 인쇄합니다. 그것은 좋은 습관이 항상 포함 wp_head()에서 당신의 테마로 많은 다른 플러그인에 의존할 수도 있습이 후크에 추가하는 스타일,스크립트를,또는 메타 요소로<머리>지역의 사이트입니다. 여기에 다음과 같이 추가 할 것입니다.

헤더.php

바닥 글 완료.,php

우리는 헤더에 필요한 것의 기초를 추가하는 것을 마쳤습니다.php 파일. 이제 가서 바닥 글을 반올림합시다.php 파일. 우리가해야 할 일이 몇 가지 있습니다. 우리의 헤더에서 그것을 상기하십시오.php 파일 우리는 html 과 본문 태그를 열었습니다. 그것들은 어느 시점에서 닫혀 야합니다. 바닥 글.php 파일은 그렇게 할 수있는 완벽한 장소. 그래서 우리는 추가 닫기</html>및</체>태그를 제공하는 것 외에 전화를 wp_footer()함수입니다.
바닥 글.,php

변경 사이트에서 정보를 워드프레스는 대시보드

너 왜 우리가 사용하는 모든이는 멋진 기능을 구축하는 우리의 테마입니다. 예를 들어 사이트의 이름과 태그 라인을 나열하고 싶을 때 이름과 설명의 매개 변수를 전달하는 bloginfo()함수를 사용했습니다., 그 이유는 일반적으로 이러한 값을 사이트에 하드 코딩하고 싶지 않기 때문입니다. 이것은 변경 될 수있는 정보입니다. 또한,만약 당신이 당신의 테마 사용할 수 있는 공개,그들은 자신의 이름과 슬로건에 대한 그들의 웹 사이트입니다. 할 수 있어야 한다는 것은 단순히 방문 관리자 대시보드에서는 워드 프레스 및 업데이트를 자신의 일반적인 설정을 보이 데이터를 자동으로 채우.

사이트를 만들고 제목에 대한 링크를 홈페이지

대부분의 테마는 것입니다 수있는 기능을 제공하는 제목을 클릭 웹 사이트의 텍스트,그리고 직접적인 사용자에게 홈페이지의 사이트입니다., 이 방법에 상관없이 사용자가 될 수 있는 사이트에서,그들은 항상 클릭는 제목 텍스트 및 오른쪽에 다시 기본 페이지의 웹 사이트입니다. 이제 헤더에 해당 링크를 추가하겠습니다.php.

7 단계:함수 추가.테마

에 php 파일 이 시점에서,우리는 우리의 사용자 정의 테마에 네 개의 파일이 있습니다. 그것들은 색인입니다.php,스타일.css,헤더.php,및 바닥 글.php. 아마도 우리가 가지고 있어야 할 다음으로 가장 중요한 파일은 함수입니다.php 파일.

함수.WordPress 의 php 파일은 테마에 대해 많은 작업을 수행합니다. 그것은 당신이 워드 프레스의 기본 동작을 수정하는 코드를 배치 파일입니다., 당신은 거의 기능을 생각할 수 있습니다.php 의 형태로 플러그인에 대한 워드 프레스와 함께 몇 가지 주요 기억하는 포인트:

• 필요하지 않은 독특한 텍스트 머리글
• 폴더에 저장된 보유하는 테마 파일
• 실행하는 경우에만 활성화되어 테마의 directory
• 에만 적용됩니다 현재 테마
• 부를 수 있는 PHP 기능,워드 프레스 기능 또는 사용자 정의 기능

한 가지 우리가 필요 심하게에서 우리의 주제는 일부는 더 나은 스타일링! 우리의 기능에 함수를 만들어 봅시다.스타일을 포함하는 php 파일.우리의 테마로 css 파일., 여기에 우리가 그 목표를 달성 할 수있는 방법이 있습니다.

이 코드 조각에는 사용자 정의 테마의 스타일 시트가 포함되거나 활성화됩니다. 이제 이유를 궁금해 수 있습니다 우리가 사용하는 사용자 정의 기능을 때,그것은 것처럼 우리는 할 수만큼 쉽게 수동으로 링크 스타일에서 자신의 헤더가 있습니다.php 파일. 글쎄,이것은 나중에 당신의 노력에 더 큰 수익을 위해 조금 더 많은 일을 앞으로하기 위해 내려옵니다. 테마로 더 복잡하고 더 많은 자산을 추가,당신은 당신이 행복할 것이 하나의 기능을 처리할 수 있는 모든습니다.,

이제 사물을 좀 더 예쁘게 보이게 할 때입니다. 첫째,하자가 포장<div>>클래스의 컨테이너입니다. 열기<div>>것에 헤더가 있습니다.php,닫는 동안<div>바닥 글에있을 것입니다.php. 또한 포스트 출력을 인덱스로 래핑 할 것입니다.post 클래스가있는<article>태그가있는 php. 이것은 우리에게 우리 스타일로 타겟팅 할 수업을 줄 것입니다.,우리가 다른 것들 사이에서 페이지 너비를 설정할 수 있도록 css 파일. 우리는 또한 스타일에 더 나은 스타일을 추가 할 것입니다.이 단계에서 css.

8 단계:테마

헤더에 스타일을 추가하십시오.php
오프닝 추가<div>헤더에.php 파일.

바닥 글.php
닫는 추가</div>바닥 글에.php 파일.

색인.php
<article>태그

스타일로 포스트 출력을 래핑합니다.,Css
마지막으로,우리는 테마를 조금 더 멋지게 보이게하기 위해 몇 가지 다양한 CSS 스타일 개선을 추가합니다.

때 우리는 우리를 방문 테스트 웹사이트 이는 브라우저에서,우리가 볼 수 있는 워드프레스는 테마 우리가 개발 단계에서 이 튜토리얼은 꽤 좋은 찾고!

WordPress 테마토 단계별로 요약

의 모든 것을 검토리에서 배운 기본적인 단계별 WordPress 테마 자습서에 대한 초보자., 우리는 어떻게 배웠을 만들의 첫 번째 사용자 정의 테마 워드프레스에서 우리의 폴더에서 측면의 테마 폴더 우리의 워드 프레스 설치합니다. 이 폴더에서는 웹 사이트의 다른 섹션에 해당하는 다른 파일을 추가했습니다. 우리의 튜토리얼에서,우리는 당신이 워드 프레스 테마에 있어야 베어 최소로 시작했다. 앞으로,당신은 우리가 덮여있는 것보다이 폴더에 더 많은 파일을 추가 할 것입니다. 이 튜토리얼에서 만든 각 파일과 그들이 우리를 위해 무엇을했는지 검토해 보겠습니다.

스타일.,css 이 파일에는 몇 가지를 추가 css 의견서는 워드 프레스 알에 대한 몇 가지 정보를 사용자 지정 테마입니다. 그것은 또한 당신이 당신의 테마에 적용 할 사용자 정의 css 스타일을 보유하고 있습니다.
• 색인.php 이 파일은 테마의 html 및 일반 출력을 제어합니다. 홈 페이지의 데이터를 출력하는 데 사용되는 기본 파일입니다.
• 헤더.,php 를 지정할 수 있는 지역을 잡고 중요한 정보를 귀하의 웹사이트에 대한<머리>지역뿐만 아니라 포함한 열기<html>,<몸>, 고,<div class=”컨테이너”>태그가 있습니다.리>바닥 글.php 바닥이 가까이 어떤 열 태그에서 지정한 헤더 영역에서,또는 당신을 제공하는 당신을 호출 할 수있는 장소의 wp_footer()함수입니다.
• 기능.,php 할 수 있습하는 함수를 호출,두 PHP 및 내장 WordPress 하고,자신의 함수를 정의하기 위해 변경의 기본 동작 WordPress

그래서 당신이 있습니다! 우리는 5 개의 파일만으로 완벽하게 작동하는 사용자 정의 WordPress 테마를 만들 수있었습니다. 이것은 우리에게 더 진보 된 워드 프레스 테마와 기능을 구축 할 수있는 기초 수준의 지식을 제공합니다. 훌륭한 직업!