2008年

WordPress テーマを作成する(5) サイドバーをウィジットに対応させる このエントリーを含むはてなブックマーク

WordPress Add comments

前回作成したサイドバーをウィジットに対応させて、管理画面からサイドバーを変更できるようにしてみました。

sidebar.php の修正

sidebar.php の ulタグ の直後に以下の行を追加
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
また sidebar.php の最後の ul タグの前に以下の行を追加
<?php endif; ?>
つまり ul タグの中を上記の if 文ではさむ感じです。

<div id="sidebar">
<ul>
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar() ) : ?>
// ここにデフォルトのサイドバーの内容を書く
<?php endif; ?>
</ul>
</div>

functions.php の作成

作成しているテーマディレクトリに functions.php を作成して下記のコードを追加する。

<?php
if ( function_exists('register_sidebar') )
    register_sidebar();
?>

これで管理画面で 表示 > ウィジット でアクセスすると下記のような画面になり動的にサイドバーを変更することができます。
dynamic1.png

少しの手間で使い勝手が便利になるので、テーマを作成するときにはウィジットに対応させておいた方がいいでしょう。

参考URL:Widgetizing Themes ? Automattic

関連する投稿

8 Responses to “WordPress テーマを作成する(5) サイドバーをウィジットに対応させる”

  1. WordPress テーマを作成する(5) CSS でデザインを整える | Sun Limited Mt. Says:

    [...] 前回まではまだ縦に長いだけのデザインされていない状態でした。今回は CSS を作成してデザインを整えてブログらしくして行こうと思います。 [...]

  2. トイレのうず Says:

    WordPressのカテゴリーを階層化…

    今まで落としてきたテンプレートをほぼそのまま使っていたのだけれど、カテゴリーの並び方が汚いのが気になっていた。ちゃんと階層化したのに、階層になってない。で調べてみたら、…

  3. ミサキガーデソ » Blog Archive » ウィジェット対応 Says:

    [...] 少しググッて見たらあっさり http://www.syuhari.jp/blog/archives/209 [...]

  4. サイドバーウィジェット | ちょこちょこWORDPRESS Says:

    [...] http://www.syuhari.jp/blog/archives/209 [...]

  5. WordPressをカスタマイズするのにお世話になったページ一覧 | Caramel+DesignBlog Says:

    [...] 「My Category Order」を使う場合はウィジェットとして使ってます。 ・・・のでウィジェットを表示さす方法。 WordPress テーマを作成する(5) サイドバーをウィジットに対応させる | … [...]

  6. Daily Digest for 20090911 – lifestream@add Says:

    [...] WordPress テーマを作成する(5) サイドバーをウィジットに対応させる | …. This entry was written by admin, posted on 9月 11, 2009 at 11:10 am, filed under [...]

  7. くぅちゃんのWaiWai倶楽部 » @tashidesu MEMO http://www.s… Says:

    [...] MEMO http://www.syuhari.jp/blog/archives/209 [...]

  8. サイドバーをウィジェット対応にする方法 | Wordpressカスタマイズサービス Says:

    [...] 新しく試したアクセスカウンタープラグインがウィジェット対応でしたので、対応方法を探してみたところ、「Sun Limited Mt.」さんで分かりやすく説明されていましたのでご紹介します。 [...]

Leave a Reply

Additional comments powered by BackType

WP Theme & Icons by N.Design Studio
Entries RSS Comments RSS ログイン