CREATOR BLOG

WordPressのウィジェットの使い方あれこれ

Wordpress Widget

WordPressのウィジェットはサイドバーに管理画面でメニューやリストがドラッグ&ドロップで追加出来る便利な機能です。

また、最近では様々なプラグインが開発されていて、ウィジェットに様々な機能を追加してさらに便利に使う事が出来るようになっています。

ウィジェットの有効化

ウィジェットを使えるように有効化します。
テーマファイル内のfunctions.phpに以下のコードを追加します。

<?php

if(function_existes('register_sidebar')) {

$arg = array(
'name' => 'ウィジェット エリア',
'description' => 'サイドバーに表示させるにはここにウィジェットを追加してください'
);

register_sidebar($arg);

}

?>

register_sidebar() にはnameやdescription以外にもパラメーターがあります。

詳しくは公式コーデックの関数リファレンスをご覧下さい。

テーマファイル(sidebar.phpなど)にコードを設置

<?php

dynamic_sidebar('ウィジェット エリア');

?>

既存テンプレートではじめから有効化されているものはこの作業は必要ありません。

ウィジェットの基本的な使い方

functions.phpに上記の設定を記述すると管理画面の左メニュー「外観」内に「ウィジェット」が表示されます。
こちらをクリックするとウィジェットの設定画面が表示されます。

ウィジェット01

ウィジェットの設定画面にははじめから何点か使用出来るウィジェットが左側に表示されてあります。
こちらを右の「ウィジェットエリア」にドラッグ&ドロップして保存ボタンをクリックするだけです。
例えばカレンダーを表示したい場合はカレンダーを右の「ウィジェットエリア」にドラッグ&ドロップするだけでサイドバーにカレンダーが表示されます。

ウィジェット03

また「テキスト」ウィジェットは任意のテキストやHTMLタグなどを記述出来るので、サイドバーに様々なコンテンツを表示させることも出来ます。
また複数のウィジェットのエリアを作成したり、オリジナルなウィジェットを作ることも可能です。
方法はこちらを参考にするといいでしょう。

機能を強化する便利なプラグイン

コードをガシガシ書いて自作オリジナルのウィジェットを作るのも良いのですが、プラグインを使うと簡単に様々な機能を取り込む事が出来ます。
ここでは、クライアントワークで使えそうなプラグインを紹介していきます。

Widget Logic

https://wordpress.org/plugins/widget-logic/
Widget LogicはWordpressの条件分岐タグを指定して表示する/しないを設定出来るプラグインです。

インストールするとウィジェットウィンドウに「widget Logic」という項目が追加されます。

Widget Logic 1

ここにWordpressの条件分岐タグを記述するだけで、このウィジェットを表示するコンテンツのタイプを選べます。

例えば、ホームにだけ表示したい場合は「is_home()」と記述します。
もしホーム以外の場合は「!is_home()」とするとホーム以外で表示されます。

phpで「!」は〜以外でという意味になります。

WordPressには便利な条件分岐がたくさんあります。
その他の条件分岐は本家コーデックの「条件分岐タグ」ページが参考になります。

Custom Post Widget

https://wordpress.org/plugins/custom-post-widget/

Custom Post Widgetは独自のカスタムポストタイプ(Content Blocks)を作成し、その内容をウィジェットエリアに表示させる事が出来るプラグインです。
通常の投稿と同じでヴィジュアルエディタが使えるので、標準のテキストウィジェットよりも簡単にテキストの調整や画像を組み込んだりすることができます。

インストールしてプラグインを有効にするとContent Blocksという項目が左メニューに表示されます。

Custom Post Widget 01

「Add Content Block」をクリックして、新規ページ作成と同じ編集画面が表示されます。
タイトルや本文などを記述していきます。またアイキャッチ画像を使う場合はアイキャッチ画像も設定します。

Custom Post Widget

ウィジェットの編集画面に移動して、「Content Block」をウィジェットのエリアにドラッグ&ドロップします。

Custom Post Widget 03

各チェックボックスの説明

Show Post Title
タイトルを表示する

Show featured Image
アイキャッチ画像を表示する

Donot apply content filters
Wordpressの自動フォーマット(段落や改行)なしで表示する

PHP Code Widget

https://wordpress.org/plugins/php-code-widget/

PHPコードをウィジェット内で使えるようにするプラグインです。
通常のテキストウィジェットではPHPコードを記述しても、コードは無効化されて無視されます。
ウィジェット内でWordpressのループや条件分岐を使って表示内容を変えたい場合がある時にこのプラグインは便利です。

プラグインを有効化するとウィジェット設定ページで「PHP code」というウィジェットが追加されます。

PHP Code ウィジェット1

こちらをウィジェットエリアにドラッグ&ドロップします。
赤線の箇所にPHPコードを記述していきます。
ここにはWordpressのループや条件分岐タグなども使えるので、様々な事が出来ます。

PHP Code 02

例えば、カスタムポストタイプのタイトル一覧なども赤枠に以下のように記述すると表示してくれます。

<?php
$arg = array (
'post_type' => 'hair-catalog'
);
$qry = new WP_Query($arg);

if($qry->have_posts()): while($qry->have_posts()): $qry->the_post();
?>
<ul>
<li><?php the_title(); ?></li>
</ul>
<?php
endwhile;
endif;
?>

Image Widget

https://wordpress.org/plugins/image-widget/

画像バナーなどをウィジェットで簡単にアップロード出来るプラグイン。
とてもシンプルな操作性で、画像のアップロードとサイズの設定、リンク、キャプションなどが入力出来るようになっています。

Image Widget

バナー画像などに使うと更新が楽になり便利ではないでしょうか。

その他にも便利なプラグインが多数あります。
おいおいご紹介していきます。

 

    ▲ PAGE TOP