ファイル準備 前編
WordPress化のステップ２
ファイルの準備 前編
【初心者向け】
ワードプレスでウェブサイト作成
親切丁寧にナビゲート♪
WordPress化へのステップ２です。
今まで使用していたファイルをWordPress用に修正、追加します。
前後編に分けて紹介しますね。
用意するファイル
現在のサイトのファイル構成です。
- ① index.html （トップページ）
- ② index.html （下層ページ）
- ③ image フォルダ （画像、ロゴ）
- ④ jsフォルダ
- ⑤ style.css （cssファイル）
- ⑥ font フォルダ
これらをWordPress用に移行、または修正してから移行します。
ファイルの引っ越し！！
ファイルの修正等はエディタで行います。
いろいろな種類がありますが、私は vscode を使っています。
https://skillhub.jp/blogs/235デスクトップに新規フォルダを作成します。
私は four seasons という名前にしました。（今回WordPress化する架空の飲食店名）
まずここにフォルダをコピーします。
- ③ image フォルダ →準備OK！
- ④ js フォルダ
- ⑥ font フォルダ →準備OK！
次はファイルの修正です！
ひとつずつ書いていきますね。
初心者の私もできました♬
ファイルの新規追加
ファイルの新規追加をします。
vscode での画面表示も出てきますが、お使いのテキストエディタに置き換えて読み進めてください。
- header.php
- index.php
- footer.php
- style.css
- function.php
- page-***.php ※
これらのファイルを新規作成します。
中身は空でOKです。
vscode でのファイルの作り方はさきほどの参考サイトに動画がのっています。
※ page-***.php は下層ページの数だけ必要になります。
題材では下層ページを１ページ作ります。
*** は任意の名前をつけてください。
今回はMENUページなので page-menu.php とします。
ワードプレストレーニングで下層ページがない場合はなしで大丈夫です。
ファイルの作り方
https://skillhub.jp/blogs/235
- ❸ image フォルダ →準備OK！
- ❹ js フォルダ
- ❻ font フォルダ →準備OK！
- ❼ header.php
- ❽ index.php
- ❾ footer.php
- ➓ style.css
- ⓫ function.php
- ⓬ page-menu.php
ファイルの修正
⓫function.php
さきほど新規追加したfunction.phpにcssファイル、JSファイル読込設定の記述をします。
<?php function my_scripts() {
// css,js の読込
wp_enqueue_style( 'style-name', get_template_directory_uri() . '/css/style.css', array(), '1.0.0', 'all' );
wp_enqueue_script( 'script-name', get_template_directory_uri() . '/js/app.js', array( 'jquery' ), '1.0.0', true );
}
add_action( 'wp_enqueue_scripts', 'my_scripts' );
➓style.css
cssファイルは下記のコードを先頭にコピーします。
/*
Theme Name: four seasons
*/four seasons の部分はご自身のテーマ名に置き換えてください。
さきほど作成したデスクトップ下の新規フォルダ名などわかりやすい名前がいいと思います。
テーマ名ってなに？
ワードプレス編集編で説明していますが、今はコピペで進んでも大丈夫です。
コピペができたら現在のcssファイル⑤ style.cssの内容をすべてコピーします。
あとでもう少し修正しますが、ひとまず➓ style.css はここまでにします。
❽index.php
index.php はまず ① index.html を全コピーします。
ここから ❽ index.phpの修正が続きます。
ゆっくりひとつずつクリアしていきましょう。
ぼくも応援しているからね！ 大丈夫だよ！！
a) </head>の直前に<?php wp-head(); ?>を挿入します。
<?php wp_head(); ?>
</head>b) </body>の直前に<?php wp-footer(); ?>を挿入します。
<?php wp_footer(); ?>
</body>c) <head> 部分の stylesheet 、 responsive 記述の変更をします。
変更後の記述をコピペでOKです。
変更前
<link rel="stylesheet" href="CSS/style.CSS">
<link rel="stylesheet" href="CSS/responsive.CSS">変更後
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/CSS/style.CSS" type="text/CSS" >
<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/CSS/responsive.CSS" type="text/CSS">同じように<head>部分の href="ファイル名" の部分を
href="<?php echo get_template directory _uri(); ?>ファイル名"に修正します。
d) 画像などのファイルパスをWordPress用に変更します。
ファイルパスとはファイルがどこにあるか記述してある部分です。ファイルの住所ですね。
変更前
<img src="/image/aaa.png">変更後
<img src="<?php echo get_template_directory_uri(); ?>/image/aaa.png><?php echo get_template directory uri(); ?>という文言を追加します。
これをファイルパス記述をしている部分すべてに挿入します。
src=" の部分を一括置換すると便利！
e) ページ遷移のファイルパス修正
ページ遷移が必要ない方は読み飛ばしてくださいね。
今回の題材サイトではトップページからMENUページに飛んでより詳しいメニューをみることができます。
逆にMENUページからトップページに戻ることもできます。
よくある一般的なサイトでもトップページ以外にも詳細な商品ページ、ブログページ、会社概要ページなどいろいろなページがあると思います。
それらのページを行き来することをページ遷移と言います。
このページ遷移にもファイルパスが記述されているのでWordPress用にします。
こちらの記事を参考にさせていただきました。
https://delaymania.com/201606/wordpress/wordpress-home-url/トップページから子階層ページへ
変更前
<a class="dropdown_trigger" href="./child_menu_html/index.html#new">IT'S A NEW!!</a>子階層フォルダ(child_menu_html) の index.html の new という部分に飛ぶように指示しています。
変更後
<a class="dropdown_trigger" href="<?php echo esc_url( home_url( '/menu/#new' ) ); ?>">IT'S A NEW!!</a>href= の後ろが変更されています。<?php echo esc url(home url('/○○〇/#△△△’)); ?>は決まり文句です。〇〇〇には遷移先のページ名を書きます。題材ではMENUページですので menu というページ名にしています。menu の後ろの #new はメニュー画面の new という部分（セクション）を指定しています。♯がない場合はそのページのトップ部分を表示します。
〇〇〇っていう家の△△△の部屋って教えてあげているんだね。
子階層ページからトップページへは次回ファイル準備後編で説明しています。
少し大変でしたね。大丈夫でしょうか。
マッサージしながら、休憩しながらいきましょう。
首のマッサージ器がパソコン作業の相棒です♬
ぼくが相棒じゃないの？？
ごめん、ごめん💦
最高のバディはくーちゃんよ！！
f) index.php の分割
index.php の冒頭から</header>部分までを ❼ header.php に移植します。
カット＆ペーストですね。
❼header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<meta name="description" content="架空サイト four seasons 美味しい時間を過ごしていただけるお店づくりを目指しています。">
<!-- 割愛 -->
<?php wp_head(); ?>
</head>
<body>
<header>
<!-- 割愛 -->
</header>どのページでも共通に使用する部分です。一般的にはヘッダー部分までの場合が多いようです。❼ header.php は基本的にはこれでOKです。
今 header.php に切り取ってきた❽ index.php の箇所に次の文言を記述します。
これもお決まりのコードです。
❽index.php
<?php get_header(); ?>
<main>index.php の冒頭部分がこの記述になります。
まずはheader.php を読み込んでね！ という指示ですね。
次は index.php 最後の部分 <footer> から最後までを ❾ footer.php に移植します。
❾footer.php
<footer>
<!-- 割愛 -->
</footer>
<!-- 割愛 -->
<?php wp_footer(); ?>
</body>
</html>header.php と同じく画面共通のフッター（下部）部分ですね。footer.php はこれでOK👌
footer.php に切り取った部分（❽ index.php の最後の部分）にコードを追加します。
❽index.php
</main>
<?php get_footer(); ?>ここまで指示をこなしたら footer.php を読み込んでね！ ですね。
index.php のファイル名をfront-page.php に変更します。
これは必須ではありません。index.php のままでも構いません。
私は学習時に front-page.php で演習をしました。
理由は少し長くなるのでここでは省略します。
front-page.php にファイル名を変更した場合は
空ファイルでいいので index.php を作成しておきます。
お疲れ様！！ index.php の修正が終わったよ♬
- ❸ 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
ファイルの準備、もう少し続きます。
今回はここまでにしますね。
最後まで読んでくれてありがとう！
もう少しだから頑張ろうね🐾
わかりづらい点、うまくいかなかった箇所などありましたらお知らせください。 コメント欄へ
WordPress化への遥かなる道のステップ２ でした。
次回がファイルの準備後編です。
もう少しお付き合いくださいね。
STEP3
ファイルの準備 後編
趣味で源氏物語を【超訳】しています。
話し言葉でお気軽GENJI
よかったら遊びにきてください。
小倉百人一首も【超訳】しています。
話し言葉でお気軽 OGURA
よかったら遊びにきてください。
