們?cè)陂_(kāi)發(fā)wordpress主題時(shí)最好不要直接將引用JS文件寫(xiě)到header.php中，最佳的方式是使用wordpress內(nèi)置函數(shù) wp_enqueue_script()函數(shù)，這樣既可以保證兼容，也可以提升效率。

函數(shù)代碼

wp_enqueue_script( $handle, $src, $deps, $ver, $in_footer );

參數(shù)說(shuō)明

$handle – 調(diào)用的腳本名稱(chēng)，用于區(qū)別其它js，因此不能和其它js文件命名相同。

$src – js文件的路徑（即url），不要直接使用域名url，要使用路徑函數(shù)，如parent theme使用get_template_directory_uri，child theme使用get_stylesheet_directory_uri。（WP模板路徑相關(guān)的函數(shù)中，通常帶有template的是指parent theme，帶有stylesheet的指向child theme）

$deps – 依賴(lài)關(guān)系，加載的js文件所依存的其它js的標(biāo)識(shí)字串?dāng)?shù)組（array:string），即需要在本代碼之前加載的代碼的名稱(chēng)（如js腳本依賴(lài)jquery庫(kù)，那么這里要用數(shù)組的形式寫(xiě)上jquery），非必需。

$ver – 加載js文件的版本號(hào)，作為查詢(xún)字串附加在路徑的末尾，作用是確保正確的版本信息傳遞給了客戶(hù)端，以免受到緩存的影響（如js腳本發(fā)生變化時(shí)，通過(guò)更改版本號(hào)可以強(qiáng)制客戶(hù)瀏覽器更新緩存），默認(rèn)為false，調(diào)用當(dāng)前wordpress程序的版本號(hào)，如果不想顯示，則設(shè)置為NULL（不推薦）。

$in_footer – boolean類(lèi)型，設(shè)置js文件調(diào)用代碼是否放置在html底部，設(shè)置為ture則放在底部，設(shè)置為false則放置在head部分。提示需要模板正確放置wp_footer()函數(shù)。

使用方法

通過(guò)wp_enqueue_script函數(shù)加載js文件時(shí)，應(yīng)該將它分配給一個(gè)鉤子，如只在前臺(tái)調(diào)用，使用鉤子wp_enqueue_script；只在后臺(tái)調(diào)用，使用admin_enqueue_scripts。

示例

前臺(tái)調(diào)用

function xxzhuti_theme_scripts() {

wp_enqueue_script( 'xxzhuti', get_template_directory_uri() . '/js/xxzhuti.js', array(), '1.0.0', true );

}

add_action( 'wp_enqueue_scripts', 'xxzhuti_theme_scripts' );

后臺(tái)調(diào)用

function xxzhuti_theme_scripts() {

wp_enqueue_script( 'xxzhuti', get_template_directory_uri() . '/js/xxzhuti.js', array(), '1.0.0', true );

}

add_action( 'admin_enqueue_scripts', 'xxzhuti_theme_scripts' );

附：函數(shù)位置wp-includes/functions.wp-scripts.php文件

、HTML基本信息

注釋?zhuān)?/span><!-- -->

DOCTYPE：就是告訴瀏覽器，我們要使用什么規(guī)范

head：網(wǎng)頁(yè)頭部標(biāo)簽

• title：網(wǎng)頁(yè)標(biāo)題
• meta：描述性標(biāo)簽，描述網(wǎng)站的信息，用來(lái)做SEO
• charset = "UTF-8"
• name = "keyword" content = ""關(guān)鍵詞
• name = "descrisption" content = ""描述

body：代表網(wǎng)頁(yè)主題

二、網(wǎng)頁(yè)基本標(biāo)簽

標(biāo)題標(biāo)簽

• <h1>一級(jí)標(biāo)簽</h1>一直到6級(jí)標(biāo)簽

段落標(biāo)簽

• <p>段落標(biāo)簽</p>

換行標(biāo)簽

• <br/> /是閉合的意思，單標(biāo)簽，閉不閉合都行

水平線標(biāo)簽

• <hr/>

字體樣式標(biāo)簽

• <strong>粗體</strong>
• <em>斜體</em>

注釋

• <!-- -->

特殊字符

• 空格 ---->一個(gè)空格
• 大于號(hào) >
• 小于號(hào)<
• 版權(quán)符號(hào)©

特殊符號(hào)就是 & xxx ;

三、圖像標(biāo)簽

<img src="path" alt="文字" title="text" width="x" heigth="y" />

• src 圖像地址 必填
• alt 圖像的代替文字(找不到圖片的時(shí)候顯示) 必填
• title 鼠標(biāo)懸停提示文字
• width 圖像的寬度
• height 圖像的高度

注意：../ 代表上一級(jí)目錄

四、鏈接標(biāo)簽

文本鏈接

<a href="path" target="目標(biāo)窗口位置">鏈接文本或圖像</a>

• href 鏈接路徑，要跳轉(zhuǎn)帶那個(gè)位置 必填
• target鏈接在哪個(gè)窗口打開(kāi)：常用值_self 當(dāng)前窗口（默認(rèn)的）、_blank 新窗口

圖像鏈接：就是嵌套圖片標(biāo)簽

頁(yè)面間鏈接

• 從一個(gè)頁(yè)面鏈接到另一個(gè)頁(yè)面

錨鏈接

• 第一步需要一個(gè)標(biāo)記 使用name做標(biāo)記
• 第二步跳轉(zhuǎn)到標(biāo)記 使用#標(biāo)記
• <a name="top" ></a>
  <a href="#top"></a>
  上面是頁(yè)面內(nèi)的跳轉(zhuǎn)
  
  <a name="down"></a>
  <a href="第一個(gè)頁(yè)面的path#down"></a>
  頁(yè)面間的跳轉(zhuǎn)

功能性鏈接

• 郵件鏈接：mailto： <a href="mailto:郵箱"></a>點(diǎn)擊后會(huì)打開(kāi)郵箱
• qq鏈接：在qq推廣工具里面的

五、行內(nèi)元素和塊元素

塊元素

• 無(wú)論內(nèi)容多少，該元素獨(dú)占一行
• p、h1-h6

行內(nèi)元素

• 內(nèi)容撐開(kāi)寬度、左右都是行內(nèi)元素的可以排在一起
• a、strong、em...

六、列表

什么是列表：就是一種展示方式

有序列表

• <ol> <li></li> </ol>

無(wú)序列表

• <ul> <li></li> </ul>

自定義列表

<dl>
    <dt></dt> 標(biāo)題
    <dd></dd> 選項(xiàng)
    <dd></dd>
    <dd></dd>
</dl>

七、表格

為什么使用表格

• 簡(jiǎn)單通用
• 結(jié)構(gòu)穩(wěn)定

基本結(jié)構(gòu)

• 單元格
• 行
• 列
• 跨行
• 跨列

<table border="1px" 邊框>表格標(biāo)簽
    <tr>
        <td></td>列標(biāo)簽
        <td></td>
        <td></td>
    </tr>行標(biāo)簽 這代表一行
</table>

跨列：使用colspan="夸的列數(shù)" <td colspan="4">

跨行：使用rowspan="夸的行數(shù)" <td rowspan="4">

八、視頻和音頻

視頻元素

• video
• <video src="path" controls autoplay></video>
• src:資源路徑
• controls控制條
• autoplay自動(dòng)播放

音頻元素

• audio
• <audio src="" controls autoplay></audio>

九、頁(yè)面結(jié)構(gòu)分析

十、iframe內(nèi)聯(lián)框架

<iframe src="path" name="mainFrame"></iframe>

• src必填
• width
• heigth
• name標(biāo)記
• name的使用
  <iframe src="" name="hello" frameborder="0" width="1000px" heigth="800px"></iframe>
  
  <a href="path" target="hello"></a>
  點(diǎn)擊超連接后，會(huì)在內(nèi)聯(lián)框架里顯示這個(gè)頁(yè)面

十一、表單

表單：form

<form method="post|get" action="result.hetml">
    <input />
</form>

• method 規(guī)定如何發(fā)送表單數(shù)據(jù)常用psot、get
• action 表示向何處發(fā)送表單數(shù)據(jù)，把表單的數(shù)據(jù)發(fā)送給那個(gè)地方

get方式提交：我們可以在url中看到我們提交的信息，不安全，但高效

post方式提交：比較安全，可以傳輸大文件

表單元素格式

單選框

• input type="radio"
• value 單選框的值
• name ：表示組，name一樣一次只能選一個(gè)，name不一樣可以選多個(gè)
• checked默認(rèn)選中的

多選框

• input type="checkbox"
• value = "sleep"
• name = "hooby"
• checked默認(rèn)選中的
• <input type="checkbox" name="sleep" value="slppe" checked/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  <input type="checkbox" name="sleep" value="slppe"/>shujiao
  多選框的結(jié)果是以數(shù)組的形式返回的

按鈕

<input type="button" name="btn1" value="點(diǎn)擊" />普通按鈕
<input type="image" src ="點(diǎn)擊跳轉(zhuǎn)的path"/>圖片按鈕
<input type="submit"/>提交按鈕
<input type="reset"/>重置按鈕

下拉框

<select name="列表名稱(chēng)">
    <option value="選項(xiàng)的值" select>中國(guó)</option>
    <option value="選項(xiàng)的值">中國(guó)</option>
    <option value="選項(xiàng)的值">中國(guó)</option>
    <option value="選項(xiàng)的值">中國(guó)</option>
    <option value="選項(xiàng)的值">中國(guó)</option>
</select>
提交的格式就是列表名稱(chēng)和value

• selected 默認(rèn)選擇

文本域

<textarea name="name" cols="列數(shù)" rows="行數(shù)">文本內(nèi)容</textarea>

文件域

<input type="file" name="files"/>
<input type="button" value="提交"/>

郵件驗(yàn)證

<input type="email" name="youjian">

URL

<input type="url" name="url"> 

數(shù)字驗(yàn)證

<input type="number" name="num" max="100" min="0" step="10">

滑塊

<input type="range" max="100" min="0">

搜索

<input type="search" name="search">

十二、表單的應(yīng)用

隱藏域 hidden

<input type="text" id="mark" hidden>

只讀 readonly

<input type="text" id="mark" readonly>

禁用 disabled

<input type="text" id="mark" disabled>

增強(qiáng)鼠標(biāo)可用性

<label for="mark">點(diǎn)擊</label>
<input type="text" id="mark">

十三、表單初級(jí)驗(yàn)證

為什么要進(jìn)行表單驗(yàn)證：緩解服務(wù)器壓力、保證數(shù)據(jù)安全

提示信息

• placeholder="提示信息" 在輸入框上

非空判斷

• required

正則表達(dá)式驗(yàn)證

• pattern
• <input type="text" name="mail" pattern="正則表達(dá)式">

高級(jí)驗(yàn)證使用js