[Apache] Could not reliably determine the server's fully qualified domain name 錯誤訊息

AH00558: apache2: Could not reliably determine the server's fully qualified domain name, using 127.0.1.1. Set the 'ServerName' directive globally to suppress this message

只要在
sudo vim /etc/apache2/apache2.conf

加入ServerName localhost

即可

[快快樂樂學Wordpress] wordpress來指定某個用戶登入以實作SSO(單點登入)

最近實作了一個wp的SSO機制，
主要用了get_user_by的方法來取得用戶的資訊後，
再透過wp_set_current_user與wp_set_auth_cookie設定用戶的session並執行wp_login的hook即可。

if($user){

   //do the single sing on
   wp_set_current_user( $user_id, $user->user_login );
      wp_set_auth_cookie( $user_id );
      
      //email
      // echo $user->user_login;

      do_action( 'wp_login', $user->user_login,$user );
  }
 

REF

http://carlofontanos.com/auto-login-to-wordpress-from-another-website/

[快快樂樂學Wordpress] 新增plugin教學

//註冊文章類型->也會產生一個admin的側欄，多一個類型就會多一個側欄
register_post_type

//新增外掛至admin的側欄
add_menu_page

REF
https://developer.wordpress.org/reference/functions/add_menu_page/
https://codex.wordpress.org/Function_Reference/register_post_type

[Wordpress] 自訂的php頁面呼叫wp function

require_once(dirname(dirname(__FILE__)).'/wp-load.php');

Markdown-Cheatsheet 參考表

現在流行使用Markdown來寫文件了了，
有興趣的朋友可以看一下下面這個github repo。
看一下就可以快速入門了。

https://github.com/adam-p/markdown-here/wiki/Markdown-Cheatsheet

update:

這裡有更多語法
http://pages.tzengyuxio.me/pandoc/

[WordPress] Woocomerce login hook筆記

記錄一下woocommerce hook的筆記

//一般wp_login的hook

function so_26675676_your_function($user_login, $user) {
 // your code
}
add_action('wp_login', 'so_26675676_your_function', 10, 2);

//woocommerce login hook，你可以自訂_wp_http_referer參數

add_filter( 'woocommerce_login_redirect', 'krex_redirect'); add_filter( 'woocommerce_registration_redirect', 'krex_redirect'); function krex_redirect( $redirect_to ) { if ( ! empty( $_REQUEST['_wp_http_referer'] ) ){ $ref = wp_unslash( $_REQUEST['_wp_http_referer'] ); } return $ref; }

//shortcode

[woo_social_login redirect_url="轉頁的網址"]

/*----------------------------------------------------
------------------------*/
// redirects for login / logout
/*----------------------------------------------------------------------------*/
add_filter('woocommerce_login_redirect', 'login_redirect');

function login_redirect($redirect_to) {

 $location = $_SERVER['HTTP_REFERER'];
wp_safe_redirect($location);
exit();

}

add_action('wp_logout','logout_redirect');

function logout_redirect(){

$location = $_SERVER['HTTP_REFERER'];
wp_safe_redirect($location);
exit();

}

• https://www.skyverge.com/blog/advanced-woocommerce-social-login/
• https://github.com/woothemes/woocommerce/commit/014e31952828377bf7a1ebf4e812a43d0bcefa67#commitcomment-3351995

[Wordpress Plugin] 多國語言插件

好用但要付錢的WPML多國語言插件 :D

有提供一些變數的常數

Constant	Description	Example
ICL_LANGUAGE_CODE	Code for the current language	fr
ICL_LANGUAGE_NAME	Name of current language, in the current language	Français
ICL_LANGUAGE_NAME_EN	Name of the current language name in English	French

ICL_LANGUAGE_CODE

Code for the current language

fr

ICL_LANGUAGE_NAME

Name of current language, in the current language

Français

ICL_LANGUAGE_NAME_EN

Name of the current language name in English

French

REF
https://wpml.org/
https://wpml.org/documentation/support/wpml-coding-api/

[CSS] 使用Media Query來處理不同裝置所需的樣式筆記

記錄一下相關media query的筆記。

• media query可用來依據裝置特性套用樣式。
• min-width (而不是 min-device-width) 以確保獲得最通用的體驗。
• 針對元素使用相對大小，避免版面走樣。

實作方法

使用link標籤

使用import語法

查詢語法

一般RWD最常使用以下屬性

屬性	結果
min-width	任何超過查詢中指定寬度的瀏覽器都會套用規則。
max-width	任何未超過查詢中指定寬度的瀏覽器都會套用規則。
min-height	任何超過查詢中指定高度的瀏覽器都會套用規則。
max-height	任何未超過查詢中指定高度的瀏覽器都會套用規則。
orientation=portrait	任何高度大於或等於寬度的瀏覽器都會套用規則。
orientation=landscape	任何寬度大於高度的瀏覽器都會套用規則

[CSS] 重設 絕對定位的值

今天在試media query重新定位某個icon時，發現一直無法清掉left，

查了一下google大神，可以在覆寫的css中改加上 left:auto; ，瀏覽器即會使用預設的值。

[Html5]多國語系 i18n 字串符設定

新版的lang設定值已進化成以下的列表了，有需求要朋友可以參考一下。

Lang對應清單

zh-Hans 簡體中文

zh-Hans-CN 大陸地區使用的簡體中文

zh-Hans-HK 香港地區使用的簡體中文

zh-Hans-MO 澳門使用的簡體中文

zh-Hans-SG 新加坡使用的簡體中文

zh-Hans-TW 臺灣使用的簡體中文

zh-Hant 繁體中文

zh-Hant-CN 大陸地區使用的繁體中文

zh-Hant-HK 香港地區使用的繁體中文

zh-Hant-MO 澳門使用的繁體中文

zh-Hant-SG 新加坡使用的繁體中文

zh-Hant-TW 臺灣使用的繁體中文

其他舊式用法，PS：不符合RFC 4646規範

zh-hakka 客家話

zh-cmn 普通話

[快快樂樂學Wordpress] 自訂樣版: 基礎架構 (1)

記錄一下新增wordpress樣版的筆記

樣版基本需求檔案

請在theme folder之下新增下面三個檔案

index.php

style.css

function.php

之後後台就會出現你的樣版了

DEMO

因為index.php與function.php什麼都沒寫，因此網站會呈現一片空白 Orz

完成的佈景主題所需要的檔案

 style.css

 header.php

 footer.php

 index.php

 single.php

 page.php

 sidebar.php

 comments.php

 archives.php

 search.php

 searchform.php

 404.php

 functions.php

[Html5] 在網頁播放midi音樂檔

因為工作需求需要在網頁上播放midi，

查了一下使用html5 audio的播放器是無法播放的，

使用舊式的object tag chrome會跳出禁用的警告，

最後使用https://github.com/chenx/MidiPlayer 這個方法是最簡單處理的，

只需要下載一個js檔就可以簡單使用了!!

Features

Can specify these in constructor parameter list: midi, target, loop, maxLoop, end_callback.

• - midi: MIDI file path. 
• - target: Target html element that this MIDI player is attached to. 
• - loop: Optinoal. Whether loop the play. Value is true/false, default is false. 
• - maxLoop: Optional. max number of loops to play when loop is true. Negative or 0 means infinite. Default is 1. 
• - end_callback: Optional. Callback function when MIDI ends. 
• e.g., use this to reset target button value from "stop" back to "play".
• Can specify a debug div, to display debug message: setDebugDiv(debug_div_id).
• Start/stop MIDI by: start(), stop().
• If a MIDI started play, call start() again will stop and then restart from beginning.

範例

//初始化
 // * @param midi    MIDI file path.
                    // * @param target  Target html element that this MIDI player is attached to.
                    // * @param loop    Optinoal. Whether loop the play. Value is true/false, default is false.
                    // * @param maxLoop Optional. max number of loops to play when loop is true.
                    // *                Negative or 0 means infinite. Default is 1.
                    // * @param end_callback Optional. Callback function when MIDI ends.
                    midiPlayer = new MidiPlayer(url, MIDI_ELEM_ID, true, 1, function() {
                        console.log('midi done');
                    });

//播放
 midiPlayer.play();
//停止
 midiPlayer.stop();

參考連結

https://github.com/mudcube/MIDI.js => 功能最強大的midi庫
https://developer.mozilla.org/zh-TW/docs/Web_Audio_API
http://stackoverflow.com/questions/5789734/does-the-html5-audio-tag-encompass-mid-midi-unofficially
http://homeofcox-cs.blogspot.tw/2015/04/play-midi-in-browser-by-javascript-only.html
https://github.com/chenx/MidiPlayer

[Bootstrap 3] 變更modal overlay的背景色方法

本文記錄一下如何修改bootstrap modal overlay的背景色

http://stackoverflow.com/questions/10585689/change-the-background-color-in-a-twitter-bootstrap-modal

To change the color via:

CSS

Put these styles in your stylesheet after the bootstrap styles:

.modal-backdrop {
   background-color: red;
}

Less

Changes the bootstrap-variables to:

@modal-backdrop-bg:           red;

Source

Sass

Changes the bootstrap-variables to:

$modal-backdrop-bg:           red;




[Bootstrap 3] 自訂5欄的girdsystem

本文講解如何擴充bootstrap 3，支援5欄的gird system

http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/