今回の記事は、STEP4の「WordPress関数に書き直す」の「05.パーツファイルの作成」の解説となります。Header部分のパーツ化、footer部分のパーツ化、sidebarのパーツ化に加えて、汎用部分のパーツ化を解説します。
- STEP1:静的サイトの作成
ワイヤーフレームでサイトをデザインして、HTMLとCSSで静的サイトを作成します。index.htmlとstyle.cssでサイトを作成します。
- STEP2:開発環境構築
自分のパソコン内部だけで開発と動作テストが行えるWordPress専用の環境構築ソフト、HTML、CSS、PHPの編集の為のソースコードエディタ、そしてHTMLとCSSで構築された静的サイトを準備します。
- STEP3:テーマの有効化
自作テーマを有効化する為に、index.htmlをindex.phpに書き換え、style.cssを作成してWordPressにアップロードして認識してもらいます。
- STEP4:WordPress関数に書き直す
テーマとして認識できましたら、index.phpの内容をヘッダー、フッター、サイドバー等コンテンツごとに分割したり、アイキャッチ画像やナビゲーションメニュー等を設定する為に、WordPress関数に書き直していきます。
- STEP5:サーバーにアップロード
サーバーにアップしてWebに公開します。公開後、プラグインなどで必要な機能を追加したり、必要なカスタマイズを行います。
パーツファイルの作成
動画解説は、こちら
トップページや個別ページ、固定ページなどでは、共通する部分がいくつかあります。これが別々のHTMLだと管理がしにくく、例えばCSSを追加したい時や処理を追加したい場合には、全てのページを書き直さなければなりません。そこで、WordPressではパーツファイルによってheader部分やfooter部分等、パーツとして分けることができます。
header部分のパーツ化
header.phpの作成
パーツの切り取り
index.phpからheader.phpとしてパーツ化する部分を切り取って、貼り付けます。
パーツの貼り付け
切り取ったパーツをheader.phpに貼り付けます
header.phpの読み込み
index.phpは、切り取ったパーツは、get_header()で読み込みます。
サイトの確認
パーツファイルが正しく読み込まれています。
single.php、page.phpにもheader部分がありますので、＜?php get_header(); ?＞でパーツファイルを読み込みます
footer部分のパーツ化
footer.phpの作成
パーツの貼り付け
index.phpからfooter部分を切り取り、footer.phpに貼り付けます。
footer.phpの読み込み
single.phpにもpage.phpfooter部分がありますので、＜?php get_footer(); ?＞でパーツファイルを読み込みます
side部分のパーツ化
sidebar.phpの作成
パーツの貼り付け
index.phpからside部分を切り取り、sdebar.phpに貼り付けます。
sidebar.phpの読み込み
single.phpにもサイド部分がありますので、＜?php get_sidebar(); ?＞で読み込みます。
汎用のパーツファイルの作成
汎用部分のパーツ化
body部の先頭にあるナビゲーション(メニュー)は、どのページにも必要な汎用部分となりますので、パーツ化します。
フォルダ、ファイルの作成
includesというフォルダの中に、header.phpファイルを作成してパーツ化します。
パーツの貼り付け
パーツファイルの読み込み
single.php、page.phpにも反映させます。
