워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
•
34 likes•5,649 views
2015년 2월 28일 워드프레스 미트업 서울 2015 행사에서 발표한 워드프레스 테마 만들기 기초 자료입니다.
워드프레스 테마 만들기 기초 - 워드프레스 미트업 서울 2015
- 1. 워드프레스 미트업 서울 2015_실습 2 워드프레스 테마 만들기 기초 워드프레스 사용자 모임_남덕현
- 2. 어떤 기대를 하고 오셨나요?
- 3. “지금 사용중인 테마를 수정하고 싶어요.” “나만의 테마를 만들어 보고 싶어요.”
- 4. _오늘 말씀드릴 내용은… - 테마를 만들기 위해 알아야 할 것들 - 테마의 구조와 구성 요소 - index.php 만들어 보기 (실습) - 템플릿 계층구조
- 5. 테마를 만들려면 뭘 알아야 하죠?
- 6. - CSS - HTML - PHP - 워드프레스 템플릿 태그 _테마를 만들려면 뭘 알아야 하죠?
- 7. - 웹 페이지의 피부 - 사용자가 보는 웹사이트의 겉 모습을 담당 _CSS (Cascading Style Sheet)
- 8. ! - CSS 기반의 디자인 - 하나의 얼굴에 다양한 화장법 적용 _CSS Zen Garden
- 9. _CSS Zen Garden ! - CSS 기반의 디자인 - 하나의 얼굴에 다양한 화장법 적용
- 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)
- 12. <!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문서의 기본 구조
- 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문서의 기본 구조
- 16. 다수의 웹 페이지에서 공통 메뉴 부분을 수정해야 한다면? _공통 영역 작업
- 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 공통되는 영역을 하나의 파일로 만들어 페이지에 삽입
- 20. 템플릿 태그 템플릿 파일 header.php <?php include('header.php'); ?> _템플릿 파일 & 태그
- 21. 테마의 구조
- 23. -‐ index.php -‐ style.css _테마의 구조 _테마 필수 파일
- 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() _테마의 구조 _템플릿 태그
- 26. index.php 파일 설명
- 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
- 33. _index.html
- 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>
- 38. _sidebar.php header side bar footer contents <aside id=‘sidebar'> <p>사이드 영역</p> </aside>
- 39. _footer.php header side bar footer contents </section> <footer class='container' id='footer'> <p>푸터 영역</p> </footer> <body> </html>
- 40. _index.php header side bar footer contents <section class='container' id='main'> <section id='content'> <article> <header> <h1>블로그 포스팅 제목 1</h1> </header> <p>블로그 포스팅 1 요약 내용입니다.</p> </article> …… </section>
- 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(); ?>
- 44. _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' ); ?>
- 45. 워드프레스 템플릿 계층구조 (WordPress Template Hierarchy)
- 46. _템플릿 계층구조
- 51. 테마에 대해 좀 더 깊이 알고 싶다면…?
- 52. - 템플릿의 계층 구조를 제대로 이해하는 것이 중요 ! - codex 페이지를 자주 참고하자. - 다른 테마는 어떻게 만들었는지 분석 - 워드프레스 포럼을 활용 _테마를 좀 더 깊이..