【WordPress】第1回「基礎編」

WordPress

HTML、CSSで作ったウェブサイトをWordPress化する工程を解説します。

【WordPressはPHP】

画像2

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

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

 

・PHPをベースに作られている。・・・ 
プログラミング言語PHPの基礎の理解が必要になる。

 

・独自のタグ(コード)を持つ。・・・ 
WordPress内でしか動かない
独自のPHPのタグがある。

 

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

 

まずは、このローカル環境を作る必要があるのですが、メジャーなのは、MAMPっていう像のマークのやつ。

それも使ったのですが、よりわかりやすいフリーソフトがあります。

 

LOCALというフリーソフトです。

 

Local Local WordPress development made simple… localwp.com

ダウンロードして、インストール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

 

この2つのファイルがなければ、テーマとして認識されません。

 

ポイントはフォルダの一番上の階層に両方置くこと!

 

CSSというフォルダの中にstyle.cssがあってもダメです。

 

外に出して、index.phpとstyle.cssを同じ場所に置きます。

 

index.phpは、自分の書いたindex.htmlの拡張子をphpに変えるだけです!

 

style.cssは、すでにあればそのままで、違う名前にしているのであれば、

中身は空でもいいので、style.cssという名前のファイルを作ればオッケー!

 

ひとまず、これで、テーマとして自分のファイルが認識されます。

 

【WordPressに必須のコード】

<?php wp_head(); ?>


<?php wp_footer(); ?>

この2つのコードが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のコードです!っていう意味です。

 

【サイトを見てみる】

画像4

さぁ、管理画面から、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=画像1">


というコードは、

<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のテンプレートタグ】

画像3

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

 

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

 

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

 

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

 

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

 

色々といじりましたが、実際にそこまで必要ありません。

 

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

 

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

 

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

 

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

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