零基础建站培训教程介绍

当前位置:

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

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

自?#35270;?#25163;机网站制作课程[550元]

自?#35270;?#25163;机框架Bootstrap基础知识
本课课节: 13节, 学员回复: 12130次

自?#35270;?#25163;机框架Bootstrap组件
本课课节: 10节, 学员回复: 11136次

自?#35270;?#25163;机框架Bootstrap JS插件
本课课节: 11节, 学员回复: 12192次

自?#35270;?#25163;机网站首页开发
本课课节: 11节, 学员回复: 13178次

网站动画载入功能制作
本课课节: 10节, 学员回复: 13764次

自?#35270;?#25163;机网站列表页开发
本课课节: 8节, 学员回复: 13129次

自?#35270;?#25163;机网站内容页开发
本课课节: 8节, 学员回复: 11586次

自?#35270;?#25163;机网站动态首页模板开发
本课课节: 7节, 学员回复: 12172次

自?#35270;?#25163;机网站动态列表模板开发
本课课节: 7节, 学员回复: 13104次

自?#35270;?#25163;机网站动态内页模板开发
本课课节: 11节, 学员回复: 13255次

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

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

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

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

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

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

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

 

1、WP手机网站模板分析

a?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.95983833.com

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

Author:?学做网站论坛

Author?URI:?http://www.95983833.com

Version:?1.0

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

*/

如果后台乱码,要修?#27169;琧ss?的页面属性,如果网页出现乱码,要修改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文件夹中拿出来?#27169;?#36335;径已经改变了。

分离头部,改用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(!/*@[email protected]*/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中加入以下代码:

/*显示文章浏?#26469;问?/span>*/

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(',?')??>

 

上一片,下一片代码直接?#31243;?#21040;相应显示的位置就可以了。

上一篇调用:<?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分快三
河南七星彩走势图 排列三和值走势图近200 百乐坊娱乐城可信吗 快乐时时彩是哪里的 白小姐马料 海南4十1体彩网 极速飞艇开奖直播网站 陕西快乐十分20选8技巧 浙江十一选五任选码走势图 三分彩哪个平台好 英超队徽音乐 时时彩幸运农场 4场进球开奖信息 吉林快三大小和值推荐号码 湖北十一选五开奖走势图