thiết kế giao diện wordpress phần 8 potx

single-Include Tags The following is a list of all the tags and file names you can include into your theme: get_header; Finds and includes the file header.php from your current theme's d

Template Tag Description Parameters

You can set parameters

by separating them with

an '&'—('type=monthly&limit=12')

The other parameters are type, limit, format, before, after, show_post_count

Default: No parameters

will display a list of all your monthly archives in HTML format without

before or after markup and show_post_count

= Sunday) if set to true

Otherwise, it will display the abbreviation based on your localization (Sun = Sunday)—(true)

Default: No parameters

will display the letter abbreviation

single-Include Tags

The following is a list of all the tags and file names you can include into your theme:

get_header(); Finds and includes the file header.php from your current

theme's directory If that file is not found, it will include wp-content/themes/default/header.php in its place

get_footer(); Finds and includes the file footer.php from your current

theme's directory If that file is not found, it will include wp-content/themes/default/footer.php in its place

get_sidebar(); Finds and includes the file sidebar.php from your current

Chapter 6

[ 141 ]

comments_template(); Finds and includes the file comments.php from your

current theme's directory If that file is not found, it will include wp-content/themes/default/comments.php

Custom Includes—Streamline Your Theme

In Chapter 3, we included our own custom sidebar using the WordPress TEMPLATE

path inside a basic PHP include call This technique can come in very handy in helping you streamline your theme's code and help keep it easily updateable

For instance, my index.php, page.php, and category.php pages have different headers and slightly different uses of The Loop, but they all have the exact same page navigation code This bit of code is small, yet if I ever want to tweak my

internal navigation layout, I'll need to touch all three of those pages Let's clean that

up so that I only need to edit one page.

Time for Action:

1 Open up your index.php page and select everything from the

<divid="intTop_navlist"> down to the end div tag and

<! //top_navlist > comment

2 Cut that code out and paste it into a new template page—navlist.php

3 Go back to the index.php and add this include file where all that code used

You can get really granular with this technique Feel free to really look through your theme and find ways to separate out parts into includes so that you don't have to worry about duplicating your markup

The Loop Functions

Chapter 3 will really help you understand how to put each of these functions

together into The Loop The following is a description of each part of The Loop:

<?php if(have_posts()) :

?> This function checks to make sure there are posts

to display If so, the code continues onto the next function below

<?php while(have_posts())

: the_post(); ?> This function shows the posts that are available and

continues onto the next function below

<?php endwhile; ?> This function closes the while(have_posts loop

that was opened above once the available posts have been displayed

<?php endif; ?> This function ends the if(have_posts statement

that was opened above once the while(have_

posts loop has completed

WordPress Core Functions

In Chapter 3, I wrote a custom display loop that showed the top five most recent post

titles in my Features category I used a WordPress function called

setup_postdata()

I mentioned you might notice that the setup_postdata() function isn't listed in WordPress.org's template tag reference page Template tags are WordPress functions

that are defined for use specifically within themes; the setup_postdata function is part

of WordPress's core functions

Core functions are primarily useful to plug-in developers and the developers

customizing WordPress' overall functionality for themselves Occasionally, as we discovered in Chapter 3, some of the functions can be useful to theme developers who want highly specialized functionality within their themes

I won't take time to break down any core functions into a table, as most people won't really need these for their theme development I just want to make you aware of the core functions, existence so that if you ever do find WordPress template tags to be limiting, you can see if getting creative with a core function might solve

your problem

Chapter 6

[ 143 ]

The most useful core functions I've found as a theme developer are part of a class called WP_query The setup_postdata() function is part of this class Functions within this class let you call specific posts and manipulate post data and how it's displayed You can find out more about this class at:

http://codex.wordpress.org/Function_Reference/WP_Query

What's a class? This might seem to take us off topic from theme

development, but it never hurts to understand WordPress a little better

You might only be familiar with the term 'class' as used in CSS This

is different A class is also a term used in Object Oriented Programming

(which is how WordPress is written using the PHP language) It can

best be described as a 'package' or 'collection' of functions and rules that

define what an object can have done to it and how that object will behave

Objects are instances of their class which hold actual data inside them

(like post data, for example, in the case of WordPress) The data inside the object can be retrieved and manipulated via the functions available in that object's class (such as the setup_postdata() function)

Again, you can find out more about using the setup_postdata() function, as

mentioned in Chapter 3, here:

http://codex.wordpress.org/Displaying_Posts_Using_a_Custom_

Select_Query

If you use PHP or are interested in it and would like to learn more about

WordPress's core functions, you can find out more here:

Dynamic Menus and Interactive Elements

Most of the techniques I'm about to discuss in this chapter and the next one are often used inappropriately and needlessly, not-to-mention they can create issues with usability and accessibility standards, but if you haven't already been asked for one or more of these features, you will be!

Chances are half of every five clients has already asked you for drop-down menus, slick Flash headers, YouTube embeds, and other interactive content that they insist will give their site 'pizazz!'

My gut reaction (and probably yours) to anyone who utters the 'P' word is to pick up

a heavy hammer! Unfortunately, the people who sling around such words, as Steve Krug notes in his excellent book 'Don't Make Me Think', are usually the CEO or VP,s and well, you know, people with money for the project Wherever possible, you put down the hammer and give them exactly what they want—pizazz it is Here we go

Don't Make Me Think!: A Common Sense Approach to Website Usability is an

excellent book on website design for usability and testing that anyone

who has anything to do with website development or design can greatly

benefit from You'll learn why people really leave websites, how to make

your site more usable and accessible, and even how to survive those

executive design whims (without the use of a hammer) You can find out

more at Steve's site (http://www.sensible.com/)

DYI or Plug-ins?

In this chapter and the next one, I'll discuss how to do some of these techniques yourself but will also direct you to comparable plug-ins, or in the case of more complex techniques, show you plug-ins that do the job and point you in the direction for learning more about doing it yourself As to the question: Should I use Plug-ins

or do it myself? That depends on a few things such as the following:

Time available

Your technical comfort level

The level of control you want over the theme

If your theme is unique for use on a single site or if you plan on a wide distribution of it

If you're new to web development, especially using PHP and/or you just don't have the time to create a completely custom solution, WordPress plug-ins are a great way for you to go If you've been developing with various web technologies for a while and you want to have exact detailed control over your theme, then you should be able to implement and further customize any of the solutions discussed in these next few chapters

The other consideration is the usage of your theme If you're developing a theme that

is for a specific client to be used only on their site, then you might want to implement

a solution directly into your theme This will enable you to have detailed control over its display via your theme pages and style.css sheet If, on the other hand, you plan to sell your theme commercially or otherwise let it be widely distributed, your best bet is to make it 'Widgetized' and as plug-in friendly as possible (By 'plug-

in friendly', I simply mean, test it with popular plug-ins to make sure they work well with your theme.) This way, your theme users have greater flexibility in how they end up using your theme and aren't locked-in to using any features you've enabled the theme with

Dynamic Menus?

This is the nice thing about WordPress—it's all 'dynamic', Once you install

WordPress and design a great theme for it, anyone with the right level of

administrative capability can log into the Administration Panel and add, edit, or delete content and menu items But generally, when people ask for 'dynamic menus', what they really want are those appearing and disappearing drop-down menus which, I believe, they like because it quickly gives a site a very 'busy' feel

•

•

•

•

Chapter 7

[ 147 ]

I must add my own disclaimer; I don't like drop-downs Before you get on to my case, I will say it's not that they're 'wrong' or 'bad', they just don't meet my own

aesthetics and I personally find them non-user friendly I'd prefer to see a menu

system that, if requires sub sections, displays them somewhere consistently on the page, either by having a vertical navigation expand to display sub sections underneath, or if a horizontal menu is used, shows additional sub sections in a set location on the page

I like to be able to look around and see 'OK, I'm in the New Items | Cool Dink section and I can also check out Red Dinks and Retro Dinks within this section.'

Having to constantly go back up to the menu and drop-down the options to remind myself of what's available and what my next move might be, is annoying Still

haven't convinced you not to use drop-downs? OK, read on

Drop-Down Menus

So you're going to use drop-downs Again it's not 'wrong', however, I would strongly caution you to help your client take a look at their target users before implementing them If there's a good chance that most users are going to use the latest browsers that support current Javascript, CSS, and Flash standards, and everyone has great mobility and is 'mouse-ready', then, there's really no issue, go for it

If it becomes apparent that any percentage of the site's target users will be using older

browsers or have disabilities that prevent them from using a mouse and will limit them to tabbing through content, you must consider not using drop-down menus

I was especially negative about drop-down menus as, until recently, they required bulky JavaScripting or the use of Flash which, does not make clean, semantic, and SEO-friendly (or accessible) XHTML Until now Enter the Suckerfish method

developed by Patrick Griffiths and Dan Webb

This method is wonderful because it takes valid, semantically accurate, unordered lists (WordPress' favorite!), and using almost pure CSS, creates drop-downs The drop-downs are not tab accessible, but they will simply display as a single, clear unordered list to older browsers that don't support the required CSS

IE6 as per usual, poses a problem or two for us, so there is some minimal DOM JavaScripting needed to compensate and achieve the correct effect

in that browser

If you haven't heard of or worked with the Suckerfish method, I'm going to

recommend you to go online (right now!) and read Dan and Patrick's article in detail (http://alistapart.com/articles/dropdowns)

More recently, Patrick and Dan have revisited this method with 'Son-of-a-Suckerfish', which offers multiple levels and an even further parred down DOM JavaScript Check it out at http://www.htmldog.com/articles/suckerfish/dropdowns/

I also suggest you play around with the sample code provided in these articles so that you understand exactly how it works Go on, read it When you get back, I'll review how to apply this method to your WordPress theme

DIY SuckerFish Menus in WordPress

All done? Great! As you can see, the essential part of this effect is getting your menu items to show up as unordered lists with sub unordered lists Once you do that, the rest of the magic can be easily handled by finessing the CSS that Patrick and Dan suggest into your theme's CSS and placing the DOM script in your theme's header tag(s), in your header.php and/or index.php template files Seriously, that's it!The really good news is that WordPress already outputs your content's pages and their sub-pages using unordered lists Right-click on the page links in Firefox to

View Selected Source and check that the DOM inspector shows us that the menu is

in fact being displayed using an unordered list

Chapter 7

[ 149 ]

Now you can go into your WordPress Administration Panel and add as many pages

and sub-pages as you'd like (Administration | Write | (Write)Page) You'll use the

Page Parent tab underneath the editor (or on the right if your WordPress version is

older than 2.5) to assign your sub pages to their parent.

Once you've added sub pages to a page, you'll be able to use the DOM Source of Selection viewer to see that your menu is displayed with unordered lists and sub lists.

#nav, #nav ul { /* all lists */

#nav li ul ul { /* third-and-above-level lists */

margin: -1em 0 0 10em;

left: auto;

}

Now in WordPress, our menu item's ul is within a divid called top_navlist, And the ul id is reffered to as navlist There may or may not be lots of other unordered

lists used in our site, so we want to be sure that we only affect uls and lis within that top_navlist id

We'll simply tweak the CSS a bit to move items to the left (unfortunately, this works best with horizontal Navs that are positioned from the left instead of the right) and make sure to add #navlist to each element in the Suckerfish CSS Also, we already have a general #top_navlist and #intTop_navlist rule for the div, so we'll want

to make sure that this only affects the ul within that div by making sure it's named

#navlist So our navigation CSS styles now look something like the following:

#navlist li ul ul { /* third-and-above-level lists */

margin: -1em 0 0 7em;

}

#navlist li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul

ul, #nav li.sfhover ul ul ul {

left: -999em;

}

#navlist li:hover ul, #nav li li:hover ul, #nav li li li:hover ul,

#nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */

left: auto;

}

Applying the DOM Script to WordPress

The last bit is the JavaScript so that the hover works in IE6 I call it DOM scripting or the DOM script, but it's basically just a JavaScript that rewrites your markup (how your DOM is being perceived by IE6) on-the-fly This drop-down effect relies on the CSS hover attribute, IE6 only recognizes the hover attribute if it is applied to the a

(link) entity IE7 has fixed this limitation and works similarly for FireFox and other browsers Dan and Patrick's script appends the additional .sfhover class to the li

items in IE6 only

You'll need to add this script to your index.php and/or header.php template pages, inside the header tags The thing to remember here is that Dan and Patrick named their ul's id as nav and that's what this script is looking for Our ul's id is named