워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015

워드프레스 미트업 서울 2015_실습 2
워드프레스
테마 만들기 기초
워드프레스 사용자 모임_남덕현

어떤 기대를 하고 오셨나요?

“지금 사용중인 테마를 수정하고 싶어요.”
“나만의 테마를 만들어 보고 싶어요.”

_오늘 말씀드릴 내용은…
- 테마를 만들기 위해 알아야 할 것들
- 테마의 구조와 구성 요소
- index.php 만들어 보기 (실습)
- 템플릿 계층구조

테마를 만들려면 뭘 알아야 하죠?

- CSS
- HTML
- PHP
- 워드프레스 템플릿 태그
_테마를 만들려면 뭘 알아야 하죠?

- 웹 페이지의 피부
- 사용자가 보는 웹사이트의 겉 모습을 담당
_CSS (Cascading Style Sheet)

!
- CSS 기반의 디자인
- 하나의 얼굴에 다양한 화장법 적용
_CSS Zen Garden

_CSS Zen Garden
!
- CSS 기반의 디자인
- 하나의 얼굴에 다양한 화장법 적용

- 웹 페이지의 뼈대
- 마크업(Mark-Up)
- 콘텐츠의 구조와 중요도에 따라 적절한 태그를 적용
_HTML(Hyper Text Markup Language)

- 문서의 구조를 만든다. (제목, 텍스트, 리스트..) 
 
 
- 문서의 영역을 나눈다. 

 
- 문서를 연결한다. 

<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>,
 
<ol>,
<ul>,
<p>....

<div>,
<header>,
<nav>,
<section>,
<article>....
<a>,
<link>
_HTML(Hyper Text Markup Language)

<!DOCTYPE html>
<html>
<head>
<title>…</title>
</head>
<body>
…
</body>
</html>
헤더 영역!
(Header Section)
본문 영역!
(Body Section)
HTML 요소
HEAD 요소
TITLE 요소
BODY 요소
HTML 3대 영역 HTML 4대 필수 요소
HTML 버전 정보!
(DTD)
_HTML문서의 기본 구조

< HTML>
< DIV >
< HEAD>
< BODY >
< TITLE >
< header >
< P >< P >< div >
< footer >

< HTML>
< HEAD>
< TITLE >
< P >
< P >< P >< P >
< P >
< DIV >
< BODY >
< header >
< div >
< footer >

header
sidebar
footer
contents
header
sidebar
footer
contents
header
sidebar
footer
contents
CSS
_HTML & CSS 작성

다수의 웹 페이지에서 공통 메뉴 부분을 수정해야 한다면?
_공통 영역 작업

navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
모든 페이지를 열어 직접 수정!
_공통 영역 작업 -‐HTML

navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
공통되는 영역을 하나의 파일로 만들어
페이지에 삽입
_공통 영역 작업 -‐PHP
header.php

navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
_공통 영역 작업
<?php
include('header.php');
?>
-‐PHP
header.php
공통되는 영역을 하나의 파일로 만들어
페이지에 삽입

템플릿 태그
템플릿 파일
header.php
<?php
include('header.php');
?>
_템플릿 파일 & 태그

/wp-‐content/themes/theme_name
_테마의 구조 _테마 폴더 위치

-‐
index.php

-‐
style.css
_테마의 구조 _테마 필수 파일

-‐ index.php

-‐ style.css

-‐ screenshot.png

-‐ function.php

-‐ header.php

-‐ footer.php

-‐ sidebar.php
_테마의 구조 _기본 구성 파일

-‐ get_header()

-‐ get_footer()

-‐ get_sidebar()

-‐ get_template_part()

-‐ wp_title()

-‐ wp_enqueue_style()
_테마의 구조 _템플릿 태그

header
sidebar
footer
contents
<!DOCTYPE
html>

<html
lang=“en”>

<head>

<meta
charset=“UTF-‐8”>

<title>HTML
구조</title>

<link
rel=“stylesheet”
href=“style.css”>

</head>

<body>

<div
id=“page”
class=“hfeed
site”>

!

<header
id=“masthead”
class=“site-‐header”
role=“banner”>

header
내용

<header>

!

<div
id=“main”
class=“wrapper”>

loop

!

<div
id=“secondary”
class=“widget-‐area”
role=“complementary”>

sidebar
내용

</div>

</div>

!

<footer
id=“colophon”
role=“contentinfo”>

<div
class=“site-‐info”>

footer
내용

</div>

</footer>

</div>

!
</body>

</html>
_index.php

header
sidebar
footer
contents
_index.php
<!DOCTYPE
html>

<html
lang=“en”>

<head>

<meta

<title>HTML
구조</title>

<link

</head>

<body>

<div
id=“page”
class=“hfeed
site”>

!

<header
id=“masthead”
role=“banner”>

header
내용

<header>

!

<div
id=“main”

loop

!

<div
id=“secondary”

sidebar
내용

</div>

</div>

!

<footer
id=“colophon”

<div

footer
내용

</div>

</footer>

</div>

!
</body>

</html>

<!DOCTYPE
html>

<html
lang=“en”>

<head>

<meta

<title>HTML
구조</title>

<link

</head>

<body>

<div
id=“page”
class=“hfeed
site”>

!

<header
id=“masthead”
role=“banner”>

header
내용

<header>

!

<div
id=“main”

loop

!

<div
id=“secondary”

sidebar
내용

</div>

</div>

!

<footer
id=“colophon”

<div

footer
내용

</div>

</footer>

</div>

!
</body>

</html>
header
sidebar
footer
contents
_index.php

<!DOCTYPE
html>

<html
lang=“en”>

<head>

<meta

<title>HTML
구조</title>

<link

</head>

<body>

<div
id=“page”
class=“hfeed
site”>

!

<header
id=“masthead”
role=“banner”>

header
내용

<header>

!

<div
id=“main”

loop

!

<div
id=“secondary”

sidebar
내용

</div>

</div>

!

<footer
id=“colophon”

<div

footer
내용

</div>

</footer>

</div>

!
</body>

</html>
header
sidebar
footer
contents
header.php
sidebar.php
footer.php
_index.php

header.php
sidebar.php
footer.php
loop
_index.php

get_header()
get_sidebar()
get_footer()
loop
_index.php
header.php
sidebar.php
footer.php

<!DOCTYPE
html>

<html>

<head>

<title>블로그
기본
템플릿</title>

<link
rel="stylesheet"
href=“style.css">

</head>

<body>

<header
class='container'
id='header'>

<a
href="#">사이트
제목</a>

<nav
class='container'
id='nav'>

<ul>

<li><a
href='#'>MENU
1</a></li>

<li><a
href='#'>MENU
2</a></li>

<li><a
href='#'>MENU
3</a></li>

</ul>

</nav>

</header>

<section
class='container'
id='main'>

<section
id='content'>

<article>

<header>

<h1>블로그
포스팅
제목
1</h1>

</header>

<p>블로그
포스팅
1
요약
내용입니다.</p>

</article>

<article>

<header>

<h1>블로그
포스팅
제목
2</h1>

</header>

<p>블로그
포스팅
2
요약

</article>

<article>

<header>

<h1>블로그
포스팅
제목
3</h1>

</header>

<p>블로그
포스팅
3
요약

</article>

<article>

<header>

<h1>블로그
포스팅
제목
4</h1>

</header>

<p>블로그
포스팅
4
요약

</article>

<article>

<header>

<h1>블로그
포스팅
제목
5</h1>

</header>

<p>블로그
포스팅
5
요약

</article>

</section>

<aside
id='sidebar'>

<p>사이드
영역</p>

</aside>

</section>

<footer
class='container'
id='footer'>

<p>푸터
영역</p>

</footer>

<body>

</html>
header
side
bar
footer
contents
_index.php

<!DOCTYPE
html>

<html>

<head>

<title>블로그
기본
템플릿</title>

<link
rel="stylesheet"
href=“style.css">

</head>

<body>

<header
class='container'
id='header'>

<a
href="#">사이트
제목</a>

<nav
class='container'
id='nav'>

<ul>

<li><a
href='#'>MENU
1</a></li>

<li><a
href='#'>MENU
2</a></li>

<li><a
href='#'>MENU
3</a></li>

</ul>

</nav>

</header>
_header.php
header
side
bar
footer
contents

_header.php
header
side
bar
footer
contents
<!DOCTYPE
html>

<html>

<head>

<title><?php
wp_title();
?></title>

<?php
wp_head();
?>

</head>

<body>

<header
class='container'
id='header'>

<a
href="<?php
echo
esc_url(
home_url(
'/'
)
);
?>"
rel=“home">

<?php
bloginfo(
'name'
);
?>

</a>

<nav
class='container'
id='nav'>

<?php
wp_nav_menu();
?>

</nav>

</header>

_sidebar.php
header
side
bar
footer
contents
<aside
id=‘sidebar'>

<p>사이드
영역</p>

</aside>

_footer.php
header
side
bar
footer
contents

</section>

<footer
class='container'
id='footer'>

<p>푸터
영역</p>

</footer>

<body>

</html>

_index.php
header
side
bar
footer
contents
<section
class='container'
id='main'>

<section
id='content'>

<article>

<header>

<h1>블로그
포스팅
제목
1</h1>

</header>

<p>블로그
포스팅
1
요약

</article>

……

</section>

_index.php
<section
class='container'
id='main'>

<section
id='content'>

<article>

<header>

<h1>블로그
포스팅
제목
1</h1>

</header>

<p>블로그
포스팅
1
요약

</article>

……

</section>

header
side
bar
footer
contents
<?php
get_header();
?>
<?php
get_sidebar();
?>
<?php
get_footer();
?>

_index.php
<section
class='container'
id='main'>

<section
id='content'>

<article>

<header>

<h1>블로그
포스팅
제목
1</h1>

</header>

<p>블로그
포스팅
1
요약

</article>

……

</section>

header
side
bar
footer
contents
<?php
get_header();
?>
<?php
get_sidebar();
?>
<?php
get_footer();
?>
Loop

_index.php
<section
class='container'
id='main'>

<section
id='content'>

<?php
if
(
have_posts()
)
:
?>

<?php
while
(
have_posts()
)
:
the_post();
?>

<article>

<header>

<h2><a
href="<?php
the_permalink();
?>"
rel=“bookmark">

<?php
the_title();
?>

</a>

</h2>

</header>

<div
class="entry">

<?php
the_content();
?>

</div>

</article>

<?php
endwhile;
?>

<?php
endif;
?>

</section>

header
side
bar
footer
contents
<?php
get_header();
?>
<?php
get_sidebar();
?>
<?php
get_footer();
?>

_function.php
header
side
bar
footer
contents
<?php

function
wpmeetup_scripts()
{

!

//
Load
our
main
stylesheet.

wp_enqueue_style(
'wpmeetup-‐style',
get_stylesheet_uri()
);

!

}

add_action(
'wp_enqueue_scripts',
'wpmeetup_scripts'
);

?>

워드프레스 템플릿 계층구조
(WordPress Template Hierarchy)

_템플릿 계층구조
front-page.php
home.php
page.php
index.php

테마에 대해 좀 더 깊이 알고 싶다면…?

- 템플릿의 계층 구조를 제대로 이해하는 것이 중요 !
- codex 페이지를 자주 참고하자.
- 다른 테마는 어떻게 만들었는지 분석
- 워드프레스 포럼을 활용
_테마를 좀 더 깊이..

Facebook Group
https://www.facebook.com/groups/kopress/
http://kopress.kr/

워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie 워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015

Ähnlich wie 워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015 (20)

워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015