整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
<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小時內與您取得聯系。
