整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 设置viewport宽度，为一个正整数，或字符串‘device-width’
// device-width 设备宽度
// height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置
// initial-scale 默认缩放比例（初始缩放比例），为一个数字，可以带小数
// minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数
// maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数
// user-scalable 是否允许手动缩放
局部处理
全局处理
<!DOCTYPE html> <!--H5标准声明，使用 HTML5 doctype，不区分大小写-->
<head lang=”en”> <!--标准的 lang 属性写法-->
<meta charset=’utf-8′> <!--声明文档使用的字符编码-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--优先使用 IE 最新版本和 Chrome-->
<meta name=”description” content=”不超过150个字符”/> <!--页面描述-->
<meta name=”keywords” content=””/> <!-- 页面关键词-->
<meta name=”author” content=”name, email@gmail.com”/> <!--网页作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--为移动设备添加 viewport-->
<meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标题（iOS 6 新增）
是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单栏-->
<meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>
<!--添加智能 App 广告条 Smart App Banner（iOS 6+ Safari）-->
<meta name=”apple-mobile-web-app-status-bar-style” content=”black”/>
<meta name=”format-detection” content=”telphone=no, email=no”/> <!--设置苹果工具栏颜色-->
<meta name=”renderer” content=”webkit”> <!-- 启用360浏览器的极速模式(webkit)-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge”> <!--避免IE使用兼容模式-->
<meta http-equiv=”Cache-Control” content=”no-siteapp” /> <!--不让百度转码-->
<meta name=”HandheldFriendly” content=”true”> <!--针对手持设备优化，主要是针对一些老的不识别viewport的浏览器，比如黑莓-->
<meta name=”MobileOptimized” content=”320″> <!--微软的老式浏览器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏-->
<meta name=”full-screen” content=”yes”> <!--UC强制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ强制全屏-->
<meta name=”browsermode” content=”application”> <!--UC应用模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ应用模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone 点击无高亮
设置页面不缓存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
区别：优雅降级是从复杂的现状开始，并试图减少用户体验的供给，而渐进增强则是从一个非常基础的，能够起作用的版本开始，并不断扩充，以适应未来环境的需要。降级（功能衰减）意味着往回看；而渐进增强则意味着朝前看，同时保证其根基处于安全地带
页设计图
1.设计图分析和HTML模块化结构：https://www.ixigua.com/i6903745684596326915/
2.HTML模块化和CSS模块化示例：https://www.ixigua.com/i6904203127541465611/
核心知识点
过前面几节课的操作，我们为wordpress主题trans的首页模板实现了动态代码的调用，网站前端的数据与wordpress数据库的数据正式挂钩上。在接下来的课程中，我们还要修改trans主题的文章列表页、文章详情页、搜索页等等。这个时候，如果你够细心的话，会发现一个问题：trans主题的这些模板页面的头部、右侧边栏、底部的数据都是一样的。也就是说，我们每创建一个动态模板之时，都要重新修改一下这几个部分的代码。这时，我们可能会想到，既然代码都是一样的，为什么不能把这几部分的代码做成几个公共的模板，供其它模板直接调用？这就是我们今天所要探讨的问题——拆分wordpress主题trans的首页动态模板，做成几个公共模板：头部模板、右侧边栏模板、底部模板。下面，我们就一个一个地来实现。
一、头部模板——header.php。
trans主题首页模板的头部，从所有前端页面展示效果看，从最上端到搜索框那里就是首页的头部，如下图：
我们在trans主题目录下创建一个header.php，然后在trans主题首页动态模板中找到头部的所有代码。首页头部的可视化代码是包含在< header></header>标签里的，这个找起来不难。我们还要把网页代码的头部< head></head>里的代码也要找出来。简单地说，就是从网页代码的最顶部，一直到</header>这个结束标签，把这段代码剪切下来，粘贴到header.php文件中。代码如下：
< !DOCTYPE html>< html>< head>< meta charset="UTF-8">< title>< ?php echo get_bloginfo("name"); ?></title>< link rel="stylesheet" href="< ?php bloginfo("wpurl"); ?>/wp-includes/css/dashicons.css"> < link rel="stylesheet" href="< ?php echo get_bloginfo("stylesheet_url"); ?>">< /head>< body>< !-- 头部 --> < header>< div>< div>< ul>< a href="< ?php bloginfo("siteurl"); ?>">< img src="< ?php echo get_option("logo_img") ?: bloginfo("template_url")."/images/logo.png"; ?>" alt=""></a></ul>< ul>< ?php $menu = array( 'container' => false, //最外层标签名'echo' => false, //不让直接输出，而是以一个变量'theme_location' => 'menu_top', //菜单名 'depth' => 0, //菜单深度);echo strip_tags(wp_nav_menu( $menu ), '<a>' );?> </ul></div></div>< div>< div>< ul>< li id="prev">< span class="dashicons-before dashicons-arrow-left-alt"></span></li>< li id="next">< span class="dashicons-before dashicons-arrow-right-alt"></span></li>< li id="brush">< span class="dashicons-before dashicons-image-rotate"></span></li></ul>< ul>< form action="< ?php bloginfo("siteurl"); ?>" method="get">< input type="search" name="s" placeholder="搜索...">< input type="submit" value="搜索"></form> </ul></div></div></header>
二、右侧边栏模板——sidebar.php
trans主题首页模板的右侧边栏，如下图所示：
在trans主题目录下创建一个sidebar.php文件，然后，从首页模板index.php的代码中找到右侧边栏的代码。右侧边栏的所有代码包含在< div></div>这对div中，我们把整个< div>的所有代码剪切下来，粘贴到sidebar.php文件中，代码如下：
<!-- 侧边栏 -->< div>< div class="c_right_0 right_con">< ul>< span class="dashicons-before dashicons-admin-post"></span>最新文章</ul>< ul>< ?php query_posts('posts_per_page=10&caller_get_posts=1&orderby=new'); while (have_posts()) : the_post(); echo '<a href="'.get_the_permalink().'" title="'.get_the_title().'">';echo get_the_title(); echo '</a>';endwhile; wp_reset_query(); ?> </ul></div>< div class="c_right_1 right_con">< ul>< span class="dashicons-before dashicons-admin-post"></span>热门文章</ul> < ?php query_posts('posts_per_page=8&caller_get_posts=1&orderby=comment_count'); while (have_posts()) : the_post(); ?>< ul>< div>< a href="< ?php the_permalink(); ?>">< ?php if(has_post_thumbnail()) { //如果有特色图片，就调用特色图片the_post_thumbnail( 'thumbnail' ,array( 'alt' => trim(strip_tags( $post->post_title )), 'title' => trim(strip_tags( $post->post_title )),'class' => 'home-thumb')); }else { //否则调用文章第一张图片echo '< img src="'.catch_first_image().'" alt="'.$post->post_title.'" width="150" height="150" />';}?></a></div>< div>< li>< a href="< ?php the_permalink(); ?>">< ?php the_title(); ?></a></li>< li>< span class="dashicons-before dashicons-calendar-alt">< ?php the_time("Y年m月d日"); ?> </span>< span class="dashicons-before dashicons-visibility">< ?php get_post_meta($post->ID,"views",true); ?> </span></li></div></ul> < ?php endwhile; wp_reset_query(); ?></div>< div class="c_right_2 right_con">< ul>< span class="dashicons-before dashicons-welcome-widgets-menus"></span>热门标签</ul>< ul> < ?php wp_tag_cloud('number=40&orderby=count&order=DESC&smallest=13&largest=13&unit=px'); ?></ul></div></div>
三、底部模板——footer.php
trans主题首页模板的底部效果如下图：
在trans主题目录下创建一个footer.php文件，然后在首页index.php找到底部的代码，底部是包含在< footer></footer>这个标签里的。我们从< footer>开始，一直剪切到index.php模板的代码结尾，粘贴到footer.php文件中，代码如下：
<!-- 底部 -->< footer>< div>< ul><?php if(is_home()){ //如果是首页，就调用友情链接wp_list_bookmarks('title_li=&before=&after=');}else{ //否则就调用底部导航$menu = array( 'container' => false, //最外层标签名'echo' => false, //不让直接输出，而是以一个变量'theme_location' => 'menu_bottom', //菜单名 'depth' => 0, //菜单深度);echo strip_tags(wp_nav_menu( $menu ), '<a>' );}?></ul></div>< div>< ul>< li>© <?php echo date("Y"); ?> <?php bloginfo("name"); ?> | <?php echo get_option("beian"); ?> | < a href="<?php echo get_option("map"); ?>">网站地图</a></li>< li>Power by WordPress | Theme <?php echo wp_get_theme(); ?></li></ul></div></footer></body></html>
四、引入公共模板。
通过上面三步的操作，我们就把index.php模板的头部代码、右侧边栏代码、底部代码给独立出来了，做成了公共的模板：header.php、sidebar.php、footer.php 。在index.php模板中，我们剪切掉了这几部分，只剩下了左侧边主体列表的。这时，我们要做的就是，在index.php模板中引入这几个公共模板。
方法一：使用wordpress提供的函数来引入。
wordpress已经为我们提供了这几个公共模板的引入方法：
头部模板引入：<?php get_header(); ?>
侧边栏模板引入：<?php get_sidebar(); ?>
底部模板引入：<?php get_footer(); ?>
方法二：通过include()这个PHP原生函数来引入。
头部模板引入：<?php include("header.php"); ?>
侧边栏模板引入：<?php include("sidebar.php"); ?>
底部模板引入：<?php include("footer.php"); ?>
include()方法可以用来引入任何php文件，而wordpress提供的这几个函数就有所限制，只能引入指定名字的PHP文件。
能过上面的操作，我们就完成了wordpress主题trans首页模板的切割，把它切割成4个模板：index.php首页、header.php头部模板、sidebar.php侧边栏模板、footer.php底部模板。这样的好处是，以后，我们创建其它trans主题模板时，就不需要再写头部、侧边栏、底部的代码了，后期代码修改和维护也更加方便。
*请认真填写需求信息，我们会在24小时内与您取得联系。
