処理速度計測中:0.012 sec  ページキャッシュは使用しておりません。
水池 俊介
2013年05月20日 水池 俊介

WordPressプラグインの紹介

簡単に導入できて、WordPressでつくられたWebサイトに便利な機能をもたらす数々のプラグイン。
今回はその中から3つを取り上げて紹介いたします。

1.「AddQuicktag」

「AddQuicktag」はhtmlタグやテキストを登録して投稿や固定ページの編集画面でWYSIWYGの一つとして使用できるようにするプラグインです。

使用方法

プラグインをダウンロードして有効化したら、ダッシュボードの「設定」に「AddQuicktag」が表示されるので選択します。

addquick1

ボタン名、開始タグ、終了タグを入力します(他項目は任意)。
右側のチェック項目では、利用する場所(投稿、固定ページなど)を選びます。
チェックした場所のエディタにのみ表示されます。

以上の設定を行うと、編集画面のWYSIWYGのボタンに先ほど設定した名前でボタンが表示されます。

addquick2

(ビジュアルエディタ上の表示)

addquick3

(テキストエディタ上の表示)

ほかのWYSIWYGボタンと同様、ボタンクリックでタグを入力、またタグにクラスを振るなどして特定のスタイルを適用することが可能です。

addquick4

例では以下のCSSを記述して、任意のテキストに矢印の装飾付きのリンクを設定できるようにしています。

a.link_style1 {
    text-decoration: none;
    background: url(../images/arrow.png) no-repeat;
    padding-left: 15px;
}

a.link_style1:hover {
    text-decoration: underline;
}

このプラグインの利点

・お客さまがある程度ビジュアル面を意識したページを作成することができる。

・あらかじめ決められた配置や装飾を用いていただくことで、デザインに統一感をもたせサイトの質を保つことができる。

2.「Fancy Box for WordPress」

記事内の画像をjQueryでFancyBox化し拡大表示することができるプラグインです。

fancybox_image

使用方法

プラグインをインストールして有効化します。

有効化した時点で、リンク先を「メディアファイル」に設定したすべての画像に対して有効になります。

設定画面ではFancy Boxのアニメーションの設定や表示設定が行えます。

手軽に画像拡大効果を導入できる便利なプラグインですが、すべての画像に対して有効になっては困る場合や特定のページの記事内画像のみに適用したい場合などもあるかと思います。

その場合はギャラリー設定にあるjQueryの記述を変更・追加することで、Fancyboxの適用を制限することができます。

<ギャラリー設定>

Fancybox4

たとえばデフォルトの記述、
jQuery(thumbnails).addClass(“fancybox”).attr(“rel”,”fancybox”).getTitle();

jQuery(“.postid-4 a:has(img)[href$=’.jpg’]”).addClass(“fancybox”).attr(“rel”,”fancybox”).getTitle();
に変えるなどして適用範囲を設定することができます。

このプラグインの利点

・手軽にlightbox風ギャラリーを導入できる。

・適用を制限・指定することが出来る。

3.「Table Press」

「Table Press」は管理画面上でテーブルを作成し、管理もできるプラグインです。

使用方法

プラグインをインストールして有効化します。
左メニューに「TablePress」と表示されるので、「Add New Table」から新規作成します。

tablepress1

「Table Name」で名前を設定します。

「Number of Rows」でテーブルの行数を設定、

「Number of Columns」でテーブルの列数を設定します。

「Add Table」をクリックします。

テーブルの編集画面になるので、

tablepress2

「Table Content」で先ほどの指定通りの表が表示されているので、内容を入力していきます。

「Table Manipulation」ではリンクの挿入(Insert Link)やセルの結合(Combine cells)を行うことが出来ます。

「Table Options」ではテーブルヘッダーやテーブルフッターの定義や、行にストライプ状の色分けを施したりできます。また、項目「Extra CSS Classes」では、作成されるtableタグに任意のクラスを追加することもできます。

「Features of DataTable JavaScript library」ではさらにjavascriptを使ったソート機能などが使えるようです(筆者未使用)。

「Save Changes」ボタンをクリックして変更を確定します。

TablePress2_5

編集画面のビジュアルエディタWYSIWYG部にテーブルのアイコンが表示されているので、クリックし、「Insert Shortcode」を選択するとテーブルのショートコードが挿入されます(ショートコードを直に記述してもいいです)。

これで、作成したテーブルが表示されました。

tablepress3

テーブルの内容は管理画面「TablePress」から随時書き換えることが可能です。

また、デフォルトの装飾を変更したい場合は、
例)<table id=”tablepress-1″ class=”tablepress tablepress-id-1″>
のようにテーブルにクラスが付けられているので、その部分のCSSを指定することで可能となります。

tablepress4

また、作成した例では全てのセルが<td>となってしまっていたのですが、たとえば各行の一列目を<th>としたい場合は、ショートコードの属性設定で、

first_column_th=”1″

とすることでthとしてマークアップされます。

例)[table id=1/]というショートコードが吐き出されたら

[table id=1 first_column_th=”1″/]

と追加する。

このプラグインの利点

・管理画面上でテーブルの作成が行えて、挿入も編集画面から容易に行える。

・テーブルの内容の書き換えが管理画面から行える。

良くない点

・設定画面が英語なので少し分かりづらい。

今回の紹介は以上となります。

プラグインを用いることで、少ない手数で効率的にCMSの機能を強化していくことが可能です。
個々のプラグインの安全性や、プラグイン同士での競合には気を付けつつ、良いプラグインは積極的に活用していきたいですね。

Leave a Reply

Your email address will not be published. Required fields are marked *

トラックバックURL

https://www.prime-strategy.co.jp/wp/2661/trackback/