現(xiàn)在幾乎每個(gè)企業(yè)都有自己的網(wǎng)站，很多個(gè)人也建設(shè)的有自己的個(gè)人網(wǎng)站，但是手機(jī)網(wǎng)站還是有很多企業(yè)沒有。移動(dòng)端現(xiàn)在也是一個(gè)很好的網(wǎng)絡(luò)宣傳平臺(tái)，因?yàn)楝F(xiàn)在很多用戶都開始使用移動(dòng)搜索，如何制作手機(jī)網(wǎng)站呢？下面就為大家介紹一下手機(jī)網(wǎng)站制作流程。
現(xiàn)在幾乎每個(gè)企業(yè)都有自己的網(wǎng)站，很多個(gè)人也建設(shè)的有自己的個(gè)人網(wǎng)站，但是手機(jī)網(wǎng)站還是有很多企業(yè)沒有。移動(dòng)端現(xiàn)在也是一個(gè)很好的網(wǎng)絡(luò)宣傳平臺(tái)，因?yàn)楝F(xiàn)在很多用戶都開始使用移動(dòng)搜索，如何制作手機(jī)網(wǎng)站呢？下面就為大家介紹一下手機(jī)網(wǎng)站制作流程。
獲取名字：<?php bloginfo('name'); ?>
獲取主頁(yè)路徑：<?php echo get_option('home'); ?>
獲取主題存放路徑：<?php bloginfo('template_directory'); ?>
調(diào)用當(dāng)前主題：<?php the_permalink() ?>
Style.css路徑調(diào)用：<?php bloginfo( 'stylesheet_url' ); ?>
我們使用的是WP手機(jī)網(wǎng)站模板
1、WP手機(jī)網(wǎng)站模板分析
a 、WP模板的必須條件 ：index.php style.css
b、WP模板頁(yè)面介紹
index.php首頁(yè)模板
Style.css 模板樣式表
archive.php分類模板
page.php 頁(yè)面模板
single.php文章模板
header.php頭部模板
footer.php底部模板
Comments.php評(píng)論模板
2、模板版權(quán)的添加
用DW打開style.css
添加主題版權(quán)信息：
/*
Theme Name: 學(xué)做手機(jī)網(wǎng)站
Theme URI: http://www.xuewangzhan.net
Description:學(xué)做手機(jī)網(wǎng)站 公司手機(jī)主題
Author: 學(xué)做網(wǎng)站
Author URI: http://www.xuewangzhan.net
Version: 1.0
Tags: white, blog,學(xué)做手機(jī)網(wǎng)站, blue
*/
如果后臺(tái)亂碼，要修改，css 的頁(yè)面屬性，如果網(wǎng)頁(yè)出現(xiàn)亂碼，要修改index.php的頁(yè)面屬性。修改——頁(yè)面屬性——編碼。
后臺(tái)縮略圖:在主題文件來下面放一個(gè)縮略圖圖片，縮略圖的名字必須是：screenshot.png或者screenshot.jpg
1-2、制作index.php
1-2-1、修改css文件路徑
Style.css路徑調(diào)用：
<?php bloginfo( 'stylesheet_url' ); ?>
1-2-2、修改index.php中的圖片的所有相對(duì)路徑為WP絕對(duì)路徑
獲取主題存放路徑：
<?php bloginfo('template_directory'); ?>
如果還出現(xiàn)有些圖片不顯示的話，要修改style.css中的路徑，因?yàn)檫@是的style.css是從images文件夾中拿出來的，路徑已經(jīng)改變了。
分離頭部，改用WP調(diào)用，調(diào)用頂部標(biāo)簽：<?php get_header();?>
2-1、元信息調(diào)用
<!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、網(wǎng)站目錄導(dǎo)航制作
<?php wp_nav_menu( array( 'container' => '','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)簽：
<?php get_footer();?>
獲取主頁(yè)路徑：
<?php echo get_option('home'); ?>
版權(quán)信息：
Copyright © 2012<a href=" http://www..xuewangzhan.net"> 學(xué)做手機(jī)網(wǎng)站</a>
第四節(jié)、手機(jī)網(wǎng)站首頁(yè)制作
1、PHP循環(huán)代碼1
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile;?>
<?php endif; ?>
2、PHP循環(huán)代碼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();?>
標(biāo)題調(diào)用：
<a href="<?php the_permalink() ?>"> <?php the_title(); ?></a>
分類的名稱：
<a href="<?php echo get_category_link($category);?>"><?php single_cat_title(); ?></a>
摘要調(diào)用：
<?php echo mb_strimwidth(strip_tags(get_the_content()),0,80," ……");?>
第二步：縮略圖調(diào)用操作步驟：
1-1、新建函數(shù)文件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、圖片的調(diào)用：
<?php echo get_first_image(); ?>
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)用瀏覽量：
<?php setPostViews(get_the_ID()); ?>
<?php echo number_format(getPostViews(get_the_ID())); ?>
第五節(jié)、分類頁(yè)面模板
1、制作archive.php頁(yè)面
2、調(diào)用header、sidebar、footer文件
調(diào)用頭部標(biāo)簽：<?php get_header();?>
調(diào)用底部標(biāo)簽：<?php get_footer();?>
3、循環(huán)調(diào)用文章
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
標(biāo)題調(diào)用：
<a href="<?php the_permalink() ?>"> <?php echo mb_strimwidth(get_the_title(), 0, 32, ''); ?></a>
日期調(diào)用：
<?php the_date_xml()?>
分類名字調(diào)用：
<?php wp_title('');?>
日期調(diào)用：
<?php the_date_xml()?>
圖片的調(diào)用：
<img src="<?php echo get_first_image(); ?>" width="90px" height="70px"/>
調(diào)用瀏覽量：
<?php setPostViews(get_the_ID()); ?>
<?php echo number_format(getPostViews(get_the_ID())); ?>
4、分頁(yè)功能制作
在頁(yè)面底部放上以下代碼：
<?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 }
第六節(jié)、文章內(nèi)容頁(yè)面制作
1、制作single.php
2、調(diào)用header、sidebar、footer文件
調(diào)用頭部標(biāo)簽：<?php get_header();?>
調(diào)用底部標(biāo)簽：<?php get_footer();?>
3、循環(huán)調(diào)用文章(一定不要忘了放循環(huán)代碼）
<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<?php endwhile; ?>
<?php endif; ?>
標(biāo)題：<?php the_title(); ?>
內(nèi)容：<?php the_content(""); ?>
4、元信息調(diào)用
日期調(diào)用：<?php the_date_xml()?>
分類目錄： <?php the_category(', ') ?>
文章中的上一篇，下一篇代碼直接粘貼到相應(yīng)顯示的位置就可以了。
上一篇調(diào)用：<?php previous_post_link('? %link'); ?>
下一篇調(diào)用：<?php next_post_link('%link ?'); ?>
<?php if (get_previous_post()) { previous_post_link(‘上一篇: %link’);} else {echo “沒有了，已經(jīng)是最后文章”;} ?>
<?php if (get_next_post()) { next_post_link(‘下一篇: %link’);} else {echo “沒有了，已經(jīng)是最新文章”;} ?>
河南億恩科技股份有限公司(1tcdy.com)始創(chuàng)于2000年，專注服務(wù)器托管租用，是國(guó)家工信部認(rèn)定的綜合電信服務(wù)運(yùn)營(yíng)商。億恩為近五十萬的用戶提供服務(wù)器托管、服務(wù)器租用、機(jī)柜租用、云服務(wù)器、網(wǎng)站建設(shè)、網(wǎng)站托管等網(wǎng)絡(luò)基礎(chǔ)服務(wù)，另有網(wǎng)總管、名片俠網(wǎng)絡(luò)推廣服務(wù)，使得客戶不斷的獲得更大的收益。
服務(wù)器/云主機(jī) 24小時(shí)售后服務(wù)電話：
0371-60135900
虛擬主機(jī)/智能建站 24小時(shí)售后服務(wù)電話：
0371-55621053
網(wǎng)絡(luò)版權(quán)侵權(quán)舉報(bào)電話：
0371-60135995
服務(wù)熱線：
0371-60135900
