自己好不容易折騰了個wordpress博客，發(fā)現(xiàn)所有人的首頁樣式都大同小異，是不是很沒創(chuàng)意，很掃興？下面就來說說如何制作一個wordpress個性化首頁，讓你隨心所欲的改變首頁的樣式，讓你有個不一樣的主頁。

?

wordpress有設(shè)置page頁作為默認(rèn)首頁的功能，下面的方法就是自定義一個page也模板，然后添加一個用這個模板制作的page頁，最后將這個page頁設(shè)為首頁。

?

1) ftp或者cpanel到部署wordpress空間或其他。復(fù)制wordpress主題目錄下的page.php文件，重名名。比如，找到文件（wp目 錄） /wp-content/themes/zbench/page.php 重命名為 myhomepage.php

?

2) 用文本編輯器打開myhomepage.php，例如用記事本打開，在文件首位添加以下代碼：

    <?php
/*
Template Name: 首頁
*/
?>
  

?

“Template Name : ” 后的文字可以是任意的。這樣我們就添加了一個新的page頁模板。自定義的首頁內(nèi)容其實就是這個myhomepage.php的內(nèi)容。如何設(shè)計修改這個文件，建立自己的個性化首頁，會在后面提到。我們先將它設(shè)為首頁。

?

3) 添加一個新的page頁：瀏覽器登錄wordpress后臺控制面板，dashboard ->pages -> add new。 輸入標(biāo)題，在右方page attributes 面板中會有parent 和 template 的下拉框，在模板下拉框中選擇剛剛添加的模板。如圖，我添加的模板名字叫“首頁”，我就選擇它。

?

?

選擇好后，給這個page也命名，我是在title那輸入的“首頁”。然后就可以發(fā)表了，其他的內(nèi)容什么可以都不用寫。

?

4) 設(shè)置首頁的最后一步，點擊后臺的reading設(shè)置項：dashboard -> settings -> reading。在第一個設(shè)置項目里選擇第二項 a static page ，然后再它下方的第一個下拉選項框里選則剛剛給page頁設(shè)置的名字。比如我的“首頁”。

?

?

點擊 save changes 保存配置。

?

這樣，我們把首頁重新設(shè)置好了。這個時候訪問首頁的時候我們會發(fā)現(xiàn)，我們的首頁除了頭上的標(biāo)題名稱、側(cè)邊欄、底部欄之外就什么都沒有。

?

我們已經(jīng)把wordpress的首頁換掉，但是這個首頁現(xiàn)在是一片空白，我們要怎么去填充這片空白呢？如果你有html、css、js功底，那就是 你一展身手的時候。如果水平一般，那也沒關(guān)系，能看懂一點點代碼，那就有辦法去使用一些好的模板，好的插件，設(shè)計出一個自己滿意的首頁還是可以的。我就只 是能看懂代碼的那種，根本不熟悉網(wǎng)頁前端開發(fā)。

?

方法一

怎么給這個首頁填充內(nèi)容，最簡單的方法就是，編輯我們之前添加的page頁。之前我們并沒有在文章內(nèi)容里添加任何東西。只要你有好內(nèi)容，好方案，就可以像寫一個新的文章一樣這里出一個你自己的主頁。

?

方法二

這個方法就需要去修改我們的myhomepage.php文件。前端開發(fā)的牛人大有人在，我也不多說。就把我的一些代碼貼出來，有心思看到朋友可以參考下。主要用到的幾個函數(shù)我羅列一下：

    <?php if(function_exists(‘wp_thumbnails_for_category’)) { wp_thumbnails_for_category(‘id=7&num=1′); } ?>
  

?

這是我使用的wp-thumbnail插件提供的函數(shù)，用于顯示分類中的文章和縮略圖。在wp-thumbnail插件設(shè)置中設(shè)置好分類文章的相關(guān) 數(shù)據(jù)，如圖片大小、標(biāo)題位置。然后再這里調(diào)用。id=7表示文章分類id為7的分類下的文章，num=1表示顯示一篇。文章分類ID是幾可以參考 這篇文章 。

?

嵌入的探討tt1 tt2 的css代碼是控制左側(cè)欄目的背景。另外有block1和block2的代碼是用來控制左右兩部分的布局。

        .tt1 {background:#E3E3E3;width:270px;height350px}
    .tt2 {background:#E3E3E3;width:210px;height310px;margin:30px}

    .block2 { float:left; width:250px; height:700px}
    .block3 { float:right; width:350px; height:700px}
  

?

中間欄的隨機文章和標(biāo)題評論控制是用這些函數(shù)：

        $args = array( ‘numberposts’ => 5, ‘orderby’ => ‘rand’, ‘category’ => 7 );
    $rand_posts = get_posts( $args );
    foreach( $rand_posts as $post ) : setup_postdata($post); ?>
...
  

?

    <?php if(function_exists(‘the_views’)) { echo ” | “;the_views(); } ?>
  

?

這段代碼是用了postviews+的插件，用于統(tǒng)計文章瀏覽次數(shù)。

?

更多代碼：

        <?php
    /*
    Template Name: 首頁
    */
    ?>
    <?php get_header() ?>
    <div id=”content”>
    <?php the_post(); ?>
    <div <?php post_class(‘post post-page’); ?> id=”post-<?php the_ID(); ?>”>
    <div class=”block2″>
    <h2><a href=”http://daniex.info/category/coding”>編程開發(fā)</a></h2><span>C/C++ java C# wpf php…</span>
    <div class=”tt1″>
    <div class=”tt2″>
    <?php if(function_exists(‘wp_thumbnails_for_category’)) { wp_thumbnails_for_category(‘id=7&num=1′); } ?>
    </div>
    </div>
    <div class=”tt1″>
    <div class=”tt2″>
    <?php if(function_exists(‘wp_thumbnails_for_category’)) { wp_thumbnails_for_category(‘id=7&num=1&order=recent’); } ?>
    </div>
    </div>
    <style>
    .tt1 {background:#E3E3E3;width:270px;height350px}
    .tt2 {background:#E3E3E3;width:210px;height310px;margin:30px}
    </style>
    </div>
    <div class=”block3″><br><br><br><br>

    <?php
    $args = array( ‘numberposts’ => 5, ‘orderby’ => ‘rand’, ‘category’ => 7 );
    $rand_posts = get_posts( $args );
    foreach( $rand_posts as $post ) : setup_postdata($post); ?>
    <h3><a href=”<?php the_permalink(); ?>”><?php the_title(); ?></a></h3>
    <?php if (‘open’ == $post->comment_status) { ?>
    <div>

    <span><?php the_time(get_option( ‘date_format’ )); ?></span>
    <span id=”gotocomments”><?php comments_popup_link(__(’0 評論’, ‘zbench’), __(’1 評論’, ‘zbench’), ‘% ‘.__(‘ 評論’, ‘zbench’)); ?><?php if(function_exists(‘the_views’)) { echo ” | “;the_views(); } ?></span>
    </div>
    <div></div>
    <!–<div>
    <?php if ( $options['excerpt_check']==’true’ ) { the_excerpt(__(‘&raquo; Read more…’,'zbench’)); } else { the_content(__(‘&raquo; Read more…’,'zbench’)); } ?>
    </div> END entry –>

    <?php if(is_sticky()) { ?>
    <div><p><?php _e(‘This is a sticky post!’, ‘zbench’); ?> <a href=”<?php the_permalink() ?>”><?php _e(‘continue reading?’, ‘zbench’); ?></a></p></div>
    <?php } ?>
    <?php } else { ?>
    <div style=”height:1px;”></div>
    <?php } ?>

    <?php echo mb_strimwidth(strip_tags(apply_filters(‘the_content’, $post->post_content)), 0, 100,”…”); ?>

    <br><br>
    <?php endforeach; ?>

    </div>

    </div><!– END post –>
    </div><!–content–>
    <?php get_sidebar() ?>
    <?php get_footer() ?>
  

?

來源： http://daniex.info/wordpress-custom-home-page.html

?

?

?

wordpress自定義個性化首頁