整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
// width 設(shè)置viewport寬度，為一個(gè)正整數(shù)，或字符串‘device-width’
// device-width 設(shè)備寬度
// height 設(shè)置viewport高度，一般設(shè)置了寬度，會(huì)自動(dòng)解析出高度，可以不用設(shè)置
// initial-scale 默認(rèn)縮放比例（初始縮放比例），為一個(gè)數(shù)字，可以帶小數(shù)
// minimum-scale 允許用戶最小縮放比例，為一個(gè)數(shù)字，可以帶小數(shù)
// maximum-scale 允許用戶最大縮放比例，為一個(gè)數(shù)字，可以帶小數(shù)
// user-scalable 是否允許手動(dòng)縮放
局部處理
全局處理
<!DOCTYPE html> <!--H5標(biāo)準(zhǔn)聲明，使用 HTML5 doctype，不區(qū)分大小寫-->
<head lang=”en”> <!--標(biāo)準(zhǔn)的 lang 屬性寫法-->
<meta charset=’utf-8′> <!--聲明文檔使用的字符編碼-->
<meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″/> <!--優(yōu)先使用 IE 最新版本和 Chrome-->
<meta name=”description” content=”不超過150個(gè)字符”/> <!--頁面描述-->
<meta name=”keywords” content=””/> <!-- 頁面關(guān)鍵詞-->
<meta name=”author” content=”name, email@gmail.com”/> <!--網(wǎng)頁作者-->
<meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取-->
<meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> <!--為移動(dòng)設(shè)備添加 viewport-->
<meta name=”apple-mobile-web-app-title” content=”標(biāo)題”> <!--iOS 設(shè)備 begin-->
<meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的標(biāo)題（iOS 6 新增）
是否啟用 WebApp 全屏模式，刪除蘋果默認(rèn)的工具欄和菜單欄-->
<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”/> <!--設(shè)置蘋果工具欄顏色-->
<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” /> <!--不讓百度轉(zhuǎn)碼-->
<meta name=”HandheldFriendly” content=”true”> <!--針對(duì)手持設(shè)備優(yōu)化，主要是針對(duì)一些老的不識(shí)別viewport的瀏覽器，比如黑莓-->
<meta name=”MobileOptimized” content=”320″> <!--微軟的老式瀏覽器-->
<meta name=”screen-orientation” content=”portrait”> <!--uc強(qiáng)制豎屏-->
<meta name=”x5-orientation” content=”portrait”> <!--QQ強(qiáng)制豎屏-->
<meta name=”full-screen” content=”yes”> <!--UC強(qiáng)制全屏-->
<meta name=”x5-fullscreen” content=”true”> <!--QQ強(qiáng)制全屏-->
<meta name=”browsermode” content=”application”> <!--UC應(yīng)用模式-->
<meta name=”x5-page-mode” content=”app”> <!-- QQ應(yīng)用模式-->
<meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone 點(diǎn)擊無高亮
設(shè)置頁面不緩存-->
<meta http-equiv=”pragma” content=”no-cache”>
<meta http-equiv=”cache-control” content=”no-cache”>
<meta http-equiv=”expires” content=”0″>
區(qū)別：優(yōu)雅降級(jí)是從復(fù)雜的現(xiàn)狀開始，并試圖減少用戶體驗(yàn)的供給，而漸進(jìn)增強(qiáng)則是從一個(gè)非常基礎(chǔ)的，能夠起作用的版本開始，并不斷擴(kuò)充，以適應(yīng)未來環(huán)境的需要。降級(jí)（功能衰減）意味著往回看；而漸進(jìn)增強(qiáng)則意味著朝前看，同時(shí)保證其根基處于安全地帶
頁設(shè)計(jì)圖
1.設(shè)計(jì)圖分析和HTML模塊化結(jié)構(gòu)：https://www.ixigua.com/i6903745684596326915/
2.HTML模塊化和CSS模塊化示例：https://www.ixigua.com/i6904203127541465611/
核心知識(shí)點(diǎn)
過前面幾節(jié)課的操作，我們?yōu)閣ordpress主題trans的首頁模板實(shí)現(xiàn)了動(dòng)態(tài)代碼的調(diào)用，網(wǎng)站前端的數(shù)據(jù)與wordpress數(shù)據(jù)庫(kù)的數(shù)據(jù)正式掛鉤上。在接下來的課程中，我們還要修改trans主題的文章列表頁、文章詳情頁、搜索頁等等。這個(gè)時(shí)候，如果你夠細(xì)心的話，會(huì)發(fā)現(xiàn)一個(gè)問題：trans主題的這些模板頁面的頭部、右側(cè)邊欄、底部的數(shù)據(jù)都是一樣的。也就是說，我們每創(chuàng)建一個(gè)動(dòng)態(tài)模板之時(shí)，都要重新修改一下這幾個(gè)部分的代碼。這時(shí)，我們可能會(huì)想到，既然代碼都是一樣的，為什么不能把這幾部分的代碼做成幾個(gè)公共的模板，供其它模板直接調(diào)用？這就是我們今天所要探討的問題——拆分wordpress主題trans的首頁動(dòng)態(tài)模板，做成幾個(gè)公共模板：頭部模板、右側(cè)邊欄模板、底部模板。下面，我們就一個(gè)一個(gè)地來實(shí)現(xiàn)。
一、頭部模板——header.php。
trans主題首頁模板的頭部，從所有前端頁面展示效果看，從最上端到搜索框那里就是首頁的頭部，如下圖：
我們?cè)趖rans主題目錄下創(chuàng)建一個(gè)header.php，然后在trans主題首頁動(dòng)態(tài)模板中找到頭部的所有代碼。首頁頭部的可視化代碼是包含在< header></header>標(biāo)簽里的，這個(gè)找起來不難。我們還要把網(wǎng)頁代碼的頭部< head></head>里的代碼也要找出來。簡(jiǎn)單地說，就是從網(wǎng)頁代碼的最頂部，一直到</header>這個(gè)結(jié)束標(biāo)簽，把這段代碼剪切下來，粘貼到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, //最外層標(biāo)簽名'echo' => false, //不讓直接輸出，而是以一個(gè)變量'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>
二、右側(cè)邊欄模板——sidebar.php
trans主題首頁模板的右側(cè)邊欄，如下圖所示：
在trans主題目錄下創(chuàng)建一個(gè)sidebar.php文件，然后，從首頁模板index.php的代碼中找到右側(cè)邊欄的代碼。右側(cè)邊欄的所有代碼包含在< div></div>這對(duì)div中，我們把整個(gè)< div>的所有代碼剪切下來，粘貼到sidebar.php文件中，代碼如下：
<!-- 側(cè)邊欄 -->< 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()) { //如果有特色圖片，就調(diào)用特色圖片the_post_thumbnail( 'thumbnail' ,array( 'alt' => trim(strip_tags( $post->post_title )), 'title' => trim(strip_tags( $post->post_title )),'class' => 'home-thumb')); }else { //否則調(diào)用文章第一張圖片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>熱門標(biāo)簽</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主題目錄下創(chuàng)建一個(gè)footer.php文件，然后在首頁index.php找到底部的代碼，底部是包含在< footer></footer>這個(gè)標(biāo)簽里的。我們從< footer>開始，一直剪切到index.php模板的代碼結(jié)尾，粘貼到footer.php文件中，代碼如下：
<!-- 底部 -->< footer>< div>< ul><?php if(is_home()){ //如果是首頁，就調(diào)用友情鏈接wp_list_bookmarks('title_li=&before=&after=');}else{ //否則就調(diào)用底部導(dǎo)航$menu = array( 'container' => false, //最外層標(biāo)簽名'echo' => false, //不讓直接輸出，而是以一個(gè)變量'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"); ?>">網(wǎng)站地圖</a></li>< li>Power by WordPress | Theme <?php echo wp_get_theme(); ?></li></ul></div></footer></body></html>
四、引入公共模板。
通過上面三步的操作，我們就把index.php模板的頭部代碼、右側(cè)邊欄代碼、底部代碼給獨(dú)立出來了，做成了公共的模板：header.php、sidebar.php、footer.php 。在index.php模板中，我們剪切掉了這幾部分，只剩下了左側(cè)邊主體列表的。這時(shí)，我們要做的就是，在index.php模板中引入這幾個(gè)公共模板。
方法一：使用wordpress提供的函數(shù)來引入。
wordpress已經(jīng)為我們提供了這幾個(gè)公共模板的引入方法：
頭部模板引入：<?php get_header(); ?>
側(cè)邊欄模板引入：<?php get_sidebar(); ?>
底部模板引入：<?php get_footer(); ?>
方法二：通過include()這個(gè)PHP原生函數(shù)來引入。
頭部模板引入：<?php include("header.php"); ?>
側(cè)邊欄模板引入：<?php include("sidebar.php"); ?>
底部模板引入：<?php include("footer.php"); ?>
include()方法可以用來引入任何php文件，而wordpress提供的這幾個(gè)函數(shù)就有所限制，只能引入指定名字的PHP文件。
能過上面的操作，我們就完成了wordpress主題trans首頁模板的切割，把它切割成4個(gè)模板：index.php首頁、header.php頭部模板、sidebar.php側(cè)邊欄模板、footer.php底部模板。這樣的好處是，以后，我們創(chuàng)建其它trans主題模板時(shí)，就不需要再寫頭部、側(cè)邊欄、底部的代碼了，后期代碼修改和維護(hù)也更加方便。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
