星期四, 3月 31, 2016

[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

 即可
於 沒有留言:

星期日, 3月 27, 2016

[快快樂樂學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/
於 沒有留言:

星期六, 3月 26, 2016

[快快樂樂學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

於 沒有留言:

星期四, 3月 24, 2016

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

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



於 沒有留言:

星期一, 3月 21, 2016

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
有提供一些變數的常數
ConstantDescriptionExample
ICL_LANGUAGE_CODECode for the current languagefr
ICL_LANGUAGE_NAMEName of current language, in the current languageFrançais
ICL_LANGUAGE_NAME_ENName of the current language name in EnglishFrench

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

於 沒有留言:

星期二, 3月 08, 2016

[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; ，瀏覽器即會使用預設的值。
於 沒有留言:

星期日, 3月 06, 2016

[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 普通話
於 沒有留言:

星期五, 3月 04, 2016

[快快樂樂學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





於 沒有留言:

星期四, 3月 03, 2016

[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
於 沒有留言:

星期三, 3月 02, 2016

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

本文記錄一下如何修改bootstrap modal overlay的背景色
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;

Sass

Changes the bootstrap-variables to:
$modal-backdrop-bg:           red;

於 沒有留言:

星期二, 3月 01, 2016

[Bootstrap 3] 自訂5欄的girdsystem

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

http://www.wearesicc.com/quick-tips-5-column-layout-with-twitter-bootstrap/
於 沒有留言: