34,79 €
Mehr erfahren.
- Herausgeber: Packt Publishing
- Kategorie: Wissenschaft und neue Technologien
- Sprache: Englisch
Using jQuery you can create impressive animations and interactions which are simple to understand and easy to use. WordPress is the leading publishing platform that can be customized to power any type of site you like. But when you combine the power of jQuery with WordPress—the possibilities are infinite.The combination creates a powerhouse of possibilities for generating top-notch, professional websites with great usability features and eye catching visual enhancements.
This easy-to-use guide will walk you through the ins and outs of creating sophisticated, professional enhancements and features, specially tailored to take advantage of the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build several custom jQuery solutions for various types of hypothetical clients and also show you how to create a jQuery and WordPress Plugin.This book covers step-by-step instructions for creating robust and flexible jQuery solutions for today's top site enhancements: expanding/sliding content, rotating slideshows and other animation tricks, great uses of jQuery's UI plugin widgets as well as AJAX techniques. Along with these it will also show you best practices for jQuery and WordPress development. That means, you'll learn how to implement just about any jQuery enhancement you can dream of on a WordPress site and also learn how to do it with minimal edits to the site's theme and while allowing the site's content editors to continue adding content the way they've always been (usually with the WYSIWYG editor), and never having to worry that they'll forget or not know how to add a special attribute or custom HTML to a post to make the jQuery feature work.From development tools and setting up your WordPress sandbox, through enhancement tips and suggestions, to coding, testing and debugging, and ensuring that the WordPress content editor's workflow isn't interrupted by having to accommodate an enhancement with special HTML, this book covers the best practices for not only jQuery development but specifically jQuery within WordPress development.
Das E-Book können Sie in Legimi-Apps oder einer beliebigen App lesen, die das folgende Format unterstützen:
Seitenzahl: 347
Veröffentlichungsjahr: 2010
Ähnliche
Table of Contents
Wordpress 3.0 jQuery
Wordpress 3.0 jQuery
Copyright © 2010 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, nor Packt Publishing, and its dealers and 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 of 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: September 2010
Production Reference: 1170910
Published by Packt Publishing Ltd.
32 Lincoln Road
Olton
Birmingham, B27 6PA, UK.
ISBN 978-1-849511-74-2
www.packtpub.com
Cover Image by Jose Argudo (<[email protected]>)
Credits
Author
Tessa Blakeley Silver
Reviewer
Chris Gossmann
Acquisition Editor
Chaitanya Apte
Development Editor
Ved Prakash Jha
Technical Editors
Aaron Rosario
Mohd. Sahil
Copy Editors
Janki Mathuria
Laxmi Subramanian
Indexer
Rekha Nair
Editorial Team Leader
Akshara Aware
Project Team Leader
Priya Mukherji
Project Coordinator
Vincila Colaco
Proofreader
Aaron Nash
Graphics
Nilesh R. Mohite
Geetanjali Sawant
Production Coordinator
Aparna Bhagat
Cover Work
Aparna Bhagat
About the Author
Tessa Blakeley Silver has prior experience 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 which 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 has authored a few books for Packt Publishing, including WordPress 2.8 Theme Design and Joomla 1.5 Template Design.
I send a huge "thank you" to the Packt team who have made this title possible and whose help in getting it out into the world has been invaluable. Special thanks to Chaitanya and Thorsten for their editing work. Additional big-time "thank you" goes out to Vincila for the backbreaking work and diligence it takes to keep to a schedule.
I'd also like to thank the exemplary WordPress and jQuery community (Matt and John, you guys Rock) and all who participate and power the Open Source world and strive to improve the accessibility of the Web for all.
Additional thanks goes out to my very patient partner and our little daughter (who's not so patient) who per usual, spent quite a few evenings without me while I worked on this title. I love you both and appreciate your flexibility with me while I work on interesting books and projects (yes, I'm working on getting better at estimating how much time it really, really takes to write a chapter).
About the Reviewer
Chris Gossmann is Lead Developer and co-owner of the well-known Thematic, an open-source WordPress Theme Framework. Chris has over four years experience with WordPress. Today he is constantly enhancing Thematic. As the co-worker of Milo, one of the best web designers, Chris Gossmann creates highly customized WordPress and BuddyPress solutions for international customers.
Preface
This easy-to-use guide will walk you through the ins and outs of creating sophisticated professional enhancements and features, specially tailored to take advantage of the WordPress personal publishing platform. It will walk you through clear, step-by-step instructions to build several custom jQuery solutions for various types of hypothetical clients and also show you how to create a jQuery and Wordpress plugin.
What this book covers
Chapter 1, Getting Started: WordPress and jQuery...This chapter introduces the reader to the core fundamentals that they need to be familiar with in order to get the most out of the book. HTML, CSS, PHP, and JavaScript syntax, and how to recognize the various parts of those syntaxes are covered, as well as a list of "tools of the trade" which covers what features their code editor, browser, and even image editor should have. The chapter also illustrates exactly how CSS, JavaScript, and jQuery work in the browser with the HTML served up from the WordPress site.
Chapter 2, Working with jQuery in WordPress...This chapter goes into the details of how to start working with jQuery specifically within WordPress. It covers how to properly include jQuery using the Script API and focuses on jQuery's selectors (very important for working in WordPress) as well as jQuery's top functions.
Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together...This chapter takes the reader to a deeper level and introduces them to all the ways that jQuery can be applied to a WordPress site: Through a custom script in the WordPress theme, as a jQuery plugin called in through the theme, and lastly, as a custom jQuery script or plugin applied to a WordPress plugin! The ways to affect a WordPress site with jQuery are numerous, and the pros and cons of each method is considered so that the reader can assess their own projects accurately. The chapter also introduces the reader to their first "hypothetical client" and covers how to create their own jQuery plugin and then wrap that jQuery plugin into a WordPress plugin so that a site administrator could easily implement the enhancement without having to know how to edit the theme.
Chapter 4, Doing a Lot More with Less: Making Use of Plugins for Both jQuery and WordPress...You thought you learned quite a bit in Chapter 3? Hang on to your mouse. You're about to embark on a nice little project that requires you getting familiar with the popular jQuery plugin Colorbox, as well as the popular WordPress plugin Cforms II and mashing the two with your own custom jQuery magic to whip up some slick event registration that will knock a client's socks off.
Chapter 5, jQuery Animation within WordPress...If you're going to use jQuery, you might as well really use it to its fullest, which means animation. This chapter covers using jQuery's animation functions and shortcuts to create some sharp, well timed visual enhancements that grab the site user's attention as well as create a super slick navigation enhancement and an awesome rotating slideshow of sticky posts.
Chapter 6, WordPress and jQuery's UI...Now that we have some animation chops under our belt, we can make that work even easier by using jQuery's UI plugin which includes the Easing and Color plugins we learned about in Chapter 5. In this chapter, we're going to also take advantage of the UI plugin's widgets and events features to create some super useful interfaces in our WordPress site.
Chapter 7, AJAX with jQuery and WordPress...This chapter introduces you to what AJAX is and isn't along with the top ways to get started using AJAX techniques in your WordPress site; you'll load in HTML from other pages on your site, get your tweets and favorite flickr pictures pulled in through JSON, and last but not least, custom AJAXing the built in WordPress comment form.
Chapter 8, Tips and Tricks for Working with jQuery and WordPress...This chapter covers the top tips and tricks for getting the most out of jQuery specifically within WordPress. Most of these best practices are covered throughout the title but in this chapter we take a look at exactly why they're so important, espeically within the context of WordPress and how to implement them.
Appendix A, jQuery and WordPress Reference Guide...Dog-ear this appendix and consider it your "cheat sheet". Once you work your way through the book, why waste time hunting and pecking your way back through it to recall some function's bit of syntax and what its parameters are? This book extracts the most important information about jQuery and WordPress and breaks it down into an easy-to-skim reference guide so that you can easily find the syntax for most jQuery selectors, remind yourself of the top jQuery functions that you'll need for most WordPress development and their parameters, as well as helpful WordPress template tags and API functions and other useful WordPress know-how such as structuring the Loop and the Theme Template Hierarchy.
What you need for this book
Who this book is for
This book is for anyone who is interested in using jQuery with a WordPress site. It's assumed that most readers will be WordPress developers with a pretty good understanding of PHP or JavaScript programming and at the very least, experience with HTML/CSS development who want to learn how to quickly apply jQuery to their WordPress projects.
Conventions
In this book, you will find a number of styles of text that distinguish between different kinds of information. Here are some examples of these styles, and an explanation of their meaning.
Code words in text are shown as follows: "We can include other contexts through the use of the include directive."
A block of code is set as follows:
When we wish to draw your attention to a particular part of a code block, the relevant lines or items are set in bold:
For for clarity and conciseness, many code examples in this title are extracted. An extracted block of code is set as follows:
Code and markup preceded and ended with ellipses "..." are extracted from the full context of code and/or a larger body of code and markup. Please refer to the downloadable code bundle to see the entire work.
New terms and important words are shown in bold. Words that you see on the screen, in menus or dialog boxes for example, appear in the text like this: "clicking the Next button moves you to the next screen".
Note
Warnings or important notes appear in a box like this.
Note
Tips and tricks appear like this.
Reader feedback
Feedback from our readers is always welcome. Let us know what you think about this book—what you liked or may have disliked. Reader feedback is important for us to develop titles that you really get the most out of.
To send us general feedback, simply send an e-mail to <[email protected]>, and mention the book title via the subject of your message.
If there is a book that you need and would like to see us publish, please send us a note in the SUGGEST A TITLE form on www.packtpub.com or e-mail <[email protected]>.
If there is a topic that you have expertise in and you are interested in either writing or contributing to a book, see our author guide on www.packtpub.com/authors.
Customer support
Now that you are the proud owner of a Packt book, we have a number of things to help you to get the most from your purchase.
Tip
Downloading the example code for this book
You can download the example code files for all Packt books you have purchased from your account at http://www.PacktPub.com. If you purchased this book elsewhere, you can visit http://www.PacktPub.com/support and register to have the files e-mailed directly to you.
Errata
Although we have taken every care to ensure the accuracy of our content, mistakes do happen. If you find a mistake in one of our books—maybe a mistake in the text or the code—we would be grateful if you would report this to us. By doing so, you can save other readers from frustration and help us improve subsequent versions of this book. If you find any errata, please report them by visiting http://www.packtpub.com/support, selecting your book, clicking on the errata submission form link, and entering the details of your errata. Once your errata are verified, your submission will be accepted and the errata will be uploaded on our website, or added to any list of existing errata, under the Errata section of that title. Any existing errata can be viewed by selecting your title from http://www.packtpub.com/support.
Piracy
Piracy of copyright material on the Internet is an ongoing problem across all media. At Packt, we take the protection of our copyright and licenses very seriously. If you come across any illegal copies of our works, in any form, on the Internet, please provide us with the location address or website name immediately so that we can pursue a remedy.
Please contact us at <[email protected]> with a link to the suspected pirated material.
We appreciate your help in protecting our authors, and our ability to bring you valuable content.
Questions
You can contact us at <[email protected]> if you are having a problem with any aspect of the book, and we will do our best to address it.
Chapter 1. Getting Started: WordPress and jQuery
Welcome to WordPress and jQuery. The WordPress web-based publishing platform and jQuery's JavaScript library are two of the most powerful tools used on the Web today. Combining these tools together doubles the power and flexibility of your websites. Both technologies, being easy and fun to learn, create a recipe for web magic. I hope you're ready for some fun and interesting insights by learning how jQuery can improve your WordPress development experience.
In this chapter, we'll cover the following topics:
If anything in any of the following sections puzzles you, you may need a little more background information and understanding before moving forward with this title. No worries though, I'll point you towards some excellent sources for more information.
This book's approach
This title introduces you to the essentials and best practices of using jQuery with WordPress. It is not an introduction to programming with JavaScript and PHP, nor is it a primer on using CSS with HTML mark-up. I'm assuming that you're a WordPress site developer and/or a WordPress theme designer. Maybe you're just someone who spends enough time managing and tinkering with a WordPress site that you probably qualify as one of the above or both. Regardless of how you label yourself, you use WordPress. WordPress helps you, or your clients, get content out there quickly and simply, and you're always looking for ways to do more, faster, and easily.
jQuery is a library that speeds the time and reduces the complications of writing custom JavaScripts. I'm sure you must know that JavaScripts can be useful to a website in a number of ways. They can also enable it with really cool-looking features. While I'll be covering, in depth, as much on jQuery as possible, we won't be looking at jQuery as the "big deal", JavaScript library entity that most other books stress. Instead, we'll be considering jQuery a great tool that can help us get more done, more easily (and yes, "with less" code) using WordPress.
To recap: So, you're a WordPress user, developer, or designer? Great. Let's look at this "tool" called jQuery. It's going to make your WordPress development a lot easier and probably look a lot better. Ready to get started?
Essential tools
Skills are one thing, but the better your tools are, and the more command you have over those tools, the better your skills can be put to use (you can just ask any carpenter, golfer, or app programmer about the sheer importance of the "tools of the trade").
Code/HTML editor
First up, we'll need to meddle with markup and code—lots of markup, CSS, PHP, and jQuery. So, you'll need a good code or HTML editor. Dreamweaver is a great option (http://www.adobe.com/products/dreamweaver/), although I prefer to use Coda for Mac (http://www.panic.com/coda/). Before I discovered working with Coda, I was very happy with the free editor TextWrangler (http://www.barebones.com/products/textwrangler/). When I was working on a PC, I loved the free text/code editor HTML-kit (http://www.htmlkit.com/).
There are thousands of editors out there, some free, some expensive, and with varying degrees of features. Just about every developer and designer I've talked to, uses something different and has a ten-minute "schpiel" about why their editor is the best. Ultimately, any HTML or text editor that lets you enable the following features will work just great. I recommend you enable/use all of the following:
Tip
Free open source HTML editors:
I've also used Nvu (http://www.net2.com/nvu/) and KompoZer (http://kompozer.net/). They're both free, open source, and available for Mac, PC, and Linux platforms. KompoZer was made from the same source as Nvu and, apparently, fixes some issues that Nvu has. (I haven't run into any major issue with Nvu myself). Both editors are too limited for my regular use, but I do like being able to format HTML text quickly and drag-and-drop form objects onto a page. Both editors have a Source view, but you must be careful while switching between the Normal and the Source view tabs. Nvu and KompoZer are a little too helpful, and will try to rewrite your handcoded markup if you haven't set your preferences properly!
Linux users of Ubuntu and Debian (and Mac users with Fink) might also be interested in checking out the Bluefish editor (http://bluefish.openoffice.nl). I use Bluefish when working on Ubuntu Linux. I prefer it when on Linux, though it's robust enough to probably be considered more of an IDE (Integrated Development Environment), similar to Eclipse (http://www.eclipse.org), rather than just a basic code or HTML editor. Many of you may find that a tool like Bluefish or Eclipse is overkill for your general WordPress development and maintenance needs. On the other hand, if you're serious about WordPress development, they may have features you find invaluable and they are worth downloading and checking out.
Firefox
Finally, you'll need a web browser. I strongly suggest that you use the latest stable version of the Firefox browser, available at http://mozilla.com/firefox/.
Now one may ask, why use Firefox? While this browser has its setbacks (like any other), on the whole, I view it as an excellent web development tool. For me, it's as essential as my HTML editor, FTP programs, and graphics tools. Firefox has great features that we'll be taking advantage of to help us streamline our WordPress and jQuery enhancements and site production. In addition to built-in features such as the DOM Source Selection Viewer and adhering to CSS2 and some CSS3 standards as specified by the W3C, Firefox also has a host of extremely useful extensions such as the Web Developer Toolbar and Firebug, which I recommend to further enhance your workflow.
If you have some experience with jQuery, you've probably noticed that the great documentation on jQuery's site as well as most jQuery books, tend to focus on the intricacies of jQuery, using very simple and basic HTML markup examples with minimal CSS attributes added. Within WordPress, you'll find yourself working with a theme or plugins that were most likely created by someone else. You'll need an easy way to explore the Document Object Model (DOM) and CSS that the theme, plugins, and WordPress are generating in order to get jQuery to do what you want with the resulting markup that is generated. The Firefox browser and its extensions allow you to do this more easily than any other browser.
Web Developer toolbar
This is a great extension that adds a toolbar to your Firefox browser. The extension is also available for the Seamonkey suite and the new Flock browser, both of which, are powered by the open source code of Mozilla, just like Firefox. Get it from http://chrispederick.com/work/web-developer/.
The toolbar lets you link directly to the browser's DOM and Error Consoles, as well as W3C's XHTML, and CSS validation tools. It also lets you toggle and view your CSS output in various ways, and lets you view and manipulate a myriad of information your site outputs on-the-fly. The uses of this toolbar are endless. Every time I develop a design or create jQuery enhancements, it seems I discover some feature that I have never previously used and yet find quite useful.
Firebug
A more robust tool is Joe Hewitt's Firebug extension for Firefox found at http://www.getfirebug.com/
