【 WordPress 】 「 基 礎 編 」

WEB-designWordPress

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

 

目次

  • WordPressはPHP
  • WordPressのテーマの必須のファイル
  • 動作を確認
  • WordPressのテンプレートタグ

 

【 WordPressはPHP 】

画像2を拡大表示

 

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

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

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

 

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

 

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

 

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

 

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

それも使ったのですが、

より簡単に使えるものがあるので、ご紹介します。

 

【 LOCAL 】

http://LocalLocal WordPress development made simple on Local…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(); ?> を書く位置 

</head>上に書きます。

/* index.php */

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

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

 

<?php wp_head(); ?> 書く位置 

</body>タグの上です。

 

/* index.php */

 <?php wp_footer(); ?>

 </body>

 

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

思えば良いでしょう!

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

 

【 動作を確認 】

画像4を拡大表示

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

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

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

 

この理由は簡単!

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

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

 

通常であれば、

index.htmlからstyle.cssへリンクする場合

こんな感じだと思います。↓

/* index.html */
 <link rel="stylesheet" href="css/style.css">

index.htmlから見て、cssフォルダの中の、style.cssとリンクするという書き方。相対パスの書き方です。

 

 

WordPressでstyle.cssへリンクする場合

/* index.php */
 <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″>

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

なんと便利なPHP!

 

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

画像3を拡大表示

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

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

 

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

 

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

 

しかし、使うタグは、数十ほどです。

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

 

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

 

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

 

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

 

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

どのように書けば、その情報をget して、echo するのか! 

これを確認しながら、コーディングすると、理解しながらかけるので、良いですね!

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

 

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

 

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

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

 

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

 

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

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

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