Cntlog > WordPress > 今更気がついたWordPressのウィジェットの便利さについて

今更気がついたWordPressのウィジェットの便利さについて

先日公開したサイトで「俺の嫁が可愛い」というサイトを作ったのですが、その時普段のテーマと作り方と違う作り方をしました。

あまりコードを書かずに、plugin中心で機能を追加したので、Widgetをフル活用しました。

それで、もしかしたらこれがWordPressの適切な使い方なのかなと改めて考え直しました。

WordPressの便利なWidgetの使い方

普段がWidgetは主にサイドバーとかに入れてただけしたが、今回は、ナビゲーションの下、footer部分、記事ページの下、記事タイトルの下色々なところにWidgetを入れました。

なぜWidgetが便利か

「おれの嫁が可愛い」には姉妹サイトに「うちの旦那が素敵」というものがあります。

このサイトでは「俺の嫁が可愛い」のテーマを親テーマにして子テーマで作っています。
また、両方のサイトは勢いで作っているので、今後改修が頻繁に起こることが予想されていました。というかめっちゃ改修しながら運用してます。

Widgetで作るとテーマを触らずに簡単に変更が出来るので、修正するときにテーマをいじって本番環境に当てて…なんてことをしなくても直接ブラウザで本番環境を触って気軽に変更ができます。

私はどちらかといえば開発者の立場でWordPressを触ることが多かったので、Widgetの気軽さを改めて気が付きました。

Widgetをもっと便利にするために

Widgetで登録できるものを自分でつくると大変ですが、実はpluginを追加することでWidgetで追加できるアイテムは簡単に増やせます。

何か機能を必要とするものをWidgetで管理しようとするとPHPを書かないと行けないのですが、pluginで簡単に追加できるのは良いですね。

「俺の嫁が可愛い」では下記のpluginでWidgetで管理しています。

  • Ads by datafeedr.com
    • 登録した広告/バナーをランダムで表示
    • カスタム投稿タイプみたいな使い方してます。
    • ABテストにも使えそう
  • Advanced Random Posts Widget
    • ランダムで指定の投稿を表示
  • Related Posts

    • 関連記事を指定数で表示します
    • 軽いのが特徴

    他にもテキストWidgetを使うとHTMLやショートコードを挿入できるので、テーマをいじらずにコードを挿入することができます。

    ただテキストWidgetは自動でpタグが入ってしますのでちょっと困るときがありますが、WordPress4.8.1で「HTML Code Widget」というエディタなしのウィジェットが追加されるようなので、こちらで解消されるのかなと期待しています。

Widgetの追加の仕方

これだけ勧めておいてうWidgetエリアの追加を紹介しないのは駄目だと思うので
紹介しておきます。

Widgetを追加するには下記のコードのように足せば簡単に増やせます。

functions.phpに追加してください。

register_sidebars(
array(
'name' => '新ウィジェット',
'id' => 'newwidget',
'description' => '追加したウィジットエリアです。',
'before_widget' => '<div>',
'after_widget' => '</div>',
'before_title' => '<h2 class="widgettitle">',
'after_title' => '</h2>'
)
);

表示させたいエリアに下記コードを追加。
例)記事下に追加したかったら single.phpとかに記入します。
<?php dynamic_sidebar( 'newWidget' ); ?>

最後に

WordPressはブログのためのCMSということもあり、管理画面で色々できます。

ただ複雑な事は直接PHPで書いたほうが早い事も多く、Widgetの便利さに目を背けているのに気が付きました。

Widgetで色々できるようなつくりにしておいてテーマを作るとクライアントさんも更新しやすくなってよいですね(ゝω・)

関連記事

WP Social Bookmarking Lightをもっと便利に使う方法... WP Social Bookmarking LightとはWordPressで使用する便利なプラグインです。 簡単にソーシャルボタンが設置できるのでこのブログや他のサイトでも利用させてもらってます。 Twitter のつぶやくボタン、Facebook のいいねボタン、はてブのブックマーク...
WordPressのRESTAPIを使って簡単にスマホアプリを作る方法... Webデザイナーがアプリを作るというと敷居が高いと思われるかもしれません。 実際私も「アプリなんて無理」と少し前まで思っていましたが、先日iOS/Andoroidの両方でアプリを作る事ができました。 ちなみに公開したアプリはほとんどコードを触っていません。 WordPressを少し知ってる...
WordPressのテーマの作るのに簡単・軽量・快適な開発環境をくれたWocker... これまでWordPressの開発環境はVCCWで作っていましたがちょくちょく名前の聞くWockerを今年になってから試してみたら思いの外良くて開発環境を完全に移行しました。 ※別にVCCWが悪いとか言うわけではなくて、私の目的(テーマ開発)にとっては使いやすかっただけです。 Wocker...
WP Social Bookmarking Lightのいいねボタンのレイアウト崩れの直し方... このブログのソーシャルボタンは「WP Social Bookmarking Light」を使っています。 気がついたら「いいねボタン」だけ数px低い位置にレイアウトされていたり、段落落ちして広告に隠れてしまったりしていましたのでその修正方法をメモ。 CSSに下記を追加すれば他のソーシ...
WordPressサイト用のgulp/gitで開発環境を作ってみた... 先日、WordPress用のこのブログ用にテーマを作ったのですがその時、開発環境も更新してみました。 これまでSCSSくらいしか使っていなかったのですが、最近はgulpも少しずつ使えるようになってきたのでそのあたりの更新です。 githubには上げていて、リポジトリはこちらです。 ...
このブログのデータが全部消えました(復旧済)... ちょっとした操作ミスでこのブログの全データを削除してしまいました。 気がついた時は愕然としたのですが、ちゃんとバックアップを取ってましたからすぐ復旧できて、トラブルにはならなかったのですが、予定外の事故だったのでなかなか貴重な体験をできました。 サイトのデータが削除されたと気がついた...