【 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

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

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

 

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>の上に書きます。

/* 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=画像１”>

というコードは、

<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 するのか！　

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

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

 

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

 

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

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

 

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

 

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

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

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