Contenu connexe Similaire à 워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015 (20) 워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015 4. _오늘 말씀드릴 내용은…
- 테마를 만들기 위해 알아야 할 것들
- 테마의 구조와 구성 요소
- index.php 만들어 보기 (실습)
- 템플릿 계층구조
7. - 웹 페이지의 피부
- 사용자가 보는 웹사이트의 겉 모습을 담당
_CSS (Cascading Style Sheet)
8. !
- CSS 기반의 디자인
- 하나의 얼굴에 다양한 화장법 적용
_CSS Zen Garden
10. - 웹 페이지의 뼈대
- 마크업(Mark-Up)
- 콘텐츠의 구조와 중요도에 따라 적절한 태그를 적용
_HTML(Hyper Text Markup Language)
11. - 문서의 구조를 만든다. (제목, 텍스트, 리스트..)
- 문서의 영역을 나눈다.
- 문서를 연결한다.
<h1>,
<h2>,
<h3>,
<h4>,
<h5>,
<h6>,
<ol>,
<ul>,
<p>....
<div>,
<header>,
<nav>,
<section>,
<article>....
<a>,
<link>
_HTML(Hyper Text Markup Language)
13. < HTML>
< DIV >
< HEAD>
< BODY >
< TITLE >
< header >
< P >< P >< div >
< footer >
_HTML문서의 기본 구조
14. < HTML>
< HEAD>
< TITLE >
< P >
< P >< P >< P >
< P >
< DIV >
< BODY >
< header >
< div >
< footer >
_HTML문서의 기본 구조
17. navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
navigation area
모든 페이지를 열어 직접 수정!
_공통 영역 작업 -‐HTML
18. 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
19. 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
공통되는 영역을 하나의 파일로 만들어
페이지에 삽입
24. -‐ index.php
-‐ style.css
-‐ screenshot.png
-‐ function.php
-‐ header.php
-‐ footer.php
-‐ sidebar.php
_테마의 구조 _기본 구성 파일
25. -‐ get_header()
-‐ get_footer()
-‐ get_sidebar()
-‐ get_template_part()
-‐ wp_title()
-‐ wp_enqueue_style()
_테마의 구조 _템플릿 태그
27. 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
28. header
sidebar
footer
contents
_index.php
<!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>
29. <!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>
header
sidebar
footer
contents
_index.php
30. <!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>
header
sidebar
footer
contents
header.php
sidebar.php
footer.php
_index.php
34. <!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
요약
내용입니다.</p>
</article>
<article>
<header>
<h1>블로그
포스팅
제목
3</h1>
</header>
<p>블로그
포스팅
3
요약
내용입니다.</p>
</article>
<article>
<header>
<h1>블로그
포스팅
제목
4</h1>
</header>
<p>블로그
포스팅
4
요약
내용입니다.</p>
</article>
<article>
<header>
<h1>블로그
포스팅
제목
5</h1>
</header>
<p>블로그
포스팅
5
요약
내용입니다.</p>
</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
35. <!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
36. <!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
37. _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>
41. _index.php
<section
class='container'
id='main'>
<section
id='content'>
<article>
<header>
<h1>블로그
포스팅
제목
1</h1>
</header>
<p>블로그
포스팅
1
요약
내용입니다.</p>
</article>
……
</section>
header
side
bar
footer
contents
<?php
get_header();
?>
<?php
get_sidebar();
?>
<?php
get_footer();
?>
42. _index.php
<section
class='container'
id='main'>
<section
id='content'>
<article>
<header>
<h1>블로그
포스팅
제목
1</h1>
</header>
<p>블로그
포스팅
1
요약
내용입니다.</p>
</article>
……
</section>
header
side
bar
footer
contents
<?php
get_header();
?>
<?php
get_sidebar();
?>
<?php
get_footer();
?>
Loop
43. _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();
?>
52. - 템플릿의 계층 구조를 제대로 이해하는 것이 중요 !
- codex 페이지를 자주 참고하자.
- 다른 테마는 어떻게 만들었는지 분석
- 워드프레스 포럼을 활용
_테마를 좀 더 깊이..