【WordPress】保存したクッキーの値をページに表示させる
サイト管理人
WordPressでサイト運営している中で「保存されているクッキーの値を画面に出力表示したい」と思ったことはありませんか？
この記事ではそのやり方を丁寧に解説します。
サンプルコードをコピペで実装できるのでプログラム技術がないWordPress初心者でも簡単です。
具体的には具体的には以下の用途などに使えます。
- 動的にリンクURLの中の値を書き換えたい
- ニックネームなどを一時的に保存した情報を表示したい
- 前のページで保存したメッセージを出力したい
- 前に見たページによって表示を切り替えたい
- ユーザーに何かアクションさせた結果でその後の処理を動的に変更したい
- 保存データを使って記事内のバナーをABテストしたい
- 商品ごとに動的に画像やテキスト内容を切り替えたい
などなど、発想とアイディア次第で何でもできてしまいます。
しかも紹介する方法のすごいところが、プログラムのコード上でなくショートコードを使って実装できるので、技術の知識なしで開発することなく投稿の編集画面上で書けてしまうところです。
上級者だけでなく、初心者ブロガーさんも必見です。
またさらに神レベルのショートコード特集を文末に添えておりますので、ぜひ最後までご期待ください。
ショートコードで保存したクッキーの値をページに表示させるための実装手順
ショートコードの登録をするためにfunctions.phpのphp囲みタグの中に以下のコードを全て貼り付けます。
(※他の記事を見てすでに実装済みの関数は貼り付ける必要はありません)
保存したクッキーの値をページに表示するショートコードのサンプルソースコード
<?php
/*
* **************************************************************************
* 文字列の中のクッキーバインド変数({@クッキー名})を実際の値に置換
* **************************************************************************
*/
function replace_cookies($atts, $content){ //こちらをショートコードに登録
/*******************************************************************************
■入力パラメータ$atts(ショートコードの属性パラメータで入力される値)
enabled => ショートコード自体の有効/無効 0=無効 1=有効
enabled_debug => デバッグ表示の有効/無効 0=無効 1=有効
encode => バインド変数の変換に使用するエンコードorエスケープ関数 esc_html, urlencode
■囲み文字列の$content(ショートコードで囲まれた文字列)
バインド変数として以下の文字列を含めることにより各値にバインド変換される
{@クッキー名} →クッキーの値に変換
********************************************************************************/
/***********************************************
* 初期設定
************************************************/
no_cache_by_header(); //キャッシュ無効
$result = null;
$debug = null;
$debug .= "======================================================<br/>";
$debug .= "■replace_cookies() 開始<br/>";
$debug .= "■入力" . var_export($atts, true) . "<br/>";
//パラメータ初期化
$new_atts = shortcode_atts(array(
"enabled" => 1,
"enabled_debug" => 0,
'encode' => 'esc_html', //使用するエンコードorエスケープ関数 esc_html, urlencode
"enabled_debug" => 0,
), $atts);
$debug .= "■初期化" . var_export($new_atts, true) . "<br/>";
extract($new_atts);
/***********************************************
* 入力パラメータチェック
************************************************/
if($encode != "esc_html" && $encode != "urlencode"){
$debug .= "■指定エンコード以外は危ないので出力しない<br/>";
return ($enabled && $enabled_debug) ? "{$debug}{$result}" : "{$result}";
}
//置換本体の実行
$result = replace_cookies_base($new_atts, $content);
$debug .= "■replace_cookies() 終了<br/>";
$debug .= "======================================================<br/>";
return ($enabled && $enabled_debug) ? "{$debug}{$result}" : "{$result}";
}
add_shortcode('replace_cookies', 'replace_cookies'); // ショートコードを登録
function replace_cookies_base($atts, $content){ //こちらはencodeなし指定ができるのでショートコードに登録はしない
/***********************************************
* 初期設定
************************************************/
$result = null;
$debug = null;
$debug .= "======================================================<br/>";
$debug .= "■replace_cookies_base() 開始<br/>";
$debug .= "■入力" . var_export($atts, true) . "<br/>";
//パラメータ初期化
$new_atts = shortcode_atts(array(
"enabled" => 1,
"enabled_debug" => 0,
'encode' => 'esc_html', //使用するエンコードorエスケープ関数 esc_html, urlencode, none
), $atts);
$debug .= "■初期化" . var_export($new_atts, true) . "<br/>";
extract($new_atts);
/***********************************************
* 入力パラメータチェック
************************************************/
//無効
if($enabled == 0){
$debug .= "■ショートコード無効<br/>";
return ($enabled && $enabled_debug) ? "{$debug}{$result}" : "{$result}"; //即終了
}
if($encode != "esc_html" && $encode != "urlencode" && $encode != "none"){
return ($enabled && $enabled_debug) ? "{$debug}{$result}" : "{$result}"; //即終了
}
$content = do_shortcode($content);
/***********************************************
* クッキー変数の変換
************************************************/
preg_match_all('|\{@[a-z0-9\-_\[\].]+\}|', $content, $matches); //{@クッキー名}を全てマッチさせる
//複数ヒットするとmatchesはこうなる
//print_r($matches);
// Array
// (
// [0] => Array
// (
// [0] => {@cookie1}
// [1] => {@cookie2}
// [2] => {@cookie3}
// )
// )
if(count($matches) > 0){
//{@クッキー名}を1つ1つループ
foreach($matches[0] as $idx => $param_str){
$param_name = str_replace(
array("{@", "}")
, ""
, $param_str
);
$param_val = null;
if(isset($_COOKIE[$param_name])){
$param_val = $_COOKIE[$param_name];
}
//{@クッキー名}を実際に変換
if($encode == "none"){
$debug .= "■エンコードなし変換: {$param_str}→{$param_val} <br/>";
$content = str_replace($param_str, $param_val, $content);
}else{
$debug .= "■エンコード{$encode}変換: {$param_str}→" . $encode($param_val) . "<br/>";
$content = str_replace($param_str, $encode($param_val), $content);
}
}
}
$debug .= "■正常終了<br/>";
$debug .= "■replace_cookies_base() 終了<br/>";
$debug .= "======================================================<br/>";
$result = $content;
return ($enabled && $enabled_debug) ? "{$debug}{$result}" : "{$result}";
}
以下のスクリプトも貼り付けます。
キャッシュを無効にするサンプルコード
//HTTPレスポンスヘッダーでキャッシュを無効化させる
function no_cache_by_header() {
header('Expires: Tue, 1 Jan 1970 00:00:00 GMT'); //キャッシュの有効期限を過去に設定
header('Last-Modified: ' . gmdate( 'D, d M Y H:i:s' ) . 'GMT'); //最終更新日を現在の時刻に
header('Cache-Control: no-cache,no-store,must-revalidate,max-age=0'); //キャッシュしないと明記①
header('Pragma: no-cache'); //キャッシュしないと明記②
header('Cache-Control: pre-check=0,post-check=0',false); //IE用の対応
header('X-No-Cache: success'); //確認用の独自ヘッダ
}
//HTMLのheadタグ内のmetaタグでキャッシュを無効化させる
function no_cache_by_meta(){
echo <<<EOF
<meta http-equiv="Pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="x-no-cache" content="success">
EOF;
}テキスト内のバインド変数を変換するサンプルコード
/* =============================================================
* テキスト内のバインド変数を変換する
* ============================================================= */
function replace_bindvar($text, $encode = "none", $enabled_debug, &$debug){
/*******************************************************************************
■変換するバインド変数
{%URLパラメータ名} →URLパラメータの値
{@クッキー名} →クッキーの値
予約クッキー名
_tt_uid=ブラウザ毎のユニークID
_tt_pv=ページリクエスト毎のユニークID
_tt_pv_count=ページリクエスト数
_tt_ss=セッション(有効期限30分)毎のユニークID
_tt_ss_count=セッション数
_tt_day=最終アクセス日
_tt_day_count=アクセス日数
_tt_ss_first=セッションの最初のアクセスURI 例) /test/?aaa=bbb
_tt_ss_last=最新のアクセスURI 例) /test/?aaa=bbb
_tt_ss_prev=最新の１つ前のアクセスURI 例) /test/?aaa=bbb
{#wp_user_login} →WordPressの英数字のログイン名
{#req_path} →URLのパス部分 /path/?a=b の/path/
{#Y} →西暦4桁 例) 2021
{#m} →月2桁 例) 10
{#d} →日2桁 例) 31
{#H} →時間2桁 例) 23
{#i} →分2桁 例) 59
{#s} →秒2桁 例) 59
{#W} →年間通算週数 例) 42
{#z} →年間通算日数 例) 300
{#strtotime 日付フォーマット,日付文字列}
日付フォーマットはPHPのdate()、日付文字列はPHPのstrtotime()が受け入れるもの。
例) {#strtotime Y-m-d,+3days}
********************************************************************************/
$result = $text;
/***********************************************
* 入力パラメータチェック
************************************************/
if($encode != 'none' && $encode != 'esc_html' && $encode != 'urlencode'){
$debug .= "■encodeが決められた値ではない<br/>";
return $result; //即終了
}
/***********************************************
* WordPress情報の変換
************************************************/
$wp_user_login = null;
if(strpos($text, '{#wp_user_login}') !== false){
$debug .= "■wp_user_loginあり" . "<br/>";
if($user_info = wp_get_current_user()){
$wp_user_login = $user_info->user_login;
$result = str_replace('{#wp_user_login}', $wp_user_login, $result);
}
}
$debug .= "■wp_user_login=" . $wp_user_login . "<br/>";
/***********************************************
* HTTP情報の変換
************************************************/
$req_path = null;
if(strpos($text, '{#req_path}') !== false){
$debug .= "■req_pathあり" . "<br/>";
$req_path = preg_replace('/(\?|#).+$/', "", $_SERVER["REQUEST_URI"]); // ?以降か#以降を取り除く
$result = str_replace('{#req_path}', $req_path, $result);
}
$debug .= "■req_path=" . $req_path . "<br/>";
/***********************************************
* URLパラメーターの変換 req_params
************************************************/
if(preg_match('/\{%[a-z0-9\-_\[\].]+\}/', $result) > 0){
$debug .= "■URLパラメータ―バインド変数あり" . "<br/>";
$result = replace_req_params_base(array("encode" => $encode), $result);
}
/***********************************************
* クッキーの変換 cookies
************************************************/
if(preg_match('/\{@[a-z0-9\-_\[\].]+\}/', $result) > 0){
$debug .= "■クッキーバインド変数あり" . "<br/>";
$result = replace_cookies_base(array("encode" => $encode), $result);
}
/***********************************************
* 日付の変換
************************************************/
$pattern_stt = '/\{#strtotime\s+([^,]+)\s*,*\s*([^,]+){0,1}\s*\}/';
if(preg_match_all($pattern_stt, $result, $matches_stt) > 0){
$debug .= "■日付変換" . var_export($matches_stt, true) . "<br/>";
$date_format = $matches_stt[1][0];
$date_str = $matches_stt[2][0];
if($date_str == null){
$date_str = "now";
}
$result = preg_replace($pattern_stt, date($date_format, strtotime($date_str)), $result); //strtotime実行の結果変換
}
$result = str_replace('{#Y}', date("Y"), $result); //2021 西暦4桁
$result = str_replace('{#m}', date("m"), $result); //月2桁 10
$result = str_replace('{#d}', date("d"), $result); //日2桁 31
$result = str_replace('{#H}', date("H"), $result); //時間2桁 23
$result = str_replace('{#i}', date("i"), $result); //分2桁 59
$result = str_replace('{#s}', date("s"), $result); //秒2桁 59
$result = str_replace('{#W}', date("W"), $result); //年間通算週数 42
$result = str_replace('{#z}', date("z"), $result); //年間通算日数 300
return $result;
}functions.phpの使い方については以下を参照してください。
functions.phpの場所、編集方法
functions.phpはWordPressの機能追加をするためのPHPファイルです。
functions.phpの場所は
「外観＞テーマエディター」から
試用しているテーマ名を選んで、funcstions.phpを選びます。
また、直接functions.phpを編集するよりもこちらのプラグインで編集した方が便利なので参考にしてみてください。
【使い方】クッキーに保存したメッセージの内容を画面上に出力表示する
「クッキーに保存したメッセージを表示する」というシンプルな内容を紹介します。
以下のショートコードを投稿や固定ページの編集画面にて記述します。
ブロックエディタでショートコードブロックではなくカスタムhtmlブロックに入力することをお勧めします。
※ショートコードブロックはレイアウトが崩れやすいので使わないようにしましょう。
<h3>メッセージをクッキーに保存</h3>
[save_cookie name="test_message" value="こんにちは！" expires="10s" domain="." path="/"]
<h3>クッキーのメッセージを表示</h3>
[replace_cookies]
クッキー「test_message」に保存されたメッセージ→{@test_message}<br>
[/replace_cookies]
最初のアクセスでクッキーが10秒間保存されます。その時点ではメッセージは表示されません。
ページを更新すると、先ほどクッキーに保存されたメッセージが表示されます。
[replace_cookies]というショートコードの囲みの中に{@クッキー名}という形でバインド変数を記述することでクッキーの値に変換されます。
このように
- [save_cookie]によるクッキー保存
- [replace_cookies]によるクッキーの値を表示
を使いこなすことで、保存データを利用して動的にURLなどの表示内容を変更したりできます。
また[if_cookie]処理でクッキーの存在や値による条件分岐や[if_compare]による値の比較などを使えば処理の自由度の幅はさらに広がります。
※ショートコードの詳細のパラメータに関してはソースの中のコメントを参考にしてください
※保存するためのショートコード[save_cookie]自体はこちらの記事を参照してください。
さらに便利に応用するために
最後までお読みいただきありがとうございました！
いかがでしたでしょうか？
他にもショートコードによるクッキー保存[save_cookie]や条件分岐[if_cookie]の実現方法などなど紹介していきますのでぜひご覧ください。
ショートコード関連のおすすめ記事
これらのショートコードを使いこなせるとWordPressにおけるサイト運営のレベルが格段に上がると思います。
どれも単体で便利な機能ですが、組み合わせて使うことでアイディアしだいで想像以上の力を発揮するのでぜひ全てに目を通してみてください。
