電検三種攻略ブログ

電検三種とオススメ音楽。ためになる家電の知識をお届けします。

【WordPressテーマの自作⑤】「PHPでサイドエリアとウィジェットの作成」

calendar

reload

【WordPressテーマの自作⑤】「PHPでサイドエリアとウィジェットの作成」

サイドエリアにWordPressで設定したウィジェットが反映されるように、PHPコードを記述していきます。

スポンサーリンク

ウィジェットの追加

functions.phpにウィジェット追加のPHPコードを追加します。

その後、WordPress設定画面から外観を確認すると、ウィジェットが追加されています。

ウィジェット

 

sideber.php(サイドエリア作成)

プロフィール

サイドエリアの上部にプロフィール欄を作成します。今回はPHPは使用せず、HTMLで作成します。

imgファイルの呼び出しの場所をWordPress配下にあるフォルダに変更しています。写真変更の場合はここに新たに画像を追加し、リンク先も変更します。

プロフィール

PHPコードの追加

sideber.phpにウィジェットを反映させるPHPコードを追加します。

side class要素の終了タグ前に記述します。

これでサイドエリアにウィジェットが反映するようになったので、元々のHTMLの記述は消去します。プロフィール以外はウィジェットで追加できる感じです。

ウィジェットの追加

今回は「検索」「最近の投稿」「アーカイブ」の3つをウィジェットからサイドバーに追加します。

追加後の表示はスタイルが崩れているので、CSSで直していきます。

ウィジェットは種類が数多くありますので、あらかじめ各ウィジェットの出力されるHTMLを調べておいて、CSSでスタイリングしておけば、ウィジェットの追加の際にいちいちCSSの変更せずともすんなり配置できるので楽です。

修正後はこんな感じです。

sideberウィジェット

 

WordPressオリジナルテーマ完成

以上でWordPressオリジナルテーマの完成となります。(クリックで再生)↓

 

基本的にはHTMLのモックをベースに、PHPに変更していき、CSSでスタイリングしていく、この繰り返しの流れとなります。

質素ながらも基本的な要素は押さえたテーマにはなっているかと思いますので、これからWordPressのテーマを初めて自作される方は、参考になるかと思います。

完成したテーマのファイルはこちらからDL出来ます。↓

WordPressオリジナルテーマDL

 

次回は公開用サーバーに作成したテーマをアップロードする方法をまとめたいと思います。