手机网站制作教程：

点击数：3882018-04-24 10:17:02　来源: 艺之都网络官网

手机网站制作流程，怎么做手机网站

学做网站论坛 手机网站制作视频教程：

课程目标：制作出一个手机网站的主题。课后作业，跟着视频，完成一个相同主题的制作。

手机网站制作流程，怎么做手机网站

获取博客名字：

获取主页路径：

获取主题存放路径：

调用当前主题：

Style.css路径调用：

1、WP手机网站模板分析

a 、WP模板的必须条件 ：index.php    style.css

b、index.php首页模板

Style.css  模板样式表

archive.php分类模板

page.php  页面模板

single.php文章模板

header.php头部模板

footer.php底部模板

Comments.php评论模板

2、模板版权的添加

用DW打开style.css

添加主题版权信息：

/*

Theme Name: 学做网站论坛

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

Description:学做网站论坛 公司手机主题

Author: 学做网站论坛

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

Version: 1.0

Tags: white, blog,学做网站论坛, blue

*/

如果后台乱码，要修改，css 的页面属性，如果网页出现乱码，要修改index.php的页面属性。修改——页面属性——编码。

后台缩略图:在主题文件来下面放一个缩略图图片，缩略图的名字必须是：screenshot.png或者screenshot.jpg

1-2、制作index.php

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

Style.css路径调用：

1-2-2、修改index.php中的图片的所有相对路径为WP绝对路径

获取主题存放路径：

如果还出现有些图片不显示的话，要修改style.css中的路径，因为这是的style.css是从images文件夹中拿出来的，路径已经改变了。

分离头部，改用WP调用，调用顶部标签：

2-1、元信息调用

>

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

wp_enqueue_script( 'comment-reply' );

wp_enqueue_script('jquery');

}

?>

2-2、网站目录导航制作

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

2-3、CSS样式的规范化

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;

}

第三节、底部制作

5、底部制作

通过WP标签调用回来，调用底部标签：

获取主页路径：

版权信息：

Copyright © 2012 学做网站论坛

第四节、手机网站首页制作

1、PHP循环代码1

2、PHP循环代码2

标题调用：

分类的名称：

摘要调用：

第二步：缩略图调用操作步骤：

1-1、新建函数文件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、图片的调用：

1-3、在images文件夹下建一个默认图片：default.jpg

第三步：浏览量的调用

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

/*显示文章浏览次数*/

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代码去调用浏览量：

第五节、分类页面模板

1、制作archive.php页面

2、调用header、sidebar、footer文件

调用头部标签：

调用底部标签：

3、循环调用文章

标题调用：

日期调用：

分类名字调用：

日期调用：

图片的调用：

调用浏览量：

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 }

第六节、文章内容页面制作

1、制作single.php

2、调用header、sidebar、footer文件

调用头部标签：

调用底部标签：

3、循环调用文章(一定不要忘了放循环代码）

标题：

内容：

4、元信息调用

日期调用：

分类目录：

上一片，下一片代码直接粘贴到相应显示的位置就可以了。

上一篇调用：

下一篇调用：