TinyMCE Advancedプラグイン ～WordPressでブログを始める～
コンテンツ
TinyMCE Advancedについて
WordPressの標準の投稿画面のビジュアルエディターに機能追加をするプラグイン。
標準のビジュアルエディタには以下のボタンがある。
上段 | 段落・見出しの選択、太字、イタリック、番号なしリスト、番号付きリスト、引用、左寄せ、中央揃い、右寄せ、リンクの挿入、続きを読むタグの挿入、ツールバーの切り替え（下段を表示する） |
下段 | 打ち消し、横ライン、テキスト色、テキストとしてペースト、書式設定をクリア、特殊文字、インデントを減らす、インデントを増やす、取り消し、やり直し、キーボードショートカット |
インストール理由
このプラグインをインストールした理由は主に２つ。
１つはテーブルの挿入を簡単にしたかったから。
このプラグインだとボタンひとつでテーブルが挿入できる。
もうひとつは標準だとテキストモードにした時に<p>タグが表示されていない（削除されてる）。
だけど実際にはChromeのF12（デベロッパーツール）で見てみると<p>が入っていたりして分かりにくかったのでテキストモードでタグがそのまま表示されるTinyMCE Advancedをインストールする事にした。
例えばこんな文章を入力した時に
標準のテキストモードだと、この様に表示される
しかし、実際のHTMLには<p>が入っている。
ちなみにTinyMCE Advancedプラグインをインストールした後にテキストモードにすると以下のように表示される。
実際のHTMLと同じなので分かりやすい。
TinyMCE Advancedのインストール方法
メニューから「プラグイン」「新規追加」で検索フィールドでTinyMCE Advancedを検索して、「インストール」「有効化」すればインストールは終了。
プラグインをインストールする時に注意したいのが右下に表示される「お使いのWordPressのバージョンと互換性があります」の表示。
その他には「お使いのバージョンのWordPressではテストされていません」と表示されているプラグインもある。
テストがされていなくても動くことは多いみたいだけどバージョンの違いによる不具合に悩まされる事もあるので、なるべくなら互換性のあるプラグインを選びたい。
TinyMCE Advancedの設定内容 エディター設定
エディターメニューを有効化する | チェックを外した。 下記の「ファイル」「編集」・・・などのメニューを表示するかどうか。 ボタンと重なっている機能も多かったのとシンプルにしたかったので非表示に設定した。 |
エディターのボタンはドラッグ＆ドロップで入れ替える事が出来る。
よく使うボタンを左に持ってきた。できれば１行に収めたかったのでショートカットキーで代替できる物や使わなくても済むようなボタンは「使用しないボタン」に移動した。
左から
- テーブル
- リンクの削除
- 書式設定をクリア
- 特殊文字
- 引用
- 番号なしリスト
- 番号付きリスト
- 取り消し
- やり直し
- フォント
- フォントサイズ
- テキスト色
設定
リストスタイルオプション | チェックした。 未チェックだと「番号なしリスト」や「番号付きリスト」は一種類しか選べない。チェックをすると三角形のプルダウンが表示されて数種類のリストから選べる。 未チェック
チェックすると「白丸」「黒丸」「四角」が選べるようになる。
| ||||||||||
コンテキストメニュー | チェックした。 未チェックの状態でディター上で右クリックをすると出るのは以下のメニュー（Chromeの標準メニュー）
チェックをすると右クリックのメニューが置き換わるのでテーブルやリンクの挿入が簡単にできる。 尚、リンクの挿入ボタンは不要なので「使用しないボタン」に移動した。 テーブルボタンも不要なのだけれども「使用しないボタン」に移動するとコンテキストメニューに表示されなくなるのでボタンは残した。
| ||||||||||
代替リンクダイアログ | チェックをしなかった。 チェックをするとリンクの挿入機能が拡張される。タイトルやRelのnofollow（※後述）の挿入が手軽になるけど元々のメニューも使いやすかったので未チェックで使用する事にした。 未チェックの時のリンクの挿入は以下の画面 URLを貼り付けて確定をすればリンクが作成される。外部リンクの場合は自動的に新しいタブでリンクが開くように設定されるので中々便利。
更に設定（歯車マーク）をクリックすると「リンクの挿入／編集」画面が表示される。 「リンクを新しいタブで開く」チェックボックスや自分のWordPress内のコンテンツを検索してリンクを追加できる機能などもあって結構便利。
一方、チェックをすると以下のダイアログが表示される。
「タイトル」と「Rel」は元々のメニューには無かった機能。迷ったけど元々のメニューを使うことにした。
| ||||||||||
フォントサイズ | チェックした。 フォントサイズをpt（ポイント）単位からpx（ピクセル）単位に変更できる。 未チェックだとpt（ポイント）で指定
チェックをするとpx（ピクセル）で指定する様になる
|
nofollowとは
Relにnofollowを指定すると検索エンジンに対して「このリンクをたどらない」と伝えることになる。
つまりリンク先にとってはSEO効果が無くなる。
Googleの推奨は以下の様な時にnofollowを指定するとあった。
- 信頼できないサイト（コンテンツ）へのリンク
- 有料リンク
- 敢えて検索順位を下げたいページ（ログイン画面とか）
nofollowを指定する機会はそうそう無いと思ったので「代替リンクダイアログ」は使わない事にした。
高度なオプション
CSS クラスメニューの作成 | チェックしていない。 使い方は後述 。 editor-style.css を読み込んでビジュアルエディタ上で独自CSSを適用させたり、スタイルプルダウンの選択項目に独自CSSを追加表示する為のチェックボックだと思うのだけれども、チェックをしなくても両方実現できたので結局チェックをしなかった。 （TinyMCE Advanced バージョン 4.6.7） |
段落タグの保持 | チェックした。 この機能がTinyMCE Advancedをインストールした理由のひとつ。 チェックをしないとビジュアルエディタからテキストエディターに切り替えた時に<p>タグ等が消えてしまう（前述）。 チェックをすると段落タグを保持してくれるのでテキストエディターに切り替えた時もタグが残っているので分かりやすい。 |
画像元の貼り付けを有効にする | チェックをしていない。 通常は「メディアを追加」でメディアライブラリに登録してから画像を追加するが、直接画像を貼り付けることが出来る機能の模様。 ただFirefox と Safariにのみ対応をしているという事なのでチェックをしていない。 |
CSS クラスメニューの作成について
独自CSSのクラスは適用しても標準のビジュアルエディタでは見かけは変わらない。
テキストモードに切り替えてタグを確認するか「プレビュー」すれば分かるがビジュアルエディタ上で分かった方が便利。
標準のビジュアルエディタでの表示
テキストモードに切り替えて初めてr_titileクラスが指定されていることが分かる
当初このオプションをチェックするとeditor-style.cssで記述したCSSクラスを読み込み、フォーマットが変わるのだと思っていたのだけれども、どうにもうまくいかなかったので（恐らく当方の技術力不足）別の方法で実現した。
手順は以下の通り
１．空のeditor-style.cssを子テーマのフォルダー（hueman-child)に作成した
puttyで接続して以下のコマンドを実行する。
OS：Ubuntu Server 16.04 LTS
cd /var/www/wordpress/wp-content/themes/hueman-child
sudo touch editor-style.css
２．editor-style.cssのグループとオーナーをwww-dataに変更する。
※ ubuntuの場合、www-dataが apache等のWEBサーバーを操作するデフォルトのユーザとグループ
sudo chown -R www-data:www-data editor-style.css
３．WordPressのメニューに戻って「外観」「テーマの編集」をクリックすると「ビジュアルエディタのスタイルシート」が現れているので選択する。
４．以前に記述した独自CSSのスタイルシート（style.css）を読み込む記述をして「ファイルを更新」
@import url('style.css');
５．テーマの為の関数（functions.php）を選択して最下行にeditor-style.cssを追加する指定をする。
add_editor_style("editor-style.css");以上でビジュアルエディタに独自CSSを適用できる。
但しCSS類はキャッシュが残っていると変更が即時に反映されないのキャッシュをクリアしてページの再読込を行った。
先程の投稿をビジュアルエディタで見て見ると、タイトルに独自CSSが反映されている。
次に独自CSSのクラスの適用を簡単にする為にスタイルボタンのプルダウンにクラスを表示をさせたかったのだけれども、これも何故か「CSS クラスメニューの作成」オプションをチェックをしてもeditor-style.cssに記述した独自CSSのクラスを読み込んでくれない。
逆に未チェックだと表示されたので、とりあえずこれはこのままにしておくことにした。
しかしクラス名が直で表示されて※分かりづらいので独自クラスの指定はAddQuicktagのプラグインをインストールして使う事にした。
管理 設定のインポートとエクスポート
設定をテキストファイルにエクスポート、インポートする機能
「設定のエクスポート」ボタンをクリックすると設定情報がJSON形式で表示されるので「すべて選択」をクリックしてテキストファイルに保存をしておく。
インポートは「設定のインポート」ボタンをクリックするとインポート画面が表示されるので先程保存した設定ファイルの中身を貼り付けて「検証」ボタンを押すと”No errors.”の表示。
「インポート」ボタンでインポートする。
管理 次のエディター拡張の有効化
TinyMCE Advancedをどのエディターで有効するかのチェックボック。
全てのエディターで有効にしたいので全てチェクをしておく。
メインエディター (投稿と固定ページの新規追加と編集) | チェックした。 |
wp-admin の他のエディター | チェックした。 |
サイトのフロントエンドのエディター | チェックした。 |
1件の返信
[…] TinyMCE Advanced プラグイン | souichirou […]