HTML、CSSで作ったウェブサイトをWordPress化する工程を解説します。
目次
【WordPressはPHP】
まず初めに、WordPressってなに？から。
・CMS = Contents Management System・・・
コードが分からなくても更新できる。その際の編集可能領域は限られる。
・PHPをベースに作られている。・・・
プログラミング言語PHPの基礎の理解が必要になる。
・独自のタグ（コード）を持つ。・・・
WordPress内でしか動かない独自のPHPのタグがある。
・編集はローカル環境で行う。・・・
オープンソースとなっているので、ローカル環境を構築して、WordPress本体を自分のPCに入れて、編集することができる。
まずは、このローカル環境を作る必要があるのですが、メジャーなのは、MAMPっていう像のマークのやつ。
それも使ったのですが、よりわかりやすいフリーソフトがあります。
LOCALというフリーソフトです。
ダウンロードして、インストールwindows、macの各処理を行います。
サイトの名前を決めたり、色々と選択させられますが、
下記の内容でオッケーです！
Web Server : Apache
PHP Version : 7.35
これでなんと、WordPressの本体もダウンロードしてくれていて、
右上の[ADMIN]をクリックすれば、管理画面が開きます。
左側のs.a.p.design（ここは各自決めた名前）の上で右クリックして
[Reveal in Finder]をクリックすると、フォルダが開きます。
[sapdesign](各自のサイト名）→[app]→[public]→[wp-content]→[themes]
この順番でフォルダを開いていく。
[public]の中に、[wp-○○○]っていう名前のファイルが色々あるのが、WordPressの本体です。
この中の、[wp-content]の中の、[themes]の中に、WordPressのプリセットのテーマが入っています。
このテーマを選んで、そのままサイトを公開することもできます。
独自のテーマを作る場合は、
[themes]の中に、自分が書いたHTMLなどのファイル群をフォルダ入れます。
そうすると、WordPressで自分の書いたコードが認識されて、テーマとして表示されます。
ただし、テーマとして認識されるのは、条件があります！
【WordPressのテーマに必須のファイル】
index.php
style.css
この２つのファイルがなければ、テーマとして認識されません。
ポイントはフォルダの一番上の階層に両方置くこと！
CSSというフォルダの中にstyle.cssがあってもダメです。
外に出して、index.phpとstyle.cssを同じ場所に置きます。
index.phpは、自分の書いたindex.htmlの拡張子をphpに変えるだけです！
style.cssは、すでにあればそのままで、違う名前にしているのであれば、
中身は空でもいいので、style.cssという名前のファイルを作ればオッケー！
ひとまず、これで、テーマとして自分のファイルが認識されます。
【WordPressに必須のコード】
<?php wp_head(); ?>
<?php wp_footer(); ?>この２つのコードがWordPress化に絶対に必要です。
これを書くことで、WordPressの管理画面や、そのほかのプラグインの動作が正常に動くようになります。
① 書くファイル
index.phpに書きます！
② 書く位置 <?php wp_head(); ?>
<?php wp_head(); ?></head>の上に書きます。
<head>
・
・
・
・
<?php wp_head(); ?>
</head>
③ 書く位置 <? php wp_footer( ); ?>
<? php wp_footer( ); ?></body>タグの上に書きます。
・
・
・
<?php wp_footer(); ?>
</body>wpっていうのは、WordPressのwpですので、そのheadとfooterを区切ったと
思えば良いでしょう！
これWordPressのコードです！っていう意味です。
【サイトを見てみる】
さぁ、管理画面から、htmlで書いたサイトがどのように表示されるか確認しましょう。
この時点では、レイアウトが崩れていたり、
画像が表示されていなかったりのはずです！
この理由は簡単！
CSSや、画像のフォルダへのリンクのルートが変わるからです！
【リンクを書き換える】
リンクのルートが変わるため、リンクの書き方を変える必要があります。
・HTMLの場合
index.htmlからstyle.cssへリンクする場合。
<link rel="stylesheet" href="css/style.css">
index.htmlから見て、cssフォルダの中の、style.cssとリンクするという書き方。
相対パスの書き方です。
・WordPressの場合
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/style.css">
これは、やり方のひとつなので、何個かやり方があります。
ただ、考え方は同じです。
これは絶対パスになっています。
その詳細は、
まず、PHPのコードの意味を見ていきます。
<?php echo get_template_directory_uri(); ?>これの意味は？？
<? php ・・・・・?> →このカッコ内は、phpのコードですという意味。
echo → 表示するという意味
get_template_directory_uri(); → これは、WordPress独自のコードで、テンプレートタグと呼ばれてます！
直訳すると、「取ってこい！テンプレートのあるディレクトリのURIを！」
なんとなく、わかりますよね？
LOCALを使って、ローカル環境で作業しているので、
get_template_directory_uri(); ←これ イコール これ↓
“http://localhost:10004/wp-content/themes/S.A.P.design”
絶対パスの始まりから追っていくと、
localhost:10004 (この数字はLOCALのSite Hostていう項目の内容と一致)
/ (の中の）
wp-content
/ (の中の）
themes
/ (の中の）
S.A.P.design →ここは各自命名のフォルダ名
つまり、
get_template_directory_uri();この一文は、実は、
"http://localhost:10004/wp-content/themes/S.A.P.design"これに置き換わるんです！
これが、PHPの特徴です。
なので、
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/style.css”>
＝
<link rel=”stylesheet” href=”http://localhost:10004/wp-content/themes/S.A.P.design/style.css”>
ということです。
下のように、書き込んでも、動作しますが、ローカル環境でなく、本番にアップした場合には、
この記述を変える必要が出てきます。
テンプレートタグで記述しておけば、環境が変わっても、書き換えてくれるので、管理が楽なんです！！
同じ原理で、画像のリンクも書き換えていきます。
例えば、
<img src="img/○○○.jpg" alt=画像１">
というコードは、
<img src="<?php echo get_template_directory_uri(); ?>/img/○○○.jpg" alt="画像1">このように書きます。
すると、先ほどと同様に、
<?php echo get_template_directory_uri(); ?>
このコードが、index.phpがあるフォルダのURIに書き換わり、
実際は、
<img src="http://localhost:10004/wp-content/themes/S.A.P.design/img/○○○.jpg" alt="画像1">というコードになっています。
【WordPressのテンプレートタグ】
先ほどのような、何かの情報を取ってくるなどの指示が出せる
WordPress独自のタグをテンプレートタグと呼びます。
検索すると、WordPressCodexという、WordPressのマニュアルサイトが出てくるので、見てみてください。
山ほどのテンプレートタグがあって、絶望します！
しかし、使うタグは、数十ほどとのこと。
色々といじりましたが、実際にそこまで必要ありません。
テンプレートタグを使うときに大切なのは、PHPの特徴を理解しておくことですね。
先ほどのように、コードを書き換えてくれるのがPHPの大きな特徴です。
考え方は、<? php ・・・?> この中身が、何に置き換わるのかを理解すること！
Codexを見れば、説明があります。
どのように書けば、その情報をget して、echo するのか！
これを確認しながら、コーディングすると、理解しながらかけるので、良いですね！