IT EVANGELIST.NET ロゴ

クライアントの課題をITで解決する

AddQuicktagの使い方 デザイン性の高いクライアントワークに必須なWordPress Plugin

公開日: 2015/02/16
カテゴリー: WordPress

WordPressが「CMSとしては管理画面が使いにくい。」と言われる事の原因にビジュアルモードの機能が中途半端で使えない、というのがあります。

しかし、テキストモードの場合には、HTMLの知識がないクライアントには使い難い、というジレンマがあると思います。

これに対し、あまりHTML知識のないクライアントであっても、「AddQuicktag」というPluginを導入する事で、簡単に複雑なレイアウトパターンを組むことができるようになります。

弊社構築事例として上げているモードメディア・ジャパン株式会社が運営する、世界最大級の女性向けオンライン・メディア、米国Glam.com(www.glam.com)の日本版「Glam.jp

こちらでも実際に、誰もが簡単にPCとスマートフォンに対応した複雑なレイアウトを入力出来るようにするため、「AddQuicktag」を導入しています。

今回はこの「AddQuicktag」について解説します。

「AddQuicktag」とは

AddQuicktag」とは、管理画面の投稿画面に自分が必要とするボタンを自由に追加することができるPluginです。

WP 01

上の新規投稿画面の、赤色で囲った部分に自分で作ったボタンを追加することができます。

「AddQuicktag」の導入

AddQuicktag」の導入には、まず管理画面の左側メニュー「プラグイン > 新規追加」を押して、検索窓に「AddQuicktag」を入れて検索します。

AddQuicktag 01

表示された「AddQuicktag」の「いますぐインストール」をクリックして、ポップアップウィンドウも「OK」で進めます。

すると、「AddQuicktag」のインストールが進みますので完了するまで待ちます。

AddQuicktag 02

これでインストールは終了ですので、「プラグインを有効化」を押して有効化します。

「AddQuicktag」の設定

管理画面の左側メニュー「設定 > AddQuicktag」を押して、設定画面を開きます。

すると、上部に自分で自由にボタンを作成できるボックスが現れます。

AddQuicktag 03

それぞれのボックスには、以下の内容を入れて設定を行います。

ボタン名:自分が使う時にわかりやすいボタンの名前を付けてください。
ラベル名:ボタンの説明(入力しなくてもOKです。)
開始タグ:自分がよく使うボタンの開始タグや定型文
終了タグ:開始タグを閉じるタグ
アクセスキー:IEにしか対応していないみたいですが、「ALT」+「設定したアクセスキー」でタグを呼び出すことができます。
順番:タグを並べて表示する順番を決められます。

中身を入れるとこんな感じになります。

AddQuicktag 04

一番右側には、このボタンをどの入力画面で使うかがありますので、今回は投稿画面の「post」と固定ページの「page」にだけ使うということで、その二つにチェック。

「変更を保存」ボタンを押して保存後、投稿画面に行くとこのようにボタンが追加されています。

AddQuicktag 05

1回ボタンを押すとh2タグが入り、ボタンの「中見出し」の前に「/」が入ります。

AddQuicktag 06

もう一度ボタンを押すと、今度はh2の閉じタグが入り、ボタンは正常に戻ります。

AddQuicktag 07

これだけだと、普通にタグを追加するだけですが、「AddQuicktag」は以下のような使い方もできます。

デザインテンプレートの登録

この画面では、「デザイン1」「デザイン2」というボタンが追加されており、この「デザイン1」を押した状態を表しています。

AddQuicktag 08

つまり、ボタンで一気にデザインレイアウトのコードを吐き出しています。

あらかじめ、CSSを作っておき、この「画像の大」というところに画像を入れて、テキストを修正するとこのようなデザインが簡単に作れるようになります。

AddQuicktag sample 01

「デザイン2」の場合は、こんな感じです。

AddQuicktag sample 02

もちろん、CSSでの表示ですのでスマートフォンはスマートフォン用のCSSを用意することで、同一投稿でもPCとスマートフォンで別々のデザインを吐き出すことが可能です。

このように、ボタンを「タグ入力」として使うのではなく、デザインレイアウトパターンを登録して使うことで、デザイナーが設計したデザインをクライアントが簡単に使って運用をする事ができるようになります。

エキスポート・インポート機能

さらに、「AddQuicktag」は作ったボタンをエキスポート、インポートすることができます。

AddQuicktag 09

この機能により、よく使うタグを簡単に取り込む事もできます。

AddQuicktag 10

また、逆に「AddQuicktag」は、Wordpressの標準で表示されているボタンを、非表示にする事も出来ます。

AddQuicktag」の管理画面に「Remove Core Quicktag buttons」という項目があります。

AddQuicktag 11

ここに表示されているボタンから、非表示にしたいボタンのチェックを外して保存すると投稿画面などからボタンを消すことができます。

デザイン性は高く、運用負荷は低く

アメリカでは、Concrete 5にように自由度の高いCMSの人気が高まっているようですが、日本においてはなかなか難しいものがあると私は考えています。

これは、デザインの自由度が高くなるということは、レイアウトやデザインのセンスが求められるため、情報発信以外のリテラシーまで必要となってしまい、対応できる人に求める能力のハードルが上がってしまいます。

これに対し、日本のクライアントは、デザインやレイアウトについては、外注先に任せたいという所が多いと考えています。

また実運用についても、運用担当者のリテラシーが人によってかなりレベルが違うため、出来るだけ簡単に運用できる方が望ましいのですが、デザイン性については下げたくない、という要望は大手クライアント程強いものです。

WordPressは、その点において初期設定のまま導入してもある程度は要望を満たすのですが、デザイン性を上げる際に不満が残ってしまっていました。

これに対し、「AddQuicktag」を使うことで「デザイン性は高く、運用負荷は低く」という二つのニーズに対応できるようになります。

これは、Webサイト公開後の運用においても、複雑なデザインレイアウトを実現する事が期待される、クライアントワークにおいては大変有効な方法ですし、自分で使う際にもよく使うタグやレイアウトを入れておけるのは大変便利です。

ぜひ、皆さんも一度「AddQuicktag」を使ってみてはいかがでしょうか?


弊社では、長年、主にWeシステム開発を必要とするWebコンサルティングに携わって来ましたが、RFPの作成、プロジェクトマネジメント、システム設計及び構築、運用といった段階から「ゴール」を目指す、という事も行なっております。

まずは、現状の問題点を洗い出す「監査」や「Web解析」も行なっておりますので、Webサイト構築、Webサイトリニューアル、Webシステム構築・リニューアルをご検討の場合には、是非ご相談下さい。

タグ: , ,
Nexusシリーズ まとめ バナー データ通信SIM まとめ バナー 二見・鳥羽・伊勢神宮 まとめ バナー

検索

ウチムラヒロシ アイコン 運営者:ウチムラ ヒロシ

神戸出身。 コラムを書いたり、コンサルティングしたり、企画書を書いたり、コードを書いたり、サーバ組んだりしてます。

関連サイト

喰意地 kuiiji