タグ: TinyMCE

TinyMCE Advanced プラグインを利用すると、WordPress のビジュアルエディタでテーブルを挿入することができるのですが、このテーブルの挙動には以前から悩まされています。それは、テーブルと全てのセルに勝手に width や height を設定してしまうという仕様です。

以前の TinyMCE Advanced 5.1.0 までは、テーブルを挿入した時は問題ないのですが、テーブルの罫線をドラッグした際に width や height が追加されます。これは後述の方法で対策していました。

そして TinyMCE Advanced が 5.2.0 にアップッデートされた時、改善されるかと思いきや、ますます厄介なことに、テーブルを挿入した時に有無を言わさず width が設定されるようになっていました。5.3.0 になってもそれは変わらないのですが、その仕様を受け入れつつ、対策することにしました。

“TinyMCE Advanced のテーブルで勝手に設定される width 対策（妥協策）” の続きを読む »

WordPress の投稿画面のスタイルを実際のサイトの見た目に近づけるために、ビジュアルエディタ用の CSS を作成して管理画面に読み込ませることができますね。editor-style.css などとして CSS ファイルを用意し、functions.php の中で

add_editor_style("editor-style.css");

を記述することで、ビジュアルエディタにeditor-style.css が適用されます。

しかし、これでは記事部分の CSS を変更する際に、公開画面用の CSS とビジュアルエディタ用の CSS の両方を編集する必要があります。

そこで editor-style.css を公開画面と共有すると便利です。header.php の中で style.css と共に読み込ませるか、style.css の先頭で editor-style.css をインポートすればよいわけですが、記事部分を囲む要素の class 属性の値を工夫する必要があります。

“ビジュアルエディタと公開画面で CSS を共有する” の続きを読む »

WordPress の ビジュアルエディタ TinyMCE の機能を拡張するプラグインとして、TinyMCE Advanced が有名です。この TinyMCE Advanced、バージョンが 4.0 以上になってから更に使いやすくなり、挿入されるタグも非推奨タグが少なくなってきたように思います。まだ一部テーブル関連で非推奨属性が残っていますが。

この設定方法や使い方は、数々のブログ等で山ほど紹介されていますのでここでは書きませんが、ブロック要素の選択肢とフォントサイズの選択肢をもう少し踏み込んで設定するうえで、あまり情報が無かった以下の2件のカスタマイズ方法を紹介します。

• ブロック要素（見出し）の選択肢を、投稿タイプによって切り替える
• フォントサイズの選択肢を、ラベルを px、値を % で定義する

“TinyMCE のブロック要素とフォントサイズの選択肢” の続きを読む »