見出し画像

【今更聞こうよ WordPress!第１回「基礎編」】 個人投資家のFIREへの旅路 第139夜

S.A.P.Studio

何がわからないか、わからない！そんな状態でもわかるように書きます。

HTMLでのコーディングはできるようになったけど、案件をみてると、WordPressができないとヤバそうだな。でもよくわからん！って人に向けて書きます！（自分です）

HTML、CSSで作ったウェブサイトをWordPress化するという作業を少し前からやってますが、形にはできる。だけど、ちゃんと理解してやってないなっていうのが正直なところ。

再度、１から復習して行きたいと思います。


【WordPressはPHP】

画像2

まず初めに、WordPressってなに？から。

語り出すと長いので、制作に関連するポイントだけ！

・CMS = Contents Management System・・・コードが分からなくても更新できる。その際の編集可能領域は限られる。

・PHPをベースに作られている。・・・　プログラミング言語PHPの基礎の理解が必要になる。しかし、これはJavaScriptより簡単！

・独自のタグ（コード）を持つ。・・・　WordPress内でしか動かない独自のPHPのタグがある。これも一覧表があるので、覚える必要なし！

・編集はローカル環境で行う。・・・オープンソースとなっているので、ローカル環境を構築して、WordPress本体を自分のPCに入れて、編集することができる。

こんな感じです。

まずは、このローカル環境ってやつを作る必要があるのですが、メジャーなのは、MAMPっていう像のマークのやつ。それも使ったのですが、今回はこちらを使いましょう！こっちの方がわかりやすくていい！

LOCALっていうやつです！こちら↓↓

ダウンロードして、インストールwindows、macの各処理を行います。

サイトの名前を決めたり、色々と選択させられますが、

下記の内容でオッケーです！

Web Server  :    Apache

PHP Version :   7.35

スクリーンショット 2021-08-16 23.48.30

これでなんと、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(); ?>

こいつは、</head>の上です。

<head>
   ・
   ・
   ・
   ・


  <?php wp_head(); ?>
</head>

つまり、＜head＞タグ内の一番下です。とりあえずここに書く！これはもうおまじないです。


<? php wp_footer( ); ?>

こいつは、</body>タグの上です。

 ・
 ・
 ・

  <?php wp_footer(); ?>
</body>


wpっていうのは、WordPressのwpですので、そのheadとfooterを区切ったと

思えば良いでしょう！

これWordPressのコードです！っていう意味です。



【サイトを見てみる】

画像4

さぁ、管理画面から、htmlで書いたサイトがどのように表示されるか確認しましょう。

この時点では、レイアウトが崩れていたり、

画像が表示されていなかったりのはずです！

この理由は簡単！

CSSや、画像のフォルダへのリンクのルートが変わるからです！

つまり、リンクの書き方を変える必要があるということ。

通常であれば、

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">

というコードになっているのです！！

なんと便利なPHP！


【WordPressのテンプレートタグ】

画像3

先ほどのような、何かの情報を取ってくるなどの指示が出せる

WordPress独自のタグをテンプレートタグと呼びます。

検索すると、WordPressCodexという、WordPressのマニュアルサイトが出てくるので、見てみてください。

山ほどのテンプレートタグがあって、絶望します！

しかし、使うタグは、数十ほどとのこと。

色々といじりましたが、実際にそこまで必要なさそうです。難しい開発となると別でしょうが！

テンプレートタグを使うときに大切なのは、PHPの特徴を理解しておくことですね。

先ほどのように、コードを書き換えてくれるのがPHPの大きな特徴です。

考え方は、<? php ・・・?> この中身が、何に置き換わるのかを理解すること！　

Codexを見れば、説明がありますし、

どのように書けば、その情報をget して、echo するのか！　これを確認しながら、コーディングすると、理解しながらかけるので、良いですね！

とはいえ、理解していなくても、できちゃいますが！


ひとまず、ここまでで、トップページの表示はうまくいくはずです！

ここから、階層ページの作り方や、そのリンク方法、ブログの投稿、プラグインの使い方など、やることがいっぱいです！

しかし、落ち着いてやれば、そんなに難しくないです。

整理してやっていきましょう！


プログラミング、マークアップあるあるですが、手順通りにやってもうまくいかないのは、当たり前です！

ここで、踏ん張って、さらに調べて、原因がわかったときに、自分のものになります！

頑張ってやっていきましょう♪


この記事が気に入ったらサポートをしてみませんか？