wordpress トップページのレイアウト崩れを治そう
» STARTOUT詳細はこちら

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら
ここでは「WEB制作×事業づくり実践学習サービス STARTOUT」の学習コンテンツの一部を公開しています。もし1,000以上あるすべてのコンテンツを学び尽くしたい場合、ぜひこちらからご登録ください!

トップページのレイアウト崩れを治そう

WordPress|2018年10月19日

2018年10月19日
  • このエントリーをはてなブックマークに追加

前回のミッションで、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の概要をご理解頂いたところで、続きはまた次回。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳細はこちら
  • このエントリーをはてなブックマークに追加

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

ウエヤマ ショウタ

WEB制作 ✕ 事業づくり学習サービス「STARTOUT」|事業づくり実践学習サービス「WAREHOUSE」|教えない学校、IT留学シェアハウス「WORKROOM」|以上3つ運営してます。近々、上記の成果を束ねて、クリエイターと起業家が生まれ、事業が生み出され続ける町を作る人。ベルリンのホルツマルクトはロールモデル。

WEBサービスづくり学習「STARTOUT」はじめました!

自分の「WEBサービス」を作りながら「制作技術」を習得しよう!

STARTOUTとは、WEB制作×サービス作りのオンライン実践学習サービスです。ゼロからWEBサービスを作り、収益化しながら技術を習得してみましょう!

 詳しくはこちら