【WordPress】投稿・固定ページの一部を条件によって出し分けする方法

WordPress フロントエンド       2020年9月5日 2021年4月30日
【WordPress】投稿・固定ページの一部を条件によって出し分けする方法

ブログユースではあまり多くないかもしれないですが、WordPressやShifterを使用して作成されているサイトで、投稿・固定ページ内にあるコンテンツの一部を条件によって表示・非表示を切り替えたいという要望がありました。

投稿・固定ページ内にあるコンテンツを動的に切り替えるにはショートコードを使用する必要があります。

表示・非表示だけの簡単な機能ですが、実際に動作するものを作ってみたので紹介します。

デモ

デモではクエリパラメータから値を取得して表示・非表示を切り替えています。
以下のリンクをクリックして動作をテストしてみてください。

コンテンツを表示

特定条件のときだけ非表示

実際のショートコード記述

[js_if_display pattern="/hoge/" get="hoge"]
この文字はURLに?hoge=hogeが付いているときだけ表示されます
[/js_if_display]

[js_if_display pattern="/^(?!.*hoge).+$$/" get="hoge"]
この文字はURLに?hoge=hogeが付いているときは非表示になります
[/js_if_display]

特徴

投稿や固定ページなどのコンテンツの一部を特定条件下に表示・非表示を切り替えるショートコードを追加します。
Shifterのようなサーバレス環境での動作を想定しているためJavaScriptを使用して表示・非表示を切り替えています。
正規表現と1ページ中の複数使用をサポートしています。

インストール

主な使い方や注意点などの詳細は以下のGitHubに公開しているので、そちらも合わせて参考にしてください。

https://github.com/pitolick/JavaScript-If-Display

プラグインで使用

GitHubに公開しているソースコードをzip形式でダウンロードし、WordPressの管理画面にアップロードしてください。

functions.phpに直接記述して使用

ちょっと長いですが、functions.phpに以下のコードをコピー&ペーストしてください。

/**
 * 囲い型ショートコードを使ってJavaScriptで表示切り替え
 */
function js_if_display($atts, $content = null) {
	// ショートコードの引数設定
	$atts = shortcode_atts(array(
		'cookie'=>'', // cookieで取得するkey名
		'session_storage'=>'', // sessionStorageで取得するkey名
		'local_storage'=>'', // localStorageで取得するkey名
		'get'=>'', // クエリパラメータで取得するkey名
		'pattern'=>'' // 比較する正規表現リテラル（デリミタを含む）
	), $atts, 'js_if_display');
	// 同一ページ内での発火回数をカウント
	global $js_if_display_count;
	if(!$js_if_display_count) {
		$js_if_display_count = 0;
	}
	$js_if_display_count++;
	// 囲われたコンテンツをラップ
	$result = '<div id="js_if_display-'.$js_if_display_count.'" style="display:none;">' . $content . '</div>';
	// 条件分岐用script生成
	$result .= '<script>var val = {};';
	// cookie取得
	if($atts["cookie"]) {
		$result .= 'var cookies=document.cookie;var cookiesArray=cookies.split("; ");for(var c of cookiesArray){var cArray=c.split("=");if(cArray[0]=="'.$atts["cookie"].'"){val["cookie"] = cArray[1];}}';
	}
	// sessionStorage取得
	if($atts["session_storage"]) {
		$result .= 'val["session_storage"] = sessionStorage.getItem("'.$atts["session_storage"].'");';
	}
	// localStorage取得
	if($atts["local_storage"]) {
		$result .= 'val["local_storage"] = localStorage.getItem("'.$atts["local_storage"].'");';
	}
	// クエリパラメータ取得
	if($atts["get"]) {
		// クエリパラメータ特定Keyで取得構文
		$result .= 'function getParam(b,a){if(!a){a=window.location.href}b=b.replace(/[\[\]]/g,"\\$&");var d=new RegExp("[?&]"+b+"(=([^&#]*)|&|#|$)"),c=d.exec(a);if(!c){return null}if(!c[2]){return""}return decodeURIComponent(c[2].replace(/\+/g," "))};';
		$result .= 'val["get"] = getParam("'.$atts["get"].'");';
	}
	// 正規表現に1つでも一致したら表示
	$result .= 'var pattern = '.$atts["pattern"].';';
	$result .= 'var element = document.getElementById("js_if_display-'.$js_if_display_count.'");';
	$result .= 'for(var key in val) {
    if(val.hasOwnProperty(key)) {
      var value = val[key];
			if(value.match(pattern)) {
				element.style.display = "block";
			}
    }
  }';
	$result .= '</script>';
	return $result;
}
add_shortcode('js_if_display', 'js_if_display');

使い方

以下の囲み型のショートコードを投稿や固定ページ内に追記します。
contentの部分に表示を切り替えたいコンテンツや文章と入れ替えてください。

[js_if_display pattern="/hoge/" get="hoge" cookie="hoge" session_storage="hoge" local_storage="hoge"]content[/js_if_display]

引数

引数名条件説明
pattern必須matchメソッドで使用するためのデリミタを含んだ正規表現パターンを指定。
get任意※クエリパラメータのKeyを指定。
cookie任意※cookieのKeyを指定。
session_storage任意※sessionStorageのKeyを指定。
local_storage任意※localStorageのKeyを指定。

※いずれか1つの指定は必須となります。

まとめ

Shifter環境で動的な処理を行うにはJavaScriptを使用するしか無いので、このようなプラグインは多少需要あるかな？と思いつくりました。

具体的な用途想定は投稿・固定ページ内に記述されたコンテンツをABテストで切り替えたい！といったパターンです。

使えそうなタイミングがあれば使ってみてください。

関連記事