はじめに
今回の記事は、前回の【ローカル環境へWP構築手順について】の続きとなります。
本記事の流れを先に記載しますので、Local by Flywheelのインストールがまだの方は、
前回の記事を参考にしてみてください。
1.自身で作成したHTML/CSS フォルダはどこに配置するのか
2.フォルダ配置後にまず、やるべきことについて
3.WP特有のテンプレート構文を理解する上で本当にお勧めの動画紹介
※Youtubeなので無料です。
前提条件
・Local by Flywheelがインストール済みであること
・HTML/CSS で作成した何かしらのポートフォリオがあること
私が作成したポートフォリオのフォルダ構成はこのようになっております。
※本記事でWP化していくにあたり、jsフォルダやSCSSフォルダなどは
必須ではありません。あくまでhtmlファイルとCSSファイルのみご準備
いただければと思います。
Local by Flywheelインストール後まずやるべきこと①作成したHTML/CSSファイルの設置
Local by Flywheelインストール後にWPの管理画面→外観→テーマと進むと
このサイトでどのテーマを有効にするのか選択することが出来ます。
WPテーマの詳細につきましては、下記をご参照ください。
https://hnavi.co.jp/knowledge/blog/160120/
WPが販売している有料テーマなどもありますが、今回は皆さんが作成された
HTMLファイルをWP化していくので、いわゆるオリジナルテーマを作成していく形となります。
現状、使用できるテーマの一覧はこのようになっていると思います。
ここにオリジナルテーマの項目を追加して、有効化出来るようにしていきます。
早速、フォルダの配置場所についてお伝えします。(私の環境の場合)
/Users/user/Local Sites/samplesite/app/public/wp-content/themes/Sample_Site
Local by Flywheelの下記ボタンをクリックするとLocal Sites/samplesite/配下の
フォルダ群が表示されるのでここからthemesフォルダまで進むのが分かりやすいと思います。
themesフォルダにSample_Siteフォルダを設置
現在の私のSample_Siteフォルダの中身はこのようになっています。
実はここに配置しただけでは、WPがテーマとして認識してくれません。
テーマとして認識させる為に必要な作業は下記になります。
①index.phpをルートフォルダ配下に設置。（index.htmlをindex.phpに拡張子変更）
②style.cssをルートフォルダ配下に設置。
※既にstyle.cssをルート配下に設置されている方はそのままでOKです。
私のフォルダ構成の場合は、CSSフォルダ配下にstyle.cssを設置している為、
別途設置が必要となります。
③style.css内にコメントアウトさせた形で、下記情報を記述してください。
※Versionは使用しているWPのバージョンを記載します。
WP管理画面→左上のWPマークをhover→WordPressについてをクリックすると確認できます。
再度WPのテーマ一覧画面を確認すると記述した情報が反映されているのが分かります。
今のままでもテーマとして有効化は出来るのですが、
テーマとしての画像がないとどんなテーマなのかイメージしづらいですよね。
なので、screenshot.pngという名前の画像ファイルをルートフォルダ配下に配置してください。
私は、最近筋トレが趣味になりつつあるのでパワフルな画像を配置しました！
これでこのテーマを有効化するとどんなサイトが表示されるのかイメージがつきやすいですよね。
では、早速配置したオリジナルテーマを有効化して、サイトを表示させてみましょう！
...あれ？デザインが崩れまくっている。。。となるかと思います！
一瞬ヒヤリとしますが、大丈夫です。
ここから更に修正を加えていきます！
Local by Flywheelインストール後まずやるべきこと②index.phpの修正
先程の画像で確認した通り、今のままではレイアウトは崩れていますし、
WordPressの良さを何も活かせていない状況です。
一つずつ解決していくのですが、
まずはテンプレート化というのをしていこうと思います。
実はWordPressには、あらかじめ決まったファイル構造があります。
トップページとは別の固定ページ(お問い合わせページや会社概要ページetc)は、
page.phpに記載。
記事の詳細ページはsingle.phpに記載などページの種類に応じて、
ファイルを作成して内容を記述していくのですが、
毎回同じ記述が必要な箇所が出てきますよね。
そうです！例えば、ヘッダーやフッターなどのパーツです。
WordPressではテーマを作る際、役割ごとにphpファイルを分割して、
管理しやすくすることができます。
その分割されたファイルをテンプレートと呼びます。
ヘッダーをheader.php、フッターをfooter.phpに記述することで、
毎回同じ記述をしなくてもテンプレートファイルを呼び出せば良いという形になります。
では、早速ヘッダーからテンプレート化していこうと思います。
※本記事では深く触れませんが、テンプレート階層というのは非常に重要な概念です。
谷口誠さんの動画がわかりやすいので、共有いたしますね。
https://tomosta.jp/blog/wordpress-temlate-tree/
先に現在の私のindex.phpのファイル内容を共有いたします。
index.php
<!-- header.phpに転記する。ここから -->
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample_Site</title>
<link
rel="stylesheet"
type="text/css"
href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"
/>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"
/>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"
integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
crossorigin="anonymous"
></script>
<script
type="text/javascript"
src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"
></script>
<script src="./js/script.js"></script>
<script src="./js/wow.min.js"></script>
</head>
<body>
<header class="header">
<div class="header-fixed">
<hi class="header-logo"
><img src="./image/logo.png" alt="SPAアイコン"
/></hi>
</div>
<div class="nav header-nav" id="nav">
<nav class="nav-wrap">
<ul class="nav-list">
<li class="item"><a href="#">施設予約</a></li>
<li class="item"><a href="#">ニュース</a></li>
<li class="item"><a href="#">よくあるご質問</a></li>
<li class="item"><a href="#">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
<!-- header.phpに転記する。ここまで -->
<main>
<div class="top">
<div class="top-title">Sample<br />Sports_Amusement_Park</div>
</div>
<section class="features cmn-section -black">
<div class="inner">
<h2 class="cmn-title">
<span class="main">SAPの特徴</span>
<span class="sub">features</span>
</h2>
<div class="features-cont">
<ul class="features-list">
<li
class="features-item wow animate__animated animate__fadeIn"
data-wow-offset="100"
>
<div class="text">
<div class="title">
国内・外のプロサッカー選手を支援。<br />
有名選手と触れ合える機会をご提供します。
</div>
<p class="desc">test</p>
<div class="features-link cmn-link">
<a href="#">イベントの詳細</a>
</div>
</div>
<div class="image">
<img src="./image/soccer.jpg" alt="サッカーイベント" />
</div>
</li>
<li
class="features-item wow animate__animated animate__fadeIn"
data-wow-offset="100"
>
<div class="text">
<div class="title">
bjリーグを全面支援。<br />
国内のプロリーグを盛り上げております。
</div>
<p class="desc">test</p>
<div class="features-link cmn-link">
<a href="#">イベントの詳細</a>
</div>
</div>
<div class="image">
<img src="./image/basketball.jpg" alt="バスケイベント" />
</div>
</li>
<li
class="features-item wow animate__animated animate__fadeIn"
data-wow-offset="100"
>
<div class="text">
<div class="title">テニスプレイヤーを目指す皆様を支援</div>
<p class="desc">test</p>
<div class="features-link cmn-link">
<a href="#">イベントの詳細</a>
</div>
</div>
<div class="image">
<img src="./image/tennis.jpg" alt="テニスイベント" />
</div>
</li>
</ul>
</div>
</div>
</section>
<section class="plan cmn-section -black">
<div class="inner features-item wow animate__animated animate__fadeIn">
<h2 class="cmn-title">
<span class="main">おすすめのプラン</span>
<span class="sub">recomened plan</span>
</h2>
<div class="rec service">
<div class="service-wrap">
<ul class="service-list">
<li class="service-item">
<div class="text">
<div class="title">各種限定シューズの販売</div>
<p class="desc">test</p>
</div>
<div class="image">
<img src="./image/shoes.png" alt="限定シューズのロゴ" />
</div>
</li>
<li class="service-item">
<div class="text">
<div class="title">筋トレグッズの販売</div>
<p class="desc">test</p>
</div>
<div class="image">
<img src="./image/muscle.png" alt="筋トレグッズのロゴ" />
</div>
</li>
<li class="service-item">
<div class="text">
<div class="title">ユニフォーム</div>
<p class="desc">test</p>
</div>
<div class="image">
<img src="./image/uniform.png" alt="ユニフォームのロゴ" />
</div>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="blog cmn-section -black">
<div class="inner features-item wow animate__animated animate__fadeIn">
<h2 class="cmn-title">
<span class="main">ブログ</span>
<span class="sub">blog</span>
</h2>
<div class="blog-cont">
<dl class="blog-list">
<div class="row">
<dt>イベント</dt>
<dd>
<a href="#">U-24サッカー代表メンバー</a>
</dd>
</div>
<div class="row">
<dt>イベント</dt>
<dd>
<a href="#">スポーツウェア&シューズ全品SALE</a>
</dd>
</div>
<div class="row">
<dt>イベント</dt>
<dd>
<a href="#">NBA選手来日</a>
</dd>
</div>
<div class="row">
<dt>お知らせ</dt>
<dd>
<a href="#">限定シューズ8月入荷予定</a>
</dd>
</div>
</dl>
<div class="blog-link cmn-link"><a href="#">もっと見る</a></div>
</div>
</div>
</section>
<section class="faq cmn-section -black">
<div class="inner features-item wow animate__animated animate__fadeIn">
<h2 class="cmn-title">
<span class="main">よくある質問</span>
<span class="sub -faq">FAQ</span>
</h2>
<div class="faq-cont">
<ul class="faq-list">
<li class="faq-item">
<a href="javascript:void(0)" class="title js-accordion">
<p>Q. プロ選手との体験コースは未経験でも大丈夫でしょうか？</p>
</a>
<div class="detail">
<p>A. test</p>
</div>
</li>
<li class="faq-item">
<a href="javascript:void(0)" class="title js-accordion">
<p>
Q.
シューズの限定モデルは入荷時にメールもらうことは可能でしょうか？
</p>
</a>
<div class="detail">
<p>A. test</p>
</div>
</li>
<li class="faq-item">
<a href="javascript:void(0)" class="title js-accordion">
<p>Q.プロ選手からサインをもらうことは可能でしょうか？</p>
</a>
<div class="detail">
<p>A. test</p>
</div>
</li>
</ul>
</div>
</div>
</section>
<!-- footer.phpに転記する。ここから -->
<footer class="footer">
<div class="inner features-item wow animate__animated animate__fadeIn">
<nav class="wrap">
<ul class="nav-list">
<li class="nav-item"><a href="#">利用規約</a></li>
<li class="nav-item"><a href="#">プライバシーポリシー</a></li>
<li class="nav-item"><a href="#">個人商取引法に基づく表記</a></li>
<li class="nav-item"><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<div class="footer-logo">
<img src="./image/logo.png" alt="SPAアイコン" />
</div>
<p class="copyright">
Copyright (c) 2021 Sample_Site All Rights Reserved.
</p>
</div>
</footer>
</main>
</body>
</html>
<!-- footer.phpに転記する。ここまで -->
それではヘッダー、フッターの該当箇所を切り取って転記していきます。
※切り取る箇所は人によって若干異なります。
私の場合はheader.phpは、最初からheadeタグの終わりまで。
footer.phpはfooterタグから記述の最後までという形にしています。
header.php
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Sample_Site</title>
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.css"/>
<link rel="stylesheet" href="./css/reset.css" />
<link rel="stylesheet" href="./css/style.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<script type="text/javascript" src="//cdn.jsdelivr.net/npm/slick-carousel@1.8.1/slick/slick.min.js"></script>
<script src="./js/script.js"></script>
<script src="./js/wow.min.js"></script>
<?php wp_head(); ?>
</head>
<body>
<header class="header">
<div class="header-fixed">
<hi class="header-logo"><img src="<?php echo get_template_directory_uri();?>/image/logo.png" alt="SPAアイコン"/></hi>
<!-- <hi class="header-logo"><img src="/image/logo.png" alt="SPAアイコン"/></hi> -->
</div>
<div class="nav header-nav" id="nav">
<nav class="nav-wrap">
<ul class="nav-list">
<li class="item"><a href="<?php echo home_url(); ?>">施設予約</a></li>
<li class="item"><a href="<?php echo home_url(); ?>">ニュース</a></li>
<li class="item"><a href="<?php echo home_url(); ?>">よくあるご質問</a></li>
<li class="item"><a href="<?php echo home_url(); ?>">お問い合わせ</a></li>
</ul>
</nav>
</div>
</header>
ここでのポイントは3点です。
①<?php wp_head(); ?>を</head>タグ直前に記述する。
これは、WPの仕様の部分なので、必ず記述するようにしましょう。
記述もれがあるとプラグインが上手く動かないなどのバグが生じる可能性があるようです。
②<?php echo get_template_directory_uri();?>の活用
いきなり見慣れない記述が出てきたと思いますが、こちらはWPが用意している
テンプレートタグというPHPの関数です。
WPに置く前のimg要素のファイルパスは./image/ という形だったと思います。
しかし、WP上で読み込ませる為には、下記のようなパスにする必要があります。
http://samplesite.local/wp-content/themes/Sample_Site/image/logo.png
image外部ファイルから読み込みたびに、http://samplesite.local/wp-content/themes/Sample_Site
を記述していたら大変ですよね。
<?php echo get_template_directory_uri();?>を記述するとその部分を取得してきてくれるので、
<img src="<?php echo get_template_directory_uri();?>/image/logo.png" alt="SPAアイコン"/>
と記述することで、
画像の表示が可能になります。
img要素を使っている箇所は全て<?php echo get_template_directory_uri();?>を活用して書き直してください。
③<?php echo home_url(); ?>の活用
こちらのテンプレートタグを使うとサイトのトップページのURLに置き換わります。
主にaタグ内で使用します。
今回はページ遷移は想定していないのですが、
例えば/createというURL先に遷移させたいのであれば、
<?php echo home_url('create'); ?>とaタグに記述してください。
また、テンプレートタグは非常に便利ですが、種類が多くあるので、
実際に使いつつ徐々に慣れていくのが良いと思います。
下記に参考ページを記載いたします。
https://min-web.com/template-tag/#i
footer.php
<footer class="footer">
<div class="inner features-item wow animate__animated animate__fadeIn">
<nav class="wrap">
<ul class="nav-list">
<li class="nav-item"><a href="<?php echo home_url(); ?>">利用規約</a></li>
<li class="nav-item"><a href="<?php echo home_url(); ?>">プライバシーポリシー</a></li>
<li class="nav-item"><a href="<?php echo home_url(); ?>">個人商取引法に基づく表記</a></li>
<li class="nav-item"><a href="<?php echo home_url(); ?>">お問い合わせ</a></li>
</ul>
</nav>
<div class="footer-logo">
<img src="<?php echo get_template_directory_uri();?>/image/logo.png" alt="SPAアイコン" />
</div>
<p class="copyright">
Copyright (c) 2021 Sample_Site All Rights Reserved.
</p>
</div>
</footer>
</main>
<?php wp_footer(); ?>
</body>
</html>
ポイントはheaderの際とほぼ同じです。
<?php wp_footer(); ?></body>の直前に記述をしましょう！
header.phpとfooer.phpが作成できた後は、
index.phpで読み込む必要があります。
index.php
<?php get_header(); ?>
<main>
<div class="top">
<div class="top-title">Sample<br />Sports_Amusement_Park</div>
</div>
<section class="features cmn-section -black">
<div class="inner">
<h2 class="cmn-title">
<span class="main">SAPの特徴</span>
<span class="sub">features</span>
<!-- 省略 -->
</div>
</li>
</ul>
</div>
</div>
</section>
<?php get_footer(); ?>
<?php get_header(); ?> header.phpを呼び出します。
<?php get_footer(); ?> footer.phpを呼び出します。
Local by Flywheelインストール後まずやるべきこと③functions.phpの作成
funcitions.phpに記述を行うことで、使用しているテーマに機能を追加したり、
ショートコードを作成したりと非常に幅広く活躍するファイルなのですが、
奥が深いので今回は説明を割愛します。下記に参考サイトを記載します。
https://www.sejuku.net/blog/67450
※funcitions.phpで記述を誤るとサイト全体でエラーが起きることもあるので、
編集する際にはバックアップを取るなど事前準備が必要になるファイルです。
CSSやjsファイルの読み込みなどもfuncitions.phpに記述することが多いので、
今回はこちらの記述方法をご紹介します。
functions.php
//CSS Javascriptの読み込み
function my_script_init(){
wp_enqueue_style('reset-css', get_template_directory_uri() . '/css/reset.css',array(),'1.0.0','all');
wp_enqueue_style('style-css', get_template_directory_uri() . '/css/style.css',array(),'1.0.0','all');
wp_enqueue_style('js-animate.css', 'https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css', array(), '1.0.0', 'all');
wp_enqueue_script('js-jQuery', 'https://code.jquery.com/jquery-3.6.0.min.js', array(), '1.0.0', 'all');
wp_enqueue_script( 'js-script.js',get_template_directory_uri() . '/js/script.js' , array(), '1.0.0', 'all' );
wp_enqueue_script( 'js-wow.js',get_template_directory_uri() . '/js/wow.min.js' , array(), '1.0.0', 'all' );
}
add_action('wp_enqueue_scripts','my_script_init');
①wp_enqueue_style、wp_enqueue_scriptの活用
my_script_initという関数を定義して、add_actionで登録している形ですね。
CSSファイルを読み込む際は、wp_enqueue_style、jsファイルを読み込む際は、
wp_enqueue_scriptを使用してください。
基本的にはこのように関数を定義して、add_actionで使用出来る形にしていくといった流れです。
いかがでしょうか。ここまで記述が終われば、皆さんが作成された
ファイルがレイアウト崩れすることなく表示できているのではないでしょうか。
おすすめの動画のご紹介
正直今回の記事だけではWP化は十分なものではなかったと思います。
functions.phpにも記述すべき事項はまだまだありましたし、
WPの投稿機能やプラグインなどにも触れられていませんでした。
しかし、そういった基本的なことをハンズオン形式で
実際に成果物を作りながら説明してくださっている動画がありますので、ご紹介します。
https://www.youtube.com/watch?v=2XfvCXifEa0
アキユキさんの動画は本当に分かりやすかったです。
私は動画で学習することが多いので他の方の動画も拝見したりしてたのですが、
個人的にはアキユキさんがダントツで分かりやすかったです。
話すテンポも良く、スッと頭に入るので是非一度ご覧になってみてください。
おわりに
最後まで記事を見てくださりありがとうございました！
私は、何十万とするプログラミングスクールには、通っていませんが、
Freeks(フリークス)のカリキュラムを通して学んでいました。
サポートもしっかりしているので独学に限界が来たと感じた方は、
一度下記詳細を確認してみてください。
https://twitter.com/freeks_japan
↧