编辑“WordPress:Customizing Your Sidebar”
该编辑可以被撤销。 请检查下面的对比以核实您想要撤销的内容,然后发布下面的更改以完成撤销。
最后版本 | 您的文本 | ||
第1行: | 第1行: | ||
The '''sidebar''', also known as the ''menu'', is a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found. This tutorial examines some of the information items and features generally found in the sidebar. After reading this article you’ll feel more comfortable in adding or changing the content of your own sidebar. | The '''sidebar''', also known as the ''menu'', is a narrow vertical column often jam-packed with lots of information about a website. Found on most WordPress sites, the sidebar is usually placed on the right or left-hand side of the web page, though in some cases, a site will feature two sidebars, one on each side of the main content where your posts are found. This tutorial examines some of the information items and features generally found in the sidebar. After reading this article you’ll feel more comfortable in adding or changing the content of your own sidebar. | ||
==Nested Lists== | ==Nested Lists== | ||
The Classic and Default WordPress Themes use ''nested lists'' to present their sidebar information. '''Nested lists''' are a series of ''unordered lists'' of information, set inside of each other. Here's a simple example: | The Classic and Default WordPress Themes use ''nested lists'' to present their sidebar information. '''Nested lists''' are a series of ''unordered lists'' of information, set inside of each other. Here's a simple example: | ||
<pre><ul><!-- open whole list --> | <pre><ul><!-- open whole list --> | ||
第63行: | 第27行: | ||
</ul><!-- closing whole list --> | </ul><!-- closing whole list --> | ||
</pre> | </pre> | ||
Each of these nested list "sections" can feature a CSS ''ID'' or ''class'' to make each one look different or all the same, depending upon how they are styled within the style sheet. | Each of these nested list "sections" can feature a CSS ''ID'' or ''class'' to make each one look different or all the same, depending upon how they are styled within the style sheet. | ||
You don't have to use nested lists for your sidebar. That is up to you. If you do use the nested lists as set by example in the WordPress core Themes, you need to know how they work. To learn more about how to style your WordPress nested lists, check out the article on [[WordPress:Styling Lists with CSS]]. | You don't have to use nested lists for your sidebar. That is up to you. If you do use the nested lists as set by example in the WordPress core Themes, you need to know how they work. To learn more about how to style your WordPress nested lists, check out the article on [[WordPress:Styling Lists with CSS]]. | ||
==Navigation== | ==Navigation== | ||
Historically, the main purpose of the sidebar has been to provide navigation assistance for the visitor - a function that commonly continues to the present day. These navigation aids are designed to help people move about your site and find the information you want them to see. The list of navigation items includes [[WordPress:Administration_Panels#Categories|Categories]], [[WordPress:Pages]], [[WordPress:WordPress_Features#Archives_and_Search|Archives]], and even the most recent posts. Another navigational tool you'll see in the sidebar is a search form to help people find what they are looking for on your site. | Historically, the main purpose of the sidebar has been to provide navigation assistance for the visitor - a function that commonly continues to the present day. These navigation aids are designed to help people move about your site and find the information you want them to see. The list of navigation items includes [[WordPress:Administration_Panels#Categories|Categories]], [[WordPress:Pages]], [[WordPress:WordPress_Features#Archives_and_Search|Archives]], and even the most recent posts. Another navigational tool you'll see in the sidebar is a search form to help people find what they are looking for on your site. | ||
The first information in the standard WordPress installation is a list of [[WordPress:Pages]] or Categories. Listing [[WordPress:Pages]] helps the visitor find more information about your site, like '''About''', '''Contact''', '''Register''', or '''Site Map'''. | The first information in the standard WordPress installation is a list of [[WordPress:Pages]] or Categories. Listing [[WordPress:Pages]] helps the visitor find more information about your site, like '''About''', '''Contact''', '''Register''', or '''Site Map'''. | ||
The information displayed in the sidebar is controlled by your [[WordPress:Using Themes|Theme's]] [[WordPress:Templates|Template]] <tt>sidebar.php</tt> file. | The information displayed in the sidebar is controlled by your [[WordPress:Using Themes|Theme's]] [[WordPress:Templates|Template]] <tt>sidebar.php</tt> file. | ||
An example usage of the Pages list template tag in your <tt>sidebar.php</tt> file might be: | An example usage of the Pages list template tag in your <tt>sidebar.php</tt> file might be: | ||
<?php wp_list_pages('title_li=<h2>Pages</h2>'); ?> | <?php wp_list_pages('title_li=<h2>Pages</h2>'); ?> | ||
This puts the title '''Pages''' in an <tt>H2</tt> heading and then puts the Pages in a list below the title. This is just one sample of its usage and there are more options available for controlling the end result of the template tag called [[WordPress:Template Tags/wp_list_pages|wp_list_pages()]]. | This puts the title '''Pages''' in an <tt>H2</tt> heading and then puts the Pages in a list below the title. This is just one sample of its usage and there are more options available for controlling the end result of the template tag called [[WordPress:Template Tags/wp_list_pages|wp_list_pages()]]. | ||
Listing the [[WordPress:Template Tags/wp_list_cats|Categories]] helps the visitor find the information they want by topic. This might look like: | Listing the [[WordPress:Template Tags/wp_list_cats|Categories]] helps the visitor find the information they want by topic. This might look like: | ||
<pre><li id="categories"><?php _e('Categories:'); ?> | <pre><li id="categories"><?php _e('Categories:'); ?> | ||
第130行: | 第54行: | ||
This lists the title '''Categories''' within the <tt>menu</tt> list, and then creates a nested list underneath to list the WordPress categories you've added to your site. If you have no posts in a category, it will not show up on the list by default. Add a post, and it will be there. | This lists the title '''Categories''' within the <tt>menu</tt> list, and then creates a nested list underneath to list the WordPress categories you've added to your site. If you have no posts in a category, it will not show up on the list by default. Add a post, and it will be there. | ||
The WordPress Default Theme, Kubrick, uses a set of navigation tags on its <tt>index.php</tt> template file, but you can use this same set in your sidebar to emphasize the navigation from one post to another in chronological order: | The WordPress Default Theme, Kubrick, uses a set of navigation tags on its <tt>index.php</tt> template file, but you can use this same set in your sidebar to emphasize the navigation from one post to another in chronological order: | ||
<pre><div class="navigation"> | <pre><div class="navigation"> | ||
第145行: | 第65行: | ||
</div> | </div> | ||
</div></pre> | </div></pre> | ||
This example puts the text for the links to the right and left parts of the screen. You can change this to something more suitable to your sidebar's look by changing the style sheet references or by further customizing the [[WordPress:Template_Tags/next_post|next and previous post links]]. | This example puts the text for the links to the right and left parts of the screen. You can change this to something more suitable to your sidebar's look by changing the style sheet references or by further customizing the [[WordPress:Template_Tags/next_post|next and previous post links]]. | ||
==Post Lists== | ==Post Lists== | ||
Part of helping your visitors navigate your site is to point them towards specific posts and archives. Your most recent posts and archives can be displayed in a variety of ways in your sidebar. The WordPress Classic and Default Themes showcase the archives by month: | Part of helping your visitors navigate your site is to point them towards specific posts and archives. Your most recent posts and archives can be displayed in a variety of ways in your sidebar. The WordPress Classic and Default Themes showcase the archives by month: | ||
<pre><li id="archives"><?php _e('Archives:'); ?> | <pre><li id="archives"><?php _e('Archives:'); ?> | ||
第187行: | 第75行: | ||
<?php wp_get_archives('type=monthly'); ?> | <?php wp_get_archives('type=monthly'); ?> | ||
</ul></pre> | </ul></pre> | ||
Using the [[WordPress:Template_Tags/wp_get_archives|wp_get_archives()]] template tag, you can customize this list in a variety of ways. Let's say you want to list the last 15 posts you've written by their title. Replace the <tt>type=monthly</tt> as follows: | Using the [[WordPress:Template_Tags/wp_get_archives|wp_get_archives()]] template tag, you can customize this list in a variety of ways. Let's say you want to list the last 15 posts you've written by their title. Replace the <tt>type=monthly</tt> as follows: | ||
<pre><?php wp_get_archives('type=postbypost&limit=15'); ?></pre> | <pre><?php wp_get_archives('type=postbypost&limit=15'); ?></pre> | ||
There are also [[WordPress:Plugins]] which can help you customize different ways of showcasing your lists of posts. They can be customized by category, most commented on, most recent, most recently updated, and the list goes on. | There are also [[WordPress:Plugins]] which can help you customize different ways of showcasing your lists of posts. They can be customized by category, most commented on, most recent, most recently updated, and the list goes on. | ||
[http://www.coffee2code.com/archives/2004/08/27/plugin-customizable-post-listings/ Coffee2code's Customizable Post Listings] offers myriad ways of creating a customizable list of posts in your sidebar. For example, if you would like to create a list of the 5 posts that have most recently been commented on: | [http://www.coffee2code.com/archives/2004/08/27/plugin-customizable-post-listings/ Coffee2code's Customizable Post Listings] offers myriad ways of creating a customizable list of posts in your sidebar. For example, if you would like to create a list of the 5 posts that have most recently been commented on: | ||
<pre><ul>Recently Commented Posts | <pre><ul>Recently Commented Posts | ||
<?php c2c_get_recently_commented(5); ?> | <?php c2c_get_recently_commented(5); ?> | ||
</ul></pre> | </ul></pre> | ||
There are several plugins that will generate a list of related posts to the one you are viewing. One of them, [http://www.w-a-s-a-b-i.com/archives/2004/05/26/wordpress-related-entries-plugin/ WordPress Related Entries Plugin by Wasabi], is easily activated and might appear like this in your sidebar to return a result of ten related posts in a list: | There are several plugins that will generate a list of related posts to the one you are viewing. One of them, [http://www.w-a-s-a-b-i.com/archives/2004/05/26/wordpress-related-entries-plugin/ WordPress Related Entries Plugin by Wasabi], is easily activated and might appear like this in your sidebar to return a result of ten related posts in a list: | ||
<pre><li id="related"><?php _e('Related Articles'); ?> | <pre><li id="related"><?php _e('Related Articles'); ?> | ||
第226行: | 第94行: | ||
This is just the tip of the iceberg for ways of listing posts in your sidebar. You can find more on your visit to the plugin sites listed below. | This is just the tip of the iceberg for ways of listing posts in your sidebar. You can find more on your visit to the plugin sites listed below. | ||
==Meta Data== | ==Meta Data== | ||
Did you know you could put anything you want in your sidebar? Some people like to add the post meta data to the sidebar because it has information about the post and adds links to different categories, dates, and possibly even next and previous posts, all helping increase the visitor's navigation choices. | Did you know you could put anything you want in your sidebar? Some people like to add the post meta data to the sidebar because it has information about the post and adds links to different categories, dates, and possibly even next and previous posts, all helping increase the visitor's navigation choices. | ||
[[WordPress:WordPress Lessons]] features an article on designing your [[WordPress:Post_Meta_Data_Section|Post Meta Data Section]] which will help you to customize this information in your sidebar. | [[WordPress:WordPress Lessons]] features an article on designing your [[WordPress:Post_Meta_Data_Section|Post Meta Data Section]] which will help you to customize this information in your sidebar. | ||
Part of that ''meta data'' might be a little paragraph about who you are and what the site is about. You can add that using standard HTML and CSS and place it where you would like it to appear in the sidebar, such as: | Part of that ''meta data'' might be a little paragraph about who you are and what the site is about. You can add that using standard HTML and CSS and place it where you would like it to appear in the sidebar, such as: | ||
<pre><p class="aboutme">Have a passion for racing | <pre><p class="aboutme">Have a passion for racing | ||
第253行: | 第107行: | ||
Remember, it's your sidebar and you can add or remove anything you want. | Remember, it's your sidebar and you can add or remove anything you want. | ||
==Link Lists== | ==Link Lists== | ||
Lists of links, also called [[WordPress:Introduction_to_Blogging#Blogrolls|Blogrolls]], are ways of listing different websites for your viewers to visit when they are done with your site, of course. This is also a handy way of featuring link exchanges. | Lists of links, also called [[WordPress:Introduction_to_Blogging#Blogrolls|Blogrolls]], are ways of listing different websites for your viewers to visit when they are done with your site, of course. This is also a handy way of featuring link exchanges. | ||
Your link lists are controlled through the WordPress [[WordPress:Links Manager|Link Manager]]. Each link can be displayed as text or as an image. In the WordPress Default Theme, your Links List is created with a conditional tag that only displays the Links List on the front page and not on the rest of the web pages within the Theme. The Classic Theme displays the Links List on every web page like this: | Your link lists are controlled through the WordPress [[WordPress:Links Manager|Link Manager]]. Each link can be displayed as text or as an image. In the WordPress Default Theme, your Links List is created with a conditional tag that only displays the Links List on the front page and not on the rest of the web pages within the Theme. The Classic Theme displays the Links List on every web page like this: | ||
<pre><?php get_links_list(); ?></pre> | <pre><?php get_links_list(); ?></pre> | ||
There are several ways of displaying your [[WordPress:Template_Tags#Links Manager tags|Links]], and the above is just one example. You can also customize the display of the list by using the [[WordPress:Template_Tags/get_links|get_links()]] template tag. For example, let's say you want to display the links only for category 2 in a list featuring images and not the link text, and sort the links by the URL address: | There are several ways of displaying your [[WordPress:Template_Tags#Links Manager tags|Links]], and the above is just one example. You can also customize the display of the list by using the [[WordPress:Template_Tags/get_links|get_links()]] template tag. For example, let's say you want to display the links only for category 2 in a list featuring images and not the link text, and sort the links by the URL address: | ||
<pre><ul><?php get_links(2, '<li>', '</li>', '', TRUE, 'url', FALSE); ?></ul></pre> | <pre><ul><?php get_links(2, '<li>', '</li>', '', TRUE, 'url', FALSE); ?></ul></pre> | ||
There are also a variety of [[WordPress:Plugins/Links|Plugins for Links]] you can choose from to customize this information even more. | There are also a variety of [[WordPress:Plugins/Links|Plugins for Links]] you can choose from to customize this information even more. | ||
Have your own set of links you want to share and you don't want to use the Link Manager? Want to highlight links to specific posts or pages? Check out the article on creating [[WordPress:Linking_Posts_Pages_and_Categories|links to posts, pages, and categories]]. | Have your own set of links you want to share and you don't want to use the Link Manager? Want to highlight links to specific posts or pages? Check out the article on creating [[WordPress:Linking_Posts_Pages_and_Categories|links to posts, pages, and categories]]. | ||
===Link List of Authors=== | ===Link List of Authors=== | ||
If you have a requirement to present a list of authors (users) with links to their web-site, consider this example designed for the WordPress Default Theme's ''sidebar.php''. Here the [[WordPress:wpdb_Class|wpdb Class]] is used to [[WordPress:wpdb_Class#get_col_-_SELECT_a_Column|collect the User ID Column (get_col)]] from the [[WordPress:Database Description#Table wp_users|wp_users table.]] The User ID of All users is stored in the [[WordPress:Glossary#Array|array]] called ''$user_ids'' . A [[WordPress:Wikipedia:Foreach|foreach loop]] is used to 'cycle' through all the users in that array. In that [[WordPress:Wikipedia:Foreach|foreach loop]], the WordPress [[WordPress:Function_Reference|Function]], [[WordPress:Function_Reference/get_userdata|get_userdata]], is called to get all the [[WordPress:Your_Profile_SubPanel| Profile]] data for a given user, and finally, that user's '''Web-site''' ($user->user_url) and '''Display name publicly as''' ($user->dsiplay_name) is used to compose the "a href" tag link to each author's web-site: | If you have a requirement to present a list of authors (users) with links to their web-site, consider this example designed for the WordPress Default Theme's ''sidebar.php''. Here the [[WordPress:wpdb_Class|wpdb Class]] is used to [[WordPress:wpdb_Class#get_col_-_SELECT_a_Column|collect the User ID Column (get_col)]] from the [[WordPress:Database Description#Table wp_users|wp_users table.]] The User ID of All users is stored in the [[WordPress:Glossary#Array|array]] called ''$user_ids'' . A [[WordPress:Wikipedia:Foreach|foreach loop]] is used to 'cycle' through all the users in that array. In that [[WordPress:Wikipedia:Foreach|foreach loop]], the WordPress [[WordPress:Function_Reference|Function]], [[WordPress:Function_Reference/get_userdata|get_userdata]], is called to get all the [[WordPress:Your_Profile_SubPanel| Profile]] data for a given user, and finally, that user's '''Web-site''' ($user->user_url) and '''Display name publicly as''' ($user->dsiplay_name) is used to compose the "a href" tag link to each author's web-site: | ||
<pre> | <pre> | ||
<h2>Link list of authors:</h2> | <h2>Link list of authors:</h2> | ||
第308行: | 第137行: | ||
<?php | <?php | ||
endforeach; // end of authors' profile 'loop' | endforeach; // end of authors' profile 'loop' | ||
?> | ?> | ||
</ul> | </ul> | ||
第331行: | 第142行: | ||
==Different Sidebars Anyone?== | ==Different Sidebars Anyone?== | ||
Sidebars come and sidebars go...well, at least they do in the WordPress Default Theme. View the front, archive, or category page and you will see the sidebar. Click on a post title and view the post and you will see the sidebar disappear. How did this magic trick happen? | Sidebars come and sidebars go...well, at least they do in the WordPress Default Theme. View the front, archive, or category page and you will see the sidebar. Click on a post title and view the post and you will see the sidebar disappear. How did this magic trick happen? | ||
WordPress 1.5 uses modular [[WordPress:Templates|template files]] for the different parts and pieces of a site. We are currently discussing one of them, the <tt>sidebar.php</tt>. Some Themes feature different web pages beyond the <tt>index.php</tt> such as <tt>archive.php</tt>, <tt>single.php</tt>, <tt>search.php</tt>, and <tt>category.php</tt>. Each of these post pages can feature different sidebars, headers, and footers. Do you want to have the sidebar change dependent upon whether someone is viewing a category, archive, or the front page? We'll show you how. | WordPress 1.5 uses modular [[WordPress:Templates|template files]] for the different parts and pieces of a site. We are currently discussing one of them, the <tt>sidebar.php</tt>. Some Themes feature different web pages beyond the <tt>index.php</tt> such as <tt>archive.php</tt>, <tt>single.php</tt>, <tt>search.php</tt>, and <tt>category.php</tt>. Each of these post pages can feature different sidebars, headers, and footers. Do you want to have the sidebar change dependent upon whether someone is viewing a category, archive, or the front page? We'll show you how. | ||
By default, the call for the sidebar is: | |||
<?php get_sidebar(); ?> | <?php get_sidebar(); ?> | ||
In the WordPress Default Theme, the <tt>single.php</tt> template file does not request a sidebar. If you view a single post, you will see that the post stretches across the space where the sidebar would have been. Click back to an archive, category, or the front page and the sidebar returns. This Theme has removed the call for the sidebar. | In the WordPress Default Theme, the <tt>single.php</tt> template file does not request a sidebar. If you view a single post, you will see that the post stretches across the space where the sidebar would have been. Click back to an archive, category, or the front page and the sidebar returns. This Theme has removed the call for the sidebar. | ||
To have a sidebar be different on a different template page, instead of using the default template tag, you can use the PHP command INCLUDE. | To have a sidebar be different on a different template page, instead of using the default template tag, you can use the PHP command INCLUDE. | ||
<?php include ('sidebar2.php'); ?> | <?php include ('sidebar2.php'); ?> | ||
Placed on the <tt>single.php</tt> or the <tt>category.php</tt> template file instead of the default tag, this different sidebar would appear on those web pages. You can then customize <tt>sidebar2.php</tt> to feature whatever information you would like so that it is different than the default sidebar. | Placed on the <tt>single.php</tt> or the <tt>category.php</tt> template file instead of the default tag, this different sidebar would appear on those web pages. You can then customize <tt>sidebar2.php</tt> to feature whatever information you would like so that it is different than the default sidebar. | ||
If you would like to have a different sidebar on the <tt>single.php</tt> template file, and another different sidebar visible when viewing an archive or category, edit the <tt>archive.php</tt> or <tt>category.php</tt> template files and change the sidebar call to: | If you would like to have a different sidebar on the <tt>single.php</tt> template file, and another different sidebar visible when viewing an archive or category, edit the <tt>archive.php</tt> or <tt>category.php</tt> template files and change the sidebar call to: | ||
<?php include ('sidebar-cat.php'); ?> | <?php include ('sidebar-cat.php'); ?> | ||
<?php include ('sidebar-archive.php'); ?> | <?php include ('sidebar-archive.php'); ?> | ||
Actually, you can use whatever name you want. You can also set up [[WordPress:The Loop]] to call different sidebars dependent upon what you are viewing, and you can learn more about this technique in the WordPress Lesson on Exploring the Loop. You've got the basic idea, and from here, it's up to your imagination. | Actually, you can use whatever name you want. You can also set up [[WordPress:The Loop]] to call different sidebars dependent upon what you are viewing, and you can learn more about this technique in the WordPress Lesson on Exploring the Loop. You've got the basic idea, and from here, it's up to your imagination. | ||
==Sidebar Accessories== | ==Sidebar Accessories== | ||
You can put anything you want in your sidebar. Want to have a random image or a bit of text that changes with every view of a page on your site? How about adding some asides which are little snips of post information? Want to add "buttons" or icons to indicate favorite sites, or sites that do validation, or awards you've won? How about weather reports or the latest news? You can honestly add anything you want to your sidebar. Here's more examples of what's possible. | You can put anything you want in your sidebar. Want to have a random image or a bit of text that changes with every view of a page on your site? How about adding some asides which are little snips of post information? Want to add "buttons" or icons to indicate favorite sites, or sites that do validation, or awards you've won? How about weather reports or the latest news? You can honestly add anything you want to your sidebar. Here's more examples of what's possible. | ||
==Randomness== | ==Randomness== | ||
Did you know you could have random images or text in your sidebar? Yep! There are a variety of scripts and techniques for creating random images on your site, images that change with every page or with each refreshing of the browser screen. The key to having these things in your sidebar is making sure they ''fit'' within your sidebar. | Did you know you could have random images or text in your sidebar? Yep! There are a variety of scripts and techniques for creating random images on your site, images that change with every page or with each refreshing of the browser screen. The key to having these things in your sidebar is making sure they ''fit'' within your sidebar. | ||
Vertical photographs and graphics tend to fit well with the long vertical column of the sidebar. You can also feature horizontal images as long as they don't exceed the width of the sidebar. If they do exceed the sidebar width, they can either overlap, or push the rest of your content around, messing up your lovely layout. | Vertical photographs and graphics tend to fit well with the long vertical column of the sidebar. You can also feature horizontal images as long as they don't exceed the width of the sidebar. If they do exceed the sidebar width, they can either overlap, or push the rest of your content around, messing up your lovely layout. | ||
Here are some resources for creating random images: | Here are some resources for creating random images: | ||
* [http://wordpress.org/extend/plugins/random-image-selector/ Random Image Selector by Keith Murray] | * [http://wordpress.org/extend/plugins/random-image-selector/ Random Image Selector by Keith Murray] | ||
* [http://photomatt.net/scripts/randomimage Random Image Script by PhotoMatt] | * [http://photomatt.net/scripts/randomimage Random Image Script by PhotoMatt] | ||
* [http://www.coffee2code.com/archives/2004/07/08/plugin-random-file/ Coffee2code's Random File Plugin] | * [http://www.coffee2code.com/archives/2004/07/08/plugin-random-file/ Coffee2code's Random File Plugin] | ||
* [http://automaticlabs.com/products/rotator Automaticlabs' Image Rotator] | * [http://automaticlabs.com/products/rotator Automaticlabs' Image Rotator] | ||
More random content, such as text that changes with each page view, can be added to your sidebar with the use of various plugins. This is a great feature if you want to have a random list of links to posts within your site, or random quotes or sayings, or other random bits of information. | More random content, such as text that changes with each page view, can be added to your sidebar with the use of various plugins. This is a great feature if you want to have a random list of links to posts within your site, or random quotes or sayings, or other random bits of information. | ||
* [http://www.coffee2code.com/archives/2004/07/08/plugin-random-file/ Coffee2code's Random File Plugin] | * [http://www.coffee2code.com/archives/2004/07/08/plugin-random-file/ Coffee2code's Random File Plugin] | ||
* [http://www.gerd-riesselmann.net/archives/2005/01/wordpress-randomized-blogroll-plugin/ Randomized Blogroll Plugin] | * [http://www.gerd-riesselmann.net/archives/2005/01/wordpress-randomized-blogroll-plugin/ Randomized Blogroll Plugin] | ||
* [http://xmouse.ithium.net/essays/implementing-a-code-snippet-system/ Code Snippet System] | * [http://xmouse.ithium.net/essays/implementing-a-code-snippet-system/ Code Snippet System] | ||
There are a lot of random things you can add to your sidebar, and you can find many of these at [http://wordpress.org/extend/plugins/search.php?q=random WordPress Extend]. | There are a lot of random things you can add to your sidebar, and you can find many of these at [http://wordpress.org/extend/plugins/search.php?q=random WordPress Extend]. | ||
==Asides== | ==Asides== | ||
Asides are like mini-posts; little tidbits you can post that show up in your sidebar to leave a quick note about a topic or issue. These can be generated by using [[WordPress:Plugins]] or by taking advantage of the [[WordPress:Links Manager|Link Manager]]. | Asides are like mini-posts; little tidbits you can post that show up in your sidebar to leave a quick note about a topic or issue. These can be generated by using [[WordPress:Plugins]] or by taking advantage of the [[WordPress:Links Manager|Link Manager]]. | ||
Within Link Manager, create a link category called '''Elsewhere''', for example. Enter the links you would like to have listed in your Asides section in your sidebar. Give them simple titles and descriptions to help identify the links. Then put the following in your sidebar where you want your Elsewhere Asides to appear: | Within Link Manager, create a link category called '''Elsewhere''', for example. Enter the links you would like to have listed in your Asides section in your sidebar. Give them simple titles and descriptions to help identify the links. Then put the following in your sidebar where you want your Elsewhere Asides to appear: | ||
<pre> | <pre> | ||
第454行: | 第199行: | ||
The Elsewhere category has a category ID of 5 and the template tag [[WordPress:Template_Tags/get_links|get_links()]] displays three links in a list sorted by ID and showing titles to the links. Since it features the ''elsewhere'' style, you can customize the look. You can change the tag to show the descriptions of the links as well as the titles, so they might look like this: | The Elsewhere category has a category ID of 5 and the template tag [[WordPress:Template_Tags/get_links|get_links()]] displays three links in a list sorted by ID and showing titles to the links. Since it features the ''elsewhere'' style, you can customize the look. You can change the tag to show the descriptions of the links as well as the titles, so they might look like this: | ||
<div style="border:1px solid blue; width:150px; margin: 20px; padding:5px"><b>Worth Visiting</b> | <div style="border:1px solid blue; width:150px; margin: 20px; padding:5px"><b>Worth Visiting</b> | ||
第464行: | 第207行: | ||
<li>[[WordPress:#Asides|Cinderella]]<br /> | <li>[[WordPress:#Asides|Cinderella]]<br /> | ||
''One wrong step sends a prince seeking his mystery princess, and a housekeeper becomes a princess.''</li></ul></div> | ''One wrong step sends a prince seeking his mystery princess, and a housekeeper becomes a princess.''</li></ul></div> | ||
There are other ways of creating asides, including using some Plugins which turn "mini-posts" into asides: | There are other ways of creating asides, including using some Plugins which turn "mini-posts" into asides: | ||
* [[WordPress:Adding Asides]] | * [[WordPress:Adding Asides]] | ||
第487行: | 第215行: | ||
* [http://www.coldforged.org/archives/2004/11/15/wordpress-asides-coldforged-style/ Coldforged's Asides] | * [http://www.coldforged.org/archives/2004/11/15/wordpress-asides-coldforged-style/ Coldforged's Asides] | ||
* [http://russ.innereyes.com/2005/01/the-rustasides-wp-15-plugin/ Innereyes' Rustasides] | * [http://russ.innereyes.com/2005/01/the-rustasides-wp-15-plugin/ Innereyes' Rustasides] | ||
You can find more [[WordPress:Plugins]] and ways to create Asides by visiting the various WordPress Plugins sites listed below. | You can find more [[WordPress:Plugins]] and ways to create Asides by visiting the various WordPress Plugins sites listed below. | ||
==Buttons and Icons== | ==Buttons and Icons== | ||
People enjoy listing their links and accomplishments in their sidebar highlighted by buttons and icons. Instead of listing a text link that proves your site has [[WordPress:Validating_a_Website|valid XHTML or CSS]], you can create a link using the icon "awarded" to sites which pass the test. If your site has won an award, or is part of a webring, or is a member of a group, you can provide a graphic link to show that off, too. You can even use graphics to create links to your RSS feeds. | People enjoy listing their links and accomplishments in their sidebar highlighted by buttons and icons. Instead of listing a text link that proves your site has [[WordPress:Validating_a_Website|valid XHTML or CSS]], you can create a link using the icon "awarded" to sites which pass the test. If your site has won an award, or is part of a webring, or is a member of a group, you can provide a graphic link to show that off, too. You can even use graphics to create links to your RSS feeds. | ||
The WordPress Default and Classic Themes provide a text link to validate your site. It looks like this: | The WordPress Default and Classic Themes provide a text link to validate your site. It looks like this: | ||
<pre><li><a href="http://validator.w3.org/check/referer" | <pre><li><a href="http://validator.w3.org/check/referer" | ||
title="This page validates as XHTML 1.0 Transitional"> | title="This page validates as XHTML 1.0 Transitional"> | ||
Valid <abbr title="eXtensible HyperText Markup | Valid <abbr title="eXtensible HyperText Markup | ||
Language">XHTML</abbr></a></li></pre> | Language">XHTML</abbr></a></li></pre> | ||
To replace the link with a graphic link, like the "Valid XHTML" icon, copy the icon to your site and try the following example, changing the file name and folders to match your site: | To replace the link with a graphic link, like the "Valid XHTML" icon, copy the icon to your site and try the following example, changing the file name and folders to match your site: | ||
<pre><li><a href="http://validator.w3.org/check/referer" | <pre><li><a href="http://validator.w3.org/check/referer" | ||
title="This page validates as XHTML 1.0 Transitional"><img | title="This page validates as XHTML 1.0 Transitional"><img | ||
src="http://example.com/graphics/icons/valid-xhtml10.gif" | src="http://example.com/graphics/icons/valid-xhtml10.gif" | ||
alt="Valid XHTML 1.0!" height="31" width="88" /></a></li></pre> | alt="Valid XHTML 1.0!" height="31" width="88" /></a></li></pre> | ||
The same technique can be used to highlight an award your site has won or any other graphic link: | The same technique can be used to highlight an award your site has won or any other graphic link: | ||
<pre><li><a href="http://example2.com/" | <pre><li><a href="http://example2.com/" | ||
第551行: | 第241行: | ||
src="http://example.com/graphics/icons/award42.gif" | src="http://example.com/graphics/icons/award42.gif" | ||
alt="Award for Award Winning Site" height="50" width="50" /></a></li></pre> | alt="Award for Award Winning Site" height="50" width="50" /></a></li></pre> | ||
Linking to graphics for [[WordPress:Introduction_to_Blogging#Feeds|Feeds]] is a little different from putting graphics in links. WordPress uses [[WordPress:Template Tags]] to display and coordinate feeds within a WordPress site. Without a graphic, a link to a RSS 2.0 Feed looks like this: | Linking to graphics for [[WordPress:Introduction_to_Blogging#Feeds|Feeds]] is a little different from putting graphics in links. WordPress uses [[WordPress:Template Tags]] to display and coordinate feeds within a WordPress site. Without a graphic, a link to a RSS 2.0 Feed looks like this: | ||
<pre><li><a href="feed:<?php bloginfo('rss2_url'); ?>" | <pre><li><a href="feed:<?php bloginfo('rss2_url'); ?>" | ||
第568行: | 第250行: | ||
The template tag [[WordPress:Template_Tags/bloginfo|bloginfo()]] has parameters for the different feeds so you don't have to come up with the URL yourself. It's automatic. Now, let's replace the text with a graphic. | The template tag [[WordPress:Template_Tags/bloginfo|bloginfo()]] has parameters for the different feeds so you don't have to come up with the URL yourself. It's automatic. Now, let's replace the text with a graphic. | ||
It used to be common that Feeds were identified by an orange colored box, but now, RSS Feeds can look like anything, but they tend to have a common look so they are identifiable from site to site. They feature a horizontal box with two "columns" of color, one bright and one light, saying '''RSS|FEED''' or '''RSS|Valid'''. You can make it say whatever you want, as long as it points your visitors towards this feature. [http://www.feedforall.com/public/rss-graphic-tool.htm Feedforall's DYI Feed Graphic Designer] allows you to easily design your own feed icon. | It used to be common that Feeds were identified by an orange colored box, but now, RSS Feeds can look like anything, but they tend to have a common look so they are identifiable from site to site. They feature a horizontal box with two "columns" of color, one bright and one light, saying '''RSS|FEED''' or '''RSS|Valid'''. You can make it say whatever you want, as long as it points your visitors towards this feature. [http://www.feedforall.com/public/rss-graphic-tool.htm Feedforall's DYI Feed Graphic Designer] allows you to easily design your own feed icon. | ||
The [http://feedicons.com/ Feed Icons] site provides graphical icons using the icon created by the Mozilla Foundation and later adopted by Microsoft. A graphical icon helps avoid some of the issues currently associated with the wide variety of text-based icons. | The [http://feedicons.com/ Feed Icons] site provides graphical icons using the icon created by the Mozilla Foundation and later adopted by Microsoft. A graphical icon helps avoid some of the issues currently associated with the wide variety of text-based icons. | ||
To use a different icon, here is how it might look: | To use a different icon, here is how it might look: | ||
<pre><li><a href="feed:<?php bloginfo('rss2_url'); ?>" | <pre><li><a href="feed:<?php bloginfo('rss2_url'); ?>" | ||
第595行: | 第263行: | ||
We've given you some examples of how to create graphic links, buttons, or icons in your sidebar, the rest is up to you. | We've given you some examples of how to create graphic links, buttons, or icons in your sidebar, the rest is up to you. | ||
==Weather, Location, and Times== | ==Weather, Location, and Times== | ||
There are so many things you could put into your sidebar, we could go on forever. Some of the most popular elements are weather bulletins for the weather wherever the site administrator calls home, GPS and location information, and even the time in different time zones. There is even a plugin that you can use to list upcoming dates, events, and holidays, with a countdown until the date. | There are so many things you could put into your sidebar, we could go on forever. Some of the most popular elements are weather bulletins for the weather wherever the site administrator calls home, GPS and location information, and even the time in different time zones. There is even a plugin that you can use to list upcoming dates, events, and holidays, with a countdown until the date. | ||
If you can't find a plugin that does what you want it to do in your sidebar, you can also [[WordPress:Writing_a_Plugin|write your own plugin]] and share that with the world to use in their sidebars. | If you can't find a plugin that does what you want it to do in your sidebar, you can also [[WordPress:Writing_a_Plugin|write your own plugin]] and share that with the world to use in their sidebars. | ||
==Plugin Resources== | ==Plugin Resources== | ||
We've only mentioned a few of the many different [[WordPress:Plugins]] you can use in the designing and customization of your sidebar in WordPress. You can find these and more from the various plugin resources listed below or search the Internet for more. | We've only mentioned a few of the many different [[WordPress:Plugins]] you can use in the designing and customization of your sidebar in WordPress. You can find these and more from the various plugin resources listed below or search the Internet for more. | ||
Follow the instructions very carefully as provided by the plugin author. If you have trouble with the plugin, contact the author's site first, then the author, and if that doesn't help, do a [[WordPress:Finding_WordPress_Help|search on the Internet for help]] and then visit the [http://www.wordpress.org/support WordPress Forum] for further assistance. | Follow the instructions very carefully as provided by the plugin author. If you have trouble with the plugin, contact the author's site first, then the author, and if that doesn't help, do a [[WordPress:Finding_WordPress_Help|search on the Internet for help]] and then visit the [http://www.wordpress.org/support WordPress Forum] for further assistance. | ||
* [[WordPress:Plugins|WordPress Codex Plugins List]] | * [[WordPress:Plugins|WordPress Codex Plugins List]] | ||
第630行: | 第279行: | ||
* [http://www.bloggingpro.com/archives/category/wordpress-plugins/ BloggingPro WordPress Plugins] | * [http://www.bloggingpro.com/archives/category/wordpress-plugins/ BloggingPro WordPress Plugins] | ||
* [http://www.google.com/search?rls=en&q=site:wordpress.org+plugin&ie=UTF-8&oe=UTF-8 Search Google for More WordPress Plugins] | * [http://www.google.com/search?rls=en&q=site:wordpress.org+plugin&ie=UTF-8&oe=UTF-8 Search Google for More WordPress Plugins] | ||