上一期我们大致完成了index.php的制作，这一期我们来做其他页面，完成我们的网站主题的制作，
我们点开我们下载的静态页面的公司动态（如下图所示），这是一个文章列表的调用
我们如何做这个页面呢？首先复制我们的index.php,重命名为category-*.php,此处的星号为后台的id，在上一期我们已经知道如何去后台查看一个分类的id了，在此处我们的公司动态id为1，所以我们将这个文件命名为category-1.php
我们只保留头部，幻灯片部分，和底部，其他部分和index.php不一样所以我们把它们都删除
删除完成后将我们下载网站的模板的trends.html里面对应位置的代码拷贝过去，注意掐头去尾
我们再来将里面的文字信息替换成php代码，以便我们能从数据库里面提取数据
<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=2&include=1'); ?>
用上面的一个代码调用一个分类，include=1 ,其中的1是我们公司动态这个分类的id，其他特定分类的调用也是这么搞，无非改一下id
主题路径调用：<?php bloginfo('stylesheet_directory'); ?>，我们改一下里面的一些路径
主页的调用：：<?php echo get_option('home'); ?> 首页路径修改
新闻列表的调用：
<?php if ($posts_perpage) { ?>
<?php $postsperpage = $posts_perpage; ?>
<?php } else { ?>
<?php $postsperpage = 10; ?>
<?php } ?>
<?php
$categoryID=$cat;
$wp_query = new WP_Query('cat=' . $categoryID. 'orderby=date&order=desc&posts_per_page='.$postsperpage.'&paged='.$paged); ?>
<?php while (have_posts()) : the_post(); ?>
<ul>
<li>
<h3>
<a href="<?php the_permalink() ?>" rel="bookmark" title="Permanent Link to <?php the_title_attribute(); ?>"><?php the_title(); ?>
<span><?php the_date_xml(); ?></span>
</a>
</h3>
<p><?php the_excerpt(); ?></p>
</li>
</ul>
<?php endwhile; ?>
复制进去替换后
点击公司动态，文章列表就显示出来了，我们继续给我们的文章列表加个分页功能
为了实现分页我们需要在functions.php里面添加代码
function par_pagenavi($query_string){
global $posts_per_page, $paged;
$my_query = new WP_Query($query_string ."&posts_per_page=-1");
$total_posts = $my_query->post_count;
if(empty($paged))$paged = 1;
$prev = $paged - 1;
$next = $paged + 1;
$range = 4; // only edit this if you want to show more page-links
$showitems = ($range * 2)+1;
$pages = ceil($total_posts/$posts_per_page);
if(1 != $pages){
echo "<div class='pagination'>";
echo ($paged > 2 && $paged+$range+1 > $pages && $showitems < $pages)? "<a href='".get_pagenum_link(1)."'>最前</a>":"";
echo ($paged > 1 && $showitems < $pages)? "<a href='".get_pagenum_link($prev)."'>上一页</a>":"";
for ($i=1; $i <= $pages; $i++){
if (1 != $pages &&( !($i >= $paged+$range+1 || $i <= $paged-$range-1) || $pages <= $showitems )){
echo ($paged == $i)? "<span class='current'>".$i."</span>":"<a href='".get_pagenum_link($i)."' class='inactive' >".$i."</a>";
}
}
echo ($paged < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($next)."'>下一页</a>" :"";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";
echo "</div>\n";
}
}
然后在需要分页的地方调用这个函数：par_pagenavi($query_string)
需要在后台进行一个设置一个每页显示数量在设置-》阅读哪里比如我设置每页显示2条，
然后在框着的地方那个数字也改成2，注意要一致，不然分页是不生效的
改完了试试效果，现在我们这个页面就制作完成了
接下来我们来制作产品中心页面，产品中心页面也是一个文章列表页面，
我们复制category-1.php页面重命名为category-24.php,因为产品中心的分类id是24
在这个页面我们发现它和我们的公司动态页面及其相似，我们只需要把文章的调用换成产品的调用即可
这个产品的调用需要我们在后台去自定义一些参数，每个产品包含一张图片和一些自定义字段信息，我们去后完成我们的添加，在编辑我们的文章时，确定我们的自定义字段是勾选的
这个示例需要添加4个自定义字段，产品名，编码号，特点，参考价格，好了我们对我们产品中心这个分类下的文章都进行一个字段的添加,如下图所示
把trends.html里面以下部分复制进category-24.php,对应位置
为了方便我就复制了一个产品信息过来，所有的产品都在<dl>标签里面，首先我们需要加个循环
<dl>
<?php if ($posts_perpage) { ?>
<?php $postsperpage = $posts_perpage; ?>
<?php } else { ?>
<?php $postsperpage = 4; ?>
<?php } ?>
<?php
$categoryID=$cat;
$wp_query = new WP_Query('cat=' . $categoryID. 'orderby=date&order=desc&posts_per_page='.$postsperpage.'&paged='.$paged); ?>
<?php while (have_posts()) : the_post(); ?>
<dd>
<a href="#">
<img src="temp/pro_pic1.jpg">
<em>产品名：旋转给料机</em>
<em>编码号：QS0012545</em>
<em>特 点：轻巧耐用，寿命长</em>
<span>参考价格：888</span>
</a>
</dd>
<?php endwhile; ?>
</dl>
然后我们来修改里面的内容，对于文章的自定义字段调用可以用这一行代码
<?php echo get_post_meta($post->ID, 'productName',true); ?>
我们只对第二个自定义字段的名称进行一个修改即可
对于特色图片的调用代码为<?php the_post_thumbnail(array(250,100)); ?>，里面的参数为宽高
知道这些信息之后，我们直接对中间的内容进行一个替换
我们来看看效果
这样我们就完成了产品中心页面的创建
以上两个列表页制作完成后，我们开始制作公司简介这个单页面，首先我们需要创建一个page.php,将公司动态catagory-1.php这个页面中的代码全部复制过去，删除掉文章调用的代码仅保留侧边栏和头部底部的代码，在下方框着的地方填充内容调用代码
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div class="desc"><?php the_content("更多..."); ?></div>
<?php endwhile; ?>
<?php endif; ?>
在后台公司简介的页面中添加公司简介的内容
这样公司简介页面就做好了
同样的道理添加关于我们,由于关于我们这个页面的页面风格和page.php页面的不同，所以我们需要新建一个about.php，将page.php中的代码全部拷贝过去，关于我们这个页面多了一个图片
在后台我们在特色图片哪里添加一张图片
复制这行代码 <?php the_post_thumbnail(array(299,225)); ?> 替换掉img标签
这样我们的关于我们就做完了，需要注意的是这个页面不是默认的page.php，所以我们需要做一个指定，首先需要在about.php文件的最上面加上这行注释 <!--p /*Template Name: about */-->
然后就可以在页面中指定模板，
接下来来看看效果
电脑太卡网速太慢，这一期就到这里了，还剩一个联系我们页面，有些地方还需要调整，我们下一期再来完善整个网站主题
网友评论