Tìm Hiểu về Wordpress - part 12 pot

In this Snippets example, the Snippets homepage has a unique page template which uses wp_list_pages to output all of its own Child Pages.. • Parent Page = Snippets Home Page The parent

Trang 1

<?php get_header(); ?>

<?php get_sidebar(); ?>

// Loop </div>

<?php get_sidebar("secondary"); ?>

<?php get_footer(); ?>

The two get_sidebar() template tags seen in this code should be placed in all of

the major template files that are responsible for a full page layout (index.php,

archive.php, single.php, page.php) You would then customize your two sidebar

templates, “sidebar.php” and “sidebar-secondary.php”, with any markup and

template tags that you would like Here is a very basic example showing the HTML

that might be generated from our dual-sidebar code:

<! place markup and template tags here for your first sidebar >

</div>

<! place markup and template tags here for your post loop >

</div>

<! place markup and template tags here for your second sidebar >

</div>

<! place markup and template tags here for your footer >

</div>

Modular Semantics

Notice we didn't actually call the right sidebar “right,”

we called it “secondary” If someday it was decided that the sidebars should be flipped,

“right” wouldn’t make a whole lot of sense anymore

That’s what semantics means

in web design – describing without specifying.

first sidebar appears here

second sidebar appears here

Trang 2

Loop of most

recent content

List of categories

as main nav

Breadcrumbs

Prominent Search

RSS Feed Link

Static Page

get_search_form(); bloginfo('rss_url');

wp_list_pages("include=7");

while (have_posts())

<ul>

wp_list_categories();

</ul>

http://net.tutsplus.com

Trang 3

This gives us the structure we need to create our three-column layout using CSS:

#sidebar { width: 200px; float: left; }

#main-content { width: 500px; float: left; }

#sidebar-secondary { width: 200px; float: right; }

#footer { clear: both; }

4.3.1 Menus, Archive Lists & Tag Clouds

There are all kinds of ways to create dynamic navigation from within WordPress

This is a great thing because good navigation is key to the success of any website

When we create Pages and Posts in WordPress, at the same time we are creating

that content we are creating ways in which to navigate to that content Let’s look

at two examples

A category-rich blog

Look at the popular web development blog Nettuts+ They have a fairly traditional

blog structure, where Posts are published from day to day in a chronological

format The homepage features new Posts of all types, starting with the most

recent On a blog like this, it is likely visitors are coming to do one of two things:

See what’s new or find something they are looking for The site does a good job at

both, displaying a prominent search bar, and featuring new content first For that

latter group, search might not be the only thing they need What if they aren’t

looking for something specific enough for search, or they can’t think of a search

term they would need to find it In this case, breaking down the site into categories

is perfect, because that gives that visitor an option to drill down into the site and

likely get closer to what they are looking for For example, if they were looking

for an icon set to use, their intuition might lead them to click on the Freebies part

of the navigation You can see some of these key layout elements, along with the

WordPress code that goes with them, on the adjacent page

Trang 4

Hierarchical content

Of course we know that WordPress isn’t limited to a blog structure Equally viable

is using the Page system to create hierarchies of content Take for example the

Snippets section on CSS-Tricks The homepage for the Code Snippets is the proud parent of six Child Pages, which each serve as a category for a particular coding

language Then, each of the six Child Pages is the parent of many more Child

Pages, which together comprise the growing army of code snippets

This is a whole hierarchy of content that presents all kinds of opportunities for menu creation In this Snippets example, the Snippets homepage has a unique page template which uses wp_list_pages to output all of its own Child Pages By default, that function lists not only Child Pages, but also the entire hierarchy of pages beneath it In other words, Child Pages of Child Pages, also known as grandchildren

In the markup, nested lists represent the Hierarchical relationship of these pages

In the CSS, the different levels of nested lists are targeted and styled differently

to emphasize their hierarchy and provide intuitive navigation of the individual snippets A little jQuery is also in effect, which makes the list act like an accordion, where each group can be opened and closed for browsing

On the left, the Pages are set up

in a hierarchy in the Admin area

of WordPress.

On the right, that page structure

is output with wp_list_pages() and styled with CSS and jQuery.

wp_list_pages

For a great collection of

delicious recipes for Page

menus and Page listings, check

out this article at Digging into

WordPress:

http://digwp.com/u/403

Trang 5

4.3.2 Page-Specific Menu Styles

In the Snippets section on CSS-Tricks (see previous section), we have a

three-layer deep hierarchy of Pages Each different level of the hierarchy has different

navigational menu needs Here is a closer look into the page-specific menu styles

used for CSS-Tricks’ Code Snippets

• Parent Page = Snippets Home Page

The parent page uses a special template file called “page-snippet-cat.php.” This

unique page template allows us to do anything we want with this page, but

ultimately it won’t be all that different than the rest of the pages on the site

For example, the custom Snippets Page includes the exact same header, sidebar

and footer as every other page on the site The difference between the custom

page and other pages is a special header section that displays all child pages

with this:

<?php wp_list_pages('title_li=&exclude=3285,3473&child_of='.$post->ID); ?>

This function generates all of the markup required to display a nested-list menu

of every single snippet posted to the site In the parameters of this function,

the title is eliminated, a few pages are excluded (e.g., the Submit Snippet page

doesn’t need to be shown), and the ID of the current page is specified to ensure

that the menu displays only children of the Snippets page.

• Children Pages = Code Languages

Conveniently, all six children pages use the exact same page template as the

parent page, which keeps things nice and compact Anytime you can make

a template flexible enough to handle many pages, you should Because our

wp_list_pages function lists pages that are the child pages of the current page,

it works just fine here as well, and already includes the special Snippets section

header

With both the parent and children pages of this hierarchy, we need some special

CSS and JavaScript The CSS will apply some special styling and the JavaScript

will produce the “accordion” display effect Why can’t we include this CSS code

in our site’s CSS file and the JavaScript code in our site’s JavaScript file? Well, we

Trang 6

could… but 95% of the pages on this site don’t need them, so it’s a waste of

bandwidth 95% of the time Better to go with the extra file request only when needed The following code is used in the <head> section of header.php:

<?php if (is_page_template("page-snippet-cat.php")) { ?>

<?php } ?>

• Grandchildren = Individual Snippets Pages

The actual code snippets will have their own unique page template At this point we no longer need to list child pages (the grandchildren aren’t parents),

so the wp_list_pages function is gone Now that we are two generations down the hierarchy though, it makes sense to offer the user a navigational trail back

up the directory tree For this, we can use the excellent NavXT plugin, available

at http://digwp.com/u/114, which makes outputting a breadcrumb trail as simple as:

<?php

if (function_exists('bcn_display')) {

bcn_display();

}

?>

So this was all a rather specific example, but the main point is that when you use

a unique page template to create a page, the sky is the limit for what kind of navigation/menu you want to offer Think of the needs of your user when they have reached that page and try to accommodate

Trang 7

4.3.3 Create the Perfect Archives Page

Of course “perfect” is a very relative term and the perfect page for your site

depends on your site’s particular content and purpose But if you want to create an

effective Archives Page, here is a pretty solid approach

Create a new page template just for archives, something like “archives.php,” and

include a good variety of template tags to produce archive links to all of your

content Here are some useful tags to use on your Archives Page:

• List of all posts organized by year

<?php wp_get_archives('type=yearly'); ?>

• List of all posts organized by month

<?php wp_get_archives('type=monthly'); ?>

• List of all posts organized by day

<?php wp_get_archives('type=daily'); ?>

• List of all authors

<?php wp_list_authors(); ?>

• List of all categories

<?php wp_list_categories('title_li='); ?>

• List of all tags

<?php wp_tag_cloud(); ?>

• List of all pages

<?php wp_list_pages('title_li='); ?>

Putting these template tags together, the page template for our Archives would

look like this:

Archive vs Archives

In WordPress, “Archive”

refers to page views including categories, tags, dates, and

so on.

The term “Archives” (note the “s”), on the other hand, refers to a page that is used to display organized links to all

of your site's content.

Random Bonus Info

If you ever see code in WordPress like this:

("string");

Where the string could be anything, that is actually a function for “localization”

in WordPress If a different localization is active, it will search for the translation for that word and return that, otherwise return what

is provided.

Trang 8

<?php /* Template Name: Archives */ ?>

<?php get_header(); ?>

<h3>Archives by Year:</h3>

<h3>Archives by Month:</h3>

<h3>Archives by Day:</h3>

<h3>Archives by Category:</h3>

<h3>Archives by Author:</h3>

</div>

<h3>All Pages:</h3>

<h3>Archives by Tag:</h3>

<?php wp_tag_cloud(); ?>

</div>

<?php get_sidebar(); ?>

<?php get_footer(); ?>

Trang 9

4.3.4 Impress Your Visitors with a Tag Cloud

One of the coolest things about tags is that you can display them as a giant

“cloud” of links Tag clouds are awesome not because they are great navigational

tools, but rather because they give the visitor a glimpse at the “big picture” of

what your site is all about In WordPress, tag clouds are easy to display and highly

configurable, enabling anyone to customize the perfect tag cloud for their site

We could go on and on for days just talking about tag clouds, but instead we’ll just

show you the code needed to make your own:

<?php wp_tag_cloud(array(

'smallest' => 10, // size of least used tag

'largest' => 18, // size of most used tag

'unit' => 'px', // unit for sizing

'orderby' => 'name', // alphabetical

'order' => 'ASC', // starting at A

'exclude' => 6 // ID of tag to exclude from list

)); ?>

At this point in the game, the parameters used in the wp_tag_cloud template

tag should be pretty straightforward Just use the comments in the code to set a

desired value for each of the parameters and you are off to tag-cloud heaven Of

course, for more information on how to configure these parameters, refer to the

Codex: http://digwp.com/u/404

4.4.1 Side Content and Useful Menu Items

One of the funnest things to build is your site’s sidebar Let’s look at some things to

include in your sidebar that might be useful and appealing to your visitors

Trang 10

4.4.2 Displaying Recent Comments

There are three possibilities here Let’s go from easiest to hardest

1 Widget - If the sidebar is widgetized, simply drag the “Recent Comments”

widget (built-in) into the sidebar zone Give it a title, specify the number you’d like

to show, and save it Done

2 Plugin - The Get Recent Comments plugin at http://digwp.com/u/115 provides a simple function, customizable through the Admin, for displaying recent comments

It is built to be a widget, but as we just learned that functionality is obsoleted now

by WordPress’ own widget

3 Custom Function - Because comments are stored in our database, getting that

data ourselves is possible In a nutshell, we create a new function in our functions php file and craft an SQL query that would gather all of the most recently approved comments and return them to us Then we’d loop through those returned results and display them one by one (code and more information available from WPLancer

at http://digwp.com/u/116) Here it is:

<?php // display recent comments function dp_recent_comments($no_comments = 10, $comment_len = 35) { global $wpdb;

$request = "SELECT * FROM $wpdb->comments";

$request = " JOIN $wpdb->posts ON ID = comment_post_ID";

$request = " WHERE comment_approved = '1' AND post_status = 'publish'

AND post_password =''";

$request = " ORDER BY comment_date DESC LIMIT $no_comments";

$comments = $wpdb->get_results($request);

if ($comments) {

foreach ($comments as $comment) {

ob_start(); ?>

Định dạng
Số trang	10
Dung lượng	1,67 MB