有興趣了解更多的網友可以到 WordPress的Hook機制與原理 看看，小蛙直接進主題。

什麼是鉤子（hooks）

WordPress 有一種叫做鉤子的機制，在某些情況或條件發生的時候，去「鉤」起一連串相關要處理的功能，List of all WordPress hooks 可以看到所有的鉤子列表。以上面的文章舉例，WordPress 載入網頁的時候會呼叫一個 wp_head() 來載入相對應 html head 的部份，如果我們希望在執行 wp_head 的時候額外多做一些事情，就可以在佈景主題下的 functions.php 加入

add_action('wp_head', 'extra_act');
function  extra_act () {
   ... 要做的事情放在這裡 ...
} 

透過 add_action 來告訴 WordPress 說，當你執行到 wp_head 的時候，我要多掛上一件叫做 extra_act 的事情麻煩你一起處理，在 Drupal 也同樣存在 Hooks 的概念。知道鉤子是幹嘛的之後，就可以開始進行我們要做的事情了。

查找能用的鉤子

從 List of all WordPress hooks 可以查到可以用的鉤子，小蛙要的功能是當使用者留言之後，及小蛙的文章有變動的時候，把 pagespeed module 及 php 的快取清除，開始來找跟留言及文章變動有關的鉤子。

小蛙找到 transition_post_status 及 comment_post 這兩個鉤子，看起來符合需求，開始加工需要的功能

// 加入文章狀態改變的鉤子
add_action('transition_post_status', 'post_changed');
function post_changed($new_status, $old_status=null, $post=null) {
    if('publish' == $new_status || 'publish' == $old_status){
        // 清除快取，小蛙是用 shell_exec 執行系統指令
    }
}

文章新狀態是 “發布” 的情況下，以及舊狀態是 “發布” 的情況下才做清除快取，帶入到實際狀況就是文章從所有狀態轉成 “發布”，表示新發文章（無論從垃圾桶叫回來、草稿發布 …）都會符合新狀態為 “發布” 的情況。而舊狀態為 “發布” 的情況則是原本已發布的網頁，刪除或是轉換回草稿，都會符合舊狀態為 “發布” 的條件。

訪客留言部份程式碼如下，只要有新的留言進來，就會執行清除快取，讓留言的使用者可以馬上看到剛剛的留言～

add_action('comment_post', 'comment_posted');
function comment_posted() {
     // 清除快取，小蛙是用 shell_exec 執行系統指令 
}

到這邊就完成小蛙的需求囉！留個記錄給有需要的人～

WordPress 5.0 系列：

• WordPress 升級 5.0
• WordPress 5.0 區塊基本使用
• WordPress 5.0 相關問題
• 強化 WordPress 搜尋功能 – Search & Filter + Toolset Types
• WordPress 利用鉤子(Hooks)清除頁面快取

這篇文章 WordPress 利用鉤子(Hooks)清除頁面快取 最早出現於 記下來。

問題

大概長這樣，源源不絕噴出來～

DoS / DDoS 在維基百科的翻譯是

阻斷服務攻擊（英語：denial-of-service attack，簡稱DoS攻擊）亦稱洪水攻擊，是一種網路攻擊手法，其目的在於使目標電腦的網路或系統資源耗盡，使服務暫時中斷或停止，導致其正常用戶無法存取。
當駭客使用網路上兩個或以上被攻陷的電腦作為「殭屍」向特定的目標發動「阻斷服務」式攻擊時，稱為分散式阻斷服務攻擊（distributed denial-of-service attack，簡稱DDoS攻擊）。

阻斷服務攻擊

解決方法

小蛙有掛 Cloudflare CDN，標榜可以擋掉一些 DoS / DDoS，不過 log 裡還是能看到一大堆記錄，小蛙參考了兩篇文章，基本做法都差不多。

第一篇參考自 Deny Access to WordPress xmlrpc.php with NGINX
第二篇參考自 資安：WordPress 禁止 xmlrpc.php 攻擊

從 WordPress 3.5 以後，xmlrpc 預設是開啟的，記得很久以前小蛙的主機也被密集攻擊過一次

小蛙用的是 nginx，裡面可以設定當某個路徑被存取的時候，作相對應的動作，這邊我們確切知道就是 /xmlrpc.php 這支，所以就可以這樣寫

server {
  ...
  location = /xmlrpc.php {
    deny all;
    access_log off;
    log_not_found off;
    return 444; 
  }
}

當被存取 xmlrpc.php 的時候，拒絕所有連線，把存取 log 跟找不到檔案 log 都關掉，最後回傳 444，而這個 444 維基百科上的說明是 nginx 自己擴充的狀態碼。

雖然這樣 request 還是會進來，但是至少被 nginx 拒絕掉之後，不會因為大量執行 php，導致占用 CPU 跟記憶體，另外 Deny Access to WordPress xmlrpc.php with NGINX 最下面也有提到，用這個方法的話，會導致一些需要透過外部存取的插件失效，不過小蛙沒有用類似的套件，先解燃眉之急囉！這篇留在這邊給有需要的人或是未來換主機之後又遇到的自己。

這篇文章 xmlrpc.php 被攻擊了！Nginx 一個設定擋掉 DoS / DDoS 攻擊 最早出現於 記下來。

目的

WordPress 本身提供了一個基本搜尋框，有點像 Google 一樣，單一搜尋框就可以搜尋任何你想要搜尋的字，簡單明瞭，但是有些情況下希望可以讓使用者作更多方面的搜尋，例如：在某些文章中加入特定屬性，搜尋的時候可以透過這些屬性來進行二次過濾。這樣講可能有點籠統，這邊舉一個實際的例子來運用。

假設現在有一個旅遊景點的網站，小蛙可能會希望除了景點之外還能做其他搜尋，像搜尋臺北，理所當然列出了所有包含「臺北」的內容，但有些時候使用者希望限縮搜尋條件「臺北市裡面的汐止區跟北投區」的結果，或是條件可以自己換「臺北市的名勝古蹟或海水浴場」 … 等，透過兩個外掛的合作就可以做到這件事情。

安裝所需外掛

Toolset Types 外掛

點我開啟外掛連結。

這個外掛小蛙是最近才發現的，他非常方便，可以額外透過 taxonomy 的方式，附加更多屬性(or 分類)到文章上，他還有很多其他功能，但小蛙在這邊只有用到分類的部份，如上面的例子，小蛙想要在「分類」的部份加入臺北市，然後透過 Toolset Types 往下細分臺北市/新北市的各區。

安裝好外掛後，點選 Toolset -> 分類

小蛙新增了一個新的分類叫做地點，新增的時候會有很多選項，除非有特殊需求或是看得懂設定的意思，不然小蛙是直接用預設

新增完之後可以發現，文章的選單下面多了一個「地點」的選項

進入「地點」選項之後可以開始建立自己要增加的選項

建立好地點之後，便可以開始寫文章了，文章的版面也同樣此時出現了「地點」的選項，如此一來就可以讓文章有「臺北市的分類」又可以有「南港的地點(taxonomy)」

到這邊前置作業就完成了，接下來開始設定 Search 部份。

Search & Filter 外掛

點我開啟外掛連結。點我開啟教學文件。

Search & Filter 是一個非常強大的外掛，有免費版本跟付費版本，小蛙這邊只會使用到免費功能，他可以直接透過 shortcode 的方式在自己想要的地方插入搜尋功能，而且這個搜尋功能不只是基本的搜尋框，可以在搜尋框上附加上其他屬性，例如文章類型、文章分類、taxonomy … 等，這些都是 WordPress 預設沒有的，立馬開始吧！

基本語法大概是長這樣

[searchandfilter fields="search,category,post_tag"]

fields 是要產生搜尋的類型，search 是基本搜尋框、category 是分類，post_tag 是文章標籤，這邊可以看到更多其他可用欄位，都是以一段 shortcode 配上一張結果圖片的方式來介紹用法。

還可以將下拉選單 (select) 換成單選 (radio) 或是多選 (checkbox)，真的是一個非常方便且實用的外掛。除非有特殊需求，不然 Search & Filter 的基本功能就已經非常強大了。

測試的方式可以直接把 shortcode 放進文章裡，或者也可以從外觀 -> 小工具 -> 自訂 HTML

[searchandfilter fields="search,category,place"  types=",select,checkbox" headings=",分類,地區" operators=",,or" show_count=",1,1"]

小蛙需要搜尋框、分類(顯示縣市的)以及 place taxonomy(顯示地區的)，分別是用輸入框、下拉選單、跟多選框來呈現，並切加入分類、地區等標籤，重點是後面這個 operators，這個讓你可以選擇要用 and 或是 or 運算，這個的差別在於如果小蛙選擇了「臺北市」，而地區部份為多選，當使用 and 的情況下，選了「信義」跟「南港」就必須有一個地點同時是信義也同時是南港，才會被搜尋出來，這樣子就不太符合小蛙需求，因為不會有一個地方同時在南港，又同時在信義，這時候就必須多一個 operators 來設定成 or，如此一來輸出條件就變成，符合臺北市信義區或是臺北市南港區的景點，這樣才符合小蛙的需求。而 show_count 就是要不要顯示文章數量，1 是顯示 0 是不顯示。

基本上到這邊應該都能正常運作了，不過小蛙收到的需求是希望可以把多選框改成類似標籤 (tag) 的方式呈現。在剛剛的自訂 HTML 小工具中修改一下內容，看看成果，Search & Filter + Toolset Types 真的是非常方便！

WordPress 5.0 系列：

• WordPress 升級 5.0
• WordPress 5.0 區塊基本使用
• WordPress 5.0 相關問題
• 強化 WordPress 搜尋功能 – Search & Filter + Toolset Types
• WordPress 利用鉤子(Hooks)清除頁面快取

這篇文章 強化 WordPress 搜尋功能 – Search & Filter + Toolset Types 最早出現於 記下來。

首先讓小蛙當初最擔心而遲遲不升級的原因為

1. 原本編排好的 css 跑掉，或是舊文章跑版
2. 外掛停擺
3. 升級失敗後續處理的麻煩

相信這也是很多人遲遲不升級的原因，有些私人開發的外掛後續沒有辦法維護，往往造成升級之後這些好用功能的外掛不動了，常見功能的外掛還能找替代外掛，有些比較特殊功能的外掛就真的沒辦法了。

但是前一陣子發生一件事情讓小蛙不得不進行升級，很多軟體升級不外乎更好的使用者體驗、更好的效能、更多的功能，但最重要的是安全性，小蛙身邊就有一個 WordPress 的例子，該專案用很舊版本的 WordPress 開發，但後續沒人維護，因此一直維持舊版本運作著，孰不知該版本之前就已經有安全性問題而建議更新，就這樣當了箭靶，當在網路上的伺服器一暴露出自己的漏洞之後，排山倒海的攻擊隨即而來。

升級後舊文章怎麼辦

WordPress 不是笨蛋，自然也考慮到這個問題，Gutenberg 雖然以區塊為主，但是有一種區塊的類型叫做「Classic」，這個區塊就是保留傳統編輯器的內容，點一下會發現是以前熟悉的編輯器介面，而 WordPress 5.0 會將舊文章通通放進一個 Classic Block 裡面，當然前台也就能正常呈現囉！

不得不說 WordPress 這次的 Gutenberg 感覺真的不錯！

切換編輯器

如果，如果真的真的很不喜歡 Gutenberg 編輯器的話，還是可以安裝 Classic Editor (傳統編輯器) 這個外掛來切換回傳統編輯器，安裝完之後會發現文章或其他可編輯的頁面都變成這樣

這麼一來就可以很方便地隨時切換 Gutenberg 跟傳統編輯器了。

遇到的問題

SyntaxHighlighter Evolved 外掛

小蛙對這個外掛有做 css 上的修改，升上 WordPress 5.0 之後，發生兩個問題，
不過有可能是小蛙自己把 css 改壞造成的

1. 嵌入的 code 除了原始的黑背景之外，外面還更多了一塊 pre tag 的灰底
2. 如果插入在一般 Paragraph 或是 Classic 區塊中，特殊字元會被跳脫

第一點大概調整一下，就可以正常呈現了，第二點如果不放在 code 裡面，是像 > 會變跳脫成「& gt;」，& 會變成「& amp;」，(Preformated 區塊也許也可以，但小蛙沒有測試，不確定行不行。

使用方式跟之前沒什麼兩樣，差別只在改把 shortcodes 插入到 code 區塊即可。

Gutenberg 編輯器被區塊擋住

小蛙剛升級進入編輯器的時候就發現怪怪的，舊版的時候這些區塊是在編輯器下方，升級上來之後這些原本被放在下方的區塊就會擋住原本的編輯器畫面，小蛙一度以為是 bug 想要放棄 Gutenberg 了，後來想想這些區塊也許可以拖曳，試了一下果然可以拖曳到右邊的功能表裏面放，拉過去之後就一切正常囉！

不過 Gutenberg 對小蛙來說有一個小小的問題，對有些人來說可能不是問題，就是編輯的區塊只能在最下方，但小蛙的比較習慣讓輸入的區塊在編輯器的中間部份，因此就要先在下方按出很多區塊，之後文章編輯完再把它們刪掉。

Content Blocks (Custom Post Widget) 外掛

這個外掛本來是用來做上一篇提到的「Reusable Blocks」用的，Gutenberg 已經內建這個功能了，但因為某些特殊原因，小蛙還不能將這個外掛除役，進入要編輯的時候就發現 Gutenberg 沒有辦法正常進入編輯此外掛的內容。透過上面提到的切換編輯器，使用傳統編輯器來編輯這個外掛內容就可以正常使用了。

先記錄到這邊，後續發現問題再更新上來。

WordPress 5.0 系列：

• WordPress 升級 5.0
• WordPress 5.0 區塊基本使用
• WordPress 5.0 相關問題
• 強化 WordPress 搜尋功能 – Search & Filter + Toolset Types
• WordPress 利用鉤子(Hooks)清除頁面快取

這篇文章 WordPress 5.0 相關問題 最早出現於 記下來。

所有元素區塊(Block)化

更新之後首先最大的改變就是編輯器換成 Gutenberg，這個編輯器跟原本的編輯器概念上完全不太相同，小蛙一開始使用覺得有點麻煩 …

以前的編輯器是使用一系列編排下來的方式，而 Gutenberg 整個改成以「區塊(Block)」為基本單位，一篇文章是由很多很多個區塊組合而成的，例如：閱讀更多、文章段落、圖片、列表 … 等，如果都是寫文章的話，感覺上不會有太大的差別，只要寫到分段，按下 Enter 就自動會切換到下一個段落。

操作區塊

新增

其他元素的話就不再是透過”格式”的轉換，而是加入一個”該格式的區塊”，小蛙這邊舉個例子好了，假設現在要插入一個列表功能，先點選左上角的+符號

接著可以看到多了一個區塊跟一個點，上方則會出現該區塊中的工具列，右方也會切換到該區塊中可以設定的屬性。

小蛙一開始還在想，如果是有特殊 class 的元件要怎麼辦，上面這張圖很清楚，右方直接就可以提供設定該區塊物件綁定的 class。

直接在編輯器中輸入文字，該區塊就會自動設定成 Paragraph 也就是段落，如果這時候要插入段落以外的元素，只要點區塊旁邊的 + 或是左上角的 + 就可以選取其他元素。

調整位置

如果發現中間少了一段或位置錯了，不用剪下貼上什麼的，只要拖著區塊旁邊的這個東西，就可調整位置或新增區塊，這一點小蛙真的覺得很方便。

刪除

上方最右邊的 … 工具列點下來有很多功能，只要停在要刪除的區塊中，點選「Remove Block」就可以刪除區塊了。

這個 … 工具列裡面有很多很有用的東西

1. Duplicate 可以快速複製一塊一模一樣內容跟設定的區塊
2. Insert Before, Insert After 可以在上方或下方新增一個新區塊
3. Edit as HTML 是讓該區塊以 HTML 的方式編輯
4. Add to Reusable Blocks 將該區塊儲存成可重複使用的區塊

第四點是一個非常方便的功能，如果有一些「系列文的連結」或是多篇文章中固定要呈現的內容，就可以透過這個功能來實現，以後如果內容有修改，只要修改這個區塊，所有包含這個區塊的文章都會跟著更改，真的非常方便喔！

在還沒有出現這個功能之前，小蛙是透過 Content Blocks (Custom Post Widget) 這個套件來做到這件事，現在 WordPress 5.0 的 Gutenberg 直接就包含了這個功能了，實在是太方便了！

接下來大概還會再記錄遇到的一些問題跟使用心得。

WordPress 5.0 系列：

• WordPress 升級 5.0
• WordPress 5.0 區塊基本使用
• WordPress 5.0 相關問題
• 強化 WordPress 搜尋功能 – Search & Filter + Toolset Types
• WordPress 利用鉤子(Hooks)清除頁面快取

這篇文章 WordPress 5.0 區塊基本使用 最早出現於 記下來。

一開始小蛙對這個新編輯器有些疑惑，主要是擔心原本的外掛在這新的編輯器會沒辦法使用，想一想還是來試試看，建議升級 WordPress 之前建議先備份整個資料庫跟 WordPress，以免升級失敗或是升級上去之後發現原有的功能失效了，以下記錄更新 WordPress 升級時的注意事項。

確認版本是否符合

務必要先去看官網的 Requirements，像小蛙記錄這篇時的需求是

1. PHP version 7.2 or greater.
2. MySQL version 5.6 or greater OR MariaDB version 10.0 or greater.
3. HTTPS support

並且提示使用者如果環境是 PHP 5.2.4+ 及 MySQL 5.0+ 就可以使用 WordPress，但是安全性部份可能會有疑慮。最後還很貼心的附上了郵件範本，讓一些對系統比較不熟悉的使用者，可以直接透過該封信件通知伺服器管理員協助設定。

備份所有東西

由於小蛙的主機是 VPS，也就是所有管理都必須親手處理，包含架設、安裝、備份 … 等，另外有一種專門 for WordPress 的 solution 或是國內的一些虛擬主機，若是這兩種的話，可能系統商會順便提供「備份」的功能。

VPS 備份的方式，同樣有些 VPS 供應商提供一鍵備份的功能，小蛙的 VPS 供應商並沒有提供這功能，所以只能自己手動處理，關於 VPS 備份的細節可參考小蛙的另一篇文章一個腳本每天自動備份。

上面的確認都沒有問題後，有看到其他 WordPress 使用者建議先把所有的外掛都關閉，但這實在是太辛苦了，小蛙沒有做這步，想說如果更新完有壞掉的外掛，就立馬處理，看要換別的類似功能的外掛或是先撤掉避免前台掛點。

開始更新

都沒有問題之後就，點選控制台中的請立即更新！

接著，出現一次確認視窗 … 因為已經做了備份，大不了如果失敗了還原就好，接著小蛙按了確定，就 … 顯示升級完成了！快到小蛙傻眼，忘記截圖 … 先來看看有沒有哪些外掛出現問題，之後再補上記錄。

WordPress 5.0 系列：

• WordPress 升級 5.0
• WordPress 5.0 區塊基本使用
• WordPress 5.0 相關問題
• 強化 WordPress 搜尋功能 – Search & Filter + Toolset Types
• WordPress 利用鉤子(Hooks)清除頁面快取

這篇文章 WordPress 升級 5.0 最早出現於 記下來。

"text/plain", "text/html", "application/x-javascript", "text/css", "application/javascript", "text/javascript", "application/x-javascript"

這篇文章小蛙記錄一下整個設定的流程，主要分成兩個部份，分別是lighttpd.conf以及php.ini。(參考資料：【Ｌ】設定Gzip – Lighttpd & PHP @ Ching Wei : This is My Life – 工作、攝影、旅遊)

/etc/lighttpd/lighttpd.conf

1. 首先在server.modules的部份要打開“mod_compress”的選項，把前面的「#」拿掉就可以了。
2. 設定快取儲存資料夾。

   compress.cache-dir = "/var/cache/lighttpd/compress/"

3. 設定要壓縮的類型。

   compress.filetype = ("text/plain", "text/html", "application/x-javascript", "text/css", "application/javascript", "text/javascript", "application/x-javascript")

4. 重啟lighttpd，就可以透過firebug在剛剛設定的像css, javascript … 等檔案類型中看到「Accept-Encoding: gzip」的字樣。

/etc/php5/cgi/php.ini

1. 這個php.ini的檔案可能會在不同路徑下，找不到的話可以下「locate php.ini」找找看，如果還是找不到可以在下locate之前先下「updatedb」的指令更新。
2. 找到「;zlib.output_compression = On」的字樣，把前面的「;」拿掉。
3. 存檔離開後，重新啟動lighttpd。

透過以上設定就可以讓lighttpd跟php都使用gzip壓縮功能，但是小蛙設定完之後卻發現IE跟Chrome開啟頁面的時候是呈現亂碼的狀態，小蛙百思不得其解，Google了一會兒，【程式】PHP – gzencode 後變亂碼 !! @ Ching Wei : This is My Life – 工作、攝影、旅遊 和 PHP静态页面GZIP压缩乱码问题 @ SOSO問問 有提到會變成亂碼是做了兩次gzip造成的，小蛙改了半天，卻始終都還是亂碼(不同的theme可能會有不同情況)。
之後小蛙把矛頭指向Hyper Cache這個套件(因為發現這個套件下面有很多跟gzip相關的字眼)，查了一下發現，原來在安裝完Hyper Cache的時候，預設狀態中「Enable compression」是開啟的，所以造成壓縮兩次的情況，只要把Enable compression關掉就可以了。

這篇文章 網頁壓縮亂碼 – Lighttpd gzip php, js, css, html, plain 最早出現於 記下來。

3.為你自己註冊一個<a href="http://en.gravatar.com/" target="_blank">Gravatar.com</a>帳號並上傳頭像。這有助於你提昇品牌形象。

題外話，這讓小蛙想到中研院提供的myid.tw服務，myid.tw是一個單一簽入服務(Single Sign-On)，每一個myid.tw帳號就相當於是一個網路識別證(小蛙的myid)，對於有提供OpenID登入的網站，都可以不用再註冊一個新的帳號，直接使用自己的myid.tw帳號來登入，目前有很多大站也都提供類似的服務，大家最熟悉的Google, Yahoo, Facebook … 等等，也都提供單一簽入的服務。這個服務雖然跟上面的Gravatar不太一樣，但其實都是”網路識別”的一種。下圖是myid.tw的個人頁面，頁面中顯示了小蛙的個人資訊，使用者也可以自己設定關閉哪些顯示資訊。

扯遠了回歸正題，註冊Gravagtar非常簡單，gravatar「跨站台」大頭貼服務，填Email自動顯示大頭貼！只要照著重灌狂人的步驟走就可以完成了，完成後只要在有支援Gravatar大頭貼的地方輸入自己的email，系統就會自動顯示剛剛註冊時設定的大頭貼囉！如何讓WordPress支援gravatar跨站大頭貼？這篇文章可能是版本比較舊的WordPress才需要做額外設定，小蛙的WordPress是3.2.1，註冊完成之後，只要到WordPress後台管理 -> 設定 -> 討論 -> 最下方有個大頭貼，只要把勾選顯示大頭貼，就可以在留言板中顯示Gravatart大頭貼囉！另外還可以設定顯示大頭貼的分級(為了怕出現兒童不宜的大頭貼)。

看小蛙設定完Gravatar以及在WordPress後台開啟顯示頭像之後的測試留言。比起舊版的真的是容易太多了！

這篇文章 WordPress 使用 Gravatar 大頭貼 最早出現於 記下來。

在設定 WordPress Multi Site 的時候，WordPress 有一個貼心提醒的畫面，包括建立一個 blog.dir 目錄、還有在 wp-config.php 下增加一堆define()，以及設定 .htaccess。照著做之後就奇蹟似的從 WordPress 變成 WordPress Multi Site 了，以此類推，只要回推去做就可以取消 Multi Site 變回原本的 WordPress 了。

要做的步驟只有一個，把以下幾行通通註解掉(在前面加個 # 或是把要註解的部分用 /* 註解掉的內容 */ 包起來)或是刪掉就完成囉！

define('WP_ALLOW_MULTISITE', true);
define( 'MULTISITE', true );
define( 'SUBDOMAIN_INSTALL', false );
$base = '/';
define( 'DOMAIN_CURRENT_SITE', 'wazai.net' );
define( 'PATH_CURRENT_SITE', '/' );
define( 'SITE_ID_CURRENT_SITE', 1 );
define( 'BLOG_ID_CURRENT_SITE', 1 );

收工！感謝 Bobby Jay！

這篇文章 取消 WordPress Multi Site (WPMU) 設定 最早出現於 記下來。

● 建立 Facebook Developers 應用程式

要使用 Facebook Social Plugins 只要在 Facebook Developers 建立一個自己的應用程式即可。

1. 到Facebook 開發人員，點選上方「應用程式」來新增自己的應用程式。

2. 第一次使用 Facebook Developers 會出現授權請求，如果選擇不允許就不能繼續囉！同意吧！

3. 點選右上角的「建立應用程式」。

4. 輸入要建立的應用程式的顯示名稱及名稱空間，這些資訊之後都可以修改。

5. 接著輸入驗證碼，如果你的 Facebook 沒有通過手機認證，會跳出要求手機認證。


6. 建立完成會看到以下畫面。包含了 App ID(等一下會用到)、App Secret(如果要透過 Facebook 使用某些特殊功能會用到)。

7. 輸入網站網址。將網站與 Facebook 做關聯。如果要開發其他比如說 Android App，也是一樣從這邊點選輸入。

8. 資料都設定完成回到主畫面後，左側可以看到所有你建立的應用程式，右邊是應用程式的相關資訊。這樣就完成了申請 Facebook Developers 應用程式囉！

這篇文章 在 WordPress 使用 Facebook 留言板 (Facebook Social Plugins Comments) 最早出現於 記下來。