WordPressテーマのパーツ化でシンプルコードを実践する

Wordpress

こんにちは。fsです。
以前の記事で、Wordpressテーマの骨格作りを紹介しました。
記事はこちら
↓↓↓↓↓↓↓

これをベースに各ページ(投稿ページや固定ページなど)や機能を実装させていくわけですが、コードを書いていくうちに、

「コードが長くて見づらい😱」
「各ファイルごとに同じコード書くのめんどくさい😓」
「1箇所間違うと全部直さないと😅」

このような悩みに直面していきます。

解決策は各ファイルを『パーツ化』することです。
これによって、

  • 一つのファイルのコードがシンプルで読みやすくなる
  • 各ファイルにパーツファイルを読み込ませられる
  • エラーが場所が特定しやすくなる

などのメリットを享受できます。

そんなわけで今回は『Wordpressテーマをパーツ化してシンプルコードを実践』していきます。
WordPress開発の初心者の方の参考になれば幸いです。
それではお読みください。

パーツ化実践

それでは、パーツファイルを作っていきます。
実際のコードをお見せしながら解説していきます。

headタグとfooter直後

まずはindex.phpの最上部/最下部にあるheadタグとfooterタグの直後の箇所です。
メタタグやスクリプトタグなどが書かれています。

これらはウェブサイトの基本的な機能なので、どのページでも共通で使います。
なので、パーツ化してページごとに読み込ませた方が効率的です。
毎回書くのはめんどくさいので😌

まず、この部分のパーツファイルであるheader.phpとfooter.phpをテーマの直下に作ります。

このようにパーツファイルを作っていきます

index.phpを開き、headタグの中身を切り取ります。

headタグの中身だけ切り取ります

切り取った部分だけheader.phpに貼り付けます。

header.phpに貼り付けるだけでOK

index.phpに戻り、切り取った箇所にheader.phpを呼び出すテンプレートタグ、get_header()を書いていきます。

これでheader.phpの中身が読み込まれます。簡単ですね😌

これでheader.phpの中身がindex.phpのheadタグに読み込まれました。

フッター直後も同じ要領で作っていきます。

パーツ化したい箇所を切り取る
footer.phpに貼り付け
index.phpに戻り、ファイルを読み込むテンプレートタグを記入

これで下部のパーツ化も完了です。

レイアウトもパーツ化する

次はレイアウト部分もパーツ化していきたいと思います。
ナビゲーションバーなどのレイアウトはどのページでも共通で使うからです。
今回はナビゲーションバーを例にやっていきます。

まず、テーマの直下にレイアウトのパーツファイルを収納するフォルダとファイルを作ります。
ここではフォルダ名をincludes、ファイル名をheader.phpとしました。
※フォルダ名、ファイル名は好きな名前でOKです

フォルダ名とファイル名はお好きな名前でOKです

次にindex.phpを開きナビゲーションバーの部分をカットします。

パーツしたい箇所をそのままカットします

コピーした部分を作ったパーツファイルに貼り付けます。

貼り付けるときはフォルダ名とファイル名を確認しておきましょう

index.phpに戻り、パーツファイルを読み込むテンプレートタグを挿入していきます。
ここではget_template_part(‘フォルダ名/ファイル名’)と入れます。

includesフォルダのheader.phpを読み込ませる命令を書きます

これでパーツファイルとの連動が完了です。

同じ要領でフッターのレイアウトもパーツ化、読み込みをしていきます。

パーツ化したい箇所をカット
パーツファイルにコピー
index.phpで読み込み

ブラウザで見てみると、うまく読み込めています。

問題なくサイトは動作しています

これでパーツ化が完了です。

まとめ パーツ化ですっきりとしたコードに

いかがだったでしょうか。
各ファイルをパーツ化することで、

  • ひとつひとつのコードがシンプルで見やすくなる
  • 他のファイルへ展開できるので作業時間が短縮できる(テンプレートタグで呼び出すだけ)
  • 間違いを見つけやすい(ファイルごとに調べられる)

といったメリットがあり、プログラムが一段と書きやすくなります。

このような『パーツ化』はLaravelなど他のフレームワークでも応用できるので、まずは簡単なWordpressで慣れると良いと思います。

以上、Wordpress初心者の参考になれば幸いです。
最後までお読みいただきありがとうございました。

Macでプログラミングをはじめよう!

この投稿は役に立ちましたか? 役に立った 役に立たなかった 5 人中 5 人がこの 投稿 は役に立ったと言っています。

コメント

海外ブログバナー

にほんブログ村 海外生活ブログへ

海外ブログバナー

にほんブログ村 海外生活ブログへ

シンガポールの古本屋さん

タイトルとURLをコピーしました