零基礎建站培訓教程介紹

當前位置:

手機網站制作流程,怎么做手機網站

學做網站論壇?手機網站制作視頻教程:http://www.gilqab.tw/vip/forum.php?gid=36

自適應手機網站制作課程[550元]

自適應手機框架Bootstrap基礎知識
本課課節: 13節, 學員回復: 12130次

自適應手機框架Bootstrap組件
本課課節: 10節, 學員回復: 11136次

自適應手機框架Bootstrap JS插件
本課課節: 11節, 學員回復: 12192次

自適應手機網站首頁開發
本課課節: 11節, 學員回復: 13178次

網站動畫載入功能制作
本課課節: 10節, 學員回復: 13764次

自適應手機網站列表頁開發
本課課節: 8節, 學員回復: 13129次

自適應手機網站內容頁開發
本課課節: 8節, 學員回復: 11586次

自適應手機網站動態首頁模板開發
本課課節: 7節, 學員回復: 12172次

自適應手機網站動態列表模板開發
本課課節: 7節, 學員回復: 13104次

自適應手機網站動態內頁模板開發
本課課節: 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.gilqab.tw

Description:學做網站論壇?公司手機主題

Author:?學做網站論壇

Author?URI:?http://www.gilqab.tw

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(!/*@[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中加入以下代碼:

/*顯示文章瀏覽次數*/

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的制作方法

相關教程

發表評論

電子郵件地址不會被公開。 必填項已用*標注

學做網站論壇零基礎學建網站課程
新疆25选7基本走势图