워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
Transcript of 워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 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문서의 기본 구조
< HTML>< HEAD>
< TITLE >
< P >
< P >< P >< P >
< P >
< DIV >
< BODY >
< header >
< div >
< footer >
_HTML문서의 기본 구조
header
sidebar
footer
contents
header
sidebar
footer
contents
header
sidebar
footer
contents
CSS
_HTML & CSS 작성
다수의 웹 페이지에서 공통 메뉴 부분을 수정해야 한다면?
_공통 영역 작업
navigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation area
모든 페이지를 열어 직접 수정!
_공통 영역 작업 -‐HTML
navigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation area
공통되는 영역을 하나의 파일로 만들어 페이지에 삽입
_공통 영역 작업 -‐PHP
header.php
navigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation 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()
_테마의 구조 _템플릿 태그
index.php 파일 설명
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 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>
<!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
<!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
header.php
sidebar.php
footer.php
loop
_index.php
get_header()
get_sidebar()
get_footer()
loop
_index.php
header.php
sidebar.php
footer.php
_index.html
<!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
sidebar
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.phpheader
sidebar
footer
contents
<!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.phpheader
sidebar
footer
contents
_header.phpheader
sidebar
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.phpheader
sidebar
footer
contents
<aside id=‘sidebar'> <p>사이드 영역</p> </aside>
_footer.phpheader
sidebar
footer
contents
</section> <footer class='container' id='footer'> <p>푸터 영역</p> </footer> <body> </html>
_index.phpheader
sidebar
footer
contents
<section class='container' id='main'> <section id='content'> <article> <header> <h1>블로그 포스팅 제목 1</h1> </header> <p>블로그 포스팅 1 요약 내용입니다.</p> </article> …… </section>
_index.php
<section class='container' id='main'> <section id='content'> <article> <header> <h1>블로그 포스팅 제목 1</h1> </header> <p>블로그 포스팅 1 요약 내용입니다.</p> </article> …… </section>
header
sidebar
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 요약 내용입니다.</p> </article> …… </section>
header
sidebar
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
sidebar
footer
contents
<?php get_header(); ?>
<?php get_sidebar(); ?>
<?php get_footer(); ?>
_function.phpheader
sidebar
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
_템플릿 계층구조
front-page.php
home.php
page.php
index.php
_템플릿 계층구조
front-page.php
home.php
page.php
index.php
_템플릿 계층구조
front-page.php
home.php
page.php
index.php
테마에 대해 좀 더 깊이 알고 싶다면…?
- 템플릿의 계층 구조를 제대로 이해하는 것이 중요 !
- codex 페이지를 자주 참고하자.
- 다른 테마는 어떻게 만들었는지 분석
- 워드프레스 포럼을 활용
_테마를 좀 더 깊이..
Facebook Group https://www.facebook.com/groups/kopress/
http://kopress.kr/