見出し画像

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

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

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

この本の特徴として、
・HTML,CSS,JSを勉強していて、wordpressを触っていきたいなという人
・wordpressを用いてサイトを作っていきたいと思う人

にとってオススメです!
※HTML,CSS,JS,PHP初歩を学習していない人にとっては難しいかもしれません。

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

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



●WordPressに反映させる下準備

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

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

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

スクリーンショット 2020-05-14 2.20.35

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

スクリーンショット 2020-05-14 2.24.05

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

スクリーンショット 2020-05-14 2.27.20

こんな感じです↓

スクリーンショット 2020-05-14 2.30.10

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




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

次に、WordPressの管理画面を開きます。
localbyflywheel内上部にあるADMINをクリック
スクリーンショット 2020-05-14 2.32.40

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

スクリーンショット 2020-05-14 2.36.33

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

スクリーンショット 2020-05-14 2.52.22

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

スクリーンショット 2020-05-14 2.53.41

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

スクリーンショット 2020-05-14 2.56.16

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

スクリーンショット 2020-05-14 2.58.02

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

スクリーンショット 2020-05-14 3.01.14

でもこの場合、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が読み込まれていると思います。

スクリーンショット 2020-05-14 3.15.38

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
のような感じです。

スクリーンショット 2020-05-14 3.20.30

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



まとめ

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

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

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

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

twitter
https://twitter.com/trizolyuta






大阪在住の29歳。web制作会社勤務。noteを通してたくさんの出会いを作っていきたいです。台湾が大好きで中国語勉強中。日台夫婦。日々の挑戦の記録や、社会の生きづらさ、台湾のことなどを書いていこうと思います。2023年台湾に移住予定です。