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

関連記事

第27回WordBench大阪でGitについて話してきた... ご縁あってWordBench大阪で登壇してきました。 第27回WordBench大阪 話した内容はGitについてです。 去年あたりからGitを使い始めていました。 そんな拙い私の経験が生かせて嬉しいです。 資料を作ってみて気づいたこと 色々な方から「人前で話すと勉強にな...
WockerでWordPressの本番環境をローカルに持ってくる方法... Wockerには便利なコマンドがいくつかあって、その中にsqlを取り込んでくれるものがあります。 そういった記事を見つけたのですがバージョンが古いようでしたので自分用に書き直しました。 参考サイト Wocker を使って公開されているサイトをローカルにコピ...
WordPressのテーマの作るのに簡単・軽量・快適な開発環境をくれたWocker... これまでWordPressの開発環境はVCCWで作っていましたがちょくちょく名前の聞くWockerを今年になってから試してみたら思いの外良くて開発環境を完全に移行しました。 ※別にVCCWが悪いとか言うわけではなくて、私の目的(テーマ開発)にとっては使いやすかっただけです。 Wocker...
WordPressが私に教えてくれたこと 先日行われたWordCampKansai2015でちょこっとLTしてきました。 LTスライド WordPressとコミュニティと私 前日にLTの話をいただいたのでこのスライドは一晩で書きました。 思い出に浸りながら書いていたのですが、WordPressは私に色々な影響を与えてくれたことを思...
無料で使えるWordPressのカスタマイズしやすいBootStrapベースのスターターテーマ... みなさんはWordPressの案件をするときはどんな開発フローをされてますか? 1から作るひともいれば、何かフレームワーク的なものを入れて作る人、スターターテーマを使って作る人、子テーマ前提で作る人など様々な進め方がありますね。 私は去年までは「Underscores」を使って開発していまし...
WP Social Bookmarking Lightのいいねボタンのレイアウト崩れの直し方... このブログのソーシャルボタンは「WP Social Bookmarking Light」を使っています。 気がついたら「いいねボタン」だけ数px低い位置にレイアウトされていたり、段落落ちして広告に隠れてしまったりしていましたのでその修正方法をメモ。 CSSに下記を追加すれば他のソーシ...