HOME  /WordPress(応用)
 /ビジュアルエディタに<Enter>が使えるメモBOXを実装する
2020年03月29日

ビジュアルエディタに<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>&shy;<span class="dashicons dashicons-edit">&nbsp;</span>&shy;メモ</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;
}

以上でショートコードを使った設定は完了です。

 

2.ショートコードで作成するメモBOXの操作方法

<作成>

メモボックスを入れたい所で【memo】を入れ「更新」又「下書きで保存」ボタンを挿入します 。

(実際に入力するコードは【】を[]に置き換えた文字列です)

下記BOXが表示されます。

 メモ

このBOXは段落替え(Enter)が使えます。

上記メモBOXの中では<Enter>を使った文書作成ができます。

当然<Shift+Enter>も利用可能です。

 

<文書作成時の注意点>

空白行を入れる時は空白行にスペースを入れて下さい。

下記の例では、2行目にスペースが入っています。

­ ­メモ

一行目

 

三行目

理由:二行目の先頭で<Enter>を挿入するとBOXの終了処理が行われてBOXからカーソルがでます。

それに合わせてアイコン文字も削除されます。

 

<メモBOX作成の終了>

メモBOXから出る場合はビジュアルエディタの下記アイコンを使ってください。

BOXから出た後、続きを読むーーーを削除します。

 

<メモBOXのインデント方法>

①メモBOXをクリックします。

②ビジュアルエディタの下に表示されるガイドからdivを選択します。

③下記インデントボタンでインデントします。

­ ­注意

インデント操作には下記設定が必要になります。

 ­ビジュアルエディタでインデントが利用できる様にする

 

<メモBOXの削除>

下記のスタイルから「div.my_memo」をクリックします。

この操作でBOXが消え、通常ドキュメントになります。

 

以上で、ビジュアルエディタに<Enter>が使えるメモBOXを実装する事ができました。

 メモ

以上でこのドキュメントの説明は完了です。

関連ドキュメントはメニュの「WordPress(応用)タブ」か下記の関連記事一覧から探して下さい。

又、このサイトには、Google広告が掲載されています。

この記事が貴方の参考になりましたら、広告もご覧頂ければ幸いです。


<関連記事一覧>

ここでは整形済みテキストの設定と使い方を解説します。整形済みテキストのポイントは見やすいソーステキストの提供です。

ここではビジュアルエディタでタブ切替のコンテンツを作成する方法を解説しています。しかしタブの単純な作り方ではスマホ表示でタブが複数行になる!等の問題が発生します。そこでflexboxの機能を使ってスマホでも使えるタブを実現しました。

TinyMCEではリストとして、オーダリスト

    とアンオーダーリスト

      が用意されていますが、決して使い易いものではありません。そこでこのサイトではTinyMCE Advancedのスタイル機能を使って半角2文字リスト、半角4文字リストを作成する事により、文字種を選ばないリストを作成しました。

このドキュメントではビジュアルエディタ(TinyMCE)の見出し、本文、URLの設定を解説しています。

ここでは引用

の設定と使い方を解説します。ポイントは見やすい引用BOXです。

コラップスとはアコーディオンなどのようにコンテンツを開閉できる機能でここではBootstrapのコラップス機能をビジュアルエディタで作る方法を解説しています。

ビジュアルエディタでBOXを作成する方法は①表機能を使う②スタイルで設定したBOXを使うがありますが、ここでは表機能を使ってリンクBOXを作成する方法を解説しています。

2018年末にリリースされたWordPress5.0から標準エディタは「ブロックエディタ(Gutenberg)」に変更になりました。しかし「ビジュアルエディタ(TinyMCE)」を使い続ける方法を解説しています。

Bootstrapはグリッドデザインやボタン及びナビゲーション等の色々な機能を持っており、これを利用するとかなり自由なデザインが可能になるツールです。このBootstrapをダウンロードし、HTTP画面やビジュアルエディタで使う方法を解説しています。

ビジュアルエディタに幾つかのダッシュアイコンボタンを追加したサンプル事例を紹介しています。