上一期我們大致完成了index.php的制作框往,這一期我們來(lái)做其他頁(yè)面祸憋,完成我們的網(wǎng)站主題的制作虐急,
我們點(diǎn)開(kāi)我們下載的靜態(tài)頁(yè)面的公司動(dòng)態(tài)(如下圖所示)比庄,這是一個(gè)文章列表的調(diào)用
我們?nèi)绾巫鲞@個(gè)頁(yè)面呢唉工?首先復(fù)制我們的index.php,重命名為category-*.php,此處的星號(hào)為后臺(tái)的id研乒,在上一期我們已經(jīng)知道如何去后臺(tái)查看一個(gè)分類的id了,在此處我們的公司動(dòng)態(tài)id為1淋硝,所以我們將這個(gè)文件命名為category-1.php
我們只保留頭部雹熬,幻燈片部分,和底部谣膳,其他部分和index.php不一樣所以我們把它們都刪除
刪除完成后將我們下載網(wǎng)站的模板的trends.html里面對(duì)應(yīng)位置的代碼拷貝過(guò)去竿报,注意掐頭去尾
我們?cè)賮?lái)將里面的文字信息替換成php代碼,以便我們能從數(shù)據(jù)庫(kù)里面提取數(shù)據(jù)
<?php wp_list_categories('title_li=0&orderby=name&show_count=0&depth=2&include=1'); ?>
用上面的一個(gè)代碼調(diào)用一個(gè)分類参歹,include=1 ,其中的1是我們公司動(dòng)態(tài)這個(gè)分類的id仰楚,其他特定分類的調(diào)用也是這么搞,無(wú)非改一下id
主題路徑調(diào)用:<?php? bloginfo('stylesheet_directory'); ?>犬庇,我們改一下里面的一些路徑
主頁(yè)的調(diào)用::<?php echo get_option('home'); ?>? ?首頁(yè)路徑修改
新聞列表的調(diào)用:
<?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; ?>
復(fù)制進(jìn)去替換后
點(diǎn)擊公司動(dòng)態(tài)僧界,文章列表就顯示出來(lái)了,我們繼續(xù)給我們的文章列表加個(gè)分頁(yè)功能
為了實(shí)現(xiàn)分頁(yè)我們需要在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)."'>上一頁(yè)</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)."'>下一頁(yè)</a>" :"";
echo ($paged < $pages-1 && $paged+$range-1 < $pages && $showitems < $pages) ? "<a href='".get_pagenum_link($pages)."'>最后</a>":"";
echo "</div>\n";
}
}
然后在需要分頁(yè)的地方調(diào)用這個(gè)函數(shù):par_pagenavi($query_string)
需要在后臺(tái)進(jìn)行一個(gè)設(shè)置一個(gè)每頁(yè)顯示數(shù)量在設(shè)置-》閱讀哪里比如我設(shè)置每頁(yè)顯示2條臭挽,
然后在框著的地方那個(gè)數(shù)字也改成2捂襟,注意要一致,不然分頁(yè)是不生效的
改完了試試效果欢峰,現(xiàn)在我們這個(gè)頁(yè)面就制作完成了
接下來(lái)我們來(lái)制作產(chǎn)品中心頁(yè)面葬荷,產(chǎn)品中心頁(yè)面也是一個(gè)文章列表頁(yè)面涨共,
我們復(fù)制category-1.php頁(yè)面重命名為category-24.php,因?yàn)楫a(chǎn)品中心的分類id是24
在這個(gè)頁(yè)面我們發(fā)現(xiàn)它和我們的公司動(dòng)態(tài)頁(yè)面及其相似,我們只需要把文章的調(diào)用換成產(chǎn)品的調(diào)用即可
這個(gè)產(chǎn)品的調(diào)用需要我們?cè)诤笈_(tái)去自定義一些參數(shù)宠漩,每個(gè)產(chǎn)品包含一張圖片和一些自定義字段信息举反,我們?nèi)ズ笸瓿晌覀兊奶砑樱诰庉嬑覀兊奈恼聲r(shí)扒吁,確定我們的自定義字段是勾選的
這個(gè)示例需要添加4個(gè)自定義字段火鼻,產(chǎn)品名,編碼號(hào)雕崩,特點(diǎn)魁索,參考價(jià)格,好了我們對(duì)我們產(chǎn)品中心這個(gè)分類下的文章都進(jìn)行一個(gè)字段的添加,如下圖所示
把trends.html里面以下部分復(fù)制進(jìn)category-24.php,對(duì)應(yīng)位置
為了方便我就復(fù)制了一個(gè)產(chǎn)品信息過(guò)來(lái)盼铁,所有的產(chǎn)品都在<dl>標(biāo)簽里面粗蔚,首先我們需要加個(gè)循環(huán)
<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>產(chǎn)品名:旋轉(zhuǎn)給料機(jī)</em>
<em>編碼號(hào):QS0012545</em>
<em>特 點(diǎn):輕巧耐用,壽命長(zhǎng)</em>
<span>參考價(jià)格:888</span>
</a>
</dd>
<?php endwhile; ?>
</dl>
然后我們來(lái)修改里面的內(nèi)容饶火,對(duì)于文章的自定義字段調(diào)用可以用這一行代碼
<?php echo? get_post_meta($post->ID, 'productName',true); ?>
我們只對(duì)第二個(gè)自定義字段的名稱進(jìn)行一個(gè)修改即可
對(duì)于特色圖片的調(diào)用代碼為<?php the_post_thumbnail(array(250,100)); ?>鹏控,里面的參數(shù)為寬高
知道這些信息之后,我們直接對(duì)中間的內(nèi)容進(jìn)行一個(gè)替換
我們來(lái)看看效果
這樣我們就完成了產(chǎn)品中心頁(yè)面的創(chuàng)建
以上兩個(gè)列表頁(yè)制作完成后趁窃,我們開(kāi)始制作公司簡(jiǎn)介這個(gè)單頁(yè)面牧挣,首先我們需要?jiǎng)?chuàng)建一個(gè)page.php,將公司動(dòng)態(tài)catagory-1.php這個(gè)頁(yè)面中的代碼全部復(fù)制過(guò)去,刪除掉文章調(diào)用的代碼僅保留側(cè)邊欄和頭部底部的代碼醒陆,在下方框著的地方填充內(nèi)容調(diào)用代碼
<?php if (have_posts()) : ?>
? ? ? ? ? <?php while (have_posts()) : the_post(); ?>
<div class="desc"><?php the_content("更多..."); ?></div>
<?php endwhile; ?>
<?php endif; ?>
在后臺(tái)公司簡(jiǎn)介的頁(yè)面中添加公司簡(jiǎn)介的內(nèi)容
這樣公司簡(jiǎn)介頁(yè)面就做好了
同樣的道理添加關(guān)于我們,由于關(guān)于我們這個(gè)頁(yè)面的頁(yè)面風(fēng)格和page.php頁(yè)面的不同瀑构,所以我們需要新建一個(gè)about.php,將page.php中的代碼全部拷貝過(guò)去刨摩,關(guān)于我們這個(gè)頁(yè)面多了一個(gè)圖片
在后臺(tái)我們?cè)谔厣珗D片哪里添加一張圖片
復(fù)制這行代碼? <?php the_post_thumbnail(array(299,225)); ?> 替換掉img標(biāo)簽
這樣我們的關(guān)于我們就做完了寺晌,需要注意的是這個(gè)頁(yè)面不是默認(rèn)的page.php,所以我們需要做一個(gè)指定澡刹,首先需要在about.php文件的最上面加上這行注釋 <!--p /*Template Name: about */-->
然后就可以在頁(yè)面中指定模板呻征,
接下來(lái)來(lái)看看效果
電腦太卡網(wǎng)速太慢,這一期就到這里了罢浇,還剩一個(gè)聯(lián)系我們頁(yè)面陆赋,有些地方還需要調(diào)整,我們下一期再來(lái)完善整個(gè)網(wǎng)站主題