手機(jī)網(wǎng)站制作教程：

點(diǎn)擊數(shù)：3882018-04-24 10:17:02　來源: 藝之都網(wǎng)絡(luò)官網(wǎng)

手機(jī)網(wǎng)站制作流程，怎么做手機(jī)網(wǎng)站

學(xué)做網(wǎng)站論壇 手機(jī)網(wǎng)站制作視頻教程：

課程目標(biāo)：制作出一個(gè)手機(jī)網(wǎng)站的主題。課后作業(yè)，跟著視頻，完成一個(gè)相同主題的制作。

手機(jī)網(wǎng)站制作流程，怎么做手機(jī)網(wǎng)站

獲取博客名字：

獲取主頁路徑：

獲取主題存放路徑：

調(diào)用當(dāng)前主題：

Style.css路徑調(diào)用：

1、WP手機(jī)網(wǎng)站模板分析

a 、WP模板的必須條件 ：index.php    style.css

b、index.php首頁模板

Style.css  模板樣式表

archive.php分類模板

page.php  頁面模板

single.php文章模板

header.php頭部模板

footer.php底部模板

Comments.php評(píng)論模板

2、模板版權(quán)的添加

用DW打開style.css

添加主題版權(quán)信息：

/*

Theme Name: 學(xué)做網(wǎng)站論壇

Theme URI: http://www.xuewangzhan.net

Description:學(xué)做網(wǎng)站論壇 公司手機(jī)主題

Author: 學(xué)做網(wǎng)站論壇

Author URI: http://www.xuewangzhan.net

Version: 1.0

Tags: white, blog,學(xué)做網(wǎng)站論壇, blue

*/

如果后臺(tái)亂碼，要修改，css 的頁面屬性，如果網(wǎng)頁出現(xiàn)亂碼，要修改index.php的頁面屬性。修改——頁面屬性——編碼。

后臺(tái)縮略圖:在主題文件來下面放一個(gè)縮略圖圖片，縮略圖的名字必須是：screenshot.png或者screenshot.jpg

1-2、制作index.php

1-2-1、修改css文件路徑

Style.css路徑調(diào)用：

1-2-2、修改index.php中的圖片的所有相對(duì)路徑為WP絕對(duì)路徑

獲取主題存放路徑：

如果還出現(xiàn)有些圖片不顯示的話，要修改style.css中的路徑，因?yàn)檫@是的style.css是從images文件夾中拿出來的，路徑已經(jīng)改變了。

分離頭部，改用WP調(diào)用，調(diào)用頂部標(biāo)簽：

2-1、元信息調(diào)用

>

if ( is_singular() && comments_open() ) {

wp_enqueue_script( 'comment-reply' );

wp_enqueue_script('jquery');

}

?>

2-2、網(wǎng)站目錄導(dǎo)航制作

'','menu_class' => 'navigation','menu_id' => "nav_sgBhgn",'depth' => 2, ) ); ?>

2-3、CSS樣式的規(guī)范化

body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td {

margin: 0;

padding: 0;

}

body, button, input, select, textarea { font: 13px/1.5 \5fae\8f6f\96c5\9ed1,tahoma,arial,\5b8b\4f53,sans-serif }

h1 { font-size: 1.4em }

h2 { font-size: 1.3em }

h3 { font-size: 1.2em }

h4 { font-size: 1.1em }

h5 { font-size: 1em }

h6 { font-size: .9em }

address, cite, dfn, em, var { font-style: normal }

code, kbd, pre, samp { font-family: courier new,courier,monospace }

pre, code {

background: #eee;

padding: 2px;

margin: 0 2px;

}

pre { padding: 2px 10px }

small { font-size: 12px }

dt { font-weight: bold }

ul { list-style: square }

ol { list-style: decimal }

li{ list-style: none;}

ol ol { list-style: upper-alpha }

ol ol ol { list-style: lower-roman }

ol ol ol ol { list-style: lower-alpha }

article, aside, footer, header, hgroup, menu, nav, section, audio, video {

display: block;

margin: 0;

padding: 0;

}

a {

text-decoration: none;

color: #06C;

}

a:hover { text-decoration: underline }

a:hover, a:active { color: #ff4b33 }

a img { border: 0 }

hr {

background: none;

border: none 0;

border-top: 1px dotted #ccc;

height: 0;

}

第三節(jié)、底部制作

5、底部制作

通過WP標(biāo)簽調(diào)用回來，調(diào)用底部標(biāo)簽：

獲取主頁路徑：

版權(quán)信息：

Copyright © 2012 學(xué)做網(wǎng)站論壇

第四節(jié)、手機(jī)網(wǎng)站首頁制作

1、PHP循環(huán)代碼1

2、PHP循環(huán)代碼2

標(biāo)題調(diào)用：

分類的名稱：

摘要調(diào)用：

第二步：縮略圖調(diào)用操作步驟：

1-1、新建函數(shù)文件functions.php  放入以下代碼：

function get_first_image() {

global $post;

$first_img = '';

ob_start();

ob_end_clean();

$output = preg_match_all('//i', $post->post_content, $matches);

$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image

$first_img = bloginfo('template_url') . "/images/default.jpg";

};

return $first_img;

}

1-2、圖片的調(diào)用：

1-3、在images文件夾下建一個(gè)默認(rèn)圖片：default.jpg

第三步：瀏覽量的調(diào)用

1、在functions.php中加入以下代碼：

/*顯示文章瀏覽次數(shù)*/

function getPostViews($postID){

$count = get_post_meta($postID,'views', true);

if($count==''){

delete_post_meta($postID,'views');

add_post_meta($postID,'views', '0');

return "0";

}

return $count.'';

}

function setPostViews($postID) {

$count = get_post_meta($postID,'views', true);

if($count==''){

$count = 0;

delete_post_meta($postID,'views');

add_post_meta($postID,'views', '0');

}else{

$count++;

update_post_meta($postID,'views', $count);

}

}

2、使用以下PHP代碼去調(diào)用瀏覽量：

第五節(jié)、分類頁面模板

1、制作archive.php頁面

2、調(diào)用header、sidebar、footer文件

調(diào)用頭部標(biāo)簽：

調(diào)用底部標(biāo)簽：

3、循環(huán)調(diào)用文章

標(biāo)題調(diào)用：

日期調(diào)用：

分類名字調(diào)用：

日期調(diào)用：

圖片的調(diào)用：

調(diào)用瀏覽量：

4、分頁功能制作

在頁面底部放上以下代碼：

max_num_pages > 1 ) : ?>

將以下CSS樣式放到style.css中

#nav-below a {

margin: 10px;

display: block;

text-align: center;

background: #06C;

-webkit-border-radius: 3px;

-moz-border-radius: 3px;

border-radius: 3px;

color: #fff;

font-size: 13px;

padding: 10px 0;

}

#nav-below div{width: 50%;}

#nav-below .nav-previous{float:left;}

#nav-below .nav-next{float:right;}

#comments #nav-below a { margin: 10px 0 }

第六節(jié)、文章內(nèi)容頁面制作

1、制作single.php

2、調(diào)用header、sidebar、footer文件

調(diào)用頭部標(biāo)簽：

調(diào)用底部標(biāo)簽：

3、循環(huán)調(diào)用文章(一定不要忘了放循環(huán)代碼）

標(biāo)題：

內(nèi)容：

4、元信息調(diào)用

日期調(diào)用：

分類目錄：

上一片，下一片代碼直接粘貼到相應(yīng)顯示的位置就可以了。

上一篇調(diào)用：

下一篇調(diào)用：