워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 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 areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation areanavigation area

모든 페이지를 열어 직접 수정!

_공통 영역 작업 -‐HTML


공통되는 영역을 하나의 파일로 만들어 페이지에 삽입

_공통 영역 작업 -‐PHP

header.php


_공통 영역 작업

<?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>


header

sidebar

footer

contents

_index.php


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

_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


header

sidebar

footer

contents

<?php get_header(); ?>

<?php get_sidebar(); ?><?php get_footer(); ?>

_index.php


header

sidebar

footer

contents


<?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_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

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

- 템플릿의 계층 구조를 제대로 이해하는 것이 중요 !

- codex 페이지를 자주 참고하자.

- 다른 테마는 어떻게 만들었는지 분석

- 워드프레스 포럼을 활용

_테마를 좀 더 깊이..

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

http://kopress.kr/

https://www.facebook.com/groups/kopress/

http://kopress.kr/

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

Design