2014年11月6日木曜日

Welcart 会員情報操作関係の関数まとめ

Welcartで会員情報を操作するために用意されている関数まとめ

get_memberメソッド

array get_member()
パラメータ
    なし
返り値
    現在ログインしているメンバーの情報を$_SESSION['usces_member']から取得し
    連想配列として返す。メンバーがログインしていない場合は空の配列を返す。

返り値には次のような値が格納されている。
array (size=23)
  'ID' => string '1001' (length=4)
  'registered' => string '2014-11-04 17:27:34' (length=19)
  'mailaddress1' => string 'test_user@testdomain.co.jp' (length=26)
  'mailaddress2' => string 'test_user@testdomain.co.jp' (length=26)
  'password1' => string '' (length=0)
  'password2' => string '' (length=0)
  'point' => string '0' (length=1)
  'name1' => string '実験' (length=6)
  'name2' => string '太郎' (length=6)
  'name3' => string 'ジッケン' (length=12)
  'name4' => string 'タロウ' (length=9)
  'zipcode' => string '123-4567' (length=8)
  'address1' => string '横浜市上北町' (length=18)
  'address2' => string '1-2-3' (length=5)
  'address3' => string '' (length=0)
  'tel' => string '000-1111-2223' (length=13)
  'fax' => string '' (length=0)
  'country' => string 'JP' (length=2)
  'pref' => string '北海道' (length=9)
  'status' => string '0' (length=1)
  'delivery_flag' => string '0' (length=1)
  'delivery' => string '' (length=0)
  'nicename' => string '' (length=0)
後述のget_member_infoメソッドと異なり、'country'以外のwp_usces_member_metaテーブルに登録されたメンバーメタ情報は入っていない。

usces_memberinfoメソッド

mixed usces_memberinfo(string $key, string $out = '' )
パラメータ
    $key : 取得したい$key
    $out : 表示をするか、値として返すか。省略した場合は表示を行う。
              'return'を指定した場合、関数は値を返す。
返り値
    現在ログインしているメンバーの$key項目の値を$_SESSION['$key']から取得し
    返す。$keyに空の値を渡すとget_memberと同じく全ての情報を返す。
    $keyは前述のget_memberが返す連想配列のキーと同じものが指定できる。

get_member_infoメソッド

array get_member_info( int $mid )
パラメータ
    $mid : 会員No
返り値
    会員No $midに登録された情報が格納された連想配列

返り値には次のような値が格納されている。
array (size=23)
  'ID' => string '1001' (length=4)
  'mem_email' => string 'test_user@testdomain.co.jp' (length=26)
  'mem_pass' => string '*********' (length=32)
  'mem_status' => string '0' (length=1)
  'mem_cookie' => string '' (length=0)
  'mem_point' => string '0' (length=1)
  'mem_name1' => string '実験' (length=6)
  'mem_name2' => string '太郎' (length=6)
  'mem_name3' => string 'ジッケン' (length=12)
  'mem_name4' => string 'タロウ' (length=9)
  'mem_zip' => string '123-4567' (length=8)
  'mem_pref' => string '北海道' (length=9)
  'mem_address1' => string '横浜市上北町' (length=18)
  'mem_address2' => string '1-2-3' (length=5)
  'mem_address3' => string '' (length=0)
  'mem_tel' => string '999-8888-7777' (length=13)
  'mem_fax' => string '' (length=0)
  'mem_delivery_flag' => string '0' (length=1)
  'mem_delivery' => string '' (length=0)
  'mem_registered' => string '2014-11-04 17:27:34' (length=19)
  'mem_nicename' => string '' (length=0)
  'customer_country' => string 'JP' (length=2)
  'nickname' => string 'test_nickname-kneesocksMan' (length=26)
get_member_infoメソッドは、前述のget_memberメソッドと連想配列のキーが異なる。またwp_usces_memberテーブルだけでなくwp_usces_member_metaテーブルに登録されているmember_idが$midで登録されているメンバーメタ情報も
'meta_key' => 'meta_value'の形式で同時に取得する。上記の例では
'customer_country' => string 'JP' (length=2)
'nickname' => string 'test_nickname-kneesocksMan' (length=26)
がそれにあたる。

set_member_infoメソッド

int set_member_info( array $data=array(), int $mid )
パラメータ
    $data : 更新するカラムと値の連想配列
    $mid;  : 上記$dataで更新するメンバーのID
返り値
    データベースへの書き込みが正常に行われた場合は1、失敗した場合は0。
    存在しないメンバーIDを指定した場合は0、現在の値と同じ値を書き込んだ場合も0を返す。

例:メンバーID 1001の電話番号mem_telを'000-1111-2222'にセットする。
    $res = $usces->set_member_info(array(
            'mem_tel' => '000-1111-2222'
        ), 1001);
この関数が操作するのはwp_usces_memberテーブルの値のみ。wp_usces_member_metaテーブルの方に記録されたデータを操作するには後述するset_member_meta_valueメソッドを使用する。

get_member_meta_valueメソッド

mixed get_member_meta_value(string $key, int $member_id)
パラメータ
    $key : 読み込むmeta_key
    $member_id 読み込むmember_id
返り値
    読み込んだmeta_valueを返す。読み込みが行えなかった場合はnullを返す。

set_member_meta_valueメソッド

mixed set_member_meta_value(string $key, string $meta_value, mixed $member_id = '')
パラメータ
    $key : 書き込むmeta_key
    $meta_value : 書き込むmeta_value
    $member_id 書き込むmember_id
返り値
    データベースへの書き込みが正常に行われた場合は1、失敗した場合は0。
    存在しないメンバーIDに対して書き込みを試みた場合も書き込まれ1を返す。
    現在の値と同じ値を書き込んだ場合は0を返す。
注意
    $member_idを省略した場合は、現在ログインしているメンバーのIDに対して書き込みを行う。
    メンバーがログインしていない場合は何も行わずnullを返す

usces_delete_memberdataメソッド

int usces_delete_memberdata(int $ID = 0 )
パラメータ
    $ID : 登録削除を行うメンバーID
返り値
    正常に削除が行われた場合1、削除が行われなかった場合0
注意
    wp_usces_member_metaテーブルに書き込まれたメンバーIDが
    $IDのメタ情報も同時に削除される。

Welcartにおけるredirect処理 3/3

Welcartにおけるredirect処理の解説は2回の予定であったが、復習がてらもう一つ解説を加えようと思う。

新規入会フォーム

初回の解説において、例えばlocalhostの場合で、"新規入会フォーム"の"送信する"ボタンを押したときにformのaction属性に指定されている
http://localhost/wordpress/?page_id=55&page=newmember
は、この新規入会フォーム自身であると説明した。しかし、この
http://localhost/wordpress/?page_id=55&page=newmember
がなぜ"新規入会フォーム"ページであり、その元になるファイルが、/wc_templates/member/wc_new_member_page.phpとなるのかについては詳しく触れなかったので、そこを掘り下げていきたいと思う。

regist_actionメソッドを見てみよう

regist_actionメソッドを見ると、
usces_register_action('page_newmember', 'get', 'page', 'newmember', 'page_newmember');
が見つかる。これは噛み砕くと、'get'メソッドで、$_GET['page'] = 'newmember'が渡されてきたときはpage_newmemberメソッドをコールするということである。ここで、先ほどのURLをみると
http://localhost/wordpress/?page_id=55&page=newmember
と、まさに'get'メソッドで$_GET['page'] = 'newmember'が渡っていることが分かる。なので、ad_controllerメソッドにより、page_newmemberメソッドがコールされることが分かる。

page_newmemberメソッド

page_newmemberメソッドは何をしている関数かというと、ソースをみると、
    function page_newmember(){
    
        global $wp_query;
        $this->page = 'newmemberform';
        add_filter('yoast-ga-push-after-pageview', 'usces_trackPageview_newmemberform');
        add_action('the_post', array($this, 'action_memberFilter'));
        add_action('template_redirect', array($this, 'template_redirect'));
    }
のように、$this->page = 'newmemberform';をセットし、template_redirectメソッドをtemplate_redirectアクションにフックしていることが分かる。

template_redirectメソッド

template_redirectメソッドでは、$this->pageが'newmemberform'のときに、
                        if( file_exists(get_stylesheet_directory() . '/wc_templates/member/wc_new_member_page.php') ){
                            $member_regmode = 'newmemberform';
                            include(get_stylesheet_directory() . '/wc_templates/member/wc_new_member_page.php');
                            exit;
                        }
と最初に言ったように/wc_templates/member/wc_new_member_page.phpをインクルードしており、このファイルこそが新規入会フォームを作っているファイルであると分かった。

まとめ

前回まではbuttonなどの要素をクリックし飛んだ場合を説明したが、今回のように直接URLを指定したときも同じ仕組みを利用してどのファイルを利用してどのページを生成するのかが決まっていることが分かった。Welcartにおけるredirect処理におけるモヤモヤがずいぶんと晴れた。

2014年11月3日月曜日

Welcartにおけるredirect処理 2/3

前回では「新規入会フォームで送信するボタンを押したとき」を例にWelcartにおけるredirect処理を解析しました。今回はその解析で分かったことを利用して、独自の固定ページからWelcartのredirect処理を通じて、別のページへ遷移する一連の流れを作ってみようと思います。

まず用意するもの

まず、固定ページで使用するテンプレートを作成し、固定ページを作成します。
<?php
/**
  * Template Name: Welcartリダイレクトテスト
  */
?>

<form action="<?php the_permalink(); ?>" method="post">
    <input name="jibanyan" type="submit" value="送信">
</form>
ここでのポイントは、formのaction属性には <?php the_permalink(); ?>
を指定しており、自分自身に戻るURLを指定してあるだけである点とinputのname属性には'jibanyan'が指定してあり、 $_POST['jibanyan']がセットされ送信されるという点です。

regist_actionに登録する

    function regist_action(){
        ・・・中略・・・
        usces_register_action('front_ajax', 'post', 'usces_ajax_action', NULL, 'front_ajax');
// add yokomee 2014.11.03 blogger
        usces_register_action('whisper', 'post', 'jibanyan', NULL, 'komasan');
// /add yokomee 2014.11.03 blogger
    }
regist_actionメソッドに、今回登録する遷移を登録します。
function usces_register_action($handle, $type, $key, $value, $function){
usces_register_actionメソッドの関数定義を思い出してください。今回の例では与える引数は、$handle='whisper'としました。これは何でもかまいません。$typeは、先ほど作った固定ページのformはpostをHTTPメソッドとして選んだので$type='post'と指定します。$keyはそのときセットされる$_POSTのキーを指定するので$key='jibanyan'とします。$valueの値を指定することで$_POST['jibanyan']の値によっても処理を振り分けられますが、今回はそれは使用しないので、$value=NULLとしてあります。最後に$functionに指定した'komasan'が呼び出される関数です。

usces_register_actionメソッドで指定したコールバック関数を作る

次に先ほどの登録によりコールバックされる関数を作成します。名前は先ほどの登録のとおり'komasan'とし、functions.phpに定義します。もしグローバル領域でなく、usc_e_shopクラスに定義する場合はad_controllerメソッドの上の方にusc_e_shopクラス内に定義が存在することを示すリスト、$action_arrayという変数がありますので、そこに'komasan'を追加します。今回は行いません。
    function komasan() {
        global $usces;
        $usces->page = 'ke-ta';
        add_action('template_redirect', array($usces, 'template_redirect'));
    }
今回、この関数は特に何も処理を行っていません。$usces->pageに表示するページは'ke-ta'であると設定だけ行い。'template_redirect'アクションに'template_redirect'メソッドを登録しているだけです。実際には、この段階でコールされる関数によって、ページからページに飛ぶ間に、フォームのバリデーションチェックを行ったり、入力された内容に従ってMySQL内のデータを追加・更新など行うことができます。

template_redirectメソッドに登録

template_redirectメソッドに先ほどのkomasanメソッドにより$usces->pageが'ke-ta'にされたときの処理を登録します。
    function template_redirect () {
        global $post, $usces_entries, $usces_carts, $usces_members, $usces_gp, $member_regmode;
        if( apply_filters('usces_action_template_redirect', false) ) return;//Deprecated
        if( apply_filters('usces_filter_template_redirect', false) ) return;
        if( is_single() && 'item' == $post->post_mime_type ) {
            ・・・中略・・・
        }else{
// add yokomee 2014.11.03 blogger
        switch($this->page) {
            case 'ke-ta':
                if(file_exists(get_stylesheet_directory() . '/youkai_watchichi.php')) {
                    include(get_stylesheet_directory() . '/youkai_watchichi.php');
                    exit;
                }
        }
// /add yokomee 2014.11.03 blogger
//            remove_action('the_post', array(&$this, 'goDefaultPage'));
        }
    }
ここで読み込み指定しているファイルはThemes\個別のテーマフォルダ直下のyoukai_watchichi.phpとしています。これにより、このファイルの内容が表示されます。
<h1>妖怪ウォッチ</h1>
<p>『妖怪ウォッチ』(ようかいウォッチ)は、レベルファイブから2013年7月11日に発売されたニンテンドー3DS専用ゲームソフト。</p>
今回はyoukai_watchichi.phpでは特に何も行わず、タイトルと本文を表示しているだけです。

まとめ

以上で、独自の固定ページから、Welcartのリダイレクト処理を通じて、特定の処理を行った後に、別のページにredirectする流れを作ることができました。
今回の行った処理を応用すれば、Welcartの用意したページ遷移に割り込んで独自の処理を追加したり、また、Welcartがページ遷移間で何を行っているかの理解の助けになるのではないかと思います。

2014年11月1日土曜日

Welcartにおけるredirect処理 1/3

WordPressを利用しECサイトを構築するためのPlug-in Welcartにおける備忘録

このプラグインで構築したサイトで利用する送信ボタンやカートに入れるボタンといったリンク類においてのページ遷移処理が分かりにくかったのでまとめる。

解説の最終目標

独自に作った固定ページのフォーム内のボタンから、Welcartのredirect処理を通じて テンプレートとなる.phpファイルを読み込み、ページを表示する事とします。

はじめに

まず、Welcartにおけるページ遷移処理を解説するサンプルとしては
wc_templates\wc_new_member_page.phpを選んだ。
このファイルは、新規入会フォーム画面を表示しているファイルである。
[Welcart ライブデモ]では"新規ご入会はこちら"などをクリックすることで 表示されるページ
[新規入会フォーム]がそれである。
このファイルからフォームを生成しているhtmlを探すと
    <form action="<?php echo apply_filters('usces_filter_newmember_form_action', usces_url('member', 'return')); ?>" method="post" onKeyDown="if (event.keyCode == 13) {return false;}">
        ・・・中略・・・
        <div class="send"><?php usces_newmember_button($member_regmode); ?></div>
        <?php do_action('usces_action_newmember_page_inform'); ?>
    </form>
とあり、例えばlocalhostの場合は
http://localhost/wordpress/?page_id=55&page=newmember
といったURLがformのaction属性に指定されているのが分かる。このURLは、新規入会フォーム自身を表示する際にrequestするURLと同じである。つまり、このフォームは"送信する"ボタンを押すと、自分自身をrequestするという動作をしている。

リクエストへの応答を登録する

次に少し話が飛ぶが、あるリクエストに対してどう応答するかを登録する処理を見ていく。この登録手続きが
plugins\usc-e-shop\classes\usceshop.class.php
内に定義されているregist_actionメソッドである。

regist_actionメソッド

このメソッドはusces_register_actionを呼び、各々の応答を登録する処理をしている。新規入会フォームで送信するボタンを押したときに呼び出される処理は
    function regist_action(){
        ・・・他の挙動を登録する処理・・・
        // 新規入会フォームで送信するボタンを押したときの挙動
        usces_register_action('regmember', 'request', 'regmember', NULL, 'regmember');
        ・・・他の挙動を登録する処理・・・
    }
として登録されている。

usces_register_actionメソッド

function usces_register_action($handle, $type, $key, $value, $function){
    global $usces_action;
    $usces_action[$handle] = array('type'=>$type, 'key'=>$key, 'value'=>$value, 'function'=>$function);
}
usces_register_actionメソッドはglobalな$usces_actionに$handleをキーとして
array('type'=>$type, 'key'=>$key, 'value'=>$value, 'function'=>$function)
を登録している。新規入会フォームで送信するボタンを押したときの処理は、
$usces_action['regmember'] =
    array('type'=>'request', 'key'=>'regmember', 'value'=>NULL, 'function'=>'regmember')
と登録される。

usces_register_actionメソッドはどこで呼ばれているか

では、紹介した登録手続きを行うusces_register_actionメソッドがどこから呼ばれているかを探してみると
\wp-content\plugins\usc-e-shop\usc-e-shop.phpで
<?php
/*
Plugin Name: Welcart e-Commerce
Plugin URI: http://www.welcart.com/
Description: Welcart builds the management system with a net shop on Wordpress.
Version: 1.3.16
Author: Collne inc.
Author URI: http://www.welcart.com/
*/
・・・中略・・・
global $usces;
$usces = new usc_e_shop();
$usces->regist_action();
として呼び出されていることが分かる。
このusc-e-shop.phpファイルは、welcartプラグインの最初のファイルで、プラグインをWordPressに認識させるために必要なファイルであり、プラグインを有効にするとこの中のPHPファイルが実行されるようになる。
つまり、Welcartプラグインが有効になると、regist_actionメソッドが実行され、先に紹介した
$usces_action['regmember']
といった登録も行われることが分かる。

さて、登録はできた。じゃあ、呼び出しているのはどこだ???

結論から先に言うと、今まで行ってきた登録を適宜呼び出しを行っているのは
wp-content\plugins\usc-e-shop\classes\usceshop.class.phpにある
ad_controllerメソッドである。このメソッドが$usces_actionに登録された内容によって、必要に応じて処理を進めている。

ad_controllerメソッドはどこから呼ばれる?

話をad_controllerメソッドの内容に進める前に、このメソッドはどこから呼ばれているのかを見ていきたい。この関数は
wp-content\plugins\usc-e-shop\classes\usceshop.class.php
に定義されているmainメソッドから呼ばれている。
このメインメソッドは
wp-content\plugins\usc-e-shop\includes\default_filters.php
内で
add_action( 'init', array(&$usces, 'main'), 10);
とフックされ、'init'アクションにフックされていることが分かる。この'init'アクションは
WordPress日本語Codexによると

WordPressの読み込みが完了し、ヘッダーが送信される前に実行する。$_GET や $_POST トリガーを妨害するために使える。

とある。要は、WordPressの読み込みが完了して、ページを表示する前に呼び出しがされるアクションである。
この'init'アクションにmainメソッドをフックしているadd_actionが書かれているdefault_filters.phpは、先ほども紹介した Welcartプラグインの最初のファイル、usc-e-shop.phpからrequire_onceされている。
require_once(USCES_PLUGIN_DIR."/includes/default_filters.php");
よってプラグインが有効であれば結果的に、ページが表示される前にmainメソッド内のad_controllerが実行されることが分かる。

ad_controllerの中身を見てみよう

さて、ここまでで、$usces_actionに登録された内容に従ってad_controllerメソッドがページを表示する前に何かやっていることは説明したが、ここからad_controllerメソッドの中身を見ていこうと思う。

ad_controllerメソッド

ad_controllerメソッドは、
    function ad_controller(){
        global $usces_action;
            ・・・中略・・・
            $action_array = array('inCart', 'upButton',
            ・・・中略・・・
            'regmember',
            ・・・中略・・・
            ,'front_ajax');
            $flg = 0;
            $res = true;
            foreach( $usces_action as $handle => $action ){
                extract($action);
のように$usces_actionに登録された内容を$handle => $actionに分解し、foreachにて各々処理しようとしている。
話を単純にするために、
usces_register_action('regmember', 'request', 'regmember', NULL, 'regmember');
だけがされていた場合に話を限定すると、ここまでの処理で、
$handle = 'regmember'
$type = 'request'
$key = 'regmember'
$value = NULL
$function = 'regmember'
となることが分かる。続くコードは、
                    case 'post':
                        ・・・中略・・・
                        break;
                    case 'get':
                        ・・・中略・・・
                        break;
                    case 'request':
                        if( empty($value) ){
                            if( isset($_REQUEST[$key]) ){
                                if(in_array($handle, $action_array)){
                                    $res = call_user_func(array($this, $function));
                                }else{
                                    $res = call_user_func($function);
                                }
                                $flg = 1;
                            }
                        }else{
                            if( isset($_REQUEST[$key]) && $_REQUEST[$key] == $value ){
                                if(in_array($handle, $action_array)){
                                    $res = call_user_func(array($this, $function));
                                }else{
                                    $res = call_user_func($function);
                                }
                                $flg = 1;
                            }
                        }
                        break;
と、なっており、
$_REQUEST[$key]に値がセットされているときに、call_user_funcメソッドを使い、$functionの名前の関数をコールしていることが分かる。
ここで、もう一度、「新規入会フォームで送信するボタンを押したとき」の処理を見てみると、
    <form action="<?php echo apply_filters('usces_filter_newmember_form_action', usces_url('member', 'return')); ?>" method="post" onKeyDown="if (event.keyCode == 13) {return false;}">
        ・・・中略・・・
        <div class="send"><?php usces_newmember_button($member_regmode); ?></div>
        <?php do_action('usces_action_newmember_page_inform'); ?>
    </form>
となっており、ここのusces_newmember_buttonメソッドは、
$newmemberbutton = '<input name="regmember" type="submit" value="' . __('transmit a message', 'usces') . '" />';
となっており、$_REQUEST['regmember']をセットしているのが分かる。よって、call_user_funcメソッドにより、$uscesクラスのregmemberメソッドがコールされるのである。

regmemberメソッドを軽くひもとく

さて、ここまでで呼び出された、regmemberメソッドが何を行っているかを詳細に説明してしまうと、少々、ページ遷移処理の話から脱線してしまうので割愛するが、以下がコード全体である。
    function regmember(){
        global $wp_query;
        $res = $this->regist_member();
        if( 'editmemberform' == $res ){
            $this->page = 'editmemberform';
            add_filter('yoast-ga-push-after-pageview', 'usces_trackPageview_editmemberform');
        }elseif( 'newcompletion' == $res ){
            $this->page = 'newcompletion';
            add_filter('yoast-ga-push-after-pageview', 'usces_trackPageview_newcompletion');
        }else{
            $this->page = $res;
        }
        add_action('the_post', array($this, 'action_memberFilter'));
        add_action('template_redirect', array($this, 'template_redirect'));
    }
要は、このメソッドは新規入会フォームで入力された$_POSTを受け取り、バリデーションを行い、問題がなければデータベースへの登録を行っている。そして、登録が問題なく行われた場合
$usces->pageを$this->page = 'newcompletion';
としている。そして、最後に
add_action('template_redirect', array($this, 'template_redirect'));
として、'template_redirect'アクションにtemplate_redirectメソッドをフックしている。この'template_redirect'アクションはページが読み込まれてテンプレートを取得する直前に実行されるフックです。そのタイミングで$uscesクラスのtemplate_redirectメソッドがコールされることが分かります。

template_redirectメソッド

さて、長い長い旅の先にようやくここまで来ましたが、ここが最後です。
このメソッドは、$usces->pageが'newcompletion'のときに、
                        if( file_exists(get_stylesheet_directory() . '/wc_templates/member/wc_member_completion_page.php') ){
                            include(get_stylesheet_directory() . '/wc_templates/member/wc_member_completion_page.php');
                            exit;
                        }
となっており、/wc_templates/member/wc_member_completion_page.phpが存在していれば、そのファイルを読み込んでいます。
wc_member_completion_page.phpは「新規ご入会有難うございます。」の書かれた新規入会完了ページを表示するファイルであり、これで、新規入会フォームから、データベース登録処理などを経て、無事、完了ページへ遷移することができました。

冒険はまだまだ続く

少々、長い説明となり、ご自身でもソースを追っていただくことは避けられないかと思いますが、この解説がWelcartを読み解く一助となればと思います。
次回は、今回解析した内容を使って、自作の固定ページからwelcartのredirect処理を使って、特定のphpファイルを読み込みページを表示させてみようと思います。

参考

PHPによるWordPressカスタマイズブック―3.x対応 p.194~あたり

BloggerでSyntaxHighlighterを使用する方法 後日談

[BloggerでSyntaxHighlighterを使用する方法]の冒頭で リンクが切れていると紹介した [Syntax Highlighter Scripts Generator] が2014/11/01日現在、再び利用可能になっていた。

試しに使用してみたが、要はチェックした項目に合わせて前回紹介したコードを自動的に生成する代物であった。

前回の説明には含まれていないコード
SyntaxHighlighter.config.bloggerMode = true;
は、Bloggerにおける改行コード<br>の取り扱いに関する設定のようであるが この設定をしてしまうと、<pre>内で、改行コードが表示されなくなってしまう という問題があるようなので、この設定は行わず、default値のfalseのままが良いようである。

この部分については他の方のサイトであるが[ブログ上でプログラムソースを表示する方法④ Bloggerでの設定]での解説が詳しい。

前回の解説と同じ条件のDefault ThemeにてJavaScriptのみを有効にするを選択して生成したコードがこちら
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/>
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'></script>
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'></script>
<script language="javascript" type="text/javascript">
    SyntaxHighlighter.config.bloggerMode = true;
    SyntaxHighlighter.all();
</script>

2014年10月24日金曜日

BloggerでSyntaxHighlighterを使用する方法

Syntax Highlighter Scripts Generatorを 使用しろと紹介してあるサイトが多いようだが、2014/10/24現在、リンクが切れてしまっていて良く分からないので、別の方法で BloggerでSyntaxHighlighterを使用する方法を調べてみた。 SyntaxHighlighterの公式ページのInstallationを見ると
<!-- Include required JS files -->
<script type="text/javascript" src="js/shCore.js"></script>

<!--
    At least one brush, here we choose JS. You need to include a brush for every 
    language you want to highlight
-->
<script type="text/javascript" src="css/shBrushJScript.js"></script>

<!-- Include *at least* the core style and default theme -->
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />

<!-- Finally, to actually run the highlighter, you need to include this JS on your page -->
<script type="text/javascript">
     SyntaxHighlighter.all()
</script>

<pre class="brush: js">
    /**
     * SyntaxHighlighter
     */
    function foo()
    {
        if (counter <= 10)
            return;
        // it works!
    }
</pre>

<script type="syntaxhighlighter" class="brush: js"><![CDATA[
  /**
   * SyntaxHighlighter
   */
  function foo()
  {
      if (counter <= 10)
          return;
      // it works!
  }
]]></script>
となっている。ここに含まれる導入に必要な手順は次の5つ
  1. コアとなるJavaScriptファイルを読み込む
    <script type="text/javascript" src="js/shCore.js"></script>
  2. ハイライトしたい言語に応じたJavaScriptファイルを読み込む。この例はJavaScriptの場合となる。
    <script type="text/javascript" src="css/shBrushJScript.js"></script>
  3. コアとなるcssファイルとデフォルトテーマのcssを読み込む
    <link href="css/shCore.css" rel="stylesheet" type="text/css" />
    <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
  4. 以下のコードをWebページに記述して、ここまでに読み込みをしたファイルに書かれているSyntaxHighlighterを実行する
    <script type="text/javascript">
    SyntaxHighlighter.all()
    </script>
  5. 投稿する文章の中でハイライトするコードの部分を<pre class="brush: js"></pre>または<script type="syntaxhighlighter" class="brush: js"><![CDATA[]]></script>で囲む(例はハイライトしたい言語がJavaScriptの場合)
これで、記述したコードがハイライトされて表示される。

ただし!!

これは自宅サーバーやファイルのアップロードが可能なレンタルサーバーなどの場合の話。ファイルのアップロードができないBloggerではこの方法は使えない。 なんだ・・・結局、ダメじゃん、とあきらめる事なかれ。公式によって次の方法が用意されている。

Hosting

この方法を使用することにより、ダウンロードしなくてもホスティングされたファイルをリンクすることによって、ダウンロードした場合と同じように機能が利用できる。 先ほどのコードを、このホスティングの場合に置き換えたのがこちら
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPhp.js' type='text/javascript'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
    <script type='text/javascript'>
        SyntaxHighlighter.all()
    </script>
これを、Bloggerの、テンプレート -> HTMLの編集で表示されるHTMLコードに追加する。
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript'/>
    <script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript'/>
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css'/> 
    <link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeDefault.css' rel='stylesheet' type='text/css'/>
は、WebサイトでCSSファイル、JavaScriptファイルを読み込む時と同じように、上の方にある</head>の直前に追加する。
    <script type='text/javascript'>
        SyntaxHighlighter.all()
    </script>
は、下の方にある</body>の直前に追加する。

これで、<pre class="brush: js"></pre>または<script type="syntaxhighlighter" class="brush: js"><![CDATA[]]></script>で囲ったコードが ハイライトされて表示される。

WordPressの管理画面にメニュー項目を追加する方法

まずは関係するアクションフック

管理画面にメニュー項目を追加するには下記のようにadd_actionメソッドを使用し、'admin_menu'アクションにメニュー追加のために作成したメソッドをフックする。

メニュー追加のための関数add_own_menuを作成する

ここで呼び出すのがadd_menu_pageメソッド。このメソッドを呼ぶことによってトップレベルに自作メニュー項目が追加される。

add_menu_pageメソッド

add_menu_pageメソッドの引数

  1. string $page_title - メニューページタイトル メニュー項目を開いたページで、ここで指定のタイトルが表示される。HTMLのhead内でtitleタグで指定するあれ。
  2. string $menu_title - メニュー名 管理画面にここで指定した名前のメニュー項目が表示される。
  3. mixed $capability - メニューを使用できる権限を指定できる。管理者しか使用しないのであれば10を指定しておけばよいと思われる。
    指定する権限についてはLevelとCapabilityを参照
  4. string $menu_slug - メニューのスラッグを指定する。ここで指定したスラッグが、URLの?page=以降のスラッグとして使用される。
    [WordPress] 管理画面にメニュー項目を追加する | unlinked log>や他のサイトでも、この引数を'コンテンツ表示 PHP ファイル'と説明し__FILE__を指定すると説明しているものが多く見受けられるが特にコンテンツを表示するファイルを指定しなければいけないわけではないようである。そのように説明される背景はCodexによるとVersion 3.0以前においては、この引数はfile (or handle) parameterと呼ばれ、また次のfunction parameterが省略された場合にこの引数がメニューを表示するためのPHP fileとして参照されていたことに由来するようである。
  5. mixed $function - メニュー内のページを表示する関数。
  6. string $icon_url - メニュー横に表示されるアイコンファイルのURL
    WordPress Codex 日本語版 管理メニューの追加によると 「これはWordPress 2.7においてのみ有効です。」とあるので使わない方がよい?

add_object_pageメソッド、add_utility_pageメソッドは、add_menu_pageメソッドの別バージョン。
add_menu_pageメソッドでは作成したメニューがメニューの一番下に追加されるのに対して、add_object_pageメソッドではコメントの下、 add_utility_pageメソッドでは設定の下に追加される。

メニューページを表示する関数

作成したメニュー項目をクリックすると、add_menu_pageメソッドの第5引数で指定した関数が呼ばれ、表示するページが作成される
$_REQUEST['page']にはadd_menu_pageメソッド第4引数で指定したスラッグが渡っているのが分かる。

add_submenu_pageメソッド

トップレベルにメニュー項目を追加する方法としてadd_menu_pageメソッドを説明したが、一方、add_submenu_pageメソッドは、トップレベルのメニューを親として、 その子メニューとなるサブメニューを作成する関数である。


add_submenu_pageメソッドの引数
  1. string $parent_slug - ここで指定したスラッグを持つトップレベルメニューのサブメニューとしてサブメニューが作成される
  2. string $page_title - サブメニューページタイトル
  3. string $menu_title - サブメニュー名
  4. mixed $capability - メニューを使用できる権限
  5. string $menu_slug - サブメニューのスラッグを指定する
  6. mixed $function - サブメニュー内のページを表示する関数。

add_dashboard_pageメソッド、add_posts_pageメソッドは表示位置が最初から決まっているadd_submenu_pageメソッドの別バージョン。
add_menu_pageメソッドで第1引数を指定すればこれらを使う必要はない。

サブメニューページを表示する関数

作成したサブメニュー項目をクリックすると、add_sub_menu_pageメソッドの第6引数で指定した関数が呼ばれ、表示するページが作成される

$_REQUEST['page']にはadd_sub_menu_pageメソッド第5引数で指定したスラッグが渡っているのが分かる。

ソース全体 -Pluginにしてみた-

参考

add_menu_page:WordPress私的マニュアル - elearn.jp

add_submenu_page:WordPress私的マニュアル - elearn.jp

[WordPress] 管理画面にメニュー項目を追加する | unlinked log

管理メニューの追加 - WordPress Codex 日本語版

PHPによるWordPressカスタマイズブック―3.x対応 p.280~あたり