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 を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

関連記事

モバイル フレンドリー テストで合格しているのに、「スマホ対応」ラベルが付かない時

この記事は約 1 分で読めます。 スマホで検索していると「スマホ対応」と表示されるようになって、しばらく経ちました。 検索している時の順位も、「スマホ対応」と表示されてないページより、表示されているペ …

no image

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

この記事は約 1 分で読めます。WordPressのオリジナルテーマ作りにチャレンジしています。 前回までで一通り表示は出来るのですが、今回気になるのは固定ページ。 お問い合せフォームの上にページをい …

no image

WordPressでオリジナルテーマ作りにチャレンジ 2【切り分け編】

この記事は約 1 分で読めます。 WordPressのオリジナルテーマ作りをしています。 今回は、前回の【準備編】の続編です。 ※(x)html+cssの知識がある事が前提で書いています。 前回までで …

no image

WordPressプラグイン「PhotoDropper」でフリー画像を記事にラクラク挿入♪

この記事は約 1 分で読めます。 photo credit: Remedios205 文字だらけの記事。ちょっと読むのがツライですね。。。 でも、イメージ画像がナイ!そんな時に使えそうなプラグインを探 …

no image

WordPressのオベンキョウ①

WordPressで、自分のサイトを作る事にしました。