こんにちは。fsです。
以前の記事で、Wordpressテーマの骨格作りを紹介しました。
記事はこちら
↓↓↓↓↓↓↓
これをベースに各ページ（投稿ページや固定ページなど）や機能を実装させていくわけですが、コードを書いていくうちに、
「コードが長くて見づらい😱」
「各ファイルごとに同じコード書くのめんどくさい😓」
「１箇所間違うと全部直さないと😅」
このような悩みに直面していきます。
解決策は各ファイルを『パーツ化』することです。
これによって、
- 一つのファイルのコードがシンプルで読みやすくなる
- 各ファイルにパーツファイルを読み込ませられる
- エラーが場所が特定しやすくなる
などのメリットを享受できます。
そんなわけで今回は『Wordpressテーマをパーツ化してシンプルコードを実践』していきます。
WordPress開発の初心者の方の参考になれば幸いです。
それではお読みください。
パーツ化実践
それでは、パーツファイルを作っていきます。
実際のコードをお見せしながら解説していきます。
headタグとfooter直後
まずはindex.phpの最上部/最下部にあるheadタグとfooterタグの直後の箇所です。
メタタグやスクリプトタグなどが書かれています。
これらはウェブサイトの基本的な機能なので、どのページでも共通で使います。
なので、パーツ化してページごとに読み込ませた方が効率的です。
毎回書くのはめんどくさいので😌
まず、この部分のパーツファイルであるheader.phpとfooter.phpをテーマの直下に作ります。
index.phpを開き、headタグの中身を切り取ります。
切り取った部分だけheader.phpに貼り付けます。
index.phpに戻り、切り取った箇所にheader.phpを呼び出すテンプレートタグ、get_header()を書いていきます。
これでheader.phpの中身がindex.phpのheadタグに読み込まれました。
フッター直後も同じ要領で作っていきます。
これで下部のパーツ化も完了です。
レイアウトもパーツ化する
次はレイアウト部分もパーツ化していきたいと思います。
ナビゲーションバーなどのレイアウトはどのページでも共通で使うからです。
今回はナビゲーションバーを例にやっていきます。
まず、テーマの直下にレイアウトのパーツファイルを収納するフォルダとファイルを作ります。
ここではフォルダ名をincludes、ファイル名をheader.phpとしました。
※フォルダ名、ファイル名は好きな名前でOKです
次にindex.phpを開きナビゲーションバーの部分をカットします。
コピーした部分を作ったパーツファイルに貼り付けます。
index.phpに戻り、パーツファイルを読み込むテンプレートタグを挿入していきます。
ここではget_template_part(‘フォルダ名/ファイル名’)と入れます。
これでパーツファイルとの連動が完了です。
同じ要領でフッターのレイアウトもパーツ化、読み込みをしていきます。
ブラウザで見てみると、うまく読み込めています。
これでパーツ化が完了です。
まとめ パーツ化ですっきりとしたコードに
いかがだったでしょうか。
各ファイルをパーツ化することで、
- ひとつひとつのコードがシンプルで見やすくなる
- 他のファイルへ展開できるので作業時間が短縮できる（テンプレートタグで呼び出すだけ）
- 間違いを見つけやすい（ファイルごとに調べられる）
といったメリットがあり、プログラムが一段と書きやすくなります。
このような『パーツ化』はLaravelなど他のフレームワークでも応用できるので、まずは簡単なWordpressで慣れると良いと思います。
以上、Wordpress初心者の参考になれば幸いです。
最後までお読みいただきありがとうございました。
Macでプログラミングをはじめよう！
コメント