【第2回 あれ？簡単すぎる】 "WordPress化"の工程解説！ 投資家のFIREへの旅路 第211回
WordPress化の工程解説第２回です。
前回は、こちらになります。
今回は、オリジナルテーマのファイルをパーツ分けしてく作業です。
では、始めていきましょう！
途中で色々と疑問が出るかもしれませんが、まずは、一通りやってみてくださいね。その方が早いです！
【簡単すぎる WordPress化】
④パーツに分ける
通常のWEBサイト構成するファイルは、大きく分けるとこの2つですね。
index.html
style.css
この他、レスポンシブ用のCSSがあったり、javaScriptのファイルがあったりするのかもしれません。
しかし、WordPress化する際に、パーツ分けを行うファイルは
index.htmlですので、別ファイルはそのままでOKです。
WordPressのテーマとして認識させるために、
index.htmlはindex.phpという名前に変更しましたので、こちらのファイルをパーツ分けしていくことになります。
では、index.phpをどのように分解していくのか解説します！
【簡単すぎる WordPress化】
⑤ header.php
index.phpのファイルをコピぺして、
・ header.php
というファイルを作ります
このファイルは文字通り、headerの部分を内包するファイルです。
なので、header部分以外は削除します。
具体的にheader部分とは、
<!DOCTYPE html>
<html lang="ja">
<head>
・
・
・
・
・
<?php wp_head(); ?>
</head>
<body>
<header>
・
・
・
</header>このあたりになります。
<!DOCTYPE html> から </header> までですね。
headerの中にnaviなども含まれる場合もありますね。
この分け方については、好みがあるようです。
私の場合には、これで問題なく動いていますし、何よりわかりやすい！
復習として、</head>タグの上の<?php wp_head(); ?>タグは、WordPressの機能を読み込むのに必須のコードでしたね。
【簡単すぎる WordPress化】
⑥ footer.php
続いては、
・ footer.php
というファイルを作りましょう！
こちらも名前の通り、footer部分が内包させるファイルにしますので、
先程と同じように、index.phpをコピペして、
footer部分以外を削除しましょう！
具体的にはこの辺りです。
<footer>
・
・
・
</footer>
<?php wp_footer(); ?>
</body>
</html><footer> から </html>までですね！
こちらのファイルにも、 WordPressの必須コード<?php wp_footer(); ?>
が含まれます。
【簡単すぎる WordPress化】
⑦ sidebar.php
こちらは、ブログ系サイトに多いレイアウトのサイドバーがある場合に、分割します。
このファイルはある場合だけ、作成します。
方法は、header、footerの時と同様です！
【簡単すぎる WordPress化】
⑧ frontpage.php
トップページの部分として、表示されるのが、こちらのファイルです。
・front-page.php
どの部分を内包するかというと、
<main>
・
・
・
・
</main>メインコンテンツの部分になります。
<main>の中には、about、contactなどの要素が入っていることが多いと思いますが、それら全てを含みます。
簡単いえば、先程分割した、
header
footer
以外の部分がfrontpage.phpです。
【簡単すぎる WordPress化】
⑨ 分割したファイルを読み込む
先程、分割した、header.phpと、footer.phpをfrontpage.phpに読み込む必要があります。
１行コードを書くだけです！
header.php …… get_header()
sidebar.php …… get_sidebar() サイドバーがある場合
footer.php …… get_footer()
具体的にはこんな感じです。
frontpage.phpを開いて・・・
<?php get_header(); ?>
<main>
・
・
・
・
・
・
</main>
<?php get_footer(); ?>考え方としては、
frontpage.phpの一番上に、 <?php get_header(); ?>
frontpage.phpの一番下に、 <?php get_footer(); ?>
を書く！
これで、header.phpのコードが<?php get_header(); ?>を書いた場所に読み込まれ、
foote.phpのコードが<?php get_footer(); ?>を書いた場所に読み込まれるので、
実際には、分割する前のindex.phpの構造になるというだけのことなんです。
では、なぜ、パーツ分けなんてめんどくさいことするんだ！！
という話ですが、それはこちら！
【簡単すぎる WordPress化】
⑩ パーツ化して使い回す
パーツ化する意味は、いろんなところで使い回せるようにするためです！
headr.phpを読み込むためには、
<?php get_header ( ); ?>
これを書くだけで済みます。
WEBサイトは、
トップページ、aboutページ、contactページ、companyページなどのページが必要になりますが、
全てのページで、header部分と、footer部分は、同じ構造になっていることが基本です。
なので、各ページに、ダラダラとheaderのコードがあるのではなく、
パーツ化して、
<?php get_header ( ); ?>
で、読み込む！
これで、各ページのファイルがスッキリしますし、読み込み速度も向上します。
このように、使い回せる状態にするために、パーツ化をするわけです！
【簡単すぎる WordPress化】
番外編 パーツ化のメリット
パーツ化の最大のメリットは、
修正時に一箇所の修正で完了すること！
header部分のデザインを変える場合には、header.phpのコード書き換えるだけで完了です！他のページには、書き換えたファイルが読み込まれるので！
これが、パーツ化をしていなければ、
各ページのファイルを書き換えていく必要があるわけです！
こんな、大きなめんどくさい！！を回避するために、
パーツ化という小さなめんどくさい！！をやっておくということですね。
【まとめ】 次回予告
今回のポイントワードです！
header.php
footer.php
sidebar.php
frontpage.php
<?php get_header( ); ? >
<?php get_footer( ); ? >
このワードを見て、なんとなくイメージできたらOKです！
あとは、やっていくうちに勝手に染み込んでいきます！
プログラミングに暗記は不要！
迷ったらまた調べれば良いのです！
次回は、階層ページについて解説します！！
それではまた！