ビジュアルエディタのスタイルに好きなコードを追加して簡単に記事装飾

2019-02-13カスタマイズ

はじめに

ビジュアルエディタのツールボックスはテーマでもカスタマイズされている為、様々あります。

今回は、その中の「スタイル」に任意の装飾コードを追加して、ワンクリックで使えるようにします。

 

 例えば この囲みは、スタイルからワンクリックで装飾しています。

プラグインを使う場合

今回はプラグインを使わない方法のご紹介ですが、このカスタマイズは、function.phpファイルを編集しますし、工程がいくつかあるので、少し面倒な方はプラグインを使って同じような機能を実現できます。

 

AddQuicktag

タグを登録する形で、エディタからクリックで挿入可能にするプラグインです。

AddQuicktagについては以下をご覧ください。

 

Shortcodes Ultimate

ショートコードで選択挿入できるプラグインもあります。

8907_05

8907_30

Shortcodes Ultimateについては以下をご覧ください。

 

上記いずれかのプラグインを使うか、プラグイン利用がイヤな方は、以降をご覧ください。

プラグインを使わない場合

必要な対応

  • まず装飾を決めてCSSを用意します。
  • CSSは style.css に追記します。
  • editor-style.css を用意します。
  • function.php にスタイル定義します。

 

editor-style.cssがない場合は作成して下さい。

 

function.phpeditor-style.cssstyle.cssはいずれも子テーマのファイルを編集します。

 編集前にバックアップを取っておくことをお勧めします。

 

 「スタイル」とは?

 

プルダウンすると見出し2、段落・・などとなった部分です。

環境によっては「スタイル」自体がない場合もあるかもしれません。

 

 

Before

 

 

After

 

3296_09

設定方法

 

説明は難しいので詳細は以下をご覧ください。

mce_buttonsのフィルタ群は、ワードプレスのTinyMCEのツールバー(S)からのボタン/機能を追加または削除するために開発者が使用することができます。

このフィルタには、どのボタンを表示または削除するかを決定するボタンIDの配列が渡されます。

フィルタの説明
4つのフィルターフックが利用可能です:

mce_buttons
主ツールバー(常に表示されている)
mce_buttons_2
高度なツールバー(ユーザーによってオン/オフを切り替えることができます)

<WordPress.org より引用>

 style_formats、mce_buttons_2 を使います。

 

style.cssを編集する

 

装飾用CSSを子テーマのstyle.cssに追記します。

 

【例】
3328_04
/**********************************/
/*ビジュアルエディタ 拡張スタイル*/
/**********************************
/* BOX ピンク*/
.box_pink {
margin: 2em auto;
padding: 1em;
width: 90%;
background-color: #f5cbd0; /* 背景色 */
box-shadow: 0 0 5px 1px #e4707e; /* 影 */
}/* BOX ブルー */
.box_blue {
margin: 2em auto;
padding: 1em;
width: 90%;
background-color: #cee7ff; /* 背景色 */
box-shadow: 0 0 5px 1px #6fb7ff; /* 影 */
}
/

editor-style.cssを編集する

 

editor-style.cssがない場合は、テキストファイルで作成し、cssにリネームして下さい。
editor-style.cssが用意されているテーマの場合は、以下の1行が既に入っているかもしれませんので、確認して下さい。
既に入っていれば、この項は必要ありません。

上記と同じコードを追記してもOKですが、以下の1行を追加する事で重複を避けられます。

@import url('style.css');
 作成・編集したらFTPでサーバーにアップロードするのをお忘れなく!

FTPがわからない場合は、以下でFTP設定などを説明していますので参考にして下さい。
FTPでバックアップ

記事は以下です。

 

 

fuction.phpを編集する

function.phpファイルは最悪ワードプレスが動かなくなる可能性のある重要ファイルですので、バックアップを用意して下さい。

function.phpを触らずにPHPコードを処理単位で記述・管理できるプラグインもあります。
詳しくは以下をご覧ください。

 

まず、以下の1行を追記します。

add_editor_style();

既に入っている場合は不要です。

※2019/2 現在、当サイトはルクセリタスですが最初から記述されています。

 

スタイルの定義を追記します。

/
//TinyMCE追加用スタイルの初期化
if ( !function_exists( 'initialize_tinymce_styles' ) ):
// MCE設定をフィルタリングするためのコールバック関数
//追加するスタイルを配列で作成
function initialize_tinymce_styles($init_array) {
$style_formats = array(
array(
'title' => 'スタイル名',
'block' => 'div',
'classes' => 'CSSクラス名'
),
array(
'title' => 'スタイル名',
'block' => 'div',
'classes' => 'CSSクラス名'
),
);
//JSON ENCODED配列を 'style_formats'に挿入
$init_array['style_formats'] = json_encode($style_formats);
return $init_array;
}
endif;
//コールバックを 'tiny_mce_before_init'に追加
add_filter('tiny_mce_before_init', 'initialize_tinymce_styles', 10000);
//TinyMCEにスタイルセレクトボックスを追加
if ( !function_exists( 'add_styles_to_tinymce_buttons' ) ):
function add_styles_to_tinymce_buttons($buttons) {
//セレクトボックスを取り出す
$temp = array_shift($buttons);
//スタイルセレクトボックスを追加
array_unshift($buttons, 'styleselect');
//見出しのセレクトボックスを追加
array_unshift($buttons, $temp);return $buttons;
}
endif;
//適切なフィルタにコールバックを登録
add_filter('mce_buttons_2','add_styles_to_tinymce_buttons');

「追加するスタイルを配列で作成」の内容は、作成したCSSに合わせて編集して下さい。

title  ビジュアルエディタで表示する名称
block  タグ (div や span)
classes CSSで定義したクラス名

style.cssのコード説明時のであれば、配列は以下の通りです。

$style_formats = array(
array(
'title' => 'BOX ピンク薄',
'block' => 'div',
'classes' => 'box_pink'
),
array(
'title' => 'BOX ブルー',
'block' => 'div',
'classes' => 'box_blue'
),
);

以上で完了です。

 

関連記事