Hướng dẫn tạo themes cho wordpress part 21 ppt
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (998.88 KB, 10 trang )
Chapter 10
205
Theming your slider with Themeroller
You can quickly generate great-looking designs for your content slider and other jQuery-based
objects, by using Themeroller.
Go to and begin clicking on the color pickers
and other tools on the left-hand side of the page to customize the widgets (including a
tabbed box) that appear on the right. You can also click on the Gallery link to choose from
an already-designed theme. After playing with several of the options, your screen should
look similar to the one shown next:
Now click on the Download theme button. It will take you to the Build Your Download
screen on which you can nalize your choices. Just stick to the default settings, and click on
Download on the right-hand side of the screen.
A window will appear to verify where you want to save the zipped theme le. Save it locally on
your computer. Open the zipped folder and you will nd a complete bundle of sample scripts,
CSS theme les, and jQuery JavaScript les.
Adding JavaScript Effects
206
Try out the different examples in your favourite HTML editor and browser. All of the examples
have an index page that will instantly load them so that you can test their behaviour locally.
Be sure to examine the CSS les contained within the /themes/base/ folder, particularly
jquery.ui.theme.css. This is where you can experiment by changing colors and other
style declarations.
Enjoy the many options that jQuery gives you to control the look and behaviour of your
interactive page elements.
See also
Adding JavaScript les to your theme programmatically
Making sidebar widgets toggle-able
The extensible nature of widgets and sidebars in WordPress opens those items up to a whole
range of possibilities when it comes to making them dynamic. One of the easiest and most
noticeable things that you can do is to modify your widgets so that users are able to interact
with them. Even the rudimentary interaction provided in this recipe can go a long way to
increasing user participation with the site that your theme is deployed on.
Getting started
You need to have a theme created with at least one sidebar registered.
How to do it
First, you need to change the parameters that you are passing to your sidebar registration
function. Find the declaration for your sidebar (usually contained within the functions.php
le) and change the code to the following:
register_sidebar(array(
'before_widget' => '<li id="%1$s" class="widget %2$s">',
'after_widget' => '</div></li>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2><div>',
));
You'll see that this differs from the default WordPress sidebar arguments in that a <div>
start tag has been appended to the after_title argument, and a </div> end tag has
been prepended to the after_widget argument. Doing this causes all widget contents
to be enclosed by a div tag that we can use for manipulation.
Chapter 10
207
Now, you need to create the JavaScript code that controls slide toggling. First, create a new
folder in the directory containing your theme, called js. In the js directory, create and open a
new le called widget-slide-toggle.js. Inside the widget-slide-toggle.js le, put
the following code:
jQuery(document).ready(function() {
jQuery('.widget h2.widgettitle').click(function(event) {
event.preventDefault();
jQuery(this).siblings('div:first').toggle();
});
});
Now, to make sure this JavaScript gets run, we need to reference it. Ensure that your <head>
tag has a call to wp_head within it, and then open or create your theme's functions.php
le. Inside the functions.php le, place the following code:
<?php wp_enqueue_script( 'widget-slide-toggle', get_
bloginfo('stylesheet_directory') . '/js/widget-slide-toggle.js',
array( 'jquery' ) ); ?>
Now, load your WordPress admin panel and put some widgets in the sidebar for your theme.
Load any page that displays your sidebar, and click on the widget title for any widget. You'll see
the content of the widget slide up or slide down, based on how many times you've clicked on
the title.
You can see the before and after results in the following screenshot:
How it works
This is a perfect example of how a little bit of markup and a little bit of JavaScript can make
a big difference. First, you added a little bit of extra markup to your theme's sidebar. This
markup encloses each widget's content inside an extra <div> position, as a sibling to the
widget's title.
Adding JavaScript Effects
208
After this, you added a reference to a script that contained a small bit of jQuery. The jQuery
contains a statement binding an event handler to the click event on each widget's title. When
a user clicks on the title of a widget, the specied event handler res, causing the browser
to toggle the state of the rst div adjacent to the title. Because of the extra markup that we
registered with the sidebar in the functions.php le, this div is always guaranteed to
surround the content of the widget.
There's more
The sidebar widgets expand again each time the page is reloaded. This is not ideal if you want
users to have the satisfaction of seeing their changes persist on the page.
Remembering the widget's state
As it is currently implemented, the slide toggle only persists during a single page load. If you
want to remember the widget's state between page loads, you can take advantage of a great
jQuery plugin called jQuery Cookie. Download the jQuery plugin from http://plugins.
jquery.com/project/cookie
, and put the JavaScript le into your theme's js directory.
Then place the jQuery Cookie enqueue script below the widget slide toggle enqueue script:
wp_enqueue_script( 'jquery-cookie', get_bloginfo('stylesheet_
directory') . '/js/jquery.cookie.js', array( 'jquery' ) );
After enqueuing the Cookie plugin, change the contents of your widget-slide-toggle.js
le to the following code:
jQuery(document).ready(function() {
jQuery('.widget').each(function() {
var widgetId = jQuery(this).attr('id');
var slideStatus = jQuery.cookie('slide-status-'+widgetId);
if( slideStatus == 'hidden' ) {
jQuery(this).find('h2.widgettitle').siblings('div:first').hide();
}
});
jQuery('.widget h2.widgettitle').click(function(event) {
event.preventDefault();
jQuery(this).siblings('div:first').slideToggle('normal',
function() {
var widgetId = jQuery(this).parents('.widget').attr('id');
if(jQuery(this).is(':visible')) {
jQuery.cookie('slide-status-'+widgetId,'visible',{
path: '/', expires: 10 });
} else {
jQuery.cookie('slide-status-'+widgetId,'hidden',{
path: '/', expires: 10 });
}
});
});
});
Chapter 10
209
Now, when a user toggles a widget's state and returns to the page later, the state will be
restored. That is, if the user hid the widget, it will be hidden on page load. Otherwise, the
widget will be shown.
Adding a font size toggle
Using JavaScript to create fancy animations and add unnecessary but interesting interaction
is great. However, the real boon comes when you use it to provide users with something that
helps them to use your site, and that emphasizes your content.
How to do it
First, you need to decide what text you want to be able to resize. For every element that
you want resizable text in, add the text-resizable class. In this example, let's set the
post content to be resizable, within the WordPress loop in the index.php le, placing the
font-resizable opening div tag just above the entry-content opening div tag, then
closing both tags, as shown in the following code:
<! make the content entry text resizable > <div class="font-
resizable">
<div class="entry-content">
<?php the_content( __( 'Read More <span class="meta-nav">»</
span>', 'sandbox' ) ) ?>
<?php wp_link_pages('before=<div class="page-link">'
. __( 'Pages:', 'sandbox' ) . '&after=</div>') ?>
</div><! end post content entry >
</div><! #text resize >
In addition, you need to create two links with the IDs increase-font-size and
decrease-font-size. You can put these links anywhere on your page. We will place ours
just below the opening content div tag, within the index.php le. Do not place this within
the WordPress loop.
<p>Font Size:
<a id="increase-font-size" href="#">[+]</a>/<a id="decrease-font-
size" href="#">[-]</a> </p>
Let's have a quick preview of what the font resize links will look like once they are live on
the site:
Adding JavaScript Effects
210
Now you need to create the JavaScript code that controls text resizing. First, create a new folder
in the directory containing your theme, and call it js. Inside the js directory, create and open a
new le called text-resize.js. In the text-resize.js le, put the following code:
jQuery(document).ready(function() {
jQuery('#increase-font-size').click(function(event) {
event.preventDefault();
jQuery('.font-resizable').each(function() {
changeFontSize(this, change); });
});
jQuery('#decrease-font-size').click(function(event) {
event.preventDefault();
jQuery('.font-resizable').each(function() {
changeFontSize(this, -change); });
});
});
var min = 8, max = 32, change = 2;
function changeFontSize(element, value) {
var currentSize = parseFloat(jQuery(element).css('font-size'));
var newSize = currentSize + value;
if (newSize <= max && newSize >= min) {
jQuery(element).css('font-size', newSize + 'px');
}
}
Now, to make sure that this JavaScript gets run, we need to reference it. Ensure that
your <head> tag has a call to wp_head within it, and then open or create your theme's
functions.php le. Inside the functions.php le, place the following code:
wp_enqueue_script( 'text-resize', get_bloginfo('stylesheet_directory')
. '/js/text-resize.js', array( 'jquery' ) );
Chapter 10
211
Then load your WordPress site and click on the [+] or [-] links. You'll see the text resize
appropriately for every element with the appropriate class, as seen in the following screenshot:
How it works…
In this example, we used jQuery to resize the text within posts on the home page. Whenever
the [-] or [+] font size links were clicked, the text resized from 8 to 32 pixels in increments
of 2 pixels. First, we identied an area that we wanted to be resizable—in this case, any post
content text on the home page—and created a div tag called text-resizable to wrap
around the entry-content tags. This created a container that jQuery could then affect.
Next, we added our font resize links to index.php, just below the main opening content
div, outside of the WordPress post loop. This placed the links near the top of the page, a
location where people are used to seeing resizable text links.
Then we created a JavaScript le named text-resize.js to contain the functions for
the resize actions. The (document).ready(function() veried that the page was
loaded, and then allowed the text size to be decreased or increased. Next, the variable
var min was created and dened, to control the range of font size values. The function
changeFontSize(element, value) accepted two parameters: element and
value. This allowed the function to determine what to resize and what size the
element should become.
Finally, we referenced the text-resize.js script within functions.php, by using
wp_enqueue_script. This contained the parameter array('jquery') that also indicated
to WordPress that the text-resize script had a dependency on the jQuery library in order for it
to function properly, and allowed us to make sure that the jQuery library was loaded to handle
any hard labor. Once the les were all uploaded, clicking on the text resize links clearly
caused all of the text within post entries on the home page to resize.
11
Advanced WordPress
Themes
In this chapter, we will cover:
Adding a theme options page
Allowing for multiple theme color schemes
Changing the default Gravatar icon for your theme
Registering shortcodes for your theme
Localizing your theme
Displaying information based on the logged-in user's role
Packaging your theme for distribution
Uploading your theme to the WordPress.org theme repository
Introduction
Creating a basic WordPress theme is great. You learn about The Loop, nd the appropriate
template tags to display the information that you want, and then you write some HTML and
CSS to tie it all together. However, there comes a time when you're ready to take your themes
to the next level. That is what this chapter is all about.
In this chapter, you'll learn how to provide your theme's users with options about what
is displayed and how is displayed. You'll also learn about localizing your theme for an
international audience and showing users information based on their current role.
Advanced WordPress Themes
214
Finally, this chapter covers the essentials for packaging and distributing your theme via the
WordPress.org theme repository. You'll need to follow a few simple steps to make sure that
your theme is accepted and that it provides users with the best possible experience.
Adding a theme options page
As a theme developer, you have to make a lot of choices when you create a theme. What text
should be displayed in certain locations? Will that text always be appropriate? How many
posts should you display in a featured item carousel? How many levels should the nested
navigation menu have?
Part of being a good developer is knowing when to make these decisions for your theme's
users, and when to give the users a choice. Many WordPress users are not comfortable with
editing PHP les, so you need to provide some other way for users to make these choices.
The best way, in the context of a WordPress theme, is to provide the users with a theme
options panel.
Getting started
You need to have created a WordPress theme containing at least a style.css le and an
index.php le.
How to do it
First, you need to decide what choice you want to give your users. In this recipe, we're going to
assume that you want users to be able to change the color of the name of their site, which is
located in the site header.
Next, you have to create the options page that lets users make their choice and save it.
Open your theme's directory and create a new directory inside it called admin. Inside the
admin directory, create a le called options.php.
Open the options.php le, and insert the following code:
<?php
$settings = $this->get_settings();
?>
<div class="wrap">
<h2><?php _e('My Theme Options' ); ?></h2>
<?php if('1'==$_GET['updated']) { ?>
<div id="my-theme-options-updated" class="updated fade"><p><?php _e(
'Settings saved!' ); ?></p></div>
<?php } ?>
<form method="post">
