2013年07月13日 追記・変更

WordPressの管理画面の「外観」→「テーマ」で新テーマを有効化

先ほどの解説ページで製作した新テーマをWordPressに適用させる。
orijinal5_1
新テーマが適用された。
orijinal5_2

サイトの表示内容を確認する

それでは早速、http://localhost/wordpress/をブラウザで開く。
新テーマを有効化して、サイトを閲覧すると下記のように表示される。
orijinal5_3 現在、「スタイルシート」が読み込めていない状態となっている。
そのため、サイトのデザインが崩れてしまっている。
ページのソースを確認してもらうと分かるのだが、これはファイルの指定位置が相対パスとなっているためだ。
WordPressのテンプレートタグを使うと、そのテーマ毎の絶対パスや、WordPressの入力内容等を出力出来る。オリジナルテーマ作成は、テンプレートタグを利用してテンプレートの書き換えを行う。

http://localhost/wordpress/のページソースを確認する

9行目のスタイルシートの指定先が相対パスで「style.css」となっている。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="ja" lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<meta name="description" content="このサイトはサンプルサイトです。" />
<meta name="keywords" content="サイト,サンプル,テストサイト" />
<link rel="stylesheet" href="style.css" type="text/css" />

<title>サンプルブログサイト</title>
</head>

<body>
<div id="wrapper">
現在、スタイルシートの指定先が「http://localhost/wordpress/」から見て、相対パスでstyle.cssとなっている。
これは、ファイルの位置の指定先が「http://localhost/wordpress/style.css」という事と同じだ。
現在、指定したディテクトリ内に「style.css」が存在していないので、ファイルの読み込みが出来ていない状態となっているのだ。
また、管理画面に移動するための上部ツールバーが出ていないのが分かるだろうか?
これは、WordPressのツールバー表示記述を行っていないためだ。
この部分の説明は後述するので、今は無視してもらいたい。
軽く説明をしておくと、タグの前にと、タグの前にを記述するとツールバーが表示されるようになる。
現在はツールバーの表示はされていなくて問題ない。
orijinal5_4

この記事が気に入ったら下のボタンをクリック

  • このエントリーをはてなブックマークに追加
  • Clip to Evernote
  • LINEで送る


Leave a Reply