Tài liệu về học lập trình web ,JavaScript,wordpress cho tất cả mọi người.
Trang 2WordPress Theme DevelopmentBeginner's Guide Third Edition
Table of Contents
WordPress Theme DevelopmentBeginner's GuideThird Edition
Credits
About the AuthorsAbout the Reviewerswww.PacktPub.com
Support files, eBooks, discountoffers and more
Why Subscribe?
Trang 3holdersPreface
What this book coversWho this book is forConventions
Time for action – headingWhat just happened?Pop quiz – heading
Trang 4Does a WordPress site have to be ablog ?
Pick a theme or design of your ownDrawbacks of using an off-the-shelftheme
What about premium themes andframeworks?
What exactly is a premium themeWhat is a framework theme
Core technology you shouldunderstandWordPressCSSHTMLPHP
Other helpful technologiesTools of the trade
Trang 5Graphics editorWeb browser
Basics of a WordPress themeThe template hierarchy
The Loop
Template tags and API hooksOur development strategiesFonts and typefaces
Trang 6Choosing a hosting providerRolling out WordPressSummary
2 Preparing a Design for OurWordPress Theme
Getting ready to designDesigning in the browserStarting our design
Planning and sketching our designTime for action – planning ourdesign
What just happened?
Creating your design – from thesketch to the screen
Time for action – creating our staticHTML file
Trang 7Time for action – adding in basicHTML structure
What just happened?
Time for action – adding in thesemantic structure
What just happened?
Attaching our CSS stylesheet
Time for action – creating andincluding a style.css shell into yourindex.php page
What just happened?
Prepping for responsiveness –viewport and apple-mobile meta tags
Time for action – adding in theviewport and apple-mobile meta tags
Trang 8Time for action – adding sampletext to our semantic sections
What just happened?Styling our fontsStyling font families
Time for Action – assigning yourfont families
What just happened?@font-face techniquesStyling font sizes
Time for action – sizing your fontsWhat just happened?
Time for action – handling searchengine bots/screen reader text
What just happened?
Trang 9What just happened?
Time for Action – Adding ourmedia queries
What just happened?
Setting up the desktop view
Time for action – standard settingsWhat just happened?
Time for action – checking in onlarger desktops
What just happened?
Time for action – making suresmaller screens are handled
What just happened?Setting up the tablet view
Time for action – adjusting thestandard layout for tablets
What just happened?
Trang 10Time for action – setting up oursmall screen layout
What just happened?Adding design treatments
Time for action – setting up ourgraphic treatments in the stylesheet
What just happened?
Adding graphics and backgroundimages
Setting up our background imagesin our stylesheet
Time for action – addingbackground images to our design
What just happened?
Time for action – addingbackground image styling to the mediaqueries
Trang 11Don't forget the favicon and touchicon
Adding a favicon
Time for action – adding thefavicon you just created
What just happened?
Have a go hero – making yourfavicon high-resolution
Touch icons
Time for action – adding a touchicon
What just happened?
Pop quiz – questions about themedesign
Summary
3 Coding it Up
Trang 12Why the Template hierarchy worksthe way it does
The WordPress theme API
Setting up your WordPressworkflow
Building your WordPress themetemplate files
Starting with a blank slateCreating a new theme directoryTime for action – setting up ourtheme directory
What just happened?
Including WordPress content
Time for action – getting your CSSstyles to show up
What just happened?
Trang 13Template tagsHooks
Looping it! – The WordPress LoopThe Loop in a nutshell – how itworks
Time for action – creating a basicLoop
What just happened?
Time for action – adding contentWhat just happened?
Time for action – adding metadata,the timestamp, and author template tags
What just happened?
Keeping up-to-date withWordPress
Adding to the Loop
Trang 14What just happened?
Time for action – adding inautogenerated classes
What just happened?
One last look – our full loop
Breaking the code up into templatefiles
Including everyoneCreating a header file
Time for action – creating theheader.php file
What just happened?
Separating out our sidebar
Time for action – creating thesidebar.php file
What just happened?
Finishing off with the footer
Trang 15footer.php template fileWhat just happened
Time for action – don't forget theplugin hooks
What just happened
Creating a template file for staticpages
Time for action – creating a custompage.php template file
What just happened?
Trang 16Time for action – adding the sitetitle and description to your theme
What just happened?Pretty permalinks
Time for action – setting up prettypermalinks
What just happened?
Permalinks – a quick guideMenus
Registering navigation menus
Time for action – registering anavigation menu
What just happened?
Time for action – adding menus toour theme's header.php file
What just happened?Setting up our menu
Trang 17Time for action – defining ReadingsettingsWhat just happened?Creating a menuTime for action – creating a newWordPress menu
What just happened?
Adding pages and other content toour menu
Time for action – adding pages to amenu
What just happened?
Time for action – adding a customlink to the menu
What just happened?
Time for action – adding a categorylink to the menu
Trang 18The WordPress Menus admin – thepossibilitiesWidgetsRegistering sidebars or widgetareasTime for action – registeringsidebars in functions.php
What just happened?
Time for action – adding widgetareas to sidebar.php
What just happened?
Time for action –adding widgetareas to footer.php
What just happened?
Widget areas – not just for thesidebar and footer
Trang 19What widgets will we need
Time for action – adding sidebarwidgets
What just happened?
Time for action – adding footerwidgets
What just happened?Featured images
Time for action – adding featuredimages to our theme
What just happened?
Time for action – adding featuredimages to the site
What just happened?
Time for action – displayingfeatured images differently in differenttemplate files
Trang 20Parent and child themes
Pop Quiz – understanding advancedtheme features
Summary
5 Debugging and Validation
Trang 21Time for action – finding and fixingerrors
What just happened?
Time for action – fixing our codeWhat just happened?
Validating CSS
Time for action – using the W3C'sCSS validator
What just happened?
Testing on multiple browsers andplatforms
Trang 22Fixing CSS across browsersCommon browser problemsAdding an IE-specific stylesheetTime for action – setting up analternative IE stylesheet
What just happened?
Checking your work in InternetExplorer
Time for action – testing our themewith BrowserLab
What just happened?
Testing on mobile devicesSummary
6 Your Theme in Action
The WordPress Theme Reviewguidelines
Trang 23thumbnail of your themeWhat just happened?Packaging your theme upTidying up your theme
Time for action – tidying up yourtheme
What just happened?
Describing your theme in thestylesheet
Time for action – describing yourtheme
What just happened?Your theme's license
Time for action – adding licenseinformation to our theme
What just happened?Zipping up your theme
Trang 24theme
What just happened?One last test
Time for action – testing the themeWhat just happened?
Have a go hero – using theWordPress Theme Unit Test
Pop Quiz - questions on packagingup your theme
Summary
7 Tips and tricks
Adding more template files to yourtheme
A search.php file for search resultsTime for action – creating asearch.php template file
What just happened?
Trang 25Time for action – creating a custompage template
What just happened?
Time for action – assigning acustom page template to a page in oursite
What just happened?
Have a go hero – styling the custompage template
Working with conditional tagsConditional tags' syntax
Incorporating conditional tags inour theme
Using conditional tags to hide thehome page's title
Time for action – using CSS to hideour home page's title
Trang 26Time for action – using aconditional tag to hide our home page'stitle
What just happened?
Have a go hero – other ways ofshowing conditional content
The Theme Customizer
Time for action - adding the ThemeCustomizer to our theme
What just happened?
Time for action – adding somemore options to the Theme Customizer
What just happened?
Time for action – ensuring ThemeCustomizer changes are carried throughto the CSS
What just happened?
Trang 27possibilitiesHave a go hero – adding a themeoptions screenSearch engine optimizationSEO checklistClean, valid, standards-compliantcodeSemantic HTML5Making your theme run fasterSearch-engine optimizedpermalinks
Optimizing images and links withalt and title attributes
Time for action – optimizing a logofor SEO
What just happened?
Trang 28Time for action – optimizing ourtheme's page meta tags
What just happened?Summary
Pop Quiz Answers
Chapter 2, Preparing a Design forOur WordPress Theme
Pop quiz – questions about themedesign
Chapter 3, Coding it Up
Pop quiz – questions aboutWordPress theme structure
Chapter 4, Advanced ThemeFeatures
Pop quiz – understanding advancedtheme features
Trang 29up your themeIndex
WordPress Theme DevelopmentBeginner's Guide Third Edition
WordPress Theme DevelopmentBeginner's GuideThird Edition
Trang 30preparation of this book to ensure theaccuracy of the information presented.However, the information contained inthis book is sold without warranty,either express or implied Neither theauthors, nor Packt Publishing, and itsdealers and distributors will be heldliable for any damages caused or allegedto be caused directly or indirectly bythis book.
Packt Publishing has endeavored toprovide trademark information about allof the companies and productsmentioned in this book by theappropriate use of capitals However,Packt Publishing cannot guarantee theaccuracy of this information.
Trang 33Conidon Miranda
Cover Work
Conidon Miranda
About the Authors
Rachel McCollin is a web designer
and developer specializing inWordPress development Shediscovered WordPress when looking fora CMS that made the transition fromstatic HTML relatively straightforward,and hasn't looked back since.
Trang 34WordPress themes and sites, with a slanttowards responsive themes The agencynow has a great team of designers anddevelopers, including some WordPressspecialists.
I've learned most of what I knowabout WordPress from the web designcommunity I'd like to thank all of theWordPress developers and designerswho have inspired and taught me, inparticular the organizing team forWordCampUK, without whom I neverwould have even thought of writingabout WordPress.
Trang 36Tessa Blakeley Silver's
background is in print design andtraditional illustration She evolved overthe years into web and multi-mediadevelopment, where she focuses onusability and interface design Prior tostarting her consulting and developmentcompany, hyper3media (pronounced
hyper-cube media)
Trang 37worked as a consultant and freelancerfor J Walter Thompson and TheDiamond Trading Company (formerlyknown as DeBeers) and was a DesignSpecialist and Senior Associate forPricewaterhouseCoopers' East RegionMarketing department Tessa authorsseveral design and web technology
blogs Joomla! Template Design is her
first book.
About the Reviewers
Srikanth is a web developer,
Trang 38management systems for developingstructured and scalable websites.
Check out his portfolio athttp://srikanth.me.
Steve Graham is a programmer
Trang 39most frustrating aspects of marketingonline Focusing on the key businessobjectives, his aim for all clients is toensure that they derive measurable andsustainable direct results that drivebusiness growth.
He spends much of his timeworking on theme development for nicheareas Rather than producing themes thatare so generic that the only real reasonthey appeal to a market is the name ofthe theme or the type of backgroundimage, these themes are designed toprovide real solutions and are createdwith a a knowledge and thoroughunderstanding of the challenges their endusers have to overcome.
Trang 40and networking skills coach, who is ableto bring a different perspective to themessages his clients are delivering in theonline world Relationship marketing iskey to success in the 21st century andhaving an understanding of how effectiveboth the on and off-line networks can be,is essential to the success of almost allbusinesses.
www.PacktPub.com
Support files, eBooks, discountoffers and more
You might want to visitwww.PacktPub.com for support filesand downloads related to your book.
Trang 41eBook versions of every bookpublished, with PDF and ePub filesavailable? You can upgrade to theeBook version at www.PacktPub.comand as a print book customer, you areentitled to a discount on the eBook copy.Get in touch with us at<service@packtpub.com> for moredetails.
Trang 42http://PacktLib.PacktPub.com
Trang 43www.PacktPub.com, you can use this toaccess PacktLib today and view nineentirely free books Simply use yourlogin credentials for immediate access.
Preface
WordPress has evolvedsignificantly since the last edition of thisbook It's now recognized as much morethan a blogging platform, and is theContent Management System (CMS)powering 22 percent of the world'swebsites.
Trang 44framework But if you want more controlover your themes, you're going to have tobuild you own.
These are the cornerstones ofWordPress Without them, WordPresssites just wouldn't work In this book,you'll learn how to take a design youcreate using static HTML and CSS andturn that into a great WordPress theme.You'll create the template files yourtheme needs and add extra functionalitysuch as widgets and featured imagesupport We'll also cover how tovalidate and debug your theme and howto release it to other developers.
Trang 45build more, either for yourself or yourclients.
What this book covers
Chapter 1, Getting Started as aWordPress Theme Designer , gives an
introduction to the world of WordPresstheme building It covers the basics ofhow themes work, theme codingstrategies using HTML and CSS, andsetting up your theme design process.
Chapter 2, Preparing a Design forour WordPress Theme , takes you
through the process of creating a designfor your theme, including wireframing,creating your design concepts, anddesigning responsively in the browser.