【wordpress】ビジュアルエディターにプルダウンを追加する

どうも神田です。今回はWordpressのビジュアルエディターにプルダウンを追加する手順について説明していきます。

WordPressで記事を書いていると、同じような文言を入れたくなったりしますよね。そのときに、キーワードのリストのようなものを作成しておくと便利です。

プラグインなどを利用せずに、純粋にPhpコードを弄って実装しますので、是非とも参考にしてください。

この記事を書いている私は大学時代にHPの勉強を始め、その後SEとして会社に3年勤務。
退職後はフリーランスとして独立して現在も活動しています。WordPressは既に5年以上使い続け、PHPコードを改造する程に使い込んでいます

【wordpress】ビジュアルエディターにプルダウンを追加する

①今回したいことについて

さて、今回のゴールですが、管理画面のビジュアルエディターにプルダウンを設置します。
内容は「テスト1」、「テスト2」、「テスト3」みたいに簡単にします。以下のイメージです。

実装するにあたって、エディターを強化するTinymceプラグインを使用しています。最近はテーマに含まれている場合も多いですが、対応していない場合はインストールしておいてください。
テーマに入っているなら、下記のようなビジュアルエディターに近いものになっているはずです。

②ビジュアルエディターの仕組みについて知る

さて、まずは仕組みからです。ビジュアルエディターにプルダウンを追加するにはJSファイルとPHPファイルの両方を編集します。
PHPファイルは、よく弄る子テーマのfunctions.phpです。一方で、JSファイルも子テーマのJSファイルをいじる必要があります。

初期状態ではwordpressの管理画面から参照出来るJSファイルは子テーマには用意されていません。そのため、自分で作成する必要があります。
子テーマ、および子テーマの設定方法については以下の記事を参考にしてみてください。

関連記事

どうも神田です。今回はWordpressの子テーマについて簡単に説明していきます。 Wordpressでブログなどを運営していて、もう少し改造したいなぁ、と思った方は是非とも参考にしてみて下さい。 この記事を書いている私は大学時代にHPの勉[…]

IMG

③子テーマにPHPファイルとJSファイルを編集する

子テーマに編集していきます。functions.phpには「jsファイルへのリンク」「プルダウンの設定」を、
JSファイルには選んだ時に挿入される文言などを記載します。コードは以下の通りです。コピペしても構いません。

JSファイル(example.js)
PHPファイル(functions.php)
PHPファイル、およびjsファイル共にコメントを詳細に残しているので、参照してみてください。
PHPファイルの’mce_buttons_4’はエディタの何行目に作成したメニューを表示するかを表します。
3行目にしたい場合は’mce_buttons_3’という風に変更してください。