WordPressの自動バックグラウンド更新

WordPress

WordPressで複数のウィジェットを表示させるやり方

WordPressのウィジェットってとても便利ですよね。ドラッグ&ドロップで手軽に表示を並べ替えることもできるし管理もしやすいです。そんなウィジェットを複数表示させるためのやり方をご紹介します。

[ads_center]

register_sidebarとdynamic_sidebar

まずはfunctions.phpに複数のウィジェットを対応させます。

if(function_exists('register_sidebar')) {
    register_sidebar( array(
        'name' => 'ウィジェット1',
        'id' => 'sidebar1',
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
    register_sidebar( array(
        'name' => 'ウィジェット2',
        'id' => 'sidebar2',
        'before_widget' => '<div>',
        'after_widget' => '</div>',
        'before_title' => '<h3>',
        'after_title' => '</h3>'
    ));
}

ここで重要なのは以下の2点。

  • name
  • id

nameに指定した名前が、ウィジェットの名前になります。

idは、このあとウィジェットを表示する際にどのウィジェットを出力するかを指定する時に使います。以下、ウィジェットを表示したいテーマファイル内での記述です。

<!-- ウィジェット1 -->
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar1')): ?>
    <p>ウィジェットが設定されていない場合、ここが表示されます。</p>
<?php endif; ?>

<!-- ウィジェット2 -->
<?php if(!function_exists('dynamic_sidebar') || !dynamic_sidebar('sidebar2')): ?>
    <p>ウィジェットが設定されていない場合、ここが表示されます。</p>
<?php endif; ?>

dynamic_sidebarの引数に、先程の表示したいウィジェットのidを指定します。

これで、管理画面のウィジェットのページに行くと、ウィジェット1とウィジェット2という2つのウィジェットが表示されるようになります。

複数のウィジェットを作ることで、例えばサイドバーにはウィジェット1を、フッターにはウィジェット2をといったことも可能になるので、管理を簡単にしたい場合にはとても有効ですね。

さらに追加したい場合には同様にサイドバー3、サイドバー4…と追加していくこともできます。

関連記事

  1. WordPress

    WordPressの管理画面にメモを残せるプラグイン「Quick Notes on the WP D…

    おもしろいプラグインを試してみました。おもしろいというかとても便利だな…

  2. WordPress

    WordPressの公式ロゴマークは公式サイトでダウンロードすることができる

    何気なくWordPress公式サイトを見ていたら、WordPressの…

  3. WordPress

    MAMP(インストール済)でWordPressをローカル環境で動かすまでの簡単な手順

    久しぶりにMAMPを使って新しいWordPressのローカル環境を作っ…

  4. WordPress

    ブログ投稿を更新したら自動でツイートしてくれるWordPressプラグイン「WordTwit」を使っ…

    なんというか、毎回些細なこととはいえブログを更新する度に手動でツイート…

  5. Daily Dish

    WordPress

    写真が映える2カラムのシンプルでスッキリしたWordPressテーマ「Daily Dish」

    Daily DishというWordPressテーマがとてもカッコよかっ…

  6. WordPress

    editor-style.cssを使えばビジュアルエディタを実際の記事と同じようにスタイリングできる…

    あんまりビジュアルエディタを使ってないのであれですが、新規の記事を書い…

最近の記事

  1. ジェットストリームの三色ボールペン(+シャーペン付き)と黒の替芯
  2. ブラジルイパネマ
  3. 梅しば
  4. BM-IBCDH13RD

アーカイブ

PAGE TOP