HOME  /WordPress(応用)
 /TinyMCEで段落変更(Enter)が使えるメモBOXを作る
2017年12月12日

TinyMCEで段落変更(Enter)が使えるメモBOXを作る

TinyMCEの下記スタイルは1つの段落に対する定義になります。

よってこのスタイルで作成したBOXは、改行(Shift+Enter)しか使えません。

しかしショートコードという新しい概念を利用すると段落変更(Enter)が使えるBOXを作る事ができます。

 

これはビジュアルエディタの中で[ショートコード名]を入れて更新ボタンを挿入すると、ファンクションに定義したショートコードに対応するHTMLコードに置き換えてくれ、より高度なBOX作成が可能となります。

 メモ

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

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

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

1.設定方法

1-1.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;}

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

/**********************************************************************/
/* メモボックス 対象:文字、画像 */
/**********************************************************************/
.contents 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;}

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

ここではショートコードから、上記で設定したスタイルを含んだBOXを作り出します。

/**************************************************/
/* TinyMCEにショートコードを追加  */
/**************************************************/
/* 段落が使えるメモBOX */
function my_scode($postarr) {
  $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');

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

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

2.メモBOXを入れる方法

ここではスタイルから作成したメモBOXと、ショートコードから作成したメモBOXの違いを解説します。

2-1.スタイルから作成したメモBOX

①下記のスタイルからdiv.my_memoを選択する。

②下記BOXが表示されます。

 

③上記のBOXに文字等を入れます。

リンゴ
ミカン
パイナップル

上記BOXは<Shift+Enter>で改行し、<Enter>でBOXからでます

2-1.ショートコードで作成したメモBOX

①ビジュアルエディタの画面で【memo】を入れ更新ボタンを挿入する。

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

②下記BOXが表示されます。

 メモ

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

上記のBOXの中は、<Shift+Enter>の改行も、<Enter>の段落替えも利用できます。
BOXから出る場合は<Enter><Enter>になります。

更に、ダッシュアイコンの鉛筆マークも合わせて表示させています。

3.メモBOXのインデント方法

3-1.スタイルで作成したBOX

スタイルから作成したBOXは1つの段落なので下記アイコンで自由にインデントできます。

3-2.ショートコードで作成したBOX

ショートコードで作成したメモBOXは複数段落なので、下記方法でインデントします。

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

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

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

4.メモBOXに画像を取り込んだサンプル

ショートコードで作成したメモBOXに画像を取り込んだ例です。画像の拡大・縮小に合わせてBOXサイズが変わる設計にしています。

 画像取り込んだ例

このBOXはテキストだけでなく画像を取り込んで1つの枠の中で操作でできます。

段落替え(Enter)が使えると色々な操作がビジュアルエディタで可能になります。