WordPressの学習記録1　HTML形式のコードをWordPressに反映させる！

こんにちは。大阪でエンジニアをしているゆーたといいます。
本日から少しずつWordPressの学習記録をしていこうかなと思います！

私が学習に使っている教科書はこの本です。

ビジネスサイトを作って学ぶWordPressの教科書 Ver. 5.x対応版（プライム・ストラテジー株式会社 小川 欣一、穂苅 智哉、森下 竜行／株式会社カイエン／岩本 修 著） | 書籍 | ソシム

この本の特徴として、
・HTML,CSS,JSを勉強していて、wordpressを触っていきたいなという人
・wordpressを用いてサイトを作っていきたいと思う人
にとってオススメです！
※HTML,CSS,JS,PHP初歩を学習していない人にとっては難しいかもしれません。

この本の内容として、
１つのコーポレートサイトを１から作り上げてwordpressの理解を深める仕組みになっています。
実際に出来上がるサイトはこちらになります。

https://wpbook-pacificmall.work/
※無料公開HP
私自身の気づいたことなどを重点的に書いていきます。

●WordPressに反映させる下準備

今回は、ローカルで練習するために、
localbyflywheelというサイトで学習することにします。

Local

このサイトは軽くて非常に使いやすいのでオススメです！
WordPressの基本的な使い方はふるさんのyoutubeを見て学習出来ます。

html形式からwordpressに移行する場合、
PHPに変更する必要があります。
まず、localbyflywheelの上の矢印の部分をクリックします。
※testaは任意で付けた名前です。

矢印をクリックすると、ファイル欄が現れ、

任意で作成したフォルダtestaの中にapp,cont,logsというフォルダがあることが分かります。
次にtesta>app>public>wp-content>themes>とフォルダを開いていき、その中に今回WordPressで反映したいhtmlファイルを入れます。

こんな感じです↓

これで準備はOKです！(^o^)

●HTML形式のコードをWordPressに反映させる

次に、WordPressの管理画面を開きます。
localbyflywheel内上部にあるADMINをクリック

WordPressの管理画面に入ることが出来ます。
初期設定は、上部のyoutubeを見たら理解できると思うので割愛します。
管理画面内にあるサイドバー外観をクリックすると、以下のような感じになっていると思います。

これは現在デフォルトで入っているテーマになります。
ですが先程入れたはずのtestaのフォルダがありません。
そこでtestaをWordPressに認識させる必要があります。
認識させるためにはindex.htmlをindex.phpに変更すると認識されます。
worrdpressに直接反映させるには、最低限
・index.php
・style.css
のファイルが必要になってきます。
注意点としてここでいうstyle.cssはコーディングを記述するcssではないということです。
cssファイルがない人はここで新たにcssファイルを作成しましょう。

cssファイルには管理画面での名前などを記述することになります。
任意の名前などを作成して、以下を参考にするといいと思います。
コメントアウトで作成します。

以上のことを作成して更新ボタンを押すと、
管理画面内に新しく自分で作成したhtmlフォルダーが現れます。

次に作成したテーマにカーソルを持っていき、
有効化のボタンをクリックします。

クリック後、画面上部にある家マーク（ここではtesta）と書かれている画面をクリックすると、htmlが正常に反映されています。

でもこの場合、htmlが反映されただけでcssはまだ反映されていません。

●cssを反映させる

style.cssのパスを正しく表示させるために、index.php内の<link rel="stylesheet"~の記述を変更します。

<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />
を以下のように
リンク先指定のはじめに<?php echo get_template_directory_uri(); ?>を記述。

<link rel="stylesheet" type="text/css" href="<?php echo get_template_directory_uri(); ?>/assets/css/styles.css" />

変更後正しくcssが読み込まれていると思います。

cssの他にもjsなどを読み込んでいる場合はjsにも
<?php echo get_template_directory_uri(); ?>を始めにつけます。

ですがこの状態だと画像が表示されていないので、画像を表示させるために、
画像にも<?php echo get_template_directory_uri(); ?>を始めにつけます。
例えば、
img/img_01.jpgなら、
<?php echo get_template_directory_uri(); ?>/img/img_01.jpg
のような感じです。

そうすると、画像も正しく表示されます(^^)

まとめ

・worrdpressに直接反映させるには、最低限index.php、style.css
のファイルが必要。

・cssやimgなどを反映させるには、
<?php echo get_template_directory_uri(); ?>を前に記述する。

次はheader.php footer.phpの分割についてまとめたいと思います！

twitterやっています！よろしければフォローよろしくお願いします＾＾

twitter
https://twitter.com/trizolyuta