零基础建站培训介绍

当前位置:

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

学做网站论坛 手机网站制作视频教程:http://www.xuewangzhan.net/vip/forum.php?gid=36

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

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

获取博客名字:<?php bloginfo('name'); ?>

获取主页路径:<?php echo get_option('home'); ?>

获取主题存放路径:<?php bloginfo('template_directory'); ?>

调用当前主题:<?php the_permalink() ?>

Style.css路径调用:<?php bloginfo( 'stylesheet_url' ); ?>

 

1、WP手机网站模板分析

WP模板的必须条件 :index.php    style.css

bindex.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-3CSS样式的规范化

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 “没有了,已经是最新文章”;} ?>

相关课程:手机app如何制作    百度Site App的制作方法

上一课: 下一课:

发表评论

*

* 绝不会泄露


相关教程

  1. 手机网站域名注册方法,无线域名特点
  2. 如何制作网站手机APP移动客户端
  3. 怎么做网站手机APP客户端
  4. 土豆视频如何在手机网站嵌入播放 土豆视频HTML5地址转换
  5. 如何给自己的网站制作手机客户端
  6. 如何快速建立与PC网站同步的手机网站(百度Site App)
  7. 企业网站定制 免费送手机网站只需5980
  8. 建材商城平台网及手机网站制作案例
  9. 如何建手机网站的步骤
  10. 什么是手机域名(Mobi域名),手机域名的注册和价格