wordpress自定义个性化首页

自己好不容易折腾了个wordpress博客，发现所有人的首页样式都大同小异，是不是很没创意，很扫兴？下面就来说说如何制作一个wordpress个性化首页，让你随心所欲的改变首页的样式，让你有个不一样的主页。

 

一、 设置wordpress首页

wordpress有设置page页作为默认首页的功能，下面的方法就是自定义一个page也模板，然后添加一个用这个模板制作的page页，最后将这个page页设为首页。

 

1) ftp或者cpanel到部署wordpress空间或其他。复制wordpress主题目录下的page.php文件，重名名。比如，找到文件（wp目 录）/wp-content/themes/zbench/page.php 重命名为 myhomepage.php

 

2) 用文本编辑器打开myhomepage.php，例如用记事本打开，在文件首位添加以下代码：

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

 

“Template Name : ” 后的文字可以是任意的。这样我们就添加了一个新的page页模板。自定义的首页内容其实就是这个myhomepage.php的内容。如何设计修改这个文件，建立自己的个性化首页，会在后面提到。我们先将它设为首页。

 

3) 添加一个新的page页：浏览器登录wordpress后台控制面板，dashboard ->pages -> add new。 输入标题，在右方page attributes 面板中会有parent 和 template 的下拉框，在模板下拉框中选择刚刚添加的模板。如图，我添加的模板名字叫“首页”，我就选择它。

 

 

选择好后，给这个page也命名，我是在title那输入的“首页”。然后就可以发表了，其他的内容什么可以都不用写。

 

4) 设置首页的最后一步，点击后台的reading设置项：dashboard -> settings -> reading。在第一个设置项目里选择第二项 a static page ，然后再它下方的第一个下拉选项框里选则刚刚给page页设置的名字。比如我的“首页”。

 

 

点击 save changes 保存配置。

 

这样，我们把首页重新设置好了。这个时候访问首页的时候我们会发现，我们的首页除了头上的标题名称、侧边栏、底部栏之外就什么都没有。

 

二、 设计自己的wordpress首页

我们已经把wordpress的首页换掉，但是这个首页现在是一片空白，我们要怎么去填充这片空白呢？如果你有html、css、js功底，那就是 你一展身手的时候。如果水平一般，那也没关系，能看懂一点点代码，那就有办法去使用一些好的模板，好的插件，设计出一个自己满意的首页还是可以的。我就只 是能看懂代码的那种，根本不熟悉网页前端开发。

 

方法一

怎么给这个首页填充内容，最简单的方法就是，编辑我们之前添加的page页。之前我们并没有在文章内容里添加任何东西。只要你有好内容，好方案，就可以像写一个新的文章一样这里出一个你自己的主页。

 

方法二

这个方法就需要去修改我们的myhomepage.php文件。前端开发的牛人大有人在，我也不多说。就把我的一些代码贴出来，有心思看到朋友可以参考下。主要用到的几个函数我罗列一下：

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

 

这是我使用的wp-thumbnail插件提供的函数，用于显示分类中的文章和缩略图。在wp-thumbnail插件设置中设置好分类文章的相关 数据，如图片大小、标题位置。然后再这里调用。id=7表示文章分类id为7的分类下的文章，num=1表示显示一篇。文章分类ID是几可以参考这篇文章 。

 

嵌入的探讨tt1 tt2 的css代码是控制左侧栏目的背景。另外有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}

 

中间栏的随机文章和标题评论控制是用这些函数：

    $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+的插件，用于统计文章浏览次数。

 

更多代码：

    <?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”>编程开发</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