中級者向け 有用

【有用】Advanced Editor ToolsにCSSスタイルを追加する(旧TinyMCE Advanced)

WordPressのプラグイン
2018.12.15
この記事は約8分で読めます。

文中の説明画像をクリックすると拡大します。

Advanced Editor Tools(旧TinyMCE Advanced)って何？

Advanced Editor Tools(旧TinyMCE Advanced)とは、WordPressで記事を作成する際に、レイアウトを簡単に編集できるようにするプラグインです。

「Advanced Editor Tools(旧TinyMCE Advanced)」

記事を作成する際には、編集画面の「ビジュアル」もしくは「テキスト」のどちらかのモードを使用して作成していきます。ブログサービスの編集画面のように、HTMLのコードも必要とせず、直感的に入力していくなら「ビジュアル」が適しているでしょう。

ビジュアルエディタで記事のレイアウトを変更するには、上部のメニューから編集することになります。

もし自力でレイアウトを変更しようとすると、「テキスト」モードでHTML・CSSのコードを直接入力する必要があります。そうなると、毎回記事に入力する手間がかかり、そもそもHTML・CSSのコードの知識が必要になりますので、初級者にとってはハードルが高いです。

それらの問題を解決するのが、プラグイン「TinyMCE Advanced」です。

デフォルトの状態よりも、入力に関する便利なボタンがたくさん追加できて、編集作業の効率が格段にアップします。
そのまま使用するのでもよいのですが、さらに「TinyMCE Advanced」をカスタマイズすることによって、例えば「文字を強調するためにマーカーを入れる」など、独自のCSSスタイルをビジュアルエディタに追加することができます。

CSSって何だっけ？という方はこちらをご覧ください。

【基本】CSS（カスケーディングスタイルシート）って何？
CSS（シーエスエス）とは、「カスケーディングスタイルシート」と呼ばれるもので、Webサイトのレイアウトやデザインなど「見た目」を操作・制御するための言語のことです。
wakaru-web.com

独自スタイルのボタンを追加するには

「TinyMCE Advanced」に独自のCSSスタイルを追加すると、初級者にも操作が簡単にできて、「テキスト」モードでコードを書く必要もないのでとても便利です。

スタイルボタンをクリックすると、独自に作成したレイアウトに変更できます。

しかし、追加するための作業は以下のとおりです。

  • editor-style.cssの編集
  • functions.phpの編集

editor-style.cssがWordPressのテーマファイルにない場合は、後述の通り、editor-style.cssを追加します。

コードの編集なので苦手意識がある人も、一度設定してしまえば簡単に記事のレイアウトを変更できるので、以下の説明を参考にしながら、独自スタイルを追加してみてください。

独自スタイルを追加する事前準備

まずは、「設定」→「TinyMCE Advanced」にアクセスします。

そして、「高度なオプション」の中にある「CSS クラスメニューの作成」にチェックを入れましょう。ここで、チェックできない場合は、テーマファイルにeditor-style.cssがないことを示しています。

もしeditor-style.cssがないのであれば、FTPソフトなどで追加する必要があります。

※後述しますが、editor-style.cssが無い場合には、CSSファイルを作成する必要がありますが、このとき、「TinyMCE Advanced」で指定の「editor-style.css」という名称にこだわる必要はありません。作成したファイル名がなんであれ、header.phpでそれを読み込めばOKです。

以下の説明を参考に追加してみてください。(チェックできる場合は、この章は読み飛ばして大丈夫です)

  1. HTMLエディタやメモ帳などで、名前をeditor-style.cssにしたファイルを作成する
  2. FTPソフトを使い、WordPressファイルの中にアップロードする

FTPソフトの導入方法については、以下の記事を参考にしてください。

【基本】WordPressのインストールって、どうやるの？
WordPressには、契約しているサーバーで簡単インストールする方法と、WordPress公式サイトからダウンロードしてFTPソフトでアップロードする方法の、2種類があります。サーバーで簡単インストールする方法は、時間をかけずに簡単にインストールしたい場合にお勧めです。
wakaru-web.com

これで完了です。チェックボックスが選択できれば成功になります。

このファイルには、CSSのコードを追加するので、後からアップロードしても問題ありません。また、作成したCSSファイルが読み込まれるように、header.phpに以下のコードを追加します（editor-style.cssというファイル名の場合）。

<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/editor-style.css" >

header.phpにコードを追加するには、WordPress管理画面の「外観」→「テーマの編集」で確認できますが、当サイトではこれを直接編集するのではなく、一度パソコン上に（ローカル環境に）にheader.phpをダウンロードし、テキストエディタで編集してからアップロードする方法を推奨します。

テーマのテキストエディタでの編集については、以下を参考にご覧ください。

【危険】テーマファイル（ソース）の編集はローカルファイルで行なう！
WordPressのテーマファイルの編集は管理画面で編集するのではなく、オフラインにてテキストエディタで編集して、FTPでアップロードしましょう。管理画面の直接編集でミスしたまま「ファイルを更新」すると、元に戻らない危険を孕んでいます。
wakaru-web.com

ここでは、便宜上、管理画面上での編集方法を示します。

コードを記述したら「ファイルを更新」をクリックして内容を保存しましょう（当サイト推奨は、ファイルのアップロードです）。

これで、editor-style.cssを正常に読み込んでくれるはずです。

※再度の説明ですが、editor-style.cssが無い場合には、CSSファイルを作成する必要がありますが、このとき、「TinyMCE Advanced」で指定の「editor-style.css」という名称にこだわる必要はありません。作成したファイル名がなんであれ、header.phpでそれを読み込めばOKです。

editor-style.cssの編集

準備が整ったら、実際に編集していきましょう。まずは、editor-style.cssにコードを追加します。

先ほどの作成したファイルにコードを追加して、FTPソフトなどでアップロードする方法か、もしくはWordPress管理画面の「外観」→「テーマの編集」から、テーマファイルeditor-style.cssを選択しましょう（当サイト推奨は、ファイルのアップロードです）。

今回の例では、黄色のマーカーと濃いピンクの文字を作成してみます。

以下のコードを入力します。

.yellow-marker {
background:#FFFF00;
}
.deep-pink {
color:#fa0260;
}

最初に記述してある「.yellow-marker」や「.deep-pink」はクラス名です。「.kiiro-haikei」でも「.koi-pink」でも、任意のネーミングでOKです。

後にfunctions.phpでも使用するネーミングです。

そして、その後に記述してある「#FFFF00」で色を決定しています。#以降のカラーコードを変更すると、色を変えることが可能です。

例えば、以下などです。

  • 「#c9fdcb」にすると黄緑色
  • 「#cce5ff」にすると水色

クラス名と色を入力したら、「ファイルを更新」をクリックして内容を保存します（推奨：ファイルを保存してアップロードします）。

functions.phpの編集

次はfunctions.phpにコードを記述して、独自スタイルのボタンと先ほどのCSSファイルを紐付ける設定です。

同様にWordPress管理画面の「外観」→「テーマの編集」から、functions.phpを選択します。ここでも、当サイト推奨は、テキストエディタでの編集です。

特にfunctions.phpは、小さな記述ミスでも画面が見れなくなったりエラーが出たりするので、なおさらバックアップがとっておけて、やり直しのきくテキストエディタでの編集がよいです。

具体的には、以下のコードをファイルの一番下に入力しましょう。

//TinyMCE Advanced独自ボタン追加
//　ビジュアルエディタで任意クラスを付与
function _my_tinymce($initArray) {
    $style_formats = array(
        array(
            'title' => '黄色のマーカー',
            'inline' => 'span',
            'classes' => 'yb'
        ),
        array(
            'title' => '濃いピンクの文字',
            'inline' => 'span',
            'classes' => 'deep-pink'
        ),
    );
    $initArray['style_formats'] = json_encode($style_formats);
    return $initArray;
}
add_filter('tiny_mce_before_init', '_my_tinymce', 10000);

これで設定完了です。「ファイルを更新」をクリックして（推奨：編集したファイルをアップロードして）内容を保存します。

実際に記事の編集ページにいき、正常に機能するか確認してください。あとは、CSSで違う色のコードを入力して、functions.phpで項目を追加していけば、独自のスタイルを増やすことが可能です。

 

まとめ

  • TinyMCE Advancedに独自スタイルを追加するには、「editor-style.css」と「functions.php」の編集が必要。
  • 「editor-style.css」がない場合は、ファイルをアップロードする。
  • 様々なコードを使えば、マーカーなど以外のものも作成できる。
スポンサーリンク
タイトルとURLをコピーしました