ファイル準備 後編

➓style.css

cssファイル内にも画像等のファイル指定をしている場合はファイルパスのチェックが必要です。

パスが正しく通るか見直してください。
ワードプレス化してからチェックすることもできます。

ワードプレス化したあとなら目視でチェックができるので、わかりづらいようなら今はとばしても大丈夫です。

恐らくファイルパスを相対パスで指定していると思うのですが、現行サイトのファイル構造と今回のWordPress化するファイル構造が違う可能性があります。その場合はファイルパスを書き換えます。

相対パス？？

ファイルパスには絶対パスと相対パスがあります。
詳しくは下記の記事などがおすすめです。

【初心者向け】絶対パスと相対パスの違いをイラストを使って解説！｜webliker（ウェブ

htmlでファイルの読み込みをするのに必要な絶対パスと相対パスの書き方についてイラストを使ってわかり ...

 https://webliker.info/78726/

○○市△△町☆☆マンション203号室という住所が絶対パス
１階から見て「２階（１階上）の203号室」が相対パス

今回私の場合はファイル構造が違ったので修正します。

変更前

• cssフォルダ
  • style.css
• imageフォルダ
  • ***.jpg
  • ##.png　など

  background: url(../images/2924356_s.jpg);

style.css から見ると jpgファイルは「 ひとつ上の階層 の imageフォルダの中の jpgファイル」です。

変更後

• style.css
• imageフォルダ
  • ***.jpg
  • ##.png　など

  background: url(/images/2924356_s.jpg);

style.css から見ると jpgファイルは「 同じ階層 の imageフォルダの中の jpgファイル」です。

ファイルパスが違う場合は一括で直しちゃいましょう。

⓬page-menu.php

下層ページがない場合は読み飛ばしてね！

a) トップページの下層のMENUページのindex.html をコピーします。

冒頭の header 部分と最後の footer 部分は header.php と footer.php と同じなのでコピーしません。

    <?php get_header(); ?>
    <main>
        <article class="main_area" id="page_top">

<!-- 割愛 -->

        </article>
    </main>
    <?php get_footer(); ?>

ここでもお約束の <?php get header(); ?> と <?php get footer(); ?> が記述されています。

このコードがないと header.php と footer.php を呼び出せません。

b) トップページのときと同じようにファイルパスの記述の変更をします。

変更前

<img src="/image/aaa.png">

変更後

<img src="<?php echo get_template_directory_uri(); ?>/image/aaa.png>

<?php echo get_template directory uri(); ?>という記述を挿入ですね。
これをファイルパス記述をしている部分すべてに挿入します。

タイヘンだけど一括変換でがんばって！！

c) 前回ページ遷移の説明をしました。トップページと下層ページとの行き来です。
下層ページからトップページに戻る部分のファイルパスもphp用に修正します。

変更前

<a href="../index.html" class="more_btn">BACK TO TOP</a>

「BACK TO TOP」というボタンをクリックしたらトップページに飛ぶように指示しています。

変更後

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" class="more_btn">BACK TO TOP</a>

ページ遷移の決まり文句<?php echo esc url( home url( '/〇〇〇/#△△△’ )); ?>のurl()のカッコの中が '/’ です。
これがトップページに戻る記述です。

トップページに飛ぶときは<?php echo esc url( home url( '/’ )); ?>
トップページ以外に飛ぶときは<?php echo esc url( home url( '/〇〇〇/#△△△’ )); ?>　ですね。

d) 今回はもうひとつ追加するコードがあります。
<?php /* Template Name:menu */ ?>を冒頭に挿入します。

<?php /* Template Name:menu */ ?>
　<?php get_header(); ?>
    <main>
        <article class="main_area" id="page_top">

<!-- 割愛 -->

        </article>
    </main>
    <?php get_footer(); ?>

複数の下層ページがある場合、ここで設定した Template Name がWordPress画面で選択できるようになります。このページはこのテンプレート（ファイル）を使うよ、と指定ができます。

下層ページが複数ある場合は page-***.php を作成します。

❹js フォルダ

jsフォルダの中のJSファイルの修正をします。

app.js

変更前

$(function() {
    
    <!-- 割愛 -->


});

jsファイルの冒頭部分 $(function() の部分を jQuery(function($) に変更します。

変更後

jQuery(function($) {
    
    <!-- 割愛 -->


});

この記述の変更でjQuery がWordPressで動くはずなのですが、私の場合はうまくいきませんでした。

以下の記事を参考にしてheader.php の修正をしました。

【楽に解決！】WordPressのjQueryを使う方法と動かない時の解決策！プラグイン導入方

WordPressでjQueryを使う方法とうまく動かない時の解決策を解説しています。正しい使い方やうまく動か ...

 https://briarpatch.co.jp/wp-jquery

<?php
wp_deregister_script('jquery');
wp_enqueue_script('jquery', 'https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js', array(), '3.3.1');
?>

このコードを <?php wp_head(); ?> より前に記述します。

これでjQuery が動くようになりました。
実際にローカル環境でjQuery が反映されない（動かない）場合はこのコードを挿入してみてください。