前回のミッションで、WordPressのインストールはできたかと思います。
ただ、実際に表示してみると、レイアウトが崩れていたはずです。
画像が表示されていなかったり、CSSが効いていなかったり。
コーディングした状態からは、かけ離れていたのではないでしょうか。
丁度、下記のような感じです。
では、どうすればレイアウト崩れを直し、デザイン通りに表示させられるのでしょう。
この問題に対応するには、WordPressの構造を理解する必要があります。
WordPressのテーマファイルが実際にある場所を考えてみましょう。
これは、前回もお話しましたが、wp-content/themes/の中ですね。
より詳しく言えば、オリジナルテーマのフォルダ名は「originaltheme」ですので、その中です。
ファイルが実際に存在する場所は「wp-content/themes/originaltheme/」の中なのです。
では、トップページのURLを見ると、どこを示しているでしょうか。
もちろんドメインそのものであり、abcde.comであればabcde.comになります。
実際に存在しているファイルのURLと、表示されているURLが違うのです。
強制的に、実際にファイルが存在するURLからトップページのURLに変換されているんですね。
こうなると、当然、画像やCSSのパスも変えなければなりません。
例えば「img/a.png」という画像がトップページにあったとします。
すると「abcde.com/img/a.png」から画像を引っ張ることになりますが、ここには何もありません。
実際に画像があるのは「abcde.com/wp-content/themes/originaltheme/img/a.png」の中です。
これでは、画像もCSSも表示されるはずはありませんよね。
パスを通そう
分かりづらいと思うので、改めてご説明します。
実際のテーマがある場所は http://abcde.com/wp-content/themes/originaltheme/ の中です。
しかし、トップページが表示されているのは、http://abcde.com/ です。
このようにWordPressは、表示する時ファイルがある位置からURLを強制的に変換しています。
画像やCSSをまともに反映するならば、例えば下記のようなURLになるはずです。
http://abcde.com/wp-content/themes/originaltheme/img/top_img.jpg
直接、originalthemeの中まで、パスを通さなければなりません。
では、トップページのソースコードを見るとどうなっているでしょう。
多くの場合が下記のようになっているはずです。
http://abcde.com/img/top_img.jpg
WORDPRESSのテーマがある場所に、パスが通って無いんですね。
/wp-content/themes/originaltheme/が抜けています。
そこに画像やCSSなんて無いよ！ということになります。
画像やCSSのパスを通してあげなければなりません。
ただ、そのまま長ったらしいパスを書くと後が面倒です。
例えば、テーマフォルダの名前が変わったりした時を考えてみてください。
すべてのタグを書き直さなければならない、なんて苦痛を強いられるでしょう。
そこで、WordPressには下記のような、便利なタグがあります。
<?php bloginfo('template_directory'); ?>
これは何かというと、/wp-content/themes/originaltheme/ の部分を出力してくれるタグです。
実際に使う時は、下記のようになります。
<img src="<?php bloginfo('template_directory'); ?>/img/common/logo.png" alt="" />
おわかり頂けましたでしょうか。
こうしてタグを埋め込むことによって、パスが通り、画像が表示されます。
もちろんcssやJavaScriptなど、外部ファイルにパスを通す必要のある箇所には全て必要です。
ただ、全部のタグを1つ1つ修正するとなると、面倒かもしれません。
そんな時に使えるのがエディタの置換機能です。
指定した文字列を一気に別の文字列に差し替える機能になります。
例えば、画像のパスを一気に置換したいのであれば、
src="img/
というタグを
src="<?php bloginfo('template_directory'); ?>/img
に一括で置換すれば可能ですね。
一気に全部治すことができれば、たいして時間もかかりません。
お使いのエディタで置換機能を探してみてください。
なお、今回は画像のパスを通しましたが、CSSやJavaScriptも同じです。
CSSやJavaScriptなど、外部からファイルを読んでいる場合は全てパスを通してください。
<link href="<?php bloginfo('template_directory'); ?>/css/common.css" rel="stylesheet" type="text/css">
CSSの場合はこんな感じですね。
基本的にCSSやJavaScriptはheadの中に書いてあるはずです。
headの中はこれまであまり触らなかった人もいるかもしれませんね。
head内の編集に慣れていない方もいるかもしれませんが、この機会に慣れましょう。
パスを通し、ファイルをアップロードしましょう。
アップロードしたらトップページを表示させてみてください。
レイアウト崩れもなく、しっかりと表示されるようになりました。
もし、まだレイアウトが崩れているようであれば、cssやjs、imgのパスを見直してみてください。
どこかに必ず、パスが正しくないなどの凡ミスが隠されているはずです。
ひとまずこれで、トップページは表示されたのでは無いでしょうか。
ただ、もちろんWEBサイトはトップページだけで成り立っているわけではありません。
トップページ以外の他のページも表示させる必要がありますね。
他のページを表示するためには、WordPressをより深く知る必要があります。
それは、また次回から順にご説明させていただきます。
WordPress化の基本
先程のパスのように、WordPressには特殊なタグがたくさん用意されています。
例えば、ブログ記事のタイトルを表示するタグや、本文を表示するタグ。
更新日時を表示するタグや、ユーザー名を表示するタグ。
こうした役割を持つタグが、膨大に存在しているのです。
WordPressは、独自に作られたphpのタグを使って作っていきます。
WordPress独自のタグも、元はphpで作られています。
ただ、「このタグを使えばこうした処理ができるよ」と簡略化してくれているんですね。
他に長ったらしい処理があって、タグがその処理を呼び出しているイメージです。
なので、基本的にphpがあまり分からなくても、作ることができます。
もちろんphpでカスタマイズは出来ますが、シンプルな内容であれば意識しません。
ここがWordPressの素晴らしいところですね。
また、全てのタグの機能を暗記する必要もありません。
都度「これを作るにはどんなタグが必要か」を調べれば良いのです。
タイトルを表示させるタグは何か。
ブログ一覧を表示させるためのタグは何か。
カテゴリを表示させるためのタグは何か。
すべてGoogle先生に聞くことで教えてくれます。
検索しながら作っていけば、そこまで悩まずに作れるはずです。
なんとなく、イメージ出来ましたでしょうか？
ひとまずWordPressの概要をご理解頂いたところで、続きはまた次回。