顯示具有 網頁撰寫 標籤的文章。 顯示所有文章
顯示具有 網頁撰寫 標籤的文章。 顯示所有文章

2016年7月21日 星期四

[Wordpress] A Method for combining both of plain and custom URLs

In Wordpress, we usually set the custom URLs for the purpose of SEO.
For the old plain URLs which are previously published to other sites, we should maintain them by redirecting to the new custom URLs.

The htaccess setting can simply do the redirection to a static page, such as response 404 not found or see other new site. Sometimes, we don’t know how many old plain urls are published. It cannot fulfill our needs for mapping the old plain URLs to the corresponding new URLs. For example, we want to create the following rules of redirections:

redirect http://example.com/?p=123 to http://example.com/custom/link

redirect http://example.com/?p=456 to http://example.com/the/other_links

There may be more old URLs we don’t be aware of are published. A general soluton is to keep both of the plain and custom URLs.

In this case, we use add_filter function provided by Wordpress.
Navigate your directory of currently used theme and find functions.php and put a piece of codes as follows:

function compatible_link( $postlink, $redirect) {
    $id = get_query_var('p', -1);
    if($id !== -1 && is_numeric($id)) {
        return get_permalink($id);
    }
    return $postlink;
}

add_filter('post_type_link', 'compatible_link', 10, 2);

Done! Enjoy your website.

REFERENCE:

  1. Rewriting URLs in WordPress: Tips and Plugins. URL: http://www.hongkiat.com/blog/wordpress-url-rewrite/
  2. Wordpress的Hook機制與原理. URL: http://www.mrmu.com.tw/2011/10/10/wordpress-hook/
  3. Custom post type with post_id in permalink structure. URL: https://wordpress.org/support/topic/custom-post-type-permalink-structure
  4. Custom Login Url with plain permalink format. URL: https://wordpress.org/support/topic/custom-login-url-with-plain-permalink-format
  5. Function Reference/get query var. URL:https://codex.wordpress.org/Function_Reference/get_query_var
  6. CREATING CUSTOM PERMALINKS IN WORDPRESS. URL:http://wp-events-plugin.com/tutorials/creating-custom-permalinks-in-wordpress/

2013年9月15日 星期日

Google表單自動寄信給填表人

2013/09/15 updated: 由於sheet的API呼叫跟Form的呼叫API不同,這邊加入Google表單的範例。
2015/02/27 updated: Google Docs的API改版了,筆者已經發布新版的寫法,請移駕至此。

現在網路上教的Google Docs問卷,都只有填表格功能,難道沒有讓使用者填寫完資料後,寄一份資料到使用者信箱的功能嗎?因為我們有時候需要製作收據系統之類的…。

答案是有的!我們只要動幾根手指頭,依照下列步驟,就可以輕易開發出這個功能喔!請依照以下步驟一步一步跟著我做即可。
請注意,如果是直接用Google表單的話,請注意第三步驟有些不同。

2013年8月14日 星期三

[Windows] Port 80被佔用導致Apache無法啟動

我們在Windows上使用AppServ架設網頁服務時,有時候會發現Port 80被佔用,導致無法啟動的狀況。

面對這樣子的窘境,可以參照以下步驟來執行:

  1. 開啟命令提示字元視窗,輸入以下指令:netstat –ano ,找出佔用Port 80的程式PID
  2. 開啟「工作管理員」,到「處理程序」標籤,按上方的「檢視」→「選擇欄位」,把PID選項勾選起來。
  3. 看看是哪一個Service佔用了80 Port? 就處理處理一下吧。

一般而言,最常發生Skype佔用80 Port的狀況,若發生此狀況,請參考這邊的解決辦法。

    倘若發現PID = 4,且來源是NT Kernel佔用的話,請別急著把它砍掉。

    請下達以下指令:

  1. net stop http
  2. Sc config http start= disabled   
    (注意,這一行請完整複製,大小寫與空格都有差異)

完成後,最好重新開機一下,這樣子問題應該就解決了。

參考資源

  1. Getting Apache to run on port 80 on Windows 7
  2. [問題排除] 80PORT被佔用? 如何查出佔用PORT的方法
  3. Skype 佔用了 port 80

2013年8月12日 星期一

AngularJS: The framework of JS based on MVC

在許多Javascript MVC的framework中,除了ExtJS、Backbone.js、YUI、EmberJS以外,AngularJS 也是目前最被熱烈討論的Javascript MVC framework之一。他除了有Google大神的支持以外,也使用MIT授權協議,逐漸成為商業產品的熱門選擇。

如果各位有興趣的話,可以先看以下Slides介紹,再搭配Will保哥的介紹文服用。

相關連結:

  1. AngularJS: Overview
  2. 前端工程的極致精品: AngularJS 開發框架介紹
  3. AngularJS中文電子書 (推薦)

2013年2月18日 星期一

[Web] How to force browsers not to cache your website?

I've found the useful meta tag information, and you just add the information inside "head" tag.


<meta http-equiv="no-cache">
<meta http-equiv="Expires" content="-1">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Pragma" content="no cache">


Cheers.

2012年12月13日 星期四

Themes for Drupal 7.

I've found these interesting themes which may be suitable for my projects I encountered.

  1. http://drupal.org/project/boldy
  2. http://drupal.org/project/adaptivetheme
  3. http://drupal.org/project/corporateclean
  4. http://drupal.org/project/journalcrunch

And, there are some major companies which have expertise in Drupal theme design I focused:

  1. http://www.siliconinfo.com/drupal-web-development-developer/detroit-metro-drupal-programmer-drupal-web-developer.html
  2. http://kaolti.com/
If anyone wants to find Drupal Theme, go to Drupal Themes and find what you want.

2012年11月12日 星期一

[PHP] Solution for the Message in PHPMyAdmin: Query was empty!

During the few days, I've encountered a problem for operating PHPMyadmin at my workstation. It is very strange situation while  clicking the viewing button in PHPMyadmin. Whenever I click the viewing button, the result is always the shown message with "query was empty" in PHPMyAdmin.
[Note: Nov 5, 2012 - I've also found the bug existed in phpMyAdmin-3.5.4-rc1. No matter in 2.11.11 or 3.5.4, this bug is still not solved. Further, I have submitted this bug to the SourceForge for PHPMyAdmin ] 

2012年10月27日 星期六

[PHP] 將_GET與 _POST陣列的變數,轉為全域變數的兩種作法

因為最近要改別人寫的舊專案,該專案的寫法為需要將_GET與_POST陣列的變數,改為全域變數。也就是說,我們可以用$register 直接存取$_GET['register'];

像這類的要求,可以分為兩種解決方法:

1. 如果管理員有給.htaccess操作的權限:
那麼,可以在.htaccess加入以下語法:

php_value register_globals On
php_flag register_globals On

2. 如果管理員沒有給.htaccess操作的權限:
我從這篇得到的方法,只要寫一個set_globals.php的程式,程式碼內容如下:

每當有程式要執行時,先加一句 require('set_globals.php'); 或include('set_globals.php'); 引入該檔案即可。

參考資料
[程式][PHP] 如何快速接收POST或是GET的變數,並轉存。

2012年9月11日 星期二

[Chrome] The Useful Materials of Chrome Storage

  Congratulations! The number of users for my developed Chrome extension:Yahoo Dictionary (The Chinese name is "Yahoo字典查詢器") has been over 540 users. The next version 0.3 will have some important features:

  1. Store the searched word to construct user's learning records.
  2. Customize user preferences.

  In order to develop these significant features,  the main question is that how to store user's records. The answer is use Chrome Storage.
  Fortunately, I have collected some useful materials as the followings:

  1. Write a simple Google Chrome extension. (There is one simple example about Chrome localStorage)
  2. How to build a Chrome extension, Part 2: Options and localStorage
  3. Google Chrome Extensions: Chrome Storage
  4. Google Chrome: Managing HTML5 Offline Storage
  5. Google Chrome Extensions: Manifest Format. (See "unlimitedStorage" )
Please be patient and have best wishes to the next patch!
Thanks for your reading, and you can reply me under this page if you have any questions.

Regards,
The developer of Chrome Extension: Yahoo Dictionary



2012年8月21日 星期二

[Java] Lucene Tutorial

Lucene is one of important search engines. It provides grate search performance and easy implementation.
Here are some tutorials of Lucene :
1. Create your own search engine (Traditional Chinese)
2. Discover the Lucene full-text search library
3. A Short Introduction to Lucene
4. An Introduction to Apache Lucene for Full-Text Search

If you have more interests in it. Just go to the official website: http://lucene.apache.org/core/

2012年8月2日 星期四

[Web Design] How to implement a browser popup window?

There are two types of methods to pop up a browser window:
1. jQuery



2. Javascript




[PHP] INI設定與Debug教學

在DoubleService的教學中提及,在開發PHP測試函式庫時,由於各個伺服器對於php.ini的設定可能都不一樣。因此,在測試函式庫之前,最好加入以下幾行,以確保自己的程式正確無虞。


有了上述的程式碼,就可以輕鬆Debug囉。另外,請記得在將程式碼交給客戶之前,把Debug模式關閉喔。
至於為什麼要通過這些檢查呢?DobuleService曾經提及:


1. 避免變數名前後不小心打錯。
2. 避免不存在的鍵值,隱藏可能的邏輯錯誤。
3. 強制變數初始化,避免變數交互引用覆蓋或誤用。
4. 強制正規化變數型態,避免隱藏性錯誤。
5. 自然養成嚴謹的編程習慣。
6. 強化程式本身的環境可攜性。


另外,值得一提的是,並非所有ini設定都可以透過ini_set()這個函式來設定的,只有被系統規範為PHP_INI_ALL或是 PHP_INI_USER的選項,才可以使用ini_set()。若不清楚哪些可設定的話,請參見twphp提供的資料:http://tw.php.net/manual/en/ini.list.php


參考資料

  1. 開發PHP時可能會做的環境設定
  2. PHP開發開啟E_ALL的重要性
  3. List of php.ini directives
  4. PHP:ini_set()可更改的項目
  5. Why is the result of E_ALL | E_STRICT the same as only E_ALL?
  6. php.ini開啟error設定

[PHP] PEAR、MVC、ZendFramework相關教學資源

PEAR 教學資源




其它相關教學資源:

2012年7月28日 星期六

[CSS] Image Sprites

在做網頁設計時,我們時常為了網站美感,在網頁中放入許多小圖(ex: 按鈕、文章標題背景、標籤) 。然而,當一個網頁有多個圖檔要載入時(ex: 30張以上),瀏覽器在解析時,會不停地發送Http Requests,使得流暢度降低,也易造成client端負擔。
因此,利用CSS Sprites可減少瀏覽器對圖檔的Http Requests。此一技巧是將網頁中會用到的背景圖檔,全部集中放在一個圖片檔中,並利用 CSS 的 background-image 與 background-position 屬性將欲顯示的按鈕圖等部分顯示出來。如此,便可降低Http Requests。

2012年4月22日 星期日

[Web Design] 用jQuery Mobile 開發Mobile Web Apps

方才筆者看到了jQuery 的手機版網頁開發:jQuery Mobile
號稱由jQuery 團隊支援的手機版網頁開發APIs,
有著以下特色:


  • 以 jQuery 為核心
  • 檔案極小 (重新製作過的核心壓縮過約80kb,加上css約48kb)
  • 支援HTML 5,且透過 HTML5 data-* tag 來達成種種 UI 的設定
  • 自動切換排版
  • 支援滑鼠與觸碰事件 (Event Driven)
  • WAI-ARIA (參見[4], [5], [6]  )
  • 強大的佈景主題系統
  • ASP.NET MVC 的支援 (特別支援 ASP.Net MVC 4 )
  • 支援市面上大部分行動裝置
  • 畫面一致
  • 多樣化的 UI
  • Progressive Enhancement & Graceful Degradation
讓對於手機程式開發不熟的網站工程師,能夠用既有的Web Design技術,開發Web Apps for Tablet or Smart Phone。
目前jQuery Mobile發展至1.1.0版,支援ToolBar, ListView, Button, Event等功能,有興趣的人可到官網看Demo。

其它相關的Mobile Web App開發libraries 有:
1. PhoneGap (目前版本 1.6.1 )

有興趣的讀者,不妨選擇一套來玩玩看吧。
身為jQuery愛用者的我,當然是選擇jQuery Mobile囉!

參考資料
15. [JS Group] Beginning Phonegap (有關PhoneGap的介紹)

[Apache] htaccess 入門/進階 教學資源


  1. .htaccess是什麼?.htaccess幾個簡單應用
  2. Apache .htaccess Guide & Tutorial
  3. Apache Tutorial:.htaccess file
  4. .htaccess Tutorial
  5. THE Ultimate Htaccess
  6. Advanced htaccess tutorial
  7. more .htaccess tips and tricks
  8. 8 Great Htaccess Rules To Improve Your Website
  9. 用 htaccess 來擋圖片盜連並且讓 google reader 可讀
  10. Ultimate Guide to htaccess and mod_rewrite
  11. Mod_Rewrite and .htaccess (有詳細解說)
  12. Mod_Rewrite- Hide index.php (有詳細解說)
  13. Apache htaccess中的Rewritecond規則介紹
  14. Extending Rules

2012年3月14日 星期三

[雲端運算] Google Cloud Storage 來囉!

Google Cloud Storage 開始試營運囉。什麼是Google Cloud Storage?
Google Cloud Storage提供雲端儲存服務,具備RESTful (REpresentational State Transfer) 功能,根據"REST and RESTfull web service"這篇文章的說明,對RESTful做了以下闡釋:
REST 把軟體視為 "資源"(Resource),以 URL (Uniform Resource Locator) 定位資源所在處。資源的使用者則藉由 HTTP 協定中所定義的"方法"(method)操作資源。REST 所稱的軟體,其實是資料與資料處理方法的包裝,也就是 OOP 中的 "個體"、"物件"。同時在 HTTP 中,也定義了四種基本方法,即 GET, POST, PUT, DELETE。以上四種基本方法大致上對應了四種資料處理動作,即 Create, Read, Update, Delete (CRUD) 
有興趣的讀者,可以自行看看原文解釋。

Google Cloud Storage 服務提供了以下幾種特性:

  1. 快速、高延展性與高可靠度的物件儲存服務
    1. 所有資料皆複製好幾份到Google雲端資料中心
    2. 讀寫同步
    3. 物件大小可達TB等級,支援可恢復性的上傳、下載以及Range-GET。
    4. Domain-scoped bucket命名空間
  2. 簡單、彈性 、具驗證以及共享能力
    1. 支援  OAuth 2.0 驗證
    2. 可驗證的Web下載能力
    3. 個別的、專案等級或是群組等級的控制存取
那麼,要怎麼樣才可以開發Google Cloud Storage呢?你只要:
  1. 擁有Google帳號,並且有存取Cloud Storage的能力
  2. 安裝Python 2.6或2.7
  3. 安裝最新版的GSUtil 工具
付費方式則根據儲存資料大小、網路流量大小、Request(GET, POST, PUT, HEAD)等需求,有不同的計價方式,詳細請參考官網頁面。

而Google官方則提供免費試用版本,直到2012年6月30日以前申請,你可以得到:
  • 5 GB of storage
  • 25 GB of download data (20 GB to Americas and EMEA*; 5 GB to Asia-Pacific)
  • 25 GB of upload data (20 GB to Americas and EMEA*; 5 GB to Asia-Pacific)
  • 30,000 GET, HEAD requests
  • 3,000 PUT, POST, GET bucket**, GET service** requests
這樣看起來,收費方式跟Amazon S3, Windows Azure等差不多耶。不過,因為是全球知名的Google做的,品質應該不差吧。 (它背後有強大的Google App Engine啊XD)

參考資料

2012年2月29日 星期三

URL最大長度

URL最大長度的限制,在標準規範中並無定義。但是,Microsoft Internet Explorer 有規定,需在
2,083個字元內。其他瀏覽器,如Firefox、Chrome、Opera等,至少為65,536個字元。

但Apache Server可接受的字元數為4,000,IIS則為16,384。

因此,若開發人員想要利用URL傳遞參數的話,URL長度盡量在2,000個字元內,會比較安全。


參考資料

  1. URL的最大長度限制
  2. 最大 URL 長度是在 Internet Explorer 中的 2,083 字元