<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

      自?#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.qqpq.tw

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

      Author:?学做网站论坛

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

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

      发表评论

      电子邮件地址不会被公开。 必填项已用*标注

      学做网站论坛零基础学建网站课程
      雅典娱乐城
      <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>