スポンサードリンク


WordPressにオリジナルタグや定型文を自作!エディタ画面に独自ボタンを追加するおすすめプラグイン!

    WordPress オリジナルタグ

    WordPressのビジュアルエディタのツールアイコンに、
    オリジナルのタグや機能を簡単に挿入できるプラグインで「Visual Editor Custom Buttons」というものがあります。

    標準機能では物足りない、もっと便利にエディタ画面を拡張したいと思っている人にはおすすめです。

    MCE Advanced」や「AddQuicktag」と併用すればかなり高機能なエディタ画面に変化しますよ!

    今回紹介する「Visual Editor Custom Buttons」はワンクリックで動作するオリジナルタグや定型文、ショートコードなどを記事に貼り付けられるのが特徴です。(文字囲み動作も対応)

    特にボタンのアイコンデザインをカスタマイズできるので素晴らしいプラグインです。

    使い方などをまとめてみました。

     

    ビジュアルエディタの使いにくいところ

    HTMLの知識がない人でもHTMLコードを意識しなくても記事が作成できる機能でWordPressには「ビジュアルエディタ」があります。

    テーマのデザインに沿って文字や装飾を施しながら執筆できるエディタとしてWordPress初心者には優しい機能のひとつです。

    しかしWordPressの初期設定のままでは装飾ボタンの機能が少なく、
    本当に基本的なタグしか入っていないので、テーマを大きくカスタマイズしたり、プラグインを追加しない限り、HTMLタグをすべて直に打たないといけないという手間が発生します。

     

     よくある例

    例えば文字に黄色のマーカーを付けたい時、
    WordPressインストール初期状態には装飾する機能はないためHTMLを独自に書かなければならなくなります。

    ※上記のHTMLはあくまで例です。

    毎回「テキストエディタ」(HTMLモード)に変更し、上記のようなHTMLを記述しなくてはいけません。

    非常に時間がかかりますし、HTMLを知らない初心者には難しいことでしょう・・・。

     

    プラグインを利用すれば記述する手間を省ける

    私はこういう手間が嫌なので「MCE Advanced」という便利な有名プラグインを導入しています。
    このプラグインは記事を書くのに最低限欲しいタグやアイテムを利用できます。

    但し、標準機能を拡張する上では便利なんですが、
    オリジナルのHTMLや定型文、デザイン装飾などといった上記の「よくある例」のコードよりも高度なタグやソースを使いたくても使えないです。

    あと一歩、かゆいところに手が届きません。

    今日紹介するプラグイン「Visual Editor Custom Buttons」なら、
    ビジュアルエディタにオリジナルのタグ挿入ボタンを設置できるので、サクサクと好きなアイテムを自作できてしまいます。

     

    操作も楽で一度作っておけば、ワンクリックで挿入できる優れものです。

    このプラグインさえ導入しておけば、さらに記事作成効率を上げられることが期待できます。

     

    ボタンアイコンを自由に設定できる点はおすすめ

    それでは「Visual Editor Custom Buttons」の使い方についてです。

    このプラグインはエディタ画面内にオリジナルのボタンアイコンを選択し、
    ボタンをクリックすると設定したHTMLタグやソースを記事内に貼り付けるといったものです。

    プラグインにはあらかじめボタンアイコンがいくつか用意されているので、
    それを利用するのもありですが、「オリジナルのボタンアイコン」も設定が可能です。

    オリジナルのボタンアイコンを作りたい方はそのまま続きを、
    面倒な方は手順の「オリジナルのアイコンボタンの準備」を飛ばして先に進んで下さい。

     

    オリジナルのボタンアイコンの準備

    アイコンボタンを作成してみよう

    手順としてはアイコンボタンを準備し、「/wp-content/uploads/vecb/」のディレクトリ内にアップロードしてから、WordPressの管理画面でオリジナルのタグや定型文を入力して、アップロードしたアイコンボタンを指定するだけです。

    Visual Editor Custom Buttons」で利用できるボタン画像はpng形式でサイズは40 x 40です。

    PhotoShopやペイントツールなど持っていれば
    自作してしまうのも良しですが、無料素材を借りて簡単に作るならIcojamがおすすめです。

    Icojam アイコン

    Icojamで配布されているアイコンは種類が豊富なので、
    カスタマイズによりオリジナルのボタンアイコンが簡単に作れます、

    ちなみにダウンロードできる画像はすべてモノクロなので着色して使えばデザイン性が上がります。

     

    プラグインのインストール

    WordPressの管理画面から「Visual Editor Custom Buttons」を検索し、インストールします。

    直接zipファイルをダウンロードされる方はこちらからダウンロードしましょう。

    プラグインをWordPressに追加したら有効化して下さい。

     

    Visual Editor Custom Buttonsの使い方

     

    スポンサードリンク

     

    自作のボタン機能を追加する

    「Visual Editor Custom Buttons」の設定は、管理画面のメニュー「Visual Editor Custom Buttons」のAdd newから行います。

    WordPress 自作ショートコード

    タイトルには新規追加したいボタンの名称を入力します。
    入力したタイトルがそのままボタンのタグ名になりますので命名には気を付けると良いと思います。

    タイトルが決まったら、次にボタン機能で実装されるHTMLを記述します。

    記述する項目は「Button Content」にあります。

     

     囲みタグか単一タグを決めよう

    このプラグインではショートコードの書式と似たようになっており、
    「囲みタグ」もしくは「単一タグ」のいずれかを選ぶことができます。

     

    以下はあくまでイメージです。実際にはショートコードではありません。

    囲みタグとは?
    [sample-short]囲む文字列など[/sample-short]

    文字列やHTMLに対して前後に記述したボタン機能を実装するタグです。

    囲まれた箇所の前後に対してHTMLを実装することができます。

     文字のスタイル、色、大きさなどを変更する場合に最適

     

    単一タグとは?
    [sample-short /]

    記述したボタン機能のみを実装するタグです。

     画像や動画、フレームなどの配置に最適

     

     囲みタグか単一タグを決めよう

    囲みタグならBeforeとAfterの入力欄にHTMLを実装します。

    単一タグならContentの入力欄にHTMLを実装します。

    記述したHTMLタグがそのままボタン機能として利用できるようになります。

     

    追加したボタンを表示させるエディタの選択

    WordPress 自作ショートコード

    次に「Display In Editor」の項目ですが、
    こちらはボタンアイテムをどのエディタに表示するかという選択になります。

    基本的にはビジュアルエディタとテキストエディタ両方ともにあったほうが便利だと思いますので、「Visual Editor」「Text Editor」両方ともにチェック入力をしておきます。

     

    独自のボタンアイコンを追加する

    ビジュアルエディタのチェックボックスにチェックを入れると、
    その下に新たな入力項目が出現します。

    WordPress オリジナルアイコン

    Button Icon」という項目が出現しプルダウンリストの中にビジュアルエディタで使用できるボタンアイコンが一覧表示されます。

    オリジナルのアイコンボタンをアップロードした方は、
    Visual Editor Custom Buttons既存のアイコンに加えて、オリジナルのアイコンが出てくると思います。

    オリジナルのボタンアイコンを用意した方は
    作成した画像を「/wp-content/uploads/vecb/」のディレクトリ内にアップロードしておいて下さい。

    お好きなものを選択するとよいと思います。

     

    ボタン機能の設定は以上です。

    最後に画面右側の「公開」ボタンをクリックしボタンを登録します。

     

    ビジュアルエディタで動作確認

    実際に自作したショートコードをエディタ画面で確認してみると下記の通り、表示されるようになります。

    WordPress ビジュアルエディタ ボタン追加

    ビジュアルエディタの方では、ちゃんと選んだボタンアイコンが表示されます。

    実際にクリックしてみますと、
    ボタン追加時に記述したHTMLがエディタ内に反映されます。

    処理の裏側ではショートコードのような動作をしています。

    もちろんショートコードをボタン機能に記述することも可能です。

     

     併用して使うとおすすめのプラグイン

     MCE Advanced

    WordPressを導入したら、まず入れるべき定番プラグイン

    ビジュアルエディタのツールメニュー内のアイコンの追加・配置をカスタマイズできます。

    あらかじめ用意されている機能の中で、
    HTMLではすごく初歩的なもののみしか一覧にありませんが自由度が高く優れたプラグインです。

     
     AddQuicktag

    Visual Editor Custom Buttonsと同種のプラグインです。

    同じようにボタン機能を自作できますが、非常にシンプルに作れます。どちらを選ぶかは性格が出るかもしれません。

     
     Shortcoder

    ボタン機能を自作する点では似ていますが、
    こちらはショートコードを自作するといったものです。

    もちろんエディタ画面に表示させることができます。
    エディタ画面に限らず、phpファイルやウィジェットなどに直接ショートコードを載せたい際には非常に効果を発揮します。

      The following two tabs change content below.
      よっき プロフィール画像
      パソコンが大好きな青年。職業はプログラマ/SE。 フリーランスとしてウェブサイトの構築・保守の業務に従事。専門学校とパソコンスクールで講師も担当。幼少期からパソコンが大好きで、趣味がそのまま仕事に転じた。自作PCの魅力に惹かれたのは学生時代の頃。自作PC専門ブログで、お得な情報を紹介しています。

      スポンサードリンク


      コメントを残す




      CAPTCHA


      このページの先頭へ