WordPress投稿画面のテキストエディタのボタンを追加!

TET
"

はじめに

WordPressの投稿画面で、ビジュアルエディタを使う人、テキストエディタを使う人といらっしゃると思います。

わたしはテキストエディタ派です。
たまにHTMLタグを手打ちしたくなるので…

わたしが使っているテーマSimplicity2は最初からかなりの数のボタン(クイックタグボタンというらしい)が用意されています。正直使いこなせていません。。

今回はテキストエディタに自分でよく使う目次部分のボタンを追加します。

完成図と大まかな手順

完成イメージ

参考サイト

Wordpress投稿編集画面のテキストエディターのツールバーにタグ挿入ボタンを追加する方法です。

大まかな手順

今回はfunctions.phpをwordpressの外観-テーマの編集から修正していきます。

FTPなどでダウンロードして、ローカルで編集したい場合は
/サイトのルートディレクトリ/wp-content/themes/対象のテーマ/functions.php
をダウンロードして編集します。
  • 外観-テーマの編集より対象のfunctions.phpを開く
  • functions.phpを修正して更新
  • 動作確認(DEMO)

functions.phpを開く

今回はローカルのテキストエディタなどは使わず、wordpress上で作業をします。
functions.phpは、書き方がおかしかったりすると、更新後に画面が真っ白になってログイン画面にすら入れなくなることがあるので、FTPで接続できる環境を用意した上で修正することをおすすめします。
また、修正前ファイルをバックアップしておくか、コード自体をコピペして別のテキストに控えておくなどして、エラーが起きたときに対応できるようにしておきましょう。

functions.phpを修正して更新

もともと記載がある文字の下にボタン追加用の文言を追記します。

CSSについても参考にしたい方はおわりにをご参照ください。

細かく説明です。

たとえば、開始タグと終了タグの関係は下記の画像の通りです。

文字を選択してボタンを押したら、文字の前後にタグが貼り付けられます。
文字の前が開始タグ、後が終了タグになります。

いつも同じHTMLタグを貼り付けたいとき、例えば今回のように、目次用に下記のタグをボタン一つで貼り付けたい場合は、終了タグは設定しません。

設定タグの間にある”\n”はタグを見やすくするための改行になります。

目次を設定したら、リンクで飛ぶ先の見出し用のタグも用意します。

大きな項目と小さな項目2つを用意しています。
それぞれ、目次のリンク先の番号に合わせてタグ内のid=”title_”の番号の数字を合わせます。

例)

このページの目次の場合は下記の通りとなります。

DEMO

ページ上部にもありますが、こちらにも目次を置いておきますので、クリックして各項目へ飛ぶかどうか確認してみてください。

おわりに

タグを追加するためのボタンの追加方法と、目次ボタンの追加方法をご紹介しました。

目次の設定に関しては、プラグインもあるようですが、プラグインを入れるのはちょっと…という方向けですね。

目次の設定を自分のwordpress上でもしてみたい方向けにCSSはこちらになります。
色や枠の太さなど自由に変えてみてください。

スポンサーリンク

シェアする