Thiết kế giao diện wordpress bằng tiếng Anh. Giáo trình toàn diện và đầy đủ
WordPress Theme Design A complete guide to creating professional WordPress themes Tessa Blakeley Silver BIRMINGHAM - MUMBAI WordPress Theme Design Copyright © 2008 Packt Publishing All rights reserved No part of this book may be reproduced, stored in a retrieval system, or transmitted in any form or by any means, without the prior written permission of the publisher, except in the case of brief quotations embedded in critical articles or reviews Every effort has been made in the preparation of this book to ensure the accuracy of the information presented However, the information contained in this book is sold without warranty, either express or implied Neither the author, Packt Publishing, nor its dealers or distributors will be held liable for any damages caused or alleged to be caused directly or indirectly by this book Packt Publishing has endeavored to provide trademark information about all the companies and products mentioned in this book by the appropriate use of capitals However, Packt Publishing cannot guarantee the accuracy of this information First published: May 2008 Production Reference: 1230508 Published by Packt Publishing Ltd 32 Lincoln Road Olton Birmingham, B27 6PA, UK ISBN 978-1-847193-09-4 www.packtpub.com Cover Image by Vinayak Chittar (vinayak.chittar@gmail.com) Credits Author Tessa Blakeley Silver Reviewer Laurens Leurs Senior Acquisition Editor David Barnes Development Editor Nikhil Bangera Project Coordinator Patricia Weir Indexer Hemangini Bari Proofreader Cathy Cumberlidge Production Coordinator Shantanu Zagade Aparna Bhagat Technical Editor Mithun Sehgal Cover Work Aparna Bhagat Editorial Team Leader Mithil Kulkarni Project Manager Abhijeet Deobhakta About the Author Tessa Blakeley Silver's background is in print design and traditional illustration She evolved over the years into web and multi-media development, where she focuses on usability and interface design Prior to starting her consulting and development company, hyper3media (pronounced hyper-cube media) (http://hyper3media.com), Tessa was the VP of Interactive Technologies at eHigherEducation, an online learning and technology company developing compelling multimedia simulations, interactions, and games that met online educational requirements like 508, AICC, and SCORM She has also worked as a consultant and freelancer for J Walter Thompson and The Diamond Trading Company (formerly known as DeBeers), and was a Design Specialist and Senior Associate for PricewaterhouseCoopers' East Region Marketing department Tessa authors several design and web technology blogs WordPress Theme Design is her second book for Packt Publishing Table of Contents Preface Chapter 1: Getting Started as a WordPress Theme Designer WordPress Perks Does a WordPress Site Have to Be a Blog? Pick a Theme or Design Your Own? Drawbacks to Using a Pre-Made Theme This Book's Approach Things You'll Need to Know WordPress CSS XHTML PHP Not Necessary, but Helpful Tools of the Trade HTML Editor Graphic Editor Firefox We'll Be Developing for Firefox First, then IE Summary Chapter 2: Theme Design and Approach Things to Consider Types of Blogs Plug-ins and Widgets Getting Ready to Design We Have a Problem It Gets Worse The Solution–Rapid Design Comping Let's Get Started 7 9 10 10 10 11 11 11 12 13 13 13 14 14 15 17 17 17 19 20 20 21 21 23 Table of Contents Sketch It 23 Start with the Structure 26 Adding Text–Typography Start with the Text 31 32 The Layout 39 Create the Graphical Elements Relax and Have Fun Designing Slice and Export Summary 50 52 54 59 Consider Usability 25 The DOCTYPE The Main Body Attach the Basic StyleSheet Basic Semantic XHTML Structure 27 27 28 29 Font Choices Cascading Fonts Font Sizing Paragraphs Default Links 33 35 35 37 37 Navigation More Navigation–WordPress Specific Styles (OK, Style) Color Schemes Two-Minute Color Schemes Color Schemes with Photoshop Adding Color to Your CSS Chapter 3: Coding It Up Got WordPress? Understanding the WordPress Theme Your WordPress Work Flow Let's Build Our Theme Tabula Rasa Including WordPress Content The Loop The Sidebar Breaking It Up–Separating Your Theme Into Template Files The Home Page Internal Pages 42 44 46 46 47 49 61 61 62 64 65 65 69 70 74 79 80 83 Static Pages 84 Fun with Other Page Layouts Don't Forget About Your 404 Page Summary 86 88 90 Quick Recap 86 [ ii ] Table of Contents Chapter 4: Debugging and Validaton Don't Forget About Those Other Browsers and Platforms Introduction to Debugging Troubleshooting Basics Why Validate? PHP Template Tags CSS Quick Fixes Advanced Troubleshooting Fixing CSS Across Browsers Box Model Issues Everything Is Relative To Hack or Not to Hack Out-of-the-Box-Model Thinking The Road to Validation Advanced Validation Firefox's JavaScript/Error Console The Web Developer's Toolbar FireBug Extra Credit What About the New Safari Mobile Browser? Summary 91 91 92 94 95 96 97 98 98 99 99 100 101 104 107 107 108 109 110 111 112 Chapter 5: Your Theme in Action 113 Chapter 6: WordPress Reference 125 Adding Tag Display to Your Theme 131 A Picture's Worth Theme Packaging Basics Describing Your Theme Licensing? Create a ReadMe.txt File Zip It Up No Way to Zip? One Last Test Get Some FeedBack and Track It Summary Class Styles Generated by WordPress Using the Template Selector Feature Template Hierarchy New Template Tag in 2.5 Great Template Tags for Tags from 2.3 [ iii ] 113 115 115 116 118 119 120 121 122 123 125 126 127 129 130 Table of Contents General Template Tags—the Least You Need to Know Include Tags Custom Includes—Streamline Your Theme The Loop Functions WordPress Core Functions Summary Chapter 7: Dynamic Menus and Interactive Elements DYI or Plug-ins? Dynamic Menus? Drop-Down Menus DIY SuckerFish Menus in WordPress Applying CSS to WordPress Applying the DOM Script to WordPress 134 140 141 142 142 143 145 146 146 147 148 151 154 Flash-ize It Flash in Your Theme 157 157 Flash in a WordPress Post or Page Summary 163 165 Pass Flash a WordPress Variable Users Without Flash, Older Versions of Flash, and IE6 Users 159 161 Chapter 8: AJAX / Dynamic Content and Interactive Forms 167 Chapter 9: Design Tips for Working with WordPress 185 Preparing for Dynamic Content and Interactive Forms You Still Want AJAX on Your Site? Plug-ins and Widgets Plug-ins Widgets Getting Your Theme Ready for Plug-ins and Widgets Plug-in Preparations Installing the AJAX Comments Plug-ins Widget Preparations Installing the Google Reader Widget AJAX–It's Not Just for Your Site Users pageMash The AJAX Factor JavaScript Component Scripts Summary The Cool Factor Rounded Corners The Classic – All Four Corners The Two Image Cheat 168 169 170 170 170 171 171 172 173 175 178 179 180 181 183 185 186 186 188 Creative Posting 191 [ iv ] Table of Contents Breaking Boundaries Keep Tabs on Current Design Trends Graphic Text Extra Credit – Use PHP to make Graphic Headers Easy 192 196 197 200 Good Design isn't Always Visual – Looking at SEO Search Engine Friendly URLs Keywords and Descriptions 202 202 204 Summary 206 DYI Metatags Metatag Plug-ins Index 205 206 207 [] ... technology blogs WordPress Theme Design is her second book for Packt Publishing Table of Contents Preface Chapter 1: Getting Started as a WordPress Theme Designer WordPress Perks Does a WordPress Site... you with your WordPress theme development, from the two CSS class styles that WordPress itself outputs, to WordPress'' s PHP template tag code, to a breakdown of "The Loop" along with WordPress functions... content into design, are what your WordPress theme consists of Does a WordPress Site Have to Be a Blog? In a nutshell, even before the release of themes in WordPress 2, WordPress has been capable of