Creating a Static Front Page

来自WordPress中文文档
跳转至: 导航搜索

wordpress.org.cn

By default, WordPress shows your most recent posts on the front page of your site. But many WordPress users want to have a static front page or splash page as the front page instead. This "static front page" look is common for those who wish to not have a "blog" look to their site, giving it a more CMS (content management system) feel.

When you create a static front page for your site, you must also create a way for WordPress to show your most recent posts in a "virtual directory" called blog, news, or whatever else you choose to call it. This is true whether or not you are actually using Posts in WordPress.

Unlike a traditional WordPress "blog" front page, featuring the The WordPress Loop, which generates a list of your most recent posts, the static front page is a customized Page that displays static content. It can be customized to direct people to featured content, or highlight posts, articles, categories, or contributors.

includeonlydiv style=clear:both; background-color:#FCECAD; border:1px solid #CCCCCC; color:#000000; padding:7px; margin:0.5em auto 0.5em auto; vertical-align:middle;Some customized themes will have special setup or options for "front page" type features. This article only describes the standardized way of creating Static Front Pages, which should work with any modern theme./div/includeonlynoinclude

Description

This Template is used by Codex:Template Messages.

Usage

pre 检查到模板循环:模板:Message /pre

Result

检查到模板循环:模板:Message

/noinclude

Creating a Static Front Page

Creating a virtual static front page does not require editing or coding of files or templates. Using the default configuration for a "static front page" in WordPress does not remove the sidebar or change the look of the entire site, just the content area.

To create the static front page, go to the WordPress Administration Panels.

  1. Create two WordPress Pages from the "Add New Page" panel. If you will not be using WordPress blogging functionality, you can skip the second page.
    • Title the first page "Home" (or another name) as your "static" front page.
      1. Set the "Home" template to the default template or any custom template. Do not title your template home.php as this could cause a conflict.
      2. Add content you would like to see within the content area of the "Home" page.
      3. Publish the Page.
    • Title the second page "Blog" (or you could call it "News", "Articles", etc.). This page will be a place-holder for showing the Posts on your site.
      1. Do not use a custom Page template for this page! home.php or index.php will be used to generate this page.
      2. DO NOT add content to the Blog Page. Leave it blank. Any content here will be ignored -- only the Title is used.
      3. Publish the Page.
  2. Go to Administration > Settings > Reading panel.
    1. Set 'Front page displays:' to 'a static page' and choose the first page you created above for 'Front page.' If your WordPress site will contain a blog section, set 'Posts page' to the page you created for this above. Otherwise, leave this blank.
    2. Save changes.
  3. Enable "Permalinks" to show the "page title" in the address, since /index.php?p=423 defeats the purpose of making a static front page.

While we are calling this a "static front page," you can change the content on that web page at any time by editing the Page.

The Front Page Conditional Tag

is_front_page() 
This Conditional Tag checks if the main page is a posts or a Page. Returns true when the main blog page is being displayed and the 'Settings > Reading ->Front page displays' is set to "Your latest posts", or when 'Settings > Reading ->Front page displays' is set to "A static page" and the "Front Page" value is the current Page being displayed.

Adding a Loop of Blog Posts to Your Static Front Page

Once you have your static page set up as above, you can edit your theme to add blog posts to that static page. To do this:

  1. edit the home page in your theme (could be front-page.php or the page specific file)
  2. add The Loop to the page
<?php if ( have_posts() ) : while ( have_posts() ) : the_post(); ?>
// do something
<?php endwhile; else: ?> 
// no posts found
<?php endif; ?>

But if you stop there, you will just get any content that is displayed in the Page content in WordPress, not your blog posts.

To get your blog posts to display you need to add one more line right above the loop with query_posts:

query_posts('showposts=10');

This example will show the 10 most recent posts.

Troubleshooting Themes

Not all WordPress Themes will easily convert to a static front page. Here are some troubleshooting tips to ensure the WordPress Theme you choose will work.

Navigation Bars

Some themes have a top navigation bar containing links to Pages. By default most themes set "Home" as a link to the home page - in this case the static front page. Since you have created a separate page with the title "Home", there is a likelihood of having two "Home" links in your menu.

To remedy this, edit the appropriate template file featuring the code of the navigation bar with the template tag wp_list_pages. In 99.9% of WordPress themes, this is the header.php file. Set the parameters to change the link title. In some cases, commenting (disabling) or removing the the line in the theme's code that displays the 'Home' link will do the trick.

Missing Blog Page

Some themes will have their own blog page template to show blog posts. You may use this instead.

Unexpected Home Page results

Some themes may use the Template Hierarchy and force a specific home page. Making a static page as the front can sometimes override theme template, depending on what is used.

Resources

includeonlydiv style=clear:both; background-color:#EEEEFF; border:1px solid #CCCCCC; color:#000000; padding:7px; margin:0.5em auto 0.5em auto; vertical-align:middle;This article is marked as in need of editing. You can help Codex by editing it./div/includeonlynoinclude

Description

This Template is used by Codex:Template Messages.

Usage

pre 检查到模板循环:模板:Message /pre

Result

检查到模板循环:模板:Message

/noinclude