無料のHTML・CSSテンプレートをWordPress化する方法No.3(パスの書き換え)

OS:windws10 64bit
ブラウザ:Google Chrome Windows 版(10/8.1/8/7 64-bit)
MAMP:4.0.1
Atom:1.27.2

 

パスの書き換え

関連ファイル等のパスの書き換え

画像・・ /img〇〇.gif

CSS・・ /css/style.css

JS・・  /js/main.js

上記のようになっているファイルを

http://〇〇.com/wp-content/themes/mytheme/img/〇〇.gif

のようにフルパスに記述し直さないと表示されないので、赤文字の部分を吐き出すために以下のようなwordpressのコマンドを使います。

<?php echo get_template_directory_uri();?>

 

※末尾にスラッシュ( / )は含まれませんので必要に応じで補う必要があります。

header.phpにタグを挿入する

 

それでは、まずheader.phpのcssを

10行目の<link rel=”stylesheet” href=”css/common.css” type=”text/css” />

<link rel=”stylesheet” href=”<?php echo get_template_directory_uri();?>/css/common.css” type=”text/css” />

以下のように末尾に( / )を含めて入力します。

 

 

 

次に

11行目の<script type=”text/javascript” src=”js/jquery.js”></script>

12行目の<script type=”text/javascript” src=”js/common.js”></script>

19行目の<img src=”images/logo.gif” alt=”” /></a>

26行目の<img src=”images/btn_access.gif” alt=”お問い合わせ” class=”rollover” />

にも先ほどと同じように

<?php echo get_template_directory_uri(); ?>/

を挿入します。

挿入後は以下の通りです。

※線で囲むと文字が見えづらくなるので今回は枠で囲っていません。

よく見比べてくださいね。

確認が終わりましたら ctrl+s で保存します。

 

 

それでは、サイトを表示してみましょう。

現時点では、サイトのロゴなどお問い合わせの画像も表示されました。

 

 

top.phpにタグを挿入する

 

それでは次にtop.phpにも同じように今のタグを挿入していきます。

挿入する場所は

7行目の<img src=”images/icatch.jpg” alt=”” />

です。

<?php echo get_template_directory_uri(); ?>/

を挿入しましょう。

 

 

挿入が終わりましたら保存をして、以下の画像を右クリックしてディクスクップなどに保存します。

imgフォルダの中に上書きしてください。

フォルダの場所は

MAMP\htdocs\wordpress\wp\content\themes\mytheme\image

その中のicatch.jpgに上書きします。

※画像が黄色のままでよければ、そのままでもOKです。

 

 

上書きが終わりましたら、サイトを更新してみてください。

すると、今度はアイキャッチの画像と同じように表示されます。

 

サイト内リンクの書き換え

 

/insex.htmlのようになっているのを

http;//〇〇.com/about/

のようなフルパスに記述し直す必要があります。赤文字の部分を吐き出すために以下のようなwordpressのコマンドを使います。

 

<?php bloginfo(‘url’); ?>

※ドメインルートに展開している場合など書き直し不要な場合があります。

 

header.phpにタグを挿入する

 

Atomでheader.phpを開きます。

19行目にある<a href=”index.html“>はサイト内リンクですので、index.htmlの文字を削除して<?php echo home_url(); ?>を挿入します。

<a href=”<?php echo home_url(); ?>”> になります。

 

 

次に26行目の

<a href=”index.html“><img src=”<?php echo get_template_directory_uri();?>/images/btn_access.gif” alt=”お問い合わせ” class=”rollover” /></a>

はまず、index.htmlを削除し<?php echo home_url(); ?>/contact/

を挿入してください。固定ペーシのパーマリンクで設定したスラッグが入ります。

 

 

 

33行目の<a href=”index.html“>ホーム</a>

はindex.htmlを削除して<?php echo home_url(); ?>を挿入します

 

34行目の<a href=”sample.html“>新着情報</a>は

お問い合わせのときと同じように、スラッグが入りますので

<a href=”<?php echo home_url(); ?>/news/”>新着情報</a>

となります。

 

35行目の<a href=”index.html“>サービス・設備</a>

のスラッグはservise-facilityで設定してますので

<a href=”<?php echo home_url(); ?>/servise-facility/”>サービス・設備</a>

となります。

 

36行目の<a href=”index.html“>客室・料金</a>

のスラッグはroom-priceで設定していますので

<a href=”<?php echo home_url(); ?>/room-price/”>客室・料金</a>

となります。

 

37行目の<a href=”index.html“>料理</a>

のスラッグはfoodで設定していますので

<a href=”<?php echo home_url(); ?>/food/>料理</a>

となります。

 

38行目の<a href=”index.html“>アクセス</a>

のスラッグはaccessで設定していますので

<a href=”<?php echo home_url(); ?>/access/>アクセス</a>

となります。

 

最終的には以下の画像のようになります。

 

index.phpにタグを挿入する

 

前回同様、以下のindex.htmlを削除し <?php echo home_url();?> を挿入します。

4行目<a href=”index.html“>HOME</a> は

<a href=”<?php echo home_url(); ?>”>HOME</a> となります。

 

13行目<a href=”index.html“>&raquo; インデックスページに戻る</a> は

<a href=”<?php echo home_url(); ?>”>&raquo; インデックスページに戻る</a> となります。

 

 

sidebar.phpにタグを挿入する

 

今度は、sidebar.phpの書き換えをしていきます。

書き替えをするのはaタグ内のindex.htmlを削除し以下のコードにスラッグを付与して書き換えましょう。

<?php echo home_url(); ?>/スラッグ/

以下の画像は書き換え前の画像です。

今回書き換えるのは以下のコードです。

5行目 <a href=”index.html“>インターネット</a> スラッグは internet
6行目 <a href=”index.html“>温泉</a>      スラッグは hot-spring
7行目 <a href=”index.html“>ラウンジ</a>    スラッグは lounge
13行目 <a href=”index.html“>マッサージ</a>   スラッグは    massage
14行目 <a href=”index.html“>エステ</a>               スラッグは  beauty

書き替え後のサンプルは以下の画像のようになります。

 

 


次回はwordpressで必須なダグとループ処理について解説します。

 

にほんブログ村 IT技術ブログへにほんブログ村 IT技術ブログ WordPressへ

役に立ったら共有してね

コメントを残す

メールアドレスが公開されることはありません。

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)