【WordPress】ビジュアルエディタの投稿画面にオリジナルボタンを追加!

★記事が気に入ったらシェアお願いします★

WordPressのビジュアルリッチエディタに、オリジナルのボタンを追加

だいぶ記事を書く事にも慣れてきて投稿数も増えてきました。

それにあわせてこんな機能があればもっと便利なのに!
と思う事も増えてきます。

その中でも今回は記事を書く事をサポートする機能、

ビジュアルリッチエディタにオリジナルボタンを追加する方法を紹介します!

今回は例として、CSSを使って蛍光ペンを表示させます。

   functions.phpでオリジナルボタンの設置

まずfunctions.phpにコードを書き込み、オリジナルボタンを配置します。
配置後は下の様なプルダウンのメニューが追加されています。

custom-button1

functions.phpに誤ったコードを記入してしまった場合、WordPressが動かなくなる事もあるので、必ずバックアップを取ってから行いましょう。

 

1.functions.phpを開く

WordPressのダッシュボードから“外観→テーマの編集”を開く。
右のファイル一覧からテーマの為の関数(functions.php)をクリック。

custom-button2

 

2.コードを記入(コピペでも!)

以下のコードをコピー&ペーストで貼り付ける。

上のコードで蛍光ペンのプルダウンカスタムボタンが追加されます。

カスタマイズする場合は、

上記を変更するだけで自分の好きな、よく使うタグをボタンに設定する事が出来ます。

設定したら“ファイルを更新”をクリックして保存し、投稿画面に新しく追加されているか確認してみましょう。

TinyMCEなどのプラグインを使用している場合は、使用しない項目に入っているかもしれませんので、プラグインの設定から“スタイル”のボックスをツールバーに表示させるようにしておきます。

 

   Style.cssでCSSの設定

次にStyle.cssにタグを入力します。
今回は引き続き例として蛍光ペンのCSS設定を行います。

 

1.Style.cssを開く

functions.phpと同じように、右のファイル一覧からStyle.cssを開きます。
判らない方は、ダッシュボードから“外観→テーマの編集”を開き、右にあるファイル一覧のスタイルシート(Style.css)をクリック。

custom-button3

 

2.コードの記入(例の蛍光ペンはコピペでOK)

例の蛍光ペンの場合はしたのタグをコピー&ペーストでStyle.cssに貼り付けます。
カスタマイズの場合は先ほど記入したfunctions.phpで呼び出すコードを書き込みましょう。

入力したら、“ファイルを更新”をクリックして保存します。

 

以上でオリジナルボタンの追加の完了です。

早速投稿画面で入力し、プレビューで確認してみましょう。
蛍光ペンは下の様な蛍光のラインが引かれていれば完成です!

蛍光 イエローはこんな感じです。
蛍光 ピンクはこんな感じです。
蛍光 ブルーはこんな感じです。
蛍光 グリーンはこんな感じです。
蛍光 オレンジはこんな感じです。
蛍光 パープルはこんな感じです。

いかがでしょうか?
よく使うタグはこのように登録しておくと、とっても便利で使いやすいです!

ぜひぜひ自分のオリジナルボタンも作成してみましょう♪

Facebookで“いいね”
スポンサーリンク

★記事が気に入ったらシェアお願いします★

★フォローはこちら★

onlineshop-banner-moba

コメントをどうぞ

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