Se ha denunciado esta presentación.
Utilizamos tu perfil de LinkedIn y tus datos de actividad para personalizar los anuncios y mostrarte publicidad más relevante. Puedes cambiar tus preferencias de publicidad en cualquier momento.

Introduction to WordPress Theme Development

10.020 visualizaciones

Publicado el

Introduction for WordPress theme development. let's you know how to prepare resource for theme development.

Publicado en: Tecnología, Empresariales
  • Sé el primero en comentar

Introduction to WordPress Theme Development

  1. 1. WordPressIntroduction to create your own theme CC:BY-NC
  2. 2. Info.Name: Sitdhibong LaokokContact: sitdhibong@gmail.comClass Name: WordPress Theme Dev.Office Hours: 24/7 (for e-mail)
  3. 3. Checklist✓ Download WordPress 3.x+ http:/ /www.wordpress.org/ http://www.wordpress.org/download✓ Web server (Public or localhost)✓ PHP 5.2+✓ Database (MySQL might be good)✓ Make it works http://codex.wordpress.org/Installing_WordPress
  4. 4. Serf the Web http://we.in.th
  5. 5. Web Site WordPress Plugin W http://we.in.th WordPress Theme
  6. 6. Example for page structures header There isloop insidethis block content sidebarfor displayblog entry ? Lo o p footer Note: I can rearrange page structure whatever I want.
  7. 7. WordPress theme in the real world erhead si d eb t ar en ntco
  8. 8. Example for Template *A lot more at http://wordpress.org/extend/themes
  9. 9. ThemeHierarchy:Thetemplatefiles arecalled togenerate aWordPresspage
  10. 10. Minimum file for theme • style.css: required for inform theme information • header.php: theme header • index.php: main template • single.php: single post display • page.php: template for static home page • footer.php: theme footer • functions.php: functions file
  11. 11. style.css /* Theme Name: Abracadabra Theme URI: http://we.in.th/theme/abracadabra Theme Description: Just kidding the theme does not exists Author: Apps Tree Info Author URI: http://we.in.th/ Version: 0.1.0 Tags: black, white, two-columns License: GPL 2.0 License URI: license.txt */ body { http://codex.wordpress.org/File_Header padding: 0; margin: 0; } . . .
  12. 12. Twenty Eleven theme screenshot.png WordPressuse for theme thumbnail Version Author Theme Name Description Tags
  13. 13. What is the Loop ? The Loop is used by WordPress to display each of your posts. Enter the Loop Yep Query for blog Have Display posts posts ? post No more post Exit
  14. 14. Here’s the Loop01: <?php02: / index.php /03: get_header(); / get content from ‘header.php’ ?> /04: Loop start here (07-15)05: <div id=”sl-content-wrap”>06: <?php if ( have_posts() ) : ?>07: <?php while( have_posts() ) : the_post(); ?>08: <div id=”post-<?php the_ID(); ?>” <?php post_class(); ?>09: <a href=”<?php the_permalink(); ?>” title=”<?php the_title(); ?>”>10: <h1><?php the_title(); ?></h1>11: </a>12: <p><?php the_content(); ?></p>13: <p><?php the_tags(‘Tag: ‘, ‘,’, ‘.’); ?></p> have_posts, the_post,14: </div> the_ID, post_class,15: <?php endwhile; ?> the_permalink, the_title,16: <?php endif; ?> the_content, the_tags are17: </div> not PHP’s func.18:19: <?php get_sidebar(); / display content from ‘sidebar.php’ ?> /20:21: <?php get_footer(); / display content from ‘footer.php’ ?> /
  15. 15. the things we’ve get from loop Loop result (04-10) 01: <!-- Header HTML - above --> 02: <!-- In this case: there is only one blog entry --> 03: <div id=”sl-content-wrap”> 04: <div id=”post-1” class=”blog-post text ...”> 05: <a href=”http://www.we.in.th/lorem-ipsum” title=”Lorem Ipsum”> 06: <h1>Lorem Ipsum</h1> 07: </a> 08: <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet magna aliquam eret volutpat.</p> 09: <p>Tag: dummy, WP, Template.</p> 10: </div> 11: </div> 12: 13: <!-- Sidebar HTML --> 14: 15: <!-- Footer HTML - below -->
  16. 16. What are tags from previous code ?- It’s called ‘template tags’, here the often use template tags • the_content() • the_meta() • the_title() • the_ID() • the_permalik() • the_post_thumbnail() • the_category() • the_author() • the_tags() • the_shortlink() • the_date() • edit_post_link() • the_time() http://codex.wordpress.org/Template_Tags • the_excerpt()
  17. 17. More Info.• WordPress Codex• WordPress Theme and Design Presentation - Menn Chris

×