【WordPress】HTMLエディタボタンアイコンを自作のものに置き換え、効率アップ

Total 201 views
この記事の所要時間は約 6分です。

ワードプレスの HTMLエディタで投稿記事を書く時
一番上に鎮座ましますボタンアイコン群の機能を使ってる人は多いと思います。

しかしデフォルトのボタンだけではちょっと使いにくいので
私は自作(完全オリジナルぢゃぁないけど)のものを入れて
さらなる効率化アップを図ってます。

スポンサーリンク


 

個人的には AddQuickTag よりも使いやすいんですけど

アフィリエイトサイトやドロップシッピングサイトをワードプレスで作ってる方も多いことでしょう。

その際 HTMLモードでのタグ打ち記事投稿に慣れると自由度がぐっと広がりますよ。
慣れてきたらぜひ HTMLモード(テキストモード)を試してみてください。

HTMLエディタからビジュアルリッチエディタに切り替えると、アフィリエイトコードなどは”整形”されてしまい誤作動の元になります。

なので HTMLエディタしか使わない人は管理画面の「ユーザー」→「ビジュアルリッチエディタを使用しない」にチェックを入れて使用するといいでしょう。

 

 

私は普段ワードプレスで記事を書く時
先にメモ帳で下書きをしてからワードプレスの投稿画面に張り付け、
HTMLタグで最終微調整というスタイルをとってます。

その時、投稿画面最上部にあるボタンアイコン機能をよく使うんですが
デフォルトのものは正直使いやすいとは思えません。

こちら↓がデフォルトのものです。
(HTMLエディタモードでないと表示されません)

キャプチャ画像

 

ご存じない方のために簡単に説明すると、
これらのボタンにはよく使うタグなどが登録されており
そのボタンをクリックすれば長いタグでも間違えずに一瞬で打ち込むことができるというものです。

以前は「AddQuickTag」という人気プラグインを使って拡張していました。

しかし登録数が増えてくると
管理の面でちょっと使いにくい部分があったんです。

その時に知ったのが下記サイトのテクニックで
しばらくはそれを使わせていただいてました。

参考サイト

  • デフォルトのボタンを非表示にできる
  • ほぼなんでも好きなタグを登録できる
  • ボタンの表示テキストや並べ替えも思い通り

といった特徴があります。

唯一不満だったのが、
「"」はそのままではエラーになるので「"」と書き換えなければならないことでした。
(phpの書き方次第でこれは簡単に解決できるものと後で知りました ^^;)

そしていつものごとく RSSリーダーを眺めていたらまた別のテクニックも拾い
一部はそっちに乗り換えることにしました。

こちらの特徴としては

  • 範囲指定しての前後のはさみタグができる(詳細は後述)
  • 「"」がそのまま使える
  • 見やすい

ということで、今はこちらを利用して自作のボタン群を作って愛用しています。

区切り画像

ウェブ関連ブログでは「AddQuickTag」をベタ褒めしているところが多いようですが
私はこっちの方が断然使いやすいです。

ただ functions.php をいぢるのでちょっと注意が必要です。

 

デフォルトボタンアイコンを非表示にする

何もいぢってない状態だと投稿画面は下記のように感じになってます。
(HTMLエディタモード時)

キャプチャ画像

 

使えるボタンもいくつかありますが
どうせ作り直すのでこのボタンは全部消しちゃいます。
(ワードプレスのバージョンによっては全部消えない場合もあるかもしれません)

テーマフォルダの中の root階層にある functions.phpのコピー(バックアップ用)を作ったら
functions.phpに以下をペーストします。
(コピーする場所によってはエラーが出る場合もあるので不安だったら一番最後にペーストしてみてください)

もしこれでボタンが消えなかったりエラーが出た場合は先頭に
「<?php」
最後尾に
「?>」
を付けてみてください。

ボタンが消えたら成功です。

 

新規ボタンの追加

さきほどペーストした直後でいいので下記を追加コピペします。

上の「(ここに追記)」という場所に、
登録したい機能を加筆していきます。

一例として「<p></p>」タグを範囲選択したテキストの前後に一発で入力するボタンを作ってみます。

 

「(ここに追記)」というところに下記を加筆します。

QTags.addButton('ed_tag_p1', '<p></p>', '<p>', '</p>');

上記はこんな↓感じでパターン化されてます。
キャプチャ画像

①『定型文』はそのままコピペします。
②『定義名』のところは「ed_tag_」の後ろに他と被らない英数字を当てます。なんとなくそれっぽい名前を付けておけば大丈夫です。
③はボタン上に表示されるテキストです。日本語も OK です。
④が実際に入力される開始タグです。開始タグでない場合もあります。
⑤は終了タグです。ここが空白の場合もあります。

 

最終的には下記のようになります。

すると下画像のようにボタンが 1個新規追加されます。
キャプチャ画像

 

使い方はこちら↓をご覧下さい。

キャプチャ画像

 

しかしこのボタンには”私”なりの弊害もあります。

キャプチャ画像

 

まぁこれはあくまで”私だけの弊害”ということで
こういう時のためにボタンを 2種類作っておきます。

たとえば範囲選択の前後に<p>と</p>を自動入力させるボタンには
「<p></p>」という機能と表示を、、、
任意の位置に<p>だけを挿入するボタンには
「<p>」という機能と表示を充てるというものです。
(ちょっとボタンが煩雑になってしまうのがデメリットです)

その際、範囲指定しないで「<p>」だけを入力するボタンの場合は
「終了タグ」を空白にしておきます。

キャプチャ画像

 

これをまとめると下記のようになります。

実際のボタンアイコンは下記のようになります。
キャプチャ画像

ボタンアイコンのクリックによる自動入力は「元に戻る」機能が働かないので、間違った場合は一つ一つ手動で消す必要があります。

それではいくつか別パターンを紹介しましょう。

★クラス指定ありの「p」
QTags.addButton(‘ed_tag_rice’, ‘補足’, ‘<p class="(クラス名)">’, ‘</p>’);

 

★改行付き more タグ(<!--more-->を入力後、改行してさらに<p>を自動入力)
(改行は半角モードの「ろ」キー+「n」)
QTags.addButton(‘ed_tag_more’, ‘more’, ‘<!–more–>/n<p>’, ”);

キャプチャ画像

 

★ショートコード
QTags.addButton('ed_tag_breakline', 'break', '[(ショートコード名)]', '');

 

★長目のコード
QTags.addButton('ed_tag_photopin', 'PHOTO PIN', '<div class="photopin">/n<img src="http://webtrace-cuisine.com/---.jpg" alt="イメージ画像" title="" />/n<p>(リンクテキスト挿入)</p>/n</div>', "");

キャプチャ画像

 

このようになんでも登録できるし
順番を入れ替えるだけでボタンの位置がすぐに変えられるのも便利です。

一時的に使わないボタンはコメント扱いにしておけば復活もラクです。

キャプチャ画像

以上です。

スポンサーリンク

ブログランキングに参加してます。よろしければポチッとな。

お気軽にフォロー↓してください。

ブログ更新情報はこちらからどうぞ。

follow us in feedly

コメントを残す




日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)