「クリックして表示する」グループスタイルの仕様と使い方

「クリックして表示する」グループスタイルの仕様と機能

本機能は、Hima Art Utility 6.0から利用でき、プラグイン設定画面の「便利機能」メニューの「投稿と固定ページの編集」タブにある「独自ブロックデザインを使う」を有効にすることで使用できるようになります。

また、本機能は単純にクリック表示コンテンツを作るだけでなく、どのページのどのグループが何回クリックして表示されたかの情報を見ることもできるようになっていますので、例えば本サイトのようにコードの紹介などをしていて、本当にそのページに来た人がコードを参照しているのか？といった疑問を解決する糸口になります。

本機能は視覚的に一旦非表示にするものであり、HTMLとしては出力される仕組みにしていますので、検索エンジンのコンテンツ認識には影響はないと思いますが、気になる方は使用しないでください

「クリックして表示する」グループスタイルの使い方

基本的な使い方

以下の手順で「クリックして表示する」グループの設定ができます。

1. 表示させるためにクリックさせたいブロック（単独でも複数でもOK）を選択し、グループ化する
2. グループのブロック設定のスタイルタブで「クリックして表示」を選択する

たったこれだけの手順で機能します。

もちろん複数のクリック表示グループを同一のページ内にいくつでも設定することができ、それぞれ別に機能するようにしています。

どこをクリックされたかを判別しやすくするには

もちろん基本操作のままでも機能はするのですが、後述するクリック数レポートで、どこがクリックされたかが分かりにくいので、以下の方法で名前を指定することができます。

1. グループの「名前の変更」で任意に名前を付ける
2. 高度な設定の「HTMLアンカー」で任意にアンカーIDを付ける

いずれかを設定した場合に、上記の順序で名称が設定され、クリックされるとその名称がレポートに表示されるようになります（アンカーIDは内部リンク等に使うので、基本半角英数字にしておく方がいいでしょう）。

ただし、一度クリックグループを作り、ある程度のクリックがあった後でこれらの名称を設定したり変更した場合には、別のグループとしてカウントされていきますので、コンテンツを作った段階で決めておかれることをおすすめします

レポート表示

本機能では以下の場所にクリック表示グループが実際にクリックされた数を知るためのレポートを表示できるようにしています。

1. 投稿や固定ページの編集画面（その投稿・固定ページのクリック表示グループ分のみ表示）
2. ダッシュボードにクリック数の多い順10件を表示
3. 「HA Utility」メニューの「クリック統計」で開くレポート画面
4. 投稿・固定ページ一覧にこのグループを使用しているかどうかの判別

また3のレポートでは、個別または一括で全データの削除ができるようにしていますので設置後テストを行って、本番ではリセットしてということができるようにしています。

本機能ではデータベースの肥大化によるサイトパフォーマンス低下を防ぐため、ログとして情報を保存する機能は持たせていませんので、時系列でのレポートは表示したり出力したりできません

4の判別では、本文中に1つでも本機能を使ったグループが存在する場合に〇を表示する「クリック表示グループ」という列を設け、どのコンテンツに機能が使われているか（レポート対象となっているか）が分かるようにしています（この列は表示オプションからいつでも非表示にできます）

カスタム投稿タイプの情報もレポートに含めたいときは

本機能では、ダッシュボードでの簡易表示以外のレポートでは基本的に「投稿」と「固定ページ」でのクリック数レポートを表示させるようにしていますので、特定のカスタム投稿タイプを追加したい場合は以下のコードを有効化しているテーマのfunctions.phpへ追加して、自身のサイトのカスタム投稿タイプスラグを割り当ててください。

function haup_click_group_add_posttype_report_screen( $posttypes ) {
	// 追加したいカスタム投稿タイプ
	$additional_posttype = array(
		//'additional_posttype',//記述例：additional_posttypeというスラグを持つ投稿タイプを追加
		//ここから下に追加したい投稿タイプのスラグをコンマ区切りで追加
	);

	return array_merge( $posttypes, $additional_posttype );
}
add_filter('haup_click_group_report_pt_filter', 'haup_click_group_add_posttype_report_screen');

レポートに表示されないだけで、グループのスタイル指定をしていればデータ自体は蓄積されていきます

「クリックして内容を表示する」の文字列を変えたい時は

ボタンの文字列については、スタイルコードで出力していますので、有効化しているテーマのCSSに以下の行を追加すれば自由に変更できます。

.is-style-haup-click-to-reveal.haup-is-hidden::after {
	content: "ここに変更したいボタンの文字列を書く"!important;
}

ただ環境によってはこの文字列が優先されない場合もありますし、投稿のカテゴリーやIDなどで別の文字列を出したいケースもあるでしょうから、以下のコードを有効化しているテーマのfunctions.phpへ貼り付けての運用をおすすめします。

コードは単純にすべてのクリック表示コンテンツのボタン文字列を変更するためのものです。カテゴリーやIDなどを条件に文字列を変更したい場合は、ご自身で関数を調べて改変してください

function haup_change_before_click_button_text(){
$css = '
.is-style-haup-click-to-reveal.haup-is-hidden::after {
	content: "ここに変更したいボタンの文字列を書く";
}
';

wp_add_inline_style('haup-only-frontend-style',$css);
}
add_action('wp_enqueue_scripts','haup_change_before_click_button_text',20);