Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

W pthemes

1 315 vues

Publié le

An overview of the WordPress theme structure.

Publié dans : Technologie, Business
  • Identifiez-vous pour voir les commentaires

  • Soyez le premier à aimer ceci

W pthemes

  1. 1. WordPress 101 Structure, themes, functionality
  2. 2. What is WordPress? <ul><li>WordPress  is an open source blog tool and publishing platform powered by PHP and MySQL. It's often customized into a Content Management System (CMS). It has many features including a plug-in architecture and a template system. </li></ul><ul><li>From Wikipedia, the free encyclopedia </li></ul>
  3. 3. Different Flavors of WordPress <ul><li>Wordpress.com – </li></ul><ul><li>Set up a site for free and start blogging! </li></ul><ul><li>Limited template choices </li></ul><ul><li>Restricted plug-in use </li></ul><ul><li>Non-commercial only </li></ul><ul><li>Limited traffic allowed </li></ul><ul><li>Yourdomain.wordpress.com </li></ul>
  4. 4. Different Flavors of WordPress <ul><li>Wordpress.org – </li></ul><ul><li>Install the software on your hosting server – many hosts have a quick way to do this through the control panel </li></ul><ul><li>Download the software and install it to your local machine. (Will need Apache server, xampp, wamp, mamp) </li></ul><ul><li>Famous less than 5 minute install (after DB has been configured) </li></ul><ul><li>Almost unlimited design and functionality options </li></ul><ul><li>Keep it updated! </li></ul><ul><li>Recommend using a pro to get things designed and setup. Coding knowledge is necessary. </li></ul>
  5. 5. WP as a CMS <ul><li>Clients can log in and edit/create blog posts or pages for their sites easily. </li></ul>
  6. 6. Posts and Pages <ul><li>Pages - for most of the regular “static” pages of the site, i.e. Home, Contact, About </li></ul><ul><ul><li>Pages can be edited and changed at any time </li></ul></ul><ul><ul><li>They generally do not have dates attached to them </li></ul></ul><ul><li>Posts – for the “blog” </li></ul><ul><ul><li>“ Dynamic”, because of comments and </li></ul></ul><ul><ul><li>Default at Latest First </li></ul></ul><ul><ul><li>All posts show up in a list </li></ul></ul>
  7. 7. Custom Post Types <ul><li>With programming knowledge, the back-end can be customized for users and “custom post-types” can be created. </li></ul><ul><li>Custom post types can be configured to suit the need </li></ul><ul><ul><ul><li>Product pages </li></ul></ul></ul><ul><ul><ul><li>Chamber of Commerce members </li></ul></ul></ul><ul><ul><ul><li>Real-estate listings </li></ul></ul></ul><ul><ul><ul><li>Wherever you need a specific type of entry with the formatting locked down </li></ul></ul></ul><ul><ul><ul><li>Or multiple blog types are needed </li></ul></ul></ul>
  8. 8. What are Themes? <ul><li>Themes control the Look, Feel and Functionality of a WordPress site. </li></ul><ul><ul><li>Ready-made themes </li></ul></ul><ul><ul><ul><li>wordpress.org/extend/themes/ - free </li></ul></ul></ul><ul><ul><ul><li>themeforest.net/category/wordpress - $20-50 </li></ul></ul></ul><ul><ul><ul><li>woothemes.com – subscription pricing </li></ul></ul></ul><ul><ul><li>Carefully investigate the documentation and support before purchase. </li></ul></ul><ul><ul><li>Themes can be built from scratch </li></ul></ul><ul><ul><li>Child themes can be built based on a parent (Recommended!) </li></ul></ul>
  9. 9. Theme Files
  10. 10. Theme Structure All of these files connect to the mySQL database. That’s where the content lives. Widgets are containers that mostly live in the sidebar, but can be in the footer or header too! Style.css controls the look of everything. widget widget (Where the “Loop” happens)
  11. 11. Core Theme Files <ul><li>*Index.php – the Blog home page. Many posts in a list, or latest post or excerpts depending on the code. </li></ul><ul><li>*Style.css – The heart of the theme </li></ul><ul><li>Single.php – Single blog post. </li></ul><ul><li>Page.php – Static pages </li></ul><ul><ul><li>Different template page files can be made </li></ul></ul><ul><li>Sidebar , Footer & Header – just what they should be </li></ul><ul><li>Archive , Comments , Search – don’t generally need to edit </li></ul><ul><li>Functions – may need to add code for specific needs </li></ul><ul><ul><li>Put a comment at the top of each file so you can see which one you’re dealing with, very helpful! ( <!--header--> ) </li></ul></ul>
  12. 12. Style.css <ul><li>This is the code that makes your theme readable to WP. </li></ul><ul><li>/* </li></ul><ul><li>Theme Name: Sones de Mexico </li></ul><ul><li>Theme URI: http://beckydavisdesign.com </li></ul><ul><li>Description: Sones de Mexico </li></ul><ul><li>Author: Becky Davis </li></ul><ul><li>Version: 1.0 </li></ul><ul><li>*/ </li></ul>
  13. 13. CSS <ul><li>The heart of how the design works </li></ul><ul><li>Best practice CSS applies </li></ul><ul><li>If creating a child theme, remember the cascade! </li></ul><ul><ul><li>Child style.css will overwrite parent </li></ul></ul><ul><li>Use Firebug to see native WP classes that you may want to style (.entry-title etc.) </li></ul>
  14. 14. Modifying a Ready-made Theme <ul><li>Play surgeon and take it apart </li></ul><ul><ul><li>Twentyeleven Theme is very well documented and an excellent parent </li></ul></ul><ul><li>Create new art that matches the exact dimensions and name of the original </li></ul><ul><li>Add or change widgets/plug-ins for different functionality </li></ul><ul><li>Create a Child theme, based on a parent </li></ul>
  15. 15. Creating a Theme from Scratch <ul><li>It’s all about the CSS, images and plug-in functionality </li></ul><ul><li>Page.php and index.php will have the html divs you want around the “loop” </li></ul><ul><li>Create header and other images as you normally would </li></ul><ul><li>CSS decides size and placement of divs and background images as with any site </li></ul><ul><li>Plug-ins give you the flexibility/functionality you need for the site </li></ul><ul><li>Themes can be created as an “add-on” to an existing regular site </li></ul>
  16. 16. Images <ul><li>Images specific to the Theme (referenced in the stylesheet) go in the wp-content/themes/name-of-theme/images folder </li></ul><ul><li>The newest themes allow the header and background images to be changed by the user. </li></ul><ul><li>Images uploaded within WP editor for a specific page get put in the Uploads folder </li></ul><ul><li>WP will re-size, but all uploaded images should be “saved for web” and sized appropriately first! </li></ul>
  17. 17. Plug-ins & Widgets <ul><li>Widgets come from Plug-ins, not all Plug-ins create Widgets. </li></ul><ul><li>Plug-ins create functionality: </li></ul><ul><ul><li>Backup, slideshow, add videos, create forms </li></ul></ul><ul><li>Widgets are modules that can be placed in certain locations, like the sidebar. </li></ul><ul><ul><li>Forms, twitter feed, testimonials, shopping cart </li></ul></ul><ul><li>Available on wordpress.org/extend/plugins </li></ul><ul><ul><li>Look for ratings, last update, popularity </li></ul></ul><ul><ul><li>If one doesn’t work, try another! </li></ul></ul>
  18. 18. Plug-ins <ul><li>Over 6,000 to choose from, test and play! </li></ul><ul><li>WordPress SEO </li></ul><ul><li>Google Analytics for WordPress </li></ul><ul><li>Si-contact form </li></ul><ul><li>Wp-db-backup </li></ul><ul><li>Vipers video quicktags </li></ul><ul><li>Photospace </li></ul><ul><li>Dynamic Widgets </li></ul><ul><li>Custom Post Type UI </li></ul><ul><li>Cart 66 </li></ul><ul><li>Widget Context </li></ul>
  19. 19. Examples of WP sites <ul><li>Zhuliajewels.com – ecommerce, custom post type for products </li></ul><ul><li>Gailzelitzky.com - multiple footers </li></ul><ul><li>Belmontcentral.org – custom post type for members </li></ul><ul><li>Newageprep.com </li></ul><ul><li>Lionelhandbags.com - ecommerce </li></ul><ul><li>Glenellynmoving.com </li></ul><ul><li>2011.chicago.wordcamp.org </li></ul><ul><li>Clementsbenefits.com </li></ul><ul><li>Rbbrenner.com – classic blog w/ fancy sidebar </li></ul>
  20. 20. Further Resources <ul><li>http://codex.wordpress.org/Main_Page - Excellent documentation </li></ul><ul><li>http://wordpress.org/extend/ - Plugins, themes etc. </li></ul><ul><li>http://www.wpdesigner.com/2007/02/19/so-you-want-to-create-wordpress-themes-huh/ - Stupidest title, best step by step tutorial. Assumes you have little html/css/php knowledge. </li></ul><ul><li>Smashing WordPress by Hedengren </li></ul><ul><li>Digging into WordPress by Coyier and Starr </li></ul>
  21. 21. Contact <ul><li>773-809-5640 </li></ul><ul><li>[email_address] </li></ul><ul><li>beckydavisdesign.com (also a WordPress site, of course!) </li></ul>