<dfn id="ipay3"></dfn>
  • <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
  • <big id="ipay3"></big>

    <small id="ipay3"></small>

    1. 零基礎建站培訓教程介紹

      當前位置:

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

      學做網站論壇?手機網站制作視頻教程:http://www.qqpq.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.qqpq.tw

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

      Author:?學做網站論壇

      Author?URI:?http://www.qqpq.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的制作方法

      發表評論

      相關教程

      1. 如何給自己的網站制作手機客戶端
      2. 手機網站域名注冊方法,無線域名特點
      3. 如何建手機網站的步驟
      4. 土豆視頻如何在手機網站嵌入播放 土豆視頻HTML5地址轉換
      5. 怎么做網站手機APP客戶端
      6. 企業網站定制 免費送手機網站只需5980
      7. 如何制作網站手機APP移動客戶端
      8. 建材商城平臺網及手機網站制作案例
      9. 如何快速建立與PC網站同步的手機網站(百度Site App)
      10. 什么是手機域名(Mobi域名),手機域名的注冊和價格
      零基礎學建站就到學做網站論壇
      雅典娱乐城
      <dfn id="ipay3"></dfn>
    2. <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
    3. <big id="ipay3"></big>

      <small id="ipay3"></small>

      1. <dfn id="ipay3"></dfn>
      2. <blockquote id="ipay3"><ruby id="ipay3"></ruby></blockquote>
      3. <big id="ipay3"></big>

        <small id="ipay3"></small>