WordPress Theme Design 2011 (Thai)
53 likes18,453 views
How to create WordPress Theme (Thai Language)
WordPress Theme Design 2011 (Thai)
- 1. WordPress Theme Design ????????????????????? ??? ????????? ???????? (????) www.iMenn.com
- 2. ?????????????????????????????????? header (navigation) content sidebar footer
- 3. HTML ????? HTML ???? ??????? div ?????????????
- 4. ??????????????? ???? <div> wrapper <div id="wrapper"> header <div id="header">(?????????? ?????????)</div> (navigation) <div id="nav">(???????????)</div> <div id="main"> <div id="content">(??????????)</div> content sidebar <div id="sidebar">(????????????)</div> </div><!--main--> <div id="footer">(??????????? ???? ??????)</div> footer </div><!--wrapper-->
- 5. ???? <div> ???????? main <div id="main"> <div id="content">(??????????)</div> content sidebar <div id="sidebar">(????????????)</div> </div><!--main--> ID ???????????? Class ??????????? item <div class="item"> <div class="pic">(??????????)</div> pic info <div class="info">(?????????????)</div> </div><!--item-->
- 6. ????????? HTML ?????? #wrapper #header #logo #ad-top #nav #mainnav #searchbox #social #main #content #featured .f-items .pic h3 #items .item h3 .meta .excerpt .pic .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnav
- 7. CSS ??? CSS ??? HTML ????????????
- 8. ??????? CSS (1) Reset http://sixrevisions.com/css/css-tips/css-tip-1-resetting-your-styles-with-css-reset/ Un-reset http://noscope.com/vanilla-css Box Model http://www.css-reset.com/css-intro-part-4-the-box-model ???????: Padding, Margin, Width
- 9. ??????? CSS (2) CSS Background: ?????????????? http://www.w3schools.com/css/css_background.asp CSS Sprite: ???????????????????????? http://www.smashingmagazine.com/2009/04/27/the-mystery-of-css-sprites- techniques-tools-and-tutorials/ CSS Inheritance: ???????????????????? http://www.smashingmagazine.com/2010/04/07/css-speci?city-and-inheritance/
- 10. ?????? div 330px item HTML pic info 100px 200px 310px 1. div ??? ?????? div ???? CSS 2. ????? Padding, Margin 3. div ??????? ??????? clear?x ?? html 4. div ?????? ??? CSS ???? pic - ?oat:left, info - ?oat:right
- 11. ?????? div (??????) 330px item HTML pic info 100px 200px 310px CSS 1. div ??????? CSS ??? over?ow:hidden ??? 2. div ?????? CSS: pic - ?oat:left, info - ?oat:right
- 12. ??? css ??? html ?????? #wrapper #header #logo #ad-top #nav #mainnav #searchbox #social #main #content #featured .f-items .pic h3 #items .item h3 .meta .excerpt .pic .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnav ???????? html+css ?????????????????
- 13. ??????????????????? header.php, footer.php, sidebar.php, style.css
- 14. Header, Footer, Sidebar #wrapper #wrapper #header #header #logo #ad-top #logo #ad-top header.php #nav #nav #mainnav #mainnav #searchbox #searchbox #social #social #main #main #content #featured .f-items .pic h3 #items .item h3 #footer .meta .excerpt .pic .copyright .footnav footer.php .info (.item...) .navigation #sidebar .ad-side .widget-tabs .facebook .twitter #footer .copyright .footnav #sidebar sidebar.php
- 15. ???????????????/???? ????? HTML <link rel="stylesheet" href="style.css" type="text/css" /> header.php <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> HTML <img src=/slideshow/wordpress-theme-design-2011-thai/6835238/"images/logo.jpg" alt="Logo" /> header.php <img src="<?php bloginfo('stylesheet_directory'); ?>/images/logo.png" alt="Logo" />
- 16. ??????????? WordPress Template Tags http://codex.wordpress.org/Template_Tags ??? (Cheat Sheet) http://notaniche.com/wordpress-cheat-sheets/702/
- 17. ????????????????? ???? WordPress Template Hierarchy
- 19. ??????????????????????????? ????????????? index.php ?????????? ?????????? page.php ?????????? Page, ???? ??????? sigle.php ?????????? Post, ?????? ??????? ????????????????? header.php, footer.php, sidebar.php, comments.php
- 20. page.php ????????? comments Header ??????????? ?????????????? { Sidebar Footer ??????????????????????????? (#content) ????????????????????????? (header,footer,sidebar) ???????
- 21. single.php ?? comments ??????????? (???? page.php ????????????????????????) Header ??????????? ?????? comments ???? { Sidebar Footer ??????????????????????????? (#content) ????????????????????????? (header,footer,sidebar) ???????
- 22. index.php (??????????????) The Loop ???????????????? (??????????????????) ?????????? Settings > Reading
- 24. functions.php ???????? ???????? Sidebar register_sidebar(array( 'id' => 'sidebar-main', 'name'=> "Main Sidebar" )); ????????????????? add_theme_support( 'post-thumbnails' ); ???????? Menu register_nav_menus( array( 'abc-main' => __( '????????', 'abc' ), 'abc-foot' => __( '????????????', 'abc' ) )); ??????????? http://digwp.com/2010/03/wordpress-functions-php-template-custom-functions/
- 25. ??????????????????????? WordPress Page Template
- 26. ???? Home home.php page-home.php <html> <?php <title>??????? ????????????</title> /* <body> Template Name: Home */ (???????????????? ?????????????????????) ?> </body> <html> </html> <title>??????? ????????????</title> <body> (???????????????? ????????????????????? WordPress ??????????) </body> </html>
- 27. ????????? page-about.php <?php /* Template Name: About */ ?> <?php get_header(); ?> (???????????????????????????) <?php get_footer(); ?>