ビジュアルエディタ

参考:

Using the Visual Editor | Make WordPress Support [Official]

使い方

参考:

ビジュアルエディタをカスタマイズする際の備忘録 | NxWorld

TinyMCE の基本スペックとカスタマイズ | ホームネットワーク研究所ホームネットワーク研究所

ボタンを追加する

参考:

カスタムボタンの追加とショートコード/HTML の相互変換 | WebTecNote

ビジュアルエディタにオリジナル機能のボタンを付ける|memocarilog

投稿画面のボタンをエディタの上に追加する | わーどしゅーぷれす

エディタから不要なボタンを削除 (非表示) にする方法 | NxWorld

プラグインを使わずにビジュアルエディタへボタンを追加/削除したり、オリジナルの並びにしたりする方法 | memocarilog

ボタンの追加やエディターのアレンジ方法を紹介 | WP ワークス

TinyMCE4 のツールボタンについて | freo カスタマイズ集

Guide to Creating Your Own WordPress Editor Buttons | Envato Tuts+

How to Add Custom Buttons, Styles, Dropdowns & Pop-ups | GavickPro

Customizing the TinyMCE Editor to Add Buttons in WordPress | Axosoft Dev Blog

Adding custom buttons in TinyMCE editor in WordPress | Made by Denis

TinyMCE Custom Buttons | WordPress Codex [Official]

Create a Custom Toolbar Button | TinyMCE 4.x Docs [Official]

How do I add multiple buttons to my WordPress post editor with a single plugin? – Stack Overflow

How to create a custom button for the visual editor that adds 4 non-breaking spaces? – WordPress Development Stack Exchange

How can i add custom button to my tinyMCE in wordpress – Stack Overflow

Add Custom Button to TinyMCE in WordPress – Stack Overflow

tinymce.PluginManager.add no longer working in wordpress 4.7.2 – Stack Overflow

ショートコードを挿入する

参考:

エディタにショートコードを挿入するボタンを追加する方法 | NxWorld

ダイアログを表示する

参考:

ビジュアルエディタカスタマイズの例 – Qiita

カスタムボタンの追加とショートコード/HTML の相互変換 | WebTecNote

WordPress の TinyMCE 投稿エディタでダイアログを出すボタンを追加する | Technote

ドロップダウンメニューを追加する

参考:

TinyMCE に自作ボタンを追加して定型文を git 管理したい! | 株式会社クイック

インデント幅を変更する

参考:

Change padding to text indent in “Increase Indent” – WordPress Development Stack Exchange

翻訳

参考:

TinyMCE の翻訳をカスタマイズする | WordPress Snippet (tenman.info)

整形ルール

参考:

TinyMCE (ビジュアルエディタ) の整形ルールを変更する | WordPress インストール Tips

ビジュアルエディタにスタイルを適用する (editor-style.css)

テーマフォルダ (子テーマのフォルダ) に editor-style.css を配置し、function.php に次のコードを追加する。

add_editor_style( 'editor-style.css' );

スタイルはブラウザにキャッシュされるため、キャッシュをクリアしない限り更新したスタイルは読み込まれない。tiny_mce_before_init フックで cache_suffix を指定すると、cache_suffix を更新することで新しいスタイルを読み込ませることができる。

function custom_tiny_mce_init( $mce_init ) {
    $mce_init['cache_suffix'] = 'v=0.1.0';

    return $mce_init; 
}
add_filter( 'tiny_mce_before_init', 'custom_tiny_mce_init' );

開発中は、cache_suffixtime() を指定すると、キャッシュを無効化して常にスタイルを読み込ませられて便利が良い。

$mce_init['cache_suffix'] = 'v=' . time();

参考:

WordPress のビジュアルエディタをカスタマイズする | webOpixel

WordPress でオリジナルの editor-style.css を設置・適用する方法 | コピペッペ

WordPress でオリジナルの editor-style.css を設置・適用する方法/子テーマ対応 | WEB TIPS

投稿エディタのスタイル editor-style.css がキャッシュされて変更が反映しない | CSS note

エディタにもサイトと同じ CSS を適用させる | WEB の技

WordPress のビジュアルエディタに CSS を適用して見やすくしてみた! | ゆにメモ

WordPress の editor-style.css を編集してビジュアルエディタをカスタマイズしよう | shuu11 code

WordPress のビジュアルエディターにテーマの style.css を割り当てる方法 | 寝ログ

WordPress のビジュアルエディタ TinyMCE を少し使いやすくする | 店舗、生産者を応援

TinyMCE の editor-style.css の制限と回避方法 | ホーム NW 研究所

Forcing reload of editor-style.css – WordPress Development Stack Exchange

tiny_mce_before_init

参考:

tiny_mce_before_init – Hook | WordPress Developer Resources [Official]

TinyMCE

参考:

TinyMCE | WordPress Codex 日本語版

プラグイン

参考:

TinyMCE4 のプラグイン一覧 | freo カスタマイズ集

ドキュメント

参考:

TinyMCE | Documentation [Official]

Tips/まとめ

参考:

ビジュアルエディタをカスタマイズする際の備忘録 | NxWorld

Visual Editor Custom Buttons

参考:

Visual Editor Custom Buttons | WordPress Plugin [Official]

darthvader666uk/visual-editor-custom-buttons: Current updates for abandoned plugin – Visual Editor Custom Buttons – GitHub

kugaevsky/visual-editor-custom-buttons: WP visual-editor-custom-buttons plugin repository (unoficial) – GitHub

Visual Editor Custom Buttons – ビジュアルエディタにボタンを追加する | for men

WordPress のビジュアルエディッタにボタンを登録可能なプラグイン Visual Editor Custom Buttons 使い方 | アマモ場

TinyMCE Templates

参考:

TinyMCE Templates | WordPress.org

TinyMCE Templates の使い方!テンプレートを作成して記事投稿を効率化 | ブロガーの森

TinyMCE Templates – WP記事テンプレート作成プラグイン | 髪飾り情報局

TinyMCE Templates の使い方と設定方法 | メルプラ

投稿テンプレートを作成!便利な WordPress プラグイン TinyMCE Templates の使い方 | 株式会社LIG

記事をシェアする:
タグ:

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です