Filterフック：wp_insert_post_data

フィルタフックの wp_insert_post_data は、投稿や固定ページが[公開]または[更新]されたときに実行されるフィルタフックです。

 

このフィルタフックを使うとビジュアルエディタの本文中に色々なブロック要素を追加する事が出来るようになります。

1.メモ・ブロックを追加する。

2.トグル・ブロックを追加する。

3.タブ・ブロックを追加する。

 

尚、ビジュアルエディタに関しては下記を参照して下さい。

  ­WordPressのビジュアルエディタを使い続けるために

 

1.メモ・ブロックを追加する。

本文の中で下記のショートコードを入力します。

【'memo'】　※注意：実際は【】は[]です。

公開メニュの『公開』又は『更新』ボタンを挿入すると、本文中に下記メモ・ブロックが表示されます。

上記のメモBOXは独立したブロックになっているので、改行や画像及び表の挿入等が自由に行えます。

 

これを作成するプログラムは functions.php に下記を記述します。

function my_scode($postarr) {
	$search = '【memo】';  // 検索するショートコード
	$replace=                   // 置き換えるHTML
			'<div class="my_memo">
				<p> <span class="dashicons dashicons-edit"> </span> メモ</p>
				<p>このBOXは段落替え(Enter)が使えます。</p>
			</div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	return $postarr;}          // 終了処理
add_filter('wp_insert_post_data', 'my_scode');

■上記コードをコピーする場合は、2行目の【】を[]に置き換えて下さい。

 

尚、CSSは下記になっています。

div.my_memo{
	margin:5px 0;
	padding:10px;
	border-radius:5px;
	background-color:#f5f0cf;
	overflow:auto; // 画像のはみ出しをなくす指定
	max-width:100%;
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;}

■CSSには、ビジュアルエディタ用のCSSとHTML表示用のCSSがあり、上記は前者の物です。

後者のCSSは[single.php]、[page.php]のthe_content()行のクラス名を考慮して変更して下さい。

 

2.トグル・ブロックを追加する。

本文の中で下記のショートコードを入力します。

【'toggle'】　　※注意：実際は【】は[]です。

公開メニュの『公開』又は『更新』ボタンを挿入すると、本文中に下記トグル・ブロックが表示されます。

下記のトグルボタンをクリックして下さい。トグルエリアの内容が表示されます。

上記のトグルエリアは独立したブロックになっているので、改行や画像及び表の挿入等が自由に行えます。

 

これを作成するプログラムは functions.php に下記を記述します。

function my_scode($postarr) {
	$search = '【toggle】'; // 検索するショートコード
	$replace=                  // 置き換えるHTML
		'<div class="toggle"><button class="btn btn-primary">表示／非表示ボタン</button></div>
		 <div class="toggle-target">
				<p>トグルエリアです。表やイメージも利用できます<br>尚、ボタン色はスタイルから変更して下さい。</p>
		 </div>';
	$postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] );
	return $postarr;}        // 終了処理
add_filter('wp_insert_post_data', 'my_scode');

■上記コードをコピーする場合は、2行目の【】を[]に置き換えて下さい。

 

上記の開閉をするjQueryは、下記になります。

$(function(){
	$(".toggle").next().css('display','none');
	$(".toggle").click(function(){
		$(this).next().toggle();
	});
});

 

又、CSSは下記になります。

div.toggle-target{
	margin-top:10px;
	padding:10px;
	border-radius:3px;
	border:1px dashed #008200;}

■CSSには、ビジュアルエディタ用のCSSとHTML表示用のCSSがあり、上記は前者の物です。

後者のCSSは[single.php]、[page.php]のthe_content()行のクラス名を考慮して変更して下さい。

■尚、ボタンのCSSはBootstrap3のCSSを利用しています。

 

3.タブ・ブロックを追加する。

下記がタブを作成した例です。タブをクリックして見て下さい。表示内容が変わります。

尚、下記のタブエリアは独立したブロックになっているので、改行や画像及び表の挿入等が自由に行えます。

[ タブが2個の例 ]

 

[ タブが3個の例 ]

 

上記の『タブ・ブロック』を作成する為には、『メモ・ブロック』や『トグル・ブロック』よりもっと高度な処理が必要となりますので下記の順番で説明していきます。

1.タブの作成手順

①投稿や固定ページのカスタムフィールドにタブの個数を指定します。

■タブ個数を入力して『更新』ボタンを挿入します。

■3個の場合は３を、4個の場合は4を入力します。

②タブ・ブロックの作成

本文の中で下記のショートコードを入力します。

【'tab'】※注意：実際は【】は[]です。

公開メニュの『更新』ボタンを挿入すると、本文中にn個のタブ・ブロックが作成されます。

 

2.投稿や固定ページのカスタムフィールドにtabキーを作成する方法

アクションフックのsave_postを利用して、tabキーを新設・更新します。

functions.phpに下記を追加します。

/*****************************************/
/*   カスタムフィールドにtabキーを追加                    */
/*****************************************/
function add_meta_key() {
	global $post;
	$id = $post->ID;// 現在のIDの抽出
	$tab = get_post_meta($id,'tab',true);           // tabキーの取得
	if($tab == '') update_post_meta($id,'tab',2 );// tabキーがない場合は新設し、2をセットする
	else update_post_meta( $id,'tab',$tab );       // tabキーがある場合はtab値の更新
}
add_action( 'save_post', 'add_meta_key' );

■以上で投稿や固定ページ画面に下記が表示されるようになります。

※表示されない場合は、公開ボタンを挿入して下さい。

 

3.ショートコードをHTML変換するフィルタフックを定義します。

functions.phpに下記を追加します。

function my_scode($postarr) {
  $search = '【tab】';
  global $post;
  $id = $post->ID;                              // 現在のIDの抽出
  $tab = get_post_meta($id,'tab',true); // tab個数の取得
  ob_start(); // バッファリング開始
      echo '<div class="tab">';
      echo '<ul class="tab_title">';
      echo '<li class="select">tab1</li>';
      for($i=2;$i<$tab+1;$i++){
         echo '<li>tab'.$i.'</li>';
      }
      echo '</ul>';
      echo '<div class="tab_data"><p>tab1のデータを入力して下さい。</p></div>';
      for($i=2;$i<$tab+1;$i++){
          echo '<div class="tab_data"><p>tab'.$i.'のデータを入力して下さい。</p></div>';
      }
      echo'</div>'; 
  $replace= ob_get_clean(); // バッファリング終了
  $postarr['post_content'] = str_replace($search,$replace, $postarr['post_content'] ); // 置換
  return $postarr;} // 終了処理 
add_filter('wp_insert_post_data', 'my_scode');

■上記コードをコピーする場合は、2行目の【】を[]に置き換えて下さい。

 

4.上記のタブ切替を行うjQueryは下記になります。

/***********************************/
/* タブの切替え制御（複数タブ対応）             */
/***********************************/	
$(function() {
	$('.tab').each(function(n,e){
		$(e).find('.tab_data').css('display','none');   	    // 初期処理でTABデータを非表示
		$(e).find('.tab_data').first().css('display','block');// 初期処理で先頭TABデータを表示
		$(e).find('.tab_title li').click(function() {
			var index = $(e).find('.tab_title li').index(this);
			$(e).find('.tab_data').css('display','none');
			$(e).find('.tab_data').eq(index).css('display','block');
			$(e).find('.tab_title li').removeClass('select');			// セレクトクラスの解除
			$(e).find('.tab_title li').eq(index).addClass('select');// 現在のTABにセレクトクラスの設定
		});
	});
});

■タブ・ブロックがページ内に複数存在する事を想定し、eachメソッドを利用しています。

■階層構造の指定は階層構造の要素セレクトを参照して下さい。

 

5.CSSの設定

①editor-style.cssの設定

/*************************/
/* タブ設定                   */
/*************************/
ul.tab_title{            // タブの親要素
	padding:0;margin:0;
	display:flex;
	justify-content:space-between;
}
ul.tab_title li{         //  タブの子要素 
	margin:0;padding:10px;
	flex-grow:1;
	display:block;
	text-align:center;	
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
	word-break:break-all;
	cursor:pointer;
	border-top-left-radius:5px;border-top-right-radius:5px;
	border:1px dashed #1d1d1d;
	border-bottom:1px solid #1d1d1d;}
ul.tab_title li.select{   //  タブ子要素
	border:1px solid #1d1d1d;
	border-bottom:none;}
div.tab_data{             // タブ内の記述データ
	margin-top:10px;
	padding:10px;
	border-radius:3px;
	border:1px dashed #008200;}

 

②style.cssの設定

/**************************/
/* タブ設定                               */
/**************************/
.editor_style ul.tab_title{
	padding:0;margin:0;
	display:flex;
	justify-content:space-between;}
.editor_style ul.tab_title li{
	margin:0;padding:10px;
	flex-grow:1;
	display:block;
	text-align:center;
	font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
	word-break:break-all;
	cursor:pointer;
	border-top-left-radius:5px;border-top-right-radius:5px;
	border:1px dashed #1d1d1d;
	border-bottom:1px solid #1d1d1d;}
.editor_style ul.tab_title li.select{
	border:1px solid #1d1d1d;
	border-bottom:none;}
/* タブデータ枠の設定 */
.editor_style div.tab_data{
	margin-top:0;
	padding:10px;
	border:1px solid #1d1d1d;
	border-top:none;}

■上記のCSSは[single.php]、[page.php]のthe_content()行のクラス名が[editor_style]の場合です。