技術ブログ移設しました click here!

【index.phpを分割する】自作ワードプレステーマの最低限を作る②

wp自作テーマの最低限

前回まで

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る①

現在のテーマ構造

bone/
├ index.php/
├ style.css/
└ functions.php/

今回変更するファイル

  • index.php
  • style.css
  • functions.php

今回新しく作るファイル

  • header.php
  • footer.php
  • sidebar.php

functions.phpの設定

スタイルシートをstyle.cssに書き込み、functions.phpでそのスタイルシートを読み込んでいきます。

style.css

前回記事のindex.phpのline:8~67をカット&ペーストしましょう

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る①

functions.php

 

index.phpを分割する

index.phpを分割する前に、WordPressに必要な情報を設定できるように、wp_head()とwp_footer()を挿入していきます。

wp_head()は</head>の前に、wp_footer()は</body>の前に入れていきます。

それではindex.phpを分割していきます。

  • header.php
  • footer.php
  • sidebar.php

以上の新しい3つのファイルを作成し、index.phpを含め4つのパーツに分割します。

header.php

footer.php

sidebar.php

index.php

四つに分けたファイルを繋げるために、get_header()とget_footer(), get_sidebar()を挿入します。

get_header()とget_footer(), get_sidebar()はそれぞれheader.phpとfooter.php, sidebar.phpを読み込んでくれます。

今回はここで完成です。

テーマを再度アップロードしてみましょう。

見た目は変わっていませんが、それぞれパーツに別れて表示されています。

この時点でのファイル構造

bone/
├ index.php/
├ style.css/
├ functions.php/
├ header.php/
├ sidebar.php/
└ footer.php/

自作ワードプレステーマの最低限を作るシリーズ一覧

wp自作テーマの最低限 【HTMLをPHPに】自作ワードプレステーマの最低限を作る① wp自作テーマの最低限 【index.phpを分割する】自作ワードプレステーマの最低限を作る② wp自作テーマの最低限 【404, searchなどのファイルを作成】自作ワードプレステーマの最低限を作る③ wp自作テーマの最低限 【記事ページの作成】自作ワードプレステーマの最低限を作る④ wp自作テーマの最低限 【投稿ページの作成】自作ワードプレステーマの最低限を作る⑤ wp自作テーマの最低限 【検索ページ, カテゴリページの作成】自作ワードプレステーマの最低限を作る⑥ wp自作テーマの最低限 【まとめ】自作ワードプレステーマの最低限を作る⑦

コメントを残す

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