WordPress 3.0 jQuery电子书

Wordpress 3.0 jQuery

Table of Contents

Wordpress 3.0 jQuery

Credits

About the Author

About the Reviewer

Preface

What this book covers

What you need for this book

Who this book is for

Conventions

Reader feedback

Customer support

Errata

Piracy

Questions

1. Getting Started: WordPress and jQuery

This book's approach

Core fundamentals you need to know

WordPress

Basic programming

JavaScript and AJAX techniques

PHP

Essential tools

Code/HTML editor

Firefox

Web Developer toolbar

Firebug

Not essential, but helpful: Image editor

jQuery background and essentials

What jQuery does (really well)

How we got here: From JavaScript to jQuery

Once upon a time, there was JavaScript

Why jQuery is simpler than JavaScript

Understanding the jQuery wrapper

Getting started with jQuery

Downloading from the jQuery site

Including the jQuery library

WordPress background and essentials

Overview of WordPress

Essentials for getting WordPress running

Using WAMP

Using MAMP

Choosing a hosting provider

Rolling out WordPress

jQuery and WordPress: Putting it all together

Summary

2. Working with jQuery in WordPress

Getting jQuery into WordPress

jQuery now comes bundled with WordPress

Registering jQuery in a WP theme

Avoiding problems registering jQuery

Using Google's CDN

Registering and including jQuery through Google's CDN into a theme

Understanding Google's versioning system

Using WordPress' bundled jQuery versus including your own jQuery download or using Google's CDN

Keeping conflicts out!

Setting your own jQuery variable

But I really want to use the $ variable!

Launching a jQuery script

Our first WordPress and jQuery setup

Registering jQuery in our setup

Registering your own custom script file

Setting up the custom-jquery file

jQuery secret weapon #1: Using selectors and filters

Selecting anything you want from the document

Filtering those selections

Basic filters

Child filters

Content filters

Form filters

Attribute filters

Visibility

jQuery secret weapon #2: Manipulating CSS and elements in the DOM

Manipulating CSS

Manipulating attributes

Manipulating elements and content

Working with the DOM

jQuery secret weapon #3: Events and effects (aka: the icing on the cake)

Working with events

Helpers are so helpful!

Working with bind, unbind, and the event object

Adding effects

Showing and hiding

Sliding in and out

Fading in and out

Working with the animate function

Making it all easy with statement chaining

Our First Project: Expanding/collapsing WordPress posts

Keeping jQuery readable

Summary

3. Digging Deeper: Understanding jQuery and WordPress Together

Two ways to "plugin" jQuery into a WordPress site

WordPress themes overview

WordPress plugins overview

jQuery plugins overview

The basics of a WordPress theme

Understanding the template's hierarchy

A whole new theme

The Loop

Tags and hooks

Conditional tags

Template include tags

Creating custom header, footer, sidebar includes

Plugin hooks

Project: Editing the main loop and sidebar in the default theme

Changing the loop

Changing the sidebar

The basics of a WordPress plugin

Project: Writing a WordPress plugin to display author bios

Coding the plugin

Activating our plugin in WordPress

The basics of a jQuery plugin

Project: jQuery fade in a child div plugin

Extra credit: Adding your new jQuery plugin to your WordPress plugin

Putting it all together: Edit the theme or create a custom plugin?

Summary

4. Doing a Lot More with Less: Making Use of Plugins for Both jQuery and WordPress

The project overview: Seamless event registration

What the "client" wants

Part 1: Getting everything set up

What we'll need

ColorBox

Cforms II

Installing the WordPress plugin

Setting up the registration form with cforms II

Striking a balance: Forms should be short and easy and yet retrieve useful information

Creating the register page using WordPress 3.0's custom menu option

Working with WordPress 3.0's custom menu option

Customizing the theme

Creating the custom page template

Creating the custom category template

Getting jQuery in on the game plan

Including the ColorBox plugin

Writing a custom jQuery script

Pulling it all together: One tiny cforms II hack required

Part 2: Form validation—make sure that what's submitted is right

The trick to client-side validation: Don't just tell them when it's wrong!

Blank input validation

Properly formatted e-mail validation

Final thoughts and project wrap up: It's all about graceful degrading

Summary

5. jQuery Animation within WordPress

jQuery animation basics

CSS properties made magical

Making it colorful

Taking it easy, with easing control

Timing is everything: Ordering, delaying, and controlling the animation que

Getting your ducks in row: Chain 'em up

Delay that order!

Jumping the queue

Stepping to completion

Grabbing the user's attention

Project: Animating an alert sticky post

Creating easy, animated graphs

Delving deeper into animation

Project: Creating snazzy navigation

Project: Creating rotating sticky posts

Putting in a little extra effort: Adding a loop indicator

Summary

6. WordPress and jQuery's UI

Getting to know jQuery's UI plugin

Widgets

Interactions

Effects

jQuery UI plugin versions bundled in WordPress

Picking and choosing from the jQuery's UI site

Making it look right: Easy UI theming

Including the jQuery UI plugin features into your WordPress site

Including jQuery's UI from WordPress' bundle

Including from the Google CDN

Loading up your own custom download from your theme or plugin directory

Don't forget your styles!

Enhancing effects with jQuery UI

Effects made easy

Easing is just as easy

Color animation with jQuery UI

Enhancing the user interface of your WordPress site

Project: Turning posts into tabs

Setting up custom loops in the WordPress theme

Implementing tabs entirely with jQuery

Project: Accordion-izing the sidebar

Project: Adding a dialog box to a download button with icons

Summary

7. AJAX with jQuery and WordPress

What AJAX is and isn't: A quick primer

AJAX: It's better with jQuery

Assessing if AJAX is right for your site—a shorter disclaimer

Getting started with jQuery's AJAX functionality

Using the .ajax() function

Taking shortcuts

Specifying where to .load() it

Transforming loaded content

Project: Ajaxifying posts

.getJSON: The littlest birds get the most re-tweets

JSON and jQuery basics

What JSON looks like

Using JSON in jQuery

Using .getJSON with Twitter

Using Twitter's user timeline method

What's Twitter sending back?

Using getJSON with Flickr

Other popular services that offer APIs with JSON format

Project: Ajax-izing the built-in comment form

Summary

8. Tips and Tricks for Working with jQuery and WordPress

Keep a code arsenal

Free your arsenal

Your arsenal on-the-go

jQuery tips and tricks for working in WordPress

Try to use the latest version of jQuery

Stay current with the Google CDN

Stay in No Conflict mode

Make sure other scripts in the theme or plugin use the Script API

Check your jQuery syntax

Colons and semicolons

Closing parenthesis

Mismatched double and single quotes

Use Firefox and Firebug to help with debugging

Know what jQuery is doing to the DOM

Web Developer's Toolkit: View Generated Source

Seeing what Firebug sees

Tips for writing great selectors

Don't forget about your selection filters!

Keep the WordPress editor's workflow "flowing"

But my jQ script or plugin needs to have specific elements!

WordPress tips and tricks for optimal jQuery enhancements

Always use wp_enqueue_script to load up jQuery and wp_register_script for plugins for custom scripts.

Always start with a basic, working, "plain HTML" WordPress site

Validate, validate, validate!

Check your PHP syntax

PHP shorthand

Check for proper semicolons

Concatenations

Summary

A. Appendix: jQuery and WordPress Reference Guide

jQuery reference for WordPress

noConflict mode syntax

Useful selector filters for working within WordPress

Selection filter syntax

Selector filters

Content filter syntax

Content filters

Child filter syntax

Child filters

Form filter syntax

Form filters

jQuery: Useful functions for working within WordPress

Working with classes and attributes

Traversing the DOM

Important jQuery events

Animation at its finest

Getting the most out of WordPress

The WordPress template hierarchy

Top WordPress template tags

Conditional tags

Quick overview of loop functions

Setting up WordPress shortcodes

Creating a basic shortcode

Summary

Index