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

WordPress管理画面の不正アクセス防止に「Simple Login Lockdown」

この記事は約 1 分で読めます。 WordPressの管理画面にログインするには、ユーザー名とパスワードさえ合っていれば誰でもどこでも入る事が出来ます。 特に推測しやすいパスワードにしていた場合、全然 …

no image

WordPressでシンプルな自作SNSボタンを設置してみた

この記事は約 1 分で読めます。 ブログの記事下に、いろんなSNSアイコンをよく見かけます。 このブログにも付けていたのですが、時々ちょっと重たさを感じていたのですが、先日書いた記事「WordPres …

no image

苦手なJavaScriptをイチから勉強してみる【基本準備編】

この記事は約 1 分で読めます。今更なんですが、実はJavaScriptはちょっと苦手です。。。 jQueryのライブラリーを使って、部分的にいじる事はあっても・・・何となく「JavaScript」っ …

no image

X SERVERにa-blog cmsをインストールしてみた。

この記事は約 1 分で読めます。 先日「「AMPPS」にa-blog cmsのローカル環境を作ってみる」でローカル環境にa-blog cmsをインストールしてみました。 今回、a-blog cmsの勉 …

no image

Photoshopでレイアウト設計をする時に便利なエクステンション「GuideGuide」を試してみた

この記事は約 1 分で読めます。 日頃、WebページのデザインはPhotoshopを使っています。何か便利なツールないかなぁ~と思っていたところで知ったエクステンション。 Photoshopでレイアウ …