编辑“WordPress:Site Architecture 1.5”
该编辑可以被撤销。 请检查下面的对比以核实您想要撤销的内容,然后发布下面的更改以完成撤销。
最后版本 | 您的文本 | ||
第1行: | 第1行: | ||
__TOC__ | __TOC__ | ||
The following is a description of the general site architecture for WordPress v1.5. WordPress Theme authors are encouraged to maintain much of the core site architecture of XHTML tags and CSS selectors, but they are not required to. Therefore, this is just a general outline and your Theme may be different. | The following is a description of the general site architecture for WordPress v1.5. WordPress Theme authors are encouraged to maintain much of the core site architecture of XHTML tags and CSS selectors, but they are not required to. Therefore, this is just a general outline and your Theme may be different. | ||
== Template Driven Pages == | == Template Driven Pages == | ||
Before we get to the [[WordPress:#Core Structure|Core Structure]] of the WordPress page architecture, you need to understand that WordPress uses [[WordPress:Templates|template files]] to generate the final page "look" and content. For example, when viewing the front page of your WordPress site, you are actually viewing several template files: | Before we get to the [[WordPress:#Core Structure|Core Structure]] of the WordPress page architecture, you need to understand that WordPress uses [[WordPress:Templates|template files]] to generate the final page "look" and content. For example, when viewing the front page of your WordPress site, you are actually viewing several template files: | ||
* <tt>index.php</tt> | * <tt>index.php</tt> | ||
第27行: | 第12行: | ||
When you view a single post page, you might be viewing the following template files: | When you view a single post page, you might be viewing the following template files: | ||
* <tt>single.php</tt> | * <tt>single.php</tt> | ||
第42行: | 第20行: | ||
On a multi-post page like categories, archives, and search, you might be viewing any combination of the following template files: | On a multi-post page like categories, archives, and search, you might be viewing any combination of the following template files: | ||
* <tt>index.php</tt> | * <tt>index.php</tt> | ||
第64行: | 第30行: | ||
We've specified which CSS selectors belong in which template files as much as possible in the following architecture specifications. | We've specified which CSS selectors belong in which template files as much as possible in the following architecture specifications. | ||
== Core Structure == | == Core Structure == | ||
The core structure of a WordPress site represents the main containers which hold the page's content. The core structure of a WordPress site features, at a minimum, are: | The core structure of a WordPress site represents the main containers which hold the page's content. The core structure of a WordPress site features, at a minimum, are: | ||
* Header | * Header | ||
第79行: | 第39行: | ||
* Content | * Content | ||
* Footer | * Footer | ||
These are the main containers in which the most important parts of the page are "contained". Remember, the core structure is like building blocks. They are dependent upon each other. If you change one, you have to change the others. | These are the main containers in which the most important parts of the page are "contained". Remember, the core structure is like building blocks. They are dependent upon each other. If you change one, you have to change the others. | ||
'''Classic Theme''' | '''Classic Theme''' | ||
<pre><body> | <pre><body> | ||
第102行: | 第52行: | ||
</div> | </div> | ||
</body></pre> | </body></pre> | ||
'''Default Theme''' | '''Default Theme''' | ||
<pre><body> | <pre><body> | ||
第138行: | 第65行: | ||
While one calls their sidebar <tt>sidebar</tt> and the other <tt>menu</tt>, the main difference between the two Theme's core structures is the use of the header and footer. For the Classic Theme, the header is in an <tt>h1</tt> tag and the footer is in a paragraph tag. In the Default Theme, the header is in a <tt>div</tt> called <tt>header</tt> and the footer is in the <tt>footer div</tt>. | While one calls their sidebar <tt>sidebar</tt> and the other <tt>menu</tt>, the main difference between the two Theme's core structures is the use of the header and footer. For the Classic Theme, the header is in an <tt>h1</tt> tag and the footer is in a paragraph tag. In the Default Theme, the header is in a <tt>div</tt> called <tt>header</tt> and the footer is in the <tt>footer div</tt>. | ||
Both Themes feature a container that encompasses or "wraps" itself around the entire page. This wrapping container allows for more definitive control over the overall structure, often used in combination with the <tt>body</tt> tag. In different WordPress Themes, these are also found by these names: | Both Themes feature a container that encompasses or "wraps" itself around the entire page. This wrapping container allows for more definitive control over the overall structure, often used in combination with the <tt>body</tt> tag. In different WordPress Themes, these are also found by these names: | ||
* container | * container | ||
* page | * page | ||
* wrap | * wrap | ||
* rap | * rap | ||
Some Themes may add a second, third, or even fourth sidebar, creating a column effect. Or they may include additional wrappers around the entire page or specific containers, but this is the core structure. | Some Themes may add a second, third, or even fourth sidebar, creating a column effect. Or they may include additional wrappers around the entire page or specific containers, but this is the core structure. | ||
=== The Modular Template Files === | === The Modular Template Files === | ||
Based upon the premise of building blocks, WordPress Themes divide up the core structure between blocks called [[WordPress:Templates|template files]]. These are the template files: | Based upon the premise of building blocks, WordPress Themes divide up the core structure between blocks called [[WordPress:Templates|template files]]. These are the template files: | ||
* Header - <tt>header.php</tt> | * Header - <tt>header.php</tt> | ||
第171行: | 第83行: | ||
* Content - <tt>index.php</tt>, <tt>single.php</tt>, <tt>page.php</tt>, <tt>category.php</tt>, <tt>author.php</tt>, <tt>search.php</tt>, etc. | * Content - <tt>index.php</tt>, <tt>single.php</tt>, <tt>page.php</tt>, <tt>category.php</tt>, <tt>author.php</tt>, <tt>search.php</tt>, etc. | ||
* Footer - <tt>footer.php</tt> | * Footer - <tt>footer.php</tt> | ||
As you can see, the content container can be found across many other template files. These are generated dependent upon the user's request. If they click on a category, the category template is displayed. If they choose a [[WordPress:Pages|Page]], the page template is used. And so on. | As you can see, the content container can be found across many other template files. These are generated dependent upon the user's request. If they click on a category, the category template is displayed. If they choose a [[WordPress:Pages|Page]], the page template is used. And so on. | ||
Combined with the [[WordPress:The Loop|WordPress Loop]] and queries, a variety of templates can be generated, and the web page designer can style all of these differently and independently from each other. | Combined with the [[WordPress:The Loop|WordPress Loop]] and queries, a variety of templates can be generated, and the web page designer can style all of these differently and independently from each other. | ||
== Interior Structures == | == Interior Structures == | ||
Within these core structural containers are smaller building blocks that hold the specific content within the parent container. WordPress Themes can feature a variety of these, but we are going to concentrate on the two Themes that come with WordPress. Most WordPress Themes are based on these two Themes. | Within these core structural containers are smaller building blocks that hold the specific content within the parent container. WordPress Themes can feature a variety of these, but we are going to concentrate on the two Themes that come with WordPress. Most WordPress Themes are based on these two Themes. | ||
=== Header === | === Header === | ||
The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the ''masthead, head, title'', and ''banner''. In all WordPress Themes, the <tt>header</tt> is found within the <tt>header.php</tt> template file. | The header is the structure that traditionally sits at the top of a web page. It contains the title of the website. It may also be referred to as the ''masthead, head, title'', and ''banner''. In all WordPress Themes, the <tt>header</tt> is found within the <tt>header.php</tt> template file. | ||
The Classic Theme features the simplest header code: | The Classic Theme features the simplest header code: | ||
<pre><h1 id="header"></h1></pre> | <pre><h1 id="header"></h1></pre> | ||
The Default Theme has a more complex header code: | The Default Theme has a more complex header code: | ||
<pre><div id="header"> | <pre><div id="header"> | ||
第229行: | 第111行: | ||
While the styles for the Classic Theme are found within the Theme's <tt>style.css</tt> style sheet file, styles for the Default Theme are found within the <tt>style.css</tt> and the <tt><head></tt> of the <tt>header.php</tt> [[WordPress:Templates|template file]]. Working with these styles is extensively covered in [[WordPress:Designing Headers]]. | While the styles for the Classic Theme are found within the Theme's <tt>style.css</tt> style sheet file, styles for the Default Theme are found within the <tt>style.css</tt> and the <tt><head></tt> of the <tt>header.php</tt> [[WordPress:Templates|template file]]. Working with these styles is extensively covered in [[WordPress:Designing Headers]]. | ||
=== Content === | === Content === | ||
The content container in WordPress plays the most important role. It holds the [[WordPress:The Loop|WordPress Loop]] which dictates the generation of content on the page depending upon the request by the user. | The content container in WordPress plays the most important role. It holds the [[WordPress:The Loop|WordPress Loop]] which dictates the generation of content on the page depending upon the request by the user. | ||
The Classic Theme has the simplest content structure: | The Classic Theme has the simplest content structure: | ||
<pre><div id="content"> | <pre><div id="content"> | ||
第253行: | 第128行: | ||
<div class="feedback">Comments (2)</div> | <div class="feedback">Comments (2)</div> | ||
</div></pre> | </div></pre> | ||
The Classic Theme hosts containers for the Date, Title, Post Meta Data, Post Content, and Feedback (number of comments). It also showcases a powerful feature. The ability to individually style a single post's look. | The Classic Theme hosts containers for the Date, Title, Post Meta Data, Post Content, and Feedback (number of comments). It also showcases a powerful feature. The ability to individually style a single post's look. | ||
<pre><div class="post" id="post-1"></pre> | <pre><div class="post" id="post-1"></pre> | ||
The <tt>post</tt> CSS class selector applies the <tt>post</tt> styles to this container, but it also has an ID which is generated automatically by WordPress. The code looks like this: | The <tt>post</tt> CSS class selector applies the <tt>post</tt> styles to this container, but it also has an ID which is generated automatically by WordPress. The code looks like this: | ||
<pre><div class="post" id="post-<?php the_ID(); ?>"></pre> | <pre><div class="post" id="post-<?php the_ID(); ?>"></pre> | ||
The use of the template tag <tt>[[WordPress:Template Tags/the_ID|the_ID()]]</tt> generates the ID number of the post. This provides a unique identifier for internal page links as well as for styles. This post could have a style for <tt>post-1</tt>, as could <tt>post-2</tt>. While it is a bit excessive to feature a style for every post, there may be a post or two you need to have look a little different. Some plugins may use this identifier to automatically change the look of different posts, too. | The use of the template tag <tt>[[WordPress:Template Tags/the_ID|the_ID()]]</tt> generates the ID number of the post. This provides a unique identifier for internal page links as well as for styles. This post could have a style for <tt>post-1</tt>, as could <tt>post-2</tt>. While it is a bit excessive to feature a style for every post, there may be a post or two you need to have look a little different. Some plugins may use this identifier to automatically change the look of different posts, too. | ||
The Default Theme content container features a different look for '''multi-post views''' like the front page, categories, archives, and searches, and a different '''single post view''' for single posts. The multi-post view looks like this: | The Default Theme content container features a different look for '''multi-post views''' like the front page, categories, archives, and searches, and a different '''single post view''' for single posts. The multi-post view looks like this: | ||
<pre><div id="content" class="narrowcolumn"> | <pre><div id="content" class="narrowcolumn"> | ||
第325行: | 第157行: | ||
There is a lot going on here. Let's break it down. | There is a lot going on here. Let's break it down. | ||
;<tt><div id="content" class="narrowcolumn"></tt>:In the '''multi-post views''', it features a <tt>class="narrowcolumn"</tt> and in the '''single post views''', it features <tt>class="widecolumn"</tt> and the sidebar is not generated on that page, allowing the post to be viewed "wide" across the width of the content area. | ;<tt><div id="content" class="narrowcolumn"></tt>:In the '''multi-post views''', it features a <tt>class="narrowcolumn"</tt> and in the '''single post views''', it features <tt>class="widecolumn"</tt> and the sidebar is not generated on that page, allowing the post to be viewed "wide" across the width of the content area. | ||
;<tt><div class="post" id="post-1"></tt> :Like the Classic Theme, this division sets up the style for <tt>post</tt> and the identifier for <tt>post-X</tt>, with <tt>X</tt> representing the post's unique ID number. This allows for customizing the specific post's look. | ;<tt><div class="post" id="post-1"></tt> :Like the Classic Theme, this division sets up the style for <tt>post</tt> and the identifier for <tt>post-X</tt>, with <tt>X</tt> representing the post's unique ID number. This allows for customizing the specific post's look. | ||
;<tt><h2>Post Title</h2></tt> :This encompasses the post's title code, styled by the <tt><h2></tt> tag. | ;<tt><h2>Post Title</h2></tt> :This encompasses the post's title code, styled by the <tt><h2></tt> tag. | ||
;<tt><small>Date</small></tt> :The date code is surrounded and styled by the <tt>small</tt> tag. | ;<tt><small>Date</small></tt> :The date code is surrounded and styled by the <tt>small</tt> tag. | ||
;<tt><div class="entry"></tt> :The post content is styled by a combination of the styles within the <tt>entry</tt> CSS selectors and the paragraph tag. | ;<tt><div class="entry"></tt> :The post content is styled by a combination of the styles within the <tt>entry</tt> CSS selectors and the paragraph tag. | ||
;<tt><p class="postmetadata">Post Meta Data Section</p></tt> :The [[WordPress:Post Meta Data Section]] contains the data details about the post such as the date, time, and categories the post belongs to. | ;<tt><p class="postmetadata">Post Meta Data Section</p></tt> :The [[WordPress:Post Meta Data Section]] contains the data details about the post such as the date, time, and categories the post belongs to. | ||
;<tt><div class="navigation"></tt> :The [[WordPress:Next and Previous Links]] are styled in the <tt>navigation</tt>. They also include classes for <tt>alignleft</tt> for the Previous Post and <tt>alignright</tt> for the Next Post in chronological order. | ;<tt><div class="navigation"></tt> :The [[WordPress:Next and Previous Links]] are styled in the <tt>navigation</tt>. They also include classes for <tt>alignleft</tt> for the Previous Post and <tt>alignright</tt> for the Next Post in chronological order. | ||
These elements are shifted around in the '''single post view''' content structure: | These elements are shifted around in the '''single post view''' content structure: | ||
<pre><div id="content" class="widecolumn"> | <pre><div id="content" class="widecolumn"> | ||
第374行: | 第184行: | ||
</div> | </div> | ||
</pre> | </pre> | ||
The <tt>widecolumn</tt> class is featured to stretch the content across the page to fill in the absence of the sidebar. The <tt>navigation</tt> has been moved up to the top. And the Post Meta Data is now incorporated into the <tt>entrytext</tt> parent container and styled differently with an <tt>alt</tt> style added. | The <tt>widecolumn</tt> class is featured to stretch the content across the page to fill in the absence of the sidebar. The <tt>navigation</tt> has been moved up to the top. And the Post Meta Data is now incorporated into the <tt>entrytext</tt> parent container and styled differently with an <tt>alt</tt> style added. | ||
These two examples from the Default Theme give you just a glimpse into the myriad ways your WordPress site can be customized. | These two examples from the Default Theme give you just a glimpse into the myriad ways your WordPress site can be customized. | ||
==== Comments ==== | ==== Comments ==== | ||
Comments may be featured on the single post view or in a popup window. The overall styles for the two sets of comments remain basically the same. The two template files are <tt>comments.php</tt> and <tt>comments-popup.php</tt> | Comments may be featured on the single post view or in a popup window. The overall styles for the two sets of comments remain basically the same. The two template files are <tt>comments.php</tt> and <tt>comments-popup.php</tt> | ||
===== Classic Theme Comments ===== | ===== Classic Theme Comments ===== | ||
<pre><h2 id="comments">1 Comment | <pre><h2 id="comments">1 Comment | ||
第478行: | 第246行: | ||
</form> | </form> | ||
</div></pre> | </div></pre> | ||
While individual sections of the comments feature styling reference, the Classic Theme has no general comment division or group style reference, one could be easily added. | While individual sections of the comments feature styling reference, the Classic Theme has no general comment division or group style reference, one could be easily added. | ||
;#comments h2:Styles the title at the top of the comments list which says "Comments 4 Leave a Comment", with the latter part of the sentence in a link that jumps to <tt><h2 id="postcomment">Leave a comment</h2></tt>. | ;#comments h2:Styles the title at the top of the comments list which says "Comments 4 Leave a Comment", with the latter part of the sentence in a link that jumps to <tt><h2 id="postcomment">Leave a comment</h2></tt>. | ||
;#comment-n :Comments are given a unique ID number, signified here by the letter <tt>n</tt>. This allows them to be styled individually. | ;#comment-n :Comments are given a unique ID number, signified here by the letter <tt>n</tt>. This allows them to be styled individually. | ||
;#comments ol :This begins the '''ordered list''' of the comments, counting down from one, and sets the overall style of the comments list. | ;#comments ol :This begins the '''ordered list''' of the comments, counting down from one, and sets the overall style of the comments list. | ||
;#comments li :Style reference for each comment on the list. | ;#comments li :Style reference for each comment on the list. | ||
;#comments p :This paragraph tag styles the actual comments on the comment list. | ;#comments p :This paragraph tag styles the actual comments on the comment list. | ||
;#comment cite :This use of the <tt>cite</tt> controls the look of the commenter's name. It usually states "Name says:" in the comments list. | ;#comment cite :This use of the <tt>cite</tt> controls the look of the commenter's name. It usually states "Name says:" in the comments list. | ||
;#comments h2 or #postcomment :The <tt>h2</tt> heading can be styled two ways, as <tt>#comments h2</tt> or <tt>#postcomment</tt>. The latter is used by the "Leave a Comment" link from the top of the comments section, too. | ;#comments h2 or #postcomment :The <tt>h2</tt> heading can be styled two ways, as <tt>#comments h2</tt> or <tt>#postcomment</tt>. The latter is used by the "Leave a Comment" link from the top of the comments section, too. | ||
;#commentform :Style reference for the overall "form" for inputting comments. Each input area has it's own ID. | ;#commentform :Style reference for the overall "form" for inputting comments. Each input area has it's own ID. | ||
;#author :ID reference for the comment author's input area. | ;#author :ID reference for the comment author's input area. | ||
;#comments small :The <tt><small></tt> tag is used in several places in the Classic Theme. This usage surrounds the text in the '''comment submit form''' and the text for the '''list of tags''' that can be used in the comment. | ;#comments small :The <tt><small></tt> tag is used in several places in the Classic Theme. This usage surrounds the text in the '''comment submit form''' and the text for the '''list of tags''' that can be used in the comment. | ||
;#email :ID reference for the comment author's email. | ;#email :ID reference for the comment author's email. | ||
;#url :ID reference for the comment author's URL. | ;#url :ID reference for the comment author's URL. | ||
;#comment :ID reference for the comment input textarea. It does not style the final generated comment, just the input box. | ;#comment :ID reference for the comment input textarea. It does not style the final generated comment, just the input box. | ||
;#comment #submit :There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button. | ;#comment #submit :There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button. | ||
===== Default Theme Comments ===== | ===== Default Theme Comments ===== | ||
The Default Theme comments feature a loop query within the <tt>comments.php</tt> and <tt>comments-popup.php</tt> which changes some of the information depending upon if comments are open, closed, and any present. If the comments are open or closed and no comments have been made, this information will be displayed within the <tt><h3 id="comments"></tt> tag. | The Default Theme comments feature a loop query within the <tt>comments.php</tt> and <tt>comments-popup.php</tt> which changes some of the information depending upon if comments are open, closed, and any present. If the comments are open or closed and no comments have been made, this information will be displayed within the <tt><h3 id="comments"></tt> tag. | ||
<pre><h3 id="comments">One Response to "Hello world!"</h3> | <pre><h3 id="comments">One Response to "Hello world!"</h3> | ||
第725行: | 第316行: | ||
While individual sections of the comments feature styling reference, the Default Theme has no general comment division or group style reference, though one could be easily added. | While individual sections of the comments feature styling reference, the Default Theme has no general comment division or group style reference, though one could be easily added. | ||
;h3 #comments:Styles the <tt><h3></tt> tag for the "number of responses to the post" heading. | ;h3 #comments:Styles the <tt><h3></tt> tag for the "number of responses to the post" heading. | ||
;#commentlist ol :Styles the "ordered list" of the comments list. | ;#commentlist ol :Styles the "ordered list" of the comments list. | ||
;.alt li and #commenet-n :The comment list items have two style references. The first one is the class <tt>alt</tt> and the second is the comment ID number signified here by the letter <tt>n</tt>. This allows them to be styled individually. | ;.alt li and #commenet-n :The comment list items have two style references. The first one is the class <tt>alt</tt> and the second is the comment ID number signified here by the letter <tt>n</tt>. This allows them to be styled individually. | ||
;cite :The tag <tt>cite</tt> frames the "Name says:" and link to the comment author's URL. | ;cite :The tag <tt>cite</tt> frames the "Name says:" and link to the comment author's URL. | ||
;.commentmetadata small :The <tt><small></tt> tag has a class of <tt>commentmetadata</tt> which allows the date and time of the post to be styled. | ;.commentmetadata small :The <tt><small></tt> tag has a class of <tt>commentmetadata</tt> which allows the date and time of the post to be styled. | ||
;ol #commentlist p :Styles the paragraph within the ordered list of comments. | ;ol #commentlist p :Styles the paragraph within the ordered list of comments. | ||
;#respond h3 :Styles the heading for "Leave a Reply". | ;#respond h3 :Styles the heading for "Leave a Reply". | ||
;#commentform :Style reference for the overall "form" for inputting comments. Each input area has it's own ID. | ;#commentform :Style reference for the overall "form" for inputting comments. Each input area has it's own ID. | ||
;#author :ID reference for the comment author's input area. | ;#author :ID reference for the comment author's input area. | ||
;#comments small :The <tt><small></tt> tag is used in several places in the Classic Theme. This usage surrounds the text in the '''comment submit form'' and the text for the '''list of tags''' that can be used in the comment. | ;#comments small :The <tt><small></tt> tag is used in several places in the Classic Theme. This usage surrounds the text in the '''comment submit form'' and the text for the '''list of tags''' that can be used in the comment. | ||
;#email :ID reference for the comment author's email. | ;#email :ID reference for the comment author's email. | ||
;#url :ID reference for the comment author's URL. | ;#url :ID reference for the comment author's URL. | ||
;#comment :ID reference for the comment input textarea. It does not style the final generated comment, just the input box. | ;#comment :ID reference for the comment input textarea. It does not style the final generated comment, just the input box. | ||
;#comment #submit :There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button. | ;#comment #submit :There are two submit buttons in the Classic Theme, for search and comment submissions. This is the submit comment button. | ||
===== Popup Comments ===== | ===== Popup Comments ===== | ||
The Classic and Default Themes' <tt>comments-popup.php</tt> template file is essentially the same. They use the layout for the [[WordPress:#Default Theme Comments|Classic Theme comment structure]]. While the Classic Theme uses <tt><h2></tt> headings and the Default Theme uses <tt><h3></tt> headings for the title headings in their comments, in the <tt>comments-popup.php</tt> template file, they both use the <tt><h2></tt> heading tag. | The Classic and Default Themes' <tt>comments-popup.php</tt> template file is essentially the same. They use the layout for the [[WordPress:#Default Theme Comments|Classic Theme comment structure]]. While the Classic Theme uses <tt><h2></tt> headings and the Default Theme uses <tt><h3></tt> headings for the title headings in their comments, in the <tt>comments-popup.php</tt> template file, they both use the <tt><h2></tt> heading tag. | ||
<pre><body id="commentspopup"> | <pre><body id="commentspopup"> | ||
第797行: | 第341行: | ||
....Classic Theme commment section..... | ....Classic Theme commment section..... | ||
...Classic Theme footer....</pre> | ...Classic Theme footer....</pre> | ||
The <tt>body</tt> tag sets the style for the overall page with <tt>#commentspopup</tt>. The <tt>h2</tt> heading begins the comments section. | The <tt>body</tt> tag sets the style for the overall page with <tt>#commentspopup</tt>. The <tt>h2</tt> heading begins the comments section. | ||
If you make modifications to the structure of the tags within the header and footer of the overall Theme, ensure those structural changes are applied to the comments popup template, especially if you will be [[WordPress:Designing Themes for Public Release|releasing the Theme to the public]]. | If you make modifications to the structure of the tags within the header and footer of the overall Theme, ensure those structural changes are applied to the comments popup template, especially if you will be [[WordPress:Designing Themes for Public Release|releasing the Theme to the public]]. | ||
=== Sidebar === | === Sidebar === | ||
As you saw with the Default Theme, the sidebar can be visible or not, depending upon the template file in use. The sidebar, in general, can be simple or complex. WordPress Themes often feature information within the sidebar in '''nested lists'''. There is a step-by-step guide for the sidebar at [[WordPress:Customizing Your Sidebar]] and more information on [[WordPress:Styling Lists with CSS]], too. | As you saw with the Default Theme, the sidebar can be visible or not, depending upon the template file in use. The sidebar, in general, can be simple or complex. WordPress Themes often feature information within the sidebar in '''nested lists'''. There is a step-by-step guide for the sidebar at [[WordPress:Customizing Your Sidebar]] and more information on [[WordPress:Styling Lists with CSS]], too. | ||
In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title. | In general, the WordPress sidebar features titles of the various sections within a list, with the section items in a nested list below the title. | ||
The Classic Theme sidebar looks like this, with the links removed for simplification: | The Classic Theme sidebar looks like this, with the links removed for simplification: | ||
<pre><div id="menu"> | <pre><div id="menu"> | ||
第875行: | 第401行: | ||
</ul> | </ul> | ||
</div></pre> | </div></pre> | ||
Most of these are self-explanatory. Each set of links has its own CSS selector: [[WordPress:Pages]], categories, archives, search, and meta. | Most of these are self-explanatory. Each set of links has its own CSS selector: [[WordPress:Pages]], categories, archives, search, and meta. | ||
==== Pages and Link Categories ==== | ==== Pages and Link Categories ==== | ||
The [[WordPress:Pages]] and [[WordPress:Links Manager|Links]] category, labeled "Blogroll", uses the <tt>[[WordPress:Template Tags/get_links_list|<?php get_links_list(); ?>]]</tt> and <tt>[[WordPress:Template Tags/wp_list_pages|<?php wp_list_pages(); ?>]]</tt> template tags which automatically generates a heading. | The [[WordPress:Pages]] and [[WordPress:Links Manager|Links]] category, labeled "Blogroll", uses the <tt>[[WordPress:Template Tags/get_links_list|<?php get_links_list(); ?>]]</tt> and <tt>[[WordPress:Template Tags/wp_list_pages|<?php wp_list_pages(); ?>]]</tt> template tags which automatically generates a heading. | ||
For the '''Links''' category, it generates an <tt>h2</tt> heading for that set of links. This means you can style the <tt>menu h2</tt> heading to look differently from the rest of the headings, or, if you want them to all look the same, make sure that the <tt>menu h2</tt> style ''matches'' the rest of the category styles which are not automatically generated. | For the '''Links''' category, it generates an <tt>h2</tt> heading for that set of links. This means you can style the <tt>menu h2</tt> heading to look differently from the rest of the headings, or, if you want them to all look the same, make sure that the <tt>menu h2</tt> style ''matches'' the rest of the category styles which are not automatically generated. | ||
The '''Pages''' template tag generates <tt>pagenav</tt> as the heading and then identifies the pages in a new way. As a general list viewed on mutli-post and single post views, the Page list items feature a <tt>class="page_item"</tt> to style those links. When viewing an individual Page, that Page's link will change to <tt>class="current_page_item"</tt>, which can then be styled to look differently from the rest of the Page links. | The '''Pages''' template tag generates <tt>pagenav</tt> as the heading and then identifies the pages in a new way. As a general list viewed on mutli-post and single post views, the Page list items feature a <tt>class="page_item"</tt> to style those links. When viewing an individual Page, that Page's link will change to <tt>class="current_page_item"</tt>, which can then be styled to look differently from the rest of the Page links. | ||
==== Categories, Archives, and Meta ==== | ==== Categories, Archives, and Meta ==== | ||
The other sidebar section titles, ''categories'', ''archives'', ''meta'', and others, do not use template tags which generate their own titles. These are set inside of PHP statements which "print" the text on the page. While these could be put inside of [[WordPress:Designing Headings|heading tags]], WordPress uses the <tt>_e()</tt> function to display or "echo" the text titles while also marking the text as a possible target for language translation. If you will be [[WordPress:Theme Development|developing your theme]] for [[WordPress:Designing Themes for Public Release|public release]], using the echo functions is highly recommended. | The other sidebar section titles, ''categories'', ''archives'', ''meta'', and others, do not use template tags which generate their own titles. These are set inside of PHP statements which "print" the text on the page. While these could be put inside of [[WordPress:Designing Headings|heading tags]], WordPress uses the <tt>_e()</tt> function to display or "echo" the text titles while also marking the text as a possible target for language translation. If you will be [[WordPress:Theme Development|developing your theme]] for [[WordPress:Designing Themes for Public Release|public release]], using the echo functions is highly recommended. | ||
You can style these individually or all the same. Some Themes, like the Default Theme, put all these in <tt><h2></tt> headings so the list headings will all look the same. Therefore, they may or may not use style references for each section. You may add them if you need them to change the look of each section of links. | You can style these individually or all the same. Some Themes, like the Default Theme, put all these in <tt><h2></tt> headings so the list headings will all look the same. Therefore, they may or may not use style references for each section. You may add them if you need them to change the look of each section of links. | ||
==== Search Form ==== | ==== Search Form ==== | ||
The search form is found within the <tt>searchform.php</tt>. It may be found in different locations within the sidebar. To style the overall search form, use the <tt>search</tt> ID. Here is a list of the individual areas of the search form which may be styled by default. You may add style classes to gain more control over the look of your search form. | The search form is found within the <tt>searchform.php</tt>. It may be found in different locations within the sidebar. To style the overall search form, use the <tt>search</tt> ID. Here is a list of the individual areas of the search form which may be styled by default. You may add style classes to gain more control over the look of your search form. | ||
<pre><li id="search"> | <pre><li id="search"> | ||
第1,012行: | 第430行: | ||
</div> | </div> | ||
</form></pre> | </form></pre> | ||
;<tt>#search</tt> :The overall style for the search form. | ;<tt>#search</tt> :The overall style for the search form. | ||
;<tt>#search label</tt> :Used to style the <tt>label</tt> tag, if necessary. | ;<tt>#search label</tt> :Used to style the <tt>label</tt> tag, if necessary. | ||
;<tt>#searchform</tt> :Used to style the form itself. | ;<tt>#searchform</tt> :Used to style the form itself. | ||
;<tt>#search div</tt> :This unlabeled <tt>div</tt> is a child container of the parent container <tt>search</tt> and maybe styled from within that selector. | ;<tt>#search div</tt> :This unlabeled <tt>div</tt> is a child container of the parent container <tt>search</tt> and maybe styled from within that selector. | ||
;<tt>#searchform input</tt> :To style the input area for the search, this selector combination will work. | ;<tt>#searchform input</tt> :To style the input area for the search, this selector combination will work. | ||
;<tt>#searchsubmit</tt> :''Used by the Default Theme'', this selector may be used to style the '''search''' or '''submit''' button. | ;<tt>#searchsubmit</tt> :''Used by the Default Theme'', this selector may be used to style the '''search''' or '''submit''' button. | ||
The search form area, input, and button can be styled in many ways, or left with the default input and "button" look. | The search form area, input, and button can be styled in many ways, or left with the default input and "button" look. | ||
==== Meta Feed Links ==== | ==== Meta Feed Links ==== | ||
The Meta links may be shown as text or icons representing the various links. The XHTML and CSS validation links may use the W3 icons. The various Feeds can also be represented as icons. Or left as text. It's up to you. Use of the feeds within your sidebar with text or icons is covered by the article [[WordPress:WordPress Feeds]]. | The Meta links may be shown as text or icons representing the various links. The XHTML and CSS validation links may use the W3 icons. The various Feeds can also be represented as icons. Or left as text. It's up to you. Use of the feeds within your sidebar with text or icons is covered by the article [[WordPress:WordPress Feeds]]. | ||
=== Footer === | === Footer === | ||
The footer is found within the <tt>footer.php</tt> template file. In both the Default and Classic Themes, the footer contains little information. | The footer is found within the <tt>footer.php</tt> template file. In both the Default and Classic Themes, the footer contains little information. | ||
'''Classic Theme''' | '''Classic Theme''' | ||
<pre><p class="credit"> | <pre><p class="credit"> | ||
第1,086行: | 第460行: | ||
</p> | </p> | ||
</div></pre> | </div></pre> | ||
The footer's content is styled with the <tt>credit</tt> class and the paragraph and <tt>cite</tt> tags. | The footer's content is styled with the <tt>credit</tt> class and the paragraph and <tt>cite</tt> tags. | ||
The tag displays the number of mysql queries used on the page and the time it took for the page to load, in HTML commented code. It is there for the administrator's convenience and use. It is only visible within the page's source code. If you would like to display this visible on the page, remove the [[WordPress:Commenting Code|comments]]. It's look will be influenced by the <tt>credit</tt> class style of the paragraph tag. On the template file, it looks like this: | The tag displays the number of mysql queries used on the page and the time it took for the page to load, in HTML commented code. It is there for the administrator's convenience and use. It is only visible within the page's source code. If you would like to display this visible on the page, remove the [[WordPress:Commenting Code|comments]]. It's look will be influenced by the <tt>credit</tt> class style of the paragraph tag. On the template file, it looks like this: | ||
<pre><!--<?php echo $wpdb->num_queries; ?> queries. | <pre><!--<?php echo $wpdb->num_queries; ?> queries. | ||
第1,113行: | 第481行: | ||
</p> | </p> | ||
</div></pre> | </div></pre> | ||
The Default Theme's footer is styled by the <tt>footer</tt> ID and the paragraph tag. While the footer area itself maybe styled by the <tt>footer</tt>, the paragraph tag controls the text within it. To style the paragraph tag differently within the <tt>footer</tt> than the rest of your page: | The Default Theme's footer is styled by the <tt>footer</tt> ID and the paragraph tag. While the footer area itself maybe styled by the <tt>footer</tt>, the paragraph tag controls the text within it. To style the paragraph tag differently within the <tt>footer</tt> than the rest of your page: | ||
#footer p {styles} | #footer p {styles} | ||
== Resources == | == Resources == | ||
* [[WordPress:CSS]] | * [[WordPress:CSS]] | ||
第1,158行: | 第497行: | ||
* [[WordPress:Blog Design and Layout]] | * [[WordPress:Blog Design and Layout]] | ||
* [[WordPress:Stepping Into Template Tags]] | * [[WordPress:Stepping Into Template Tags]] | ||