现在几乎每个企业都有自己的网站，很多个人也建设的有自己的个人网站，但是手机网站还是有很多企业没有。移动端现在也是一个很好的网络宣传平台，因为现在很多用户都开始使用移动搜索，如何制作手机网站呢？下面就为大家介绍一下手机网站制作流程。
现在几乎每个企业都有自己的网站，很多个人也建设的有自己的个人网站，但是手机网站还是有很多企业没有。移动端现在也是一个很好的网络宣传平台，因为现在很多用户都开始使用移动搜索，如何制作手机网站呢？下面就为大家介绍一下手机网站制作流程。
获取名字：<?php bloginfo('name'); ?> 获取主页路径：<?php echo get_option('home'); ?> 获取主题存放路径：<?php bloginfo('template_directory'); ?> 调用当前主题：<?php the_permalink() ?> Style.css路径调用：<?php bloginfo( 'stylesheet_url' ); ?>
我们使用的是WP手机网站模板
1、WP手机网站模板分析
a 、WP模板的必须条件 ：index.php style.css
b、WP模板页面介绍
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路径调用：
<?php bloginfo( 'stylesheet_url' ); ?>
1-2-2、修改index.php中的图片的所有相对路径为WP绝对路径
获取主题存放路径：
<?php bloginfo('template_directory'); ?>
如果还出现有些图片不显示的话，要修改style.css中的路径，因为这是的style.css是从images文件夹中拿出来的，路径已经改变了。
分离头部，改用WP调用，调用顶部标签：<?php get_header();?>
2-1、元信息调用
<!DOCTYPE html> <html <?php language_attributes(); ?>> <head> <meta charset="<?php bloginfo( 'charset' ); ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> <title><?php if (is_home()||is_search()) { bloginfo('name'); } else { wp_title(''); print " - "; bloginfo('name'); } ?> </title> <link rel="stylesheet" type="text/css" media="all" href="<?php bloginfo( 'stylesheet_url' ); ?>" /> <?php if(stripos($_SERVER["HTTP_USER_AGENT"],"MSIE")) { ?> <!--[if lt IE 9]><script type="text/javascript">(function(){if(!/*@cc_on!@*/0)return;var e = "article,aside,footer,hgroup,header,nav,section,time".split(','),i=0,length=e.length;while(i<length){document.createElement(e[i++])}}) ();</script><![endif]--> <?php } ?> <?php if ( is_singular() && comments_open() ) { wp_enqueue_script( 'comment-reply' ); wp_enqueue_script('jquery'); } ?> </head>
2-2、网站目录导航制作
<?php wp_nav_menu( array( 'container' => '','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标签调用回来，调用底部标签：
<?php get_footer();?>
获取主页路径：
<?php echo get_option('home'); ?>
版权信息：
Copyright © 2012<a href=" http://www..xuewangzhan.net"> 学做手机网站</a>
第四节、手机网站首页制作
1、PHP循环代码1
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile;?> <?php endif; ?>
2、PHP循环代码2
<?php $display_categories = array(1,4); foreach ($display_categories as $category) { ?> <?php query_posts("showposts=6&cat=$category")?> <?php while (have_posts()) : the_post(); ?> <?php if ($catcnts == 0 || $catcnts == 6) : ?> <?php else : ?> <?php endif; $catcnts++; ?> <?php endwhile;?> <?php } wp_reset_query();?>
标题调用：
<a href="<?php the_permalink() ?>"> <?php the_title(); ?></a>
分类的名称：
<a href="<?php echo get_category_link($category);?>"><?php single_cat_title(); ?></a>
摘要调用：
<?php echo mb_strimwidth(strip_tags(get_the_content()),0,80," ……");?>
第二步：缩略图调用操作步骤：
1-1、新建函数文件functions.php 放入以下代码：
function get_first_image() { global $post; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/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、图片的调用：
<?php echo get_first_image(); ?>
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代码去调用浏览量：
<?php setPostViews(get_the_ID()); ?> <?php echo number_format(getPostViews(get_the_ID())); ?>
第五节、分类页面模板
1、制作archive.php页面
2、调用header、sidebar、footer文件
调用头部标签：<?php get_header();?> 调用底部标签：<?php get_footer();?>
3、循环调用文章
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php endif; ?>
标题调用：
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>
日期调用：
<?php the_date_xml()?>
分类名字调用：
<?php wp_title('');?>
日期调用：
<?php the_date_xml()?>
图片的调用：
<img src="<?php echo get_first_image(); ?>" width="90px" height="70px"/>
调用浏览量：
<?php setPostViews(get_the_ID()); ?> <?php echo number_format(getPostViews(get_the_ID())); ?>
4、分页功能制作
在页面底部放上以下代码：
<?php if ( $wp_query->max_num_pages > 1 ) : ?> <nav id="nav-below" class="clear"> <div class="nav-previous"><?php previous_posts_link(__( '? Previous', 'zipe')); ?></div> <div class="nav-next"><?php next_posts_link(__( 'Next ?', 'zipe')); ?></div> </nav> <?php endif; ?>
将以下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文件
调用头部标签：<?php get_header();?> 调用底部标签：<?php get_footer();?>
3、循环调用文章(一定不要忘了放循环代码）
<?php if (have_posts()) : ?> <?php while (have_posts()) : the_post(); ?> <?php endwhile; ?> <?php endif; ?> 标题：<?php the_title(); ?> 内容：<?php the_content(""); ?>
4、元信息调用
日期调用：<?php the_date_xml()?> 分类目录： <?php the_category(', ') ?>
文章中的上一篇，下一篇代码直接粘贴到相应显示的位置就可以了。
上一篇调用：<?php previous_post_link('? %link'); ?> 下一篇调用：<?php next_post_link('%link ?'); ?>
<?php if (get_previous_post()) { previous_post_link(‘上一篇: %link’);} else {echo “没有了，已经是最后文章”;} ?> <?php if (get_next_post()) { next_post_link(‘下一篇: %link’);} else {echo “没有了，已经是最新文章”;} ?>
河南亿恩科技股份有限公司(www.sdyiwande.com)始创于2000年，专注服务器托管租用，是国家工信部认定的综合电信服务运营商。亿恩为近五十万的用户提供服务器托管、服务器租用、机柜租用、云服务器、网站建设、网站托管等网络基础服务，另有网总管、名片侠网络推广服务，使得客户不断的获得更大的收益。
服务器/云主机 24小时售后服务电话：
0371-60135900
虚拟主机/智能建站 24小时售后服务电话：
0371-55621053
网络版权侵权举报电话：
0371-60135995
服务热线：
0371-60135900
