Webの記録

WordPressでオリジナルテーマ作りにチャレンジ5【sidebar.php編】

投稿日:2011年11月7日 更新日:

この記事は約 4 分で読めます。

WordPressのオリジナルテーマ作りにチャレンジしています。

今回は、「sidebar.php」の部分を作りたいと思います。

私が作りたいオリジナルテーマの「sidebar.php」で表示したいのは「ウィジェット」やプラグインを使ったものなので、「functions.php」にも記述します。

今回の分までがうまく出来たら、とりあえず一通りのものが表示される状態になります。ファイトで完成させたいところです♪

※それぞれのページの細かい設定関係は、次回以降・・・別のphpファイルを作っていく事にします。

オリジナルテーマの制作の流れ。

  1. html+cssで作ったサイトをWordpressへアップする
  2. html+cssをWordpressへアップしたものをパーツテンプレートへ切り分ける
  3. header・footerを作成
  4. index.phpで各ページのベースを作成
  5. sidebar.phpでサイドバーを作成 ←今回はココ。
  6. single.phpで記事の個別ページを作成
  7. page.phpで固定ページを作成
  8. トップページを作ってみる

 

「functions.php」にウィジェット機能を追加する

以下の1行を記述すると機能追加になります。

register_sidebar();

しかし、htmlのコードの中にウィジェットパーツを表示したいので、もう少し頑張って以下のように書きなおします。(書きなおす内容は人によって違うと思います。)
私の場合は、ウィジェットパーツはliタグの中にあって、ウィジェットパーツのタイトル部分がh3になるというようにしています。id名は「sidebar.php」の中でも同じものを使います。

// サイドバーのウィジェット
register_sidebar( array(
	'name' => __( 'Side Widget' ),
	'id' => 'side-widget',
	'before_widget' => '<div class="widget-container">',
	'after_widget' => '</div>',
	'before_title' => '<h3>',
	'after_title' => '</h3>',
) );

 

「sidebar.php」に記述する

「sidebar.php」のhtmlでウィジェットパーツが表示される部分に以下の1行を加えます。

※私の場合はliタグの中にウィジェットパーツが表示されるので、ulの下に加えます。(人によってhtml部分は違うと思うので)

<?php dynamic_sidebar( 'side-widget'); ?>

 

ウィジェットエリアの登録。

管理画面に戻って、「外観」→「ウィジェット」を開きます。

ウィジェットエリアの登録する画面

画面の右側に、「functions.php」でつけたnameの値と同じサイドバーエリアが出来ているので、ココに左から登録したいパーツを移動させて保存します。

 

表示がちょっとずれている場合は、スタイルシートで調整します。

 

ここまでで大体のページがちゃんと表示されました♪
次回以降は、またテンプレートタグなど整理しつつ・・・さらにphpファイルを増やしていろいろ試していきたいと思います。

-Webの記録
-, ,

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

This blog is kept spam free by WP-SpamFree.

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

no image

jQuery「Supersized」でフルスクリーンのスライドショーを簡単設置

この記事は約 1 分で読めます。 大きな画像をフルスクリーンでスライドするjQueryライブラリ「Supersized」を試してみました。 画面のサイズが変わっても、画像の縦横比を維持したままキレイに …

no image

フッターをブラウザの下部に固定する方法

この記事は約 1 分で読めます。 コンテンツが少ない場合、フッターの下に余白が出来てしまいます。 さすがに、ちょっと気になる・・・ってワケで、今回はフッターをブラウザの下部に固定する方法をいろいろ試し …

no image

「WordPress Popular Posts Stats」で人気記事を表示させてみた♪

この記事は約 1 分で読めます。 WordPressのプラグイン「Wordpress Popular Posts Stats」を使って、自分のサイトでよく読まれている人気記事を表示させてみることにしま …

no image

WordPress 「IE6 No More」プラグインでアラートを表示させてみた。

この記事は約 1 分で読めます。 IE6ブラウザで見た時だけ、バージョンアップを案内する表示をさせたいと思います。 幾つかWordpressのプラグインで見つけたのですが、表示が上手くいかないものもあ …

no image

気になるブラウザサイズ。

この記事は約 1 分で読めます。最近、いくつかサイトを作らせて頂き・・・。 ちょっと他所のパソコンをいじらせて頂き、その画面表示にショックを受ける事がしばしば・・・。 日頃見ているパソコンと表示があん …