ビジュアルエディタに＜Enter＞が使えるメモBOXを実装する

TinyMCE Advancedの「スタイル」機能は1つの段落に対する定義になります。

よってこの「スタイル」機能で作成したBOXでは、段落変更(Enter)は利用できません。

しかしショートコードという新しい概念を導入すると、段落変更(Enter)が使える新しいタイプのBOXを作成する事が可能となります。

　このドキュメント利用上の注意点

このドキュメントの中では[]を【】に置き換えて記述しています。

理由は解説に[]のままでショートコードを記述すると、更新処理でショートコード処理が動いてしまうからです。

よってこのドキュメントからソースをコピーする場合は、ペースト後、【】を[]に置き換えて利用して下さい。

1.ショートコードを作成する

1-1.functions.phpに下記プログラムを登録します。

ここにショートコード(【memo】)と、変換するHTMLコードを指定します。

/**************************************************/
/* TinyMCE Advancedにショートコードを追加  */
/**************************************************/
function my_scode($postarr) {
	/* メモBOX *************************/
	$search = '【memo】';
	$replace= 
		 '<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');

■フィルターフック「wp_insert_post_data」はビジュアルエディタで「更新」又は「下書きで保存」を実行した時にビジュアルエディタのデータをユーザプログラムに渡してくれる関数です。

引数の$postarrの[‘post_content’] の中に入力されたデータが格納されています。

■上記の処理はビジュアルエディタのコンテンツの中に【memo】という文字列があったら、$replaceで定義したた文字列に置き換える処理をしています。

注意：上記プログラムをコピー＆ペーストした場合は【】を必ず[]に変更して下さい。

2.BOXの表示スタイルを設定する

2-1.ビジュアルエディタのCSSに下記を追加します。

本テーマのビジュアルエディタのCSSは「editor-style.css」から「my-editor-style.css」に変更しています。

理由は下記ドキュメントを参照してください。

ブロックエディタ時代にビジュアルエディタを使う方法

親テーマが「editor-style.css」の時のスタイル機能の使い方

＜my-editor-style.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;
}

2-2.style.cssにも上記と同じ内容を登録します。

/**********************************************************************/
/* メモボックス 対象：文字、画像 */
/**********************************************************************/
.entry-content  div.my_memo{
 margin:5px 0; 
 padding:10px;
 border-radius:5px;
 backgroundcolor:#f5f0cf;
 overflow:auto;
 max-width:100%;
 font-size:14px;font-size:0.875rem;line-height:1.5em;letter-spacing:0.8pt;
}