1つ前の記事:(2)トップページを作成し、サンプルのHTMLを配置してみる

弊社の無料お試し環境を利用してこの記事をご利用になっている方は、テンプレートのフォルダに今回の開始状態を「step3」、終わった状態を「step3-fine」としてセットしてありますので参考にして下さい。

entry3_img1

今回はWordPressテーマ上でのパス(ディレクトリ)の書き方について触れていきます。

テーマフォルダのパスについて

Webサイト上の各ファイルの置いてあるフォルダをパス(ディレクトリ)と呼びます。

通常のHTML上でも以下のようにリンク先など他のファイルなどを指定している場所があります。

上記の他にも、linkタグ、scriptタグなどなど、様々なところで、httpから始まる文字列、あるいは「/」やフォルダ名から始まる文字列で、別のファイルの場所を指し示していると思います。

利用するサンプルサイトのHTMLの中にも上記のようなリンクが記載されている箇所が多数あります。

しかし、ここで注意しなくてはならないことがあります。サンプルのHTMLやCSS,画像ファイルなどをコピーした場所は「wp-content/thmes/study」フォルダの中です。ですが、サイトのトップページは「/」直下です。

例えば、前回「wp-content/thmes/study/index.php」というファイルを設置しましたが、サイトを表示するときに利用するURLは「http://サイトのホスト名/」で、「http://サイトのホスト名/wp-content/thmes/study/index.php」ではありません。

このため、HTMLの中に、「css/style.css」というリンクが記載されていた場合、ブラウザは「http://サイトのホスト名/css/style.css」というファイルを探します。しかし、実際にファイルが有るのは「http://サイトのホスト名/wp-content/thmes/study/css」の下で、サイトトップ直下の「http://サイトのホスト名/css/」フォルダは存在しないため、表示できません。

entry3_img2

index.phpにindex.htmlの内容をコピーして実際に見てみましょう。

このように、CSSや画像などのファイルが読み込めていないので

entry3_img3

このように、画像も表示されず、スタイルも適用されていないページに見えてしまっています。

PHPプログラムの書き方とbloginfo関数

上記の問題を解決するためにWordPressでは、テーマフォルダまでのパスを自動的に埋めてくれる関数が用意されています。

上でコピーしたindex.phpファイルを開き、6行目の

の「css/style.css」のところを、

このように

というテキストを「css/」の前に、入れてみてください。サイトを表示してみると

entry3_img4

今度は、色やレイアウトが反映されています。この状態で、ブラウザからページを右クリックしてHTMLソースを見てみると、該当の6行目のところが

というように、httpからの表記に変わっています。

が「http://yta010.eyeta.jp/wp-content/themes/study」に置き換わっています。

この<?php〜?>で囲まれているエリアがPHPと言うプログラムの言語が書かれていることを表している箇所になります。この中に書かれている内容は次回から掘り下げていきますが、WordPressのテーマを作成すると言う作業はこの<?php〜?>といった記述をHTMLのコードの中に埋め込んでいく作業になります。

上記の流れを動画で見てみましょう。

次回はPHPの記載箇所をもう少し掘り下げて、bloginfoと書かれている部分の意味や使い方を説明していきます。

前の記事【(2)トップページを作成し、サンプルのHTMLを配置してみる】

次の記事【(4)PHPの関数の使い方をbloginfo関数を例にして触れてみる。】

この記事の目次はこちら