もんちゃんブログ 
この記事はweb制作を学んでいる際に、自分が調べて学べたことや、メンターさんに指導をもらったことを自分の復習としてまとめています。
Progateをやった後や、コーディングで悩んだ方の参考になれば嬉しいです。
また、他の方のブログ記事をたくさん記載させて頂いています。
いつも参考にさせていただいており、感謝いたします！！
学習中であり不完全なところも多くありますので、気になる所があれば先輩方にアドバイスをいただけると嬉しいです！
今回はHTMLのWordPress化についてまとめていきます。
復習帳：WordPress編①
ブログこそ書いてはいますがWordPress初挑戦であった私が、複数ページのHTML・CSSをWordPress化していく際に学んだ流れをまとめていきます！
今回はワードプレスをローカル環境で動かす環境づくりと、トップページを表示するまでをまとめていきたいと思います！
ローカル環境作り
ローカル環境にてWordPress・PHPを動かすことができる環境を整えていきましょう！
今回はMAMPを使用していきます。
まずインストール方法はこちら↓
https://pc-karuma.net/mamp-install-mac/
次はこちらで初期設定を行っていきます↓
https://pc-karuma.net/mamp-settings-mac/
タイムゾーンの設定が難しければ、こちらも参考にしてみてください↓
https://qiita.com/shiki_neki/items/35d73f57615ed1f1d4fb
WordPressのダウンロード
WordPressのダウンロードは動画になりますが、こちらがとてもわかりやすかったです。
この動画のシリーズはどれも非常にわかりやすいため、つまづきポイントが出てくるまでは、こちらの動画の続きを見ていただくのもわかりやすいと思います！
WordPressダウンロード後の流れを簡単にまとめますと…
MAMPの中にあるhtdocsの中にダウンロードしたWordPressのファイルを入れて、好きな名前に変更。
そのファイル（元のWordPressファイル）の中のwp-content>themesの中に、新しいファイルを作成し、好きなテーマの名前に変更する。
その中に、今まで作っていたHTML・CSSのファイルを入れる。
この中のテーマファイルを使っていろいろな変更を行っていきます。
【おすすめ】UdemyでともすたさんのWordPress講座を学んでみる！！ 
テーマの有効化
次にテーマの有効化を行っていきます。
まずは2つの確認を行っていきます 。
テーマファイルの直下に
index.htmlとstyle.cssがある。
index.htmlは元々作っていた物があると思いますが、HTMLファイルなどに入れず、テーマファイルの中に直接おいてください。
またstyle.cssは中身はからでOKです。（もちろん中身があってもOKです。）
元々scssで作っている方や、cssファイルを作っている方は、中身は空でいいので新しくstyle.cssを作ってください。
この2点が確認できたら、index.htmlの名前をindex.phpに変更してください。
するとWordPressの管理画面、外観のテーマの画面にて新しくテーマとして認識されています！
有効化してみますと、cssや画像が反映されていないhtmlの中身だけが表示がされると思います。
また、style.css（上記画像では左側のstyle.css）にコメントでテーマ名をつけると、WordPress内でテーマ名などを反映することができます。
上記で紹介した動画の11:25あたりでも説明されています。
css
CSSやJsのスタイルシートの読み込みを行いましょう。
先ほど同様こちらの動画を参考にしてみてください↓
2:55あたりからスタイルシートの読み込みの説明となります！
形としては
<link rel=”stylesheet” href=”<?php echo get_template_directory_uri(); ?>/css/style.css”>
のようになり、hrefのところで<?php echo get_template_directory_uri(); ?>と言うコードを入れてから読みこむことになります。
テーマの有効化の説明時に使用した画像内のようにCSSファイルを作って読み込みたい方は、
<?php echo get_template_directory_uri(); ?>の後に/cssを入れてから/style.cssとなりますので注意をしてください。
（相対パスの振り返りをしておきましょう！）
imgの読み込み
次に画像を反映させていきましょう！
上記のCSSの時と同様にそれぞれの<img>内のsrcの相対パスの前に
<?php echo get_template_directory_uri(); ?>
をつけます。
<img src=”<?php echo get_template_directory_uri(); ?>/image/〇〇.png”>
画像をimageと言うファイルの中に入れていれば、このような形になります。
またsrcsetでも指定されている方はそちらの相対パスの前にも上記コードを書き加えていきましょう！
（↑私はこのsrcsetへの作業を忘れており、画像がなかなか表示されなくて悩みました(´Д` )）
なかなかの作業量…笑
<?php echo get_template_directory_uri(); ?>
をつける。
テンプレートファイルへの分割
次は共通で使用している部分をテンプレート化していきます。
主に3つのファイルを作っていきます。
header.php
footer.php
sidebar.php
サイドバーは使用していなければ作らなくてOKです。
テーマファイル内に上記の2つまたは3つのファイルを作ります。
index.phpから共通となる部分を切り取ります。
こちらの6が非常にわかりやすいです↓
https://guuten.net/lp-to-wordpress/
header.phpはバッサリとindex.phpの一番上の
<!DOCTYPE html>
から切り取っていただいてOKです！
footer.phpも
<footer>
以下を切り取っていただいてOKです。
wp_head();とwp_footer();をつける
次に切り取ったheader.phpとfooter.phpに次のワードの追加をします。
</head>の前に
<?php wp_head(); ?>
</body>の前に
<?php wp_footer(); ?>
をつけます。
これはなんぞや…(￣∀￣)
となると思いますので、ぜひこちらの記事をお読みください↓
テンプレート化した部分を読みこむ
index.phpに戻り、切り取ったheader.phpがあった部分に
<?php get_header(); ?>
と書き込み、header.phpを読み込みます。
footerは
<?php get_footer(); ?>
で読み込みます。
これでとりあえず、トップページ画面の表示ができるようになりました！
次はテンプレートタグやループ機能を使ってページを整え、ブログ投稿一覧を表示させたり、トップページ以外のページを作っていく流れをまとめていければと思います。
ワードプレス編②はこちら
また、わかりにくいところや記載内容に不備がありましたらコメント欄にてご指摘いただけると嬉しいです。
おまけ
【おすすめ】UdemyでともすたさんのWordPress講座を学んでみる！！
https://px.a8.net/svt/ejp?a8mat=3NCUT5+C7DX82+3L4M+BW0YB&a8ejpredirect=https%3A%2F%2Fwww.udemy.com%2Fcourse%2Fwordpress_master%2F
最後まで読んでいただきありがとうございました(*´∇｀*)
広告
