[WordPress] 將痞客邦文章自動跳轉至 WordPress

[WordPress] 將痞客邦文章自動跳轉至 WordPress

最近在將痞客邦的網誌搬家到 WordPress 上,老實說真的是一大工程…

像是把文章全部匯出再匯入到 WordPress 上之後,接下來又得導流量~

 

幸好我後來在痞客邦的文章裡面,都有加上一段 JavaScript,

會去讀取我 Dropbox 上的一個 .js 檔案來執行,

(原意是用來擋掉痞客邦上的廣告 :P)

因此我可以在這個 JavaScript 檔裡做些手腳,

讓痞客邦的文章可以自動跳轉到我新的網站上~

 

1. 設定 WordPress 使用的文章網址格式

 

WordPress 的文章網址格式是可以設定的,

到 設定 > 固定網址,選擇「文章名稱」這種格式:

 

為什麼要選擇這種格式呢?

因為假設原本在痞客邦上的文章名稱是 ABC,

那轉移到 WordPress 上的網址會是 http://<site>/ABC,

這樣子我就可以在痞客邦上使用 JavaScript,

擷取出文章標題後,跳轉到 WordPress 對應的網址~

但如果是使用像「一般」的格式,就沒辦法預期跳轉過來的網址是什麼了…

 

2. 修改痞客邦上的 JavaScript

 

我之前在每篇痞客邦上的文章最後面,都加上了一段 JavaScript,

它會去引用我在 Dropbox 上放的一個 .js 檔案。

因此,我只要修改這個 .js 檔案,

就可以讓它在痞客邦網址上做我想做的事~

function redirectToWordpress()
{
    var newURLBase = "https://ephrain.net/";

    // Check if is in article page
    if (location.href.indexOf("ephrain.pixnet.net/blog/post/") >= 0)
    {
        // Look for title
        var linkTitle = jQuery(".title a");
        if (linkTitle.length > 0)
        {
            // Convert title to wordpress style link
            var wordPressTitle = linkTitle.text().toLowerCase().replace(/[[]]/g, "").replace(/ /g, "-");
            while (true)
            {
                var newURL = newURLBase + encodeURI(wordPressTitle);
                if (newURL.length <= 200)
                {
                    break;
                }

                wordPressTitle = wordPressTitle.substr(0, wordPressTitle.length-1);
            }

            // Check if new URL can be reached
            jQuery.ajax(
            {
                url: newURL,
                type: "HEAD",
            })
            .success(function()
            {
                if (jQuery("#redirectAlert").length <= 0)
                {
                    // Can be reached, redirect to new URL
                    jQuery(".article-body").prepend("<" + "div id='redirectAlert' style='font-size:x-large; color:red'>本站已遷移至 " + newURLBase + ",自動跳轉中...<" + "/div>");
                    location.href = newURL;
                }
            });
        }
    }
}

redirectToWordpress();

 

簡單解釋一下這個程式在做什麼~

首先它先確定現在是在我舊的痞客邦的單篇文章裡面,

接著找出文章的標題,試著組出在 WordPress 相對應的 URL。

研究了一下 WordPress 產生的 URL,應該會把 [ 和 ] 抽掉,

空白則換成 -,並且全部換成小寫

所以像 “[Sublime Text] 新文章” 這種標題的話,

對應的網址就是 http://<site>/sublime-text-新文章。

其中像 “新文章” 這種非英文字的字元,應該都得用 encodeURI() 替換掉。

 

但這邊還有個陷阱,那就是 WordPress 產生出來的 URL 似乎不會超過 200 字元,

因此在超過的時候,我會把原始的網址砍去最後一個字元,

再看 encodeURI() 後的長度,直到不超過 200 字元為止~

 

當組出長度適當的 URL 之後,我還加了個保險,

那就是先用 jQuery Ajax 在背景先看一下對應的 WordPress 文章在不在,

存在的話,才真的跳轉過去~

 

3. 讓 WordPress 網址可以接受痞客邦來的 Ajax 請求

 

因為我在步驟 2 加了個 Ajax 請求,

但因為是跨站請求 (Pixnet -> WordPress),因此會被 WordPress 擋下來,

會出現 Cross-Origin Resource Sharing (CORS) 的政策違反錯誤…

 

解決的一個方法,是讓 WordPress 可以接受痞客邦來的請求~

查了一下,一堆人是建議去改 functions.php 去加 HTTP 表頭,

不過我自己試沒成功 (WordPress 新手)…

 

另外又查到一篇說建議不要去改 functions.php,

要改功能的話應該都要透過外掛 (plugin) 來完成~

這正合我意,在外掛區找到了一個 HTTP Headers 外掛來安裝:

 

裝好之後,把 Access-Control-Allow-Origin 的設定打開 (On),

並且設定 origin 為我舊的痞客邦網址,

只接受來自我痞客邦網址的請求,避免其他人也能亂連:

 

這樣設定好之後,從痞客邦那邊來的 Ajax 請求就不會再出現 CORS 的錯誤了。

 

4. 執行網址跳轉

 

前面的步驟都完成之後,隨意連到我的痞客邦一篇文章試試,

果然就成功的跳轉到 WordPress 網站上了,真是太好啦~^^

不過我預期還是有一些文章沒辦法跳轉成功,

畢竟我並沒有去深入研究 WordPress 的網址格式,

所以可能有些特殊字元,WordPress 會有特殊的處理,

等遇到之後再來看看囉~ 😛

 

參考資料:

Should I use encodeURI or encodeURIComponent for encoding URLs?

Why You Shouldn’t Use functions.php (And What You Should Do Instead)

Is there a way to enable Cross-Origin Resource Sharing for WordPress’ ajaxurl?

Change post_name’s length from 200 to 400

 

(本頁面已被瀏覽過 468 次)

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *

這個網站採用 Akismet 服務減少垃圾留言。進一步了解 Akismet 如何處理網站訪客的留言資料