ファイル準備 後編

2021-01-29WordPress化,WordPress作成,作り方,ホームページ,ウェブサイト作成,WordPress学習,php,vscode,WordPress,WordPress化,初心者向け

WordPress化のステップ3

ファイルの準備 後編


【初心者向け】
ワードプレスでウェブサイト作成
親切丁寧にナビゲート♪

WordPress化へのステップ3です。

ファイル準備の後編です。あと少し。がんばりましょう💪

バディのクリス

今回でファイル準備が出来上がるよ!

今回のMENU

ファイルの修正

前回までのデスクトップ下の新規フォルダ内の内容です。

  • image フォルダ →準備OK!
  • js フォルダ
  • font フォルダ →準備OK!
  • header.php →準備OK!
  • index.php → front-page.php にファイル名変更、準備OK!
  • -1 index.php (空ファイル) →準備OK!
  • footer.php →準備OK! 
  • style.css
  • function.php →準備OK!
  • page-menu.php
バディのクリス

残りはだね! がんばろっ♬

style.css

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

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

snow

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

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

バディのクリス

相対パス??

用語集

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

マンションで例えると

○○市△△町☆☆マンション203号室という住所が絶対パス
1階から見て「2階(1階上)の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ファイル」です。

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

バディのクリス

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

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(); ?> が記述されています。

snow

このコードがないと 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()のカッコの中が '/’ です。
これがトップページに戻る記述です。

snow

トップページに飛ぶときは<?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 の修正をしました。

<?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 が反映されない(動かない)場合はこのコードを挿入してみてください。

これでファイルの準備ができました!!

お疲れ様でした!!

  • image フォルダ →準備OK!
  • js フォルダ →準備OK!
  • font フォルダ →準備OK!
  • header.php →準備OK!
  • front-page.php →準備OK!
  • -1 index.php (空ファイル) →準備OK!
  • footer.php →準備OK!
  • style.css →準備OK!
  • function.php →準備OK!
  • page-menu.php →準備OK!

ファイルの数が少なくないので大変でしたね。WordPress化でうまく表示できないときはこれらのファイルの修正が正しくできているかチェックするといいと思います。

今回はここまでにしますね。

バディのクリス

お疲れ様! がんばったね🐾

今回のまとめ

わかりづらい点、うまくいかなかった箇所などありましたらお知らせください。   コメント欄へ

WordPress化への遥かなる道のステップ3 でした。

準備したファイルを移行! します。

趣味で源氏物語を【超訳】しています。
 話し言葉でお気軽GENJI

 よかったら遊びにきてください。

小倉百人一首も【超訳】しています。
 話し言葉でお気軽 OGURA

 よかったら遊びにきてください。