共通パーツ(header,footer等)をPHPで読み込んで編集を楽にする方法
headerやfooterに限らず、同じパーツを使っている場合は、共通パーツを読み込ませて管理した方が断然楽ちんです。ですので、以前『共通パーツ(header,footer等)をjQueryで読み込んで編集を楽にする方法 & 文字化け対策』の記事を書いて以来、共通パーツの運用はjQueryを使っていました。
ですが、新たにWordPress(ワードプレス)で作ったサイトにこの共通パーツを使おうとしたところ、機能しなかった。。
というわけで今回は『共通パーツ(header,footer等)をPHPで読み込んで編集を楽にする方法』について書きたいと思います。
目次
『共通パーツ』を読み込んで表示させる方法:一覧
PHPを使って、共通パーツを読み込む方法
以前の静的な「HTML」を「JS(JavaScript)」で読み込む方式だと、初期表示できちんと表示されないでSEO的には不利になることがあります。ですが、今回のPHPを使った方法だと、最初から出力=成形されてでてきてくれるのでSEO的にも問題なく、jQueryの『.load()』に依存しないので、軽量かつ安定して使うことができる ということになります。
そんなわけで、WordPress等のPHPを使っているサイトでの共通パーツを読み込ませる場合は、WPのテンプレート関数を使うこの方法が断然オススメです。
1. 共通で読み込みたいパーツを作成する
まずは以下のようなhtmlで作成された「共通パーツ」を、『PHP』ファイルとして作成します。
今回の例としては、footerで共通のパーツを使用したかったので、『footerCommonBox.php』という名前(任意)のファイルを作成しました。
中身は共通で出力したいコードを記載します。以下はサンプルです。
<!--ここから共通<header>--> <a href="パス">タイトルとか</a> <ul> <li><a href="パス">メニューとか</a></li> <li><a href="パス">メニューとか</a></li> <li><a href="パス">メニューとか</a></li> </ul> <!--ここまで共通</header>-->
htmlやbodyタグなどは不要 なのは前回同様です。
2. テーマ直下に「.php」ファイルを配置する
作成した『footerCommonBox.php』のファイルを、以下に配置します。
wp-content/themes/テーマのフォルダ名/template-parts(任意のフォルダ)/footerCommonBox.php
3. 読み込みたい場所で呼び出す
WordPress(ワードプレス)のテンプレート内(今回であれば、footer.php など)に以下を記述します。
<?php get_template_part('template-parts/footerCommonBox'); ?>
これでOKです!
超簡単!! これでそのパーツ内で修正すれば、3を記述した場所全てで、修正内容が自動的に更新されます!!「後々更新するかも?」というパーツがある場合は、最初作るときにこのような作りにしておいた方が、後々絶対に楽!なので、オススメです!
まとめ
以前作ったサイトもWordPress(ワードプレス)で作ったものだったのですが、その頃はPHPが苦手でJavascriptを使った、という経緯もあるのですが、JavaScriptを作った方法だと、PHPやWPのバージョンによって、使えたり使えなかったりするんですよね。
ですので、WordPress(ワードプレス)で作っているサイトであれば、「PHP苦手」という方であっても、後々のことを考えればPHPで作る方がオススメなのかな。と思います。
Google AdS
関連記事
-
WordPress:特定カテゴリで投稿を古い順に表示させる方法
Wordpressの投稿の表示は、デフォルトでは新しいものから表示されますよね。でも特定カテゴリーでは反対(投稿した順番…
-
OGPをWP-OGPのプラグインを改変して設定する!!2015年のOGP最新設定
今度こそ。。。OGPの設定で何時間、というより何日?何ヶ月?かかってるんや。。。という感じなのですが、もう最初の投稿から…
-
Google AdSenseの広告をWordPressの投稿内に記述する方法
以前Google AdSenseの広告を自動で設定してたのですが、ある時スマホで管理サイトを見た時、やたら記事を読むのを…
-
サーバー移転の手順 その2:データベースの移行(phpMyAdminを使って)
前回サーバ移転の手順 その1:サーバーからサーバーへの移行(同サーバー(EXTREM)同士)からの続きです! って…
-
【2025最新】スマホ・タブレットの解像度一覧表(画面サイズの割合)iPhone・iPad..
2025/2「解像度一覧表」 更新 最近はレスポンス対応が当たり前になってきて、メディアクエリの記述をしない方…