賢威7のエディター編集ボタンの追加削除・編集方法~WordPressカスタマイズ

WordPressテンプレート賢威7のエディターの編集ボタンの追加・編集・削除などのカスタマイズ方法の解説です。

賢威7のテキストモードの初期状態でのボタン配置

賢威7のテキストモードの初期状態でのボタン配置は以下の通り。

賢威7のテキストモードの初期状態でのボタン配置

改行(br)以降の装飾タグボタンは、テンプレート「賢威」が独自に追加した装飾タグです。

本記事をご覧いただいている方は、そのままの編集ボタンでは使いづらい!と思っている方が多いと思います。
装飾タグだけでなく、お決まりの文言「こんにちわ、訪問いただきありがとうございます。」なども追加可能です。

(本ページ最後の方に、試しにカスタマイズしてみた結果の画像があります。)

では、追加・削除・編集方法を見ていきましょう。

どのファイルのどの部分を編集すればよい?カスタマイズの際の注意点は?

ボタンを追加・削除・編集するには、
★賢威のテーマファイルのうち、「functions.php」を直接編集していきます。
(カスタマイズ用に子テーマが用意されている場合でも、親テーマを編集してください)


★必ずFTPソフトなどで、編集する賢威のテーマファイルのバックアップをしてから、編集を行うようにしてください。
参考:FTPソフトFFFTPのインストール方法と使い方~ダウンロード・アップロード


★また、テーマを上書き更新する場合は、今回修正を行った部分をどこかにメモやコピーしておいて、再び修正を行ってください。

賢威の親テーマの「functions.php」の解説と編集方法

外観>テーマの編集にて、上部にある「編集するテーマを選択」にて、
親テーマ(賢威7.X ****版)を選択し、選択ボタンを押します。

次に、テーマのための関数(functions.php)を押します。

Ctrl-Fなどで検索窓を開き、「 エディタにボタンを追加 」にて検索をかけます。(「 QTags 」で検索してもOK)

すぐ下にfunction add_keni_quicktagsの関数がありますので、その中にある、以下の部分を修正していきます。


クイックタグAPI「QTags.addButton」の公式の解説はこちら
公式では、

と解説されています。

id:区別するためのID(必須。文字列)
display:ボタンの表示名(必須。文字列)
arg1:開始タグ(必須。文字列)
arg2:終了タグ・閉じタグ(任意。閉じタグがない場合はなしでOK)
access_key:スマホ等用アクセスキー(任意。なしでOK)
title:HTMLタグ内に表示されるタイトル(任意。なしでOK)
priority:ボタンを表示する順番(任意。入れ替えたい場合。なくてもOK)
instance:インスタンス?不明です(任意。なしでOK)

日本語の解説と、見出し(h2)ボタンのプログラム対応は以下の通り。を見ていきましょう。

賢威7では、アクセスキーや表示する順番、インスタンス部分は値なし「”」または省略していますね。

では、編集ボタンの追加・編集・削除を行っていきましょう。

間違えて「’」や「,」を消さないように注意してください。

エディター編集ボタンの表示を変える方法

現在あるボタンの表示を変えるだけでしたら、カンマ区切りの2番目の引数
賢威の記述で「見出し(h2)」や「文字1.2倍」と書かれている部分をお好きな文字に変えてください。

下の例は「見出し(h2)」を「h2」にする場合です

同じく間違えて「’」や「,」を消さないように注意してください。

エディター編集ボタンを削除する方法

ボタンを削除する場合は、削除したいボタンのコードが書いてある行をコメントアウト「行の先頭に//をつける」か、削除してください。

コメントアウトなら、後で必要になったら//を消すだけなので復活できるのでおすすめです。

エディター編集ボタンを追加する方法

ボタンを追加する場合は、他の行をコピーして貼り付けてから、引数部分を修正する方法が簡単です。

編集の際の注意点ですが、

HTMLタグは、開始タグと終了タグがあることが多いですが、
★終了タグのないものは、開始タグだけ記述し、終了タグ部分は空文字列「”」にします。

★6番目の引数のタイトル部分には、IDと同じものをコピペしておきましょう。

★プログラム中に改行を入れたい場合は「\\n」を、タブを入れたい場合は、「\\t」を入力します。

★間違えて「’」や「,」を消さないように注意してください。

修正例


この修正方法を覚えると、AddQuicktagのようなプラグインを追加する必要がなくなりますし、テンプレート独自の編集ボタンも追加・修正・削除することができます。

エディター編集ボタンのカスタマイズ例と結果(編集ボタンの前後の変化)

試しに、下記のように「functions.php」を修正してみました。

コードの後に、修正前と修正後の編集ボタンの変化画像があります。


★修正前はこんな感じだったのが、
賢威のテキストモードの初期状態でのボタン配置
↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
★修正後はこうなりました。
エディター編集ボタンのカスタマイズ例と結果(編集ボタンの前後の変化)


もし、エディター編集ボタンのPHPファイルを修正していて画面が真っ白になったり、プログラムエラーが出てしまった場合はこちらをご覧ください。
WordPressが真っ白画面でログインできない!原因と直し方・復元方法

きよひこのアフィリエイト~無料メルマガ講座
年収100万円稼ぐノウハウが身に着く!
きよひこメルマガ講座登録はこちら
お名前(ニックネーム可):
メールアドレス: