HTMLとCSSのみのコーディング案件にwebpack 5を使用したところ、いい感じだったので忘れないうちにまとめます。 webpackを使用するメリット npm scriptsとPostCSSで良いのでは？と思うところですが、webpackはwatchモードを利用している間はキャッシュを使用するので、CSSの自動ビルドが体感でわかるほど早いです。CSSコーディングは細かい調整が多かったりするので、とても助かります。 パッケージをインストールする package.jsonがまだない場合は、プロジェクトの初期化をします。 npm init 以下のパッケージをインストールします。npm-run-allは必須ではありません。複数のnpm scriptをわかりやすく行を分けて書くために使用しています。node-sassは非推薦になったのでsass(Dart Sass)を使用してください。 autoprefixer css-loader mini-css-extract-plugin npm-run-all postcss postcss-cli postcss-loader sass sass-loader watch webpack webpack-cli webpack-remove-empty-scripts まとめてインストールする場合は、長いですがこうなるかと思います。 npm i -D autoprefixer css-loader mini-css-extract-plugin npm-run-all postcss postcss-cli postcss-loader sass sass-loader watch webpack webpack-cli webpack-remove-empty-scripts postcss関係いらなくない？ CSSを非圧縮で納品するために使用しています。少なくとも私が関わる案件については、まだまだ非圧縮を求められます。改修のしやすさや新人への作業ベースとするなど、事情はいろいろでしょう。 一方、webpack 5は、productionモードでのCSSは圧縮する前提となりました。いろいろ調べたのですが、非圧縮にする方法が見つかりませんでした。 常にdevelopmentモードでビルドして、冒頭のコメントを手作業で削除…というのも考えましたが、スマートじゃないので納品時だけPostCSSでビルドすることにしました。 ディレクトリ構成 以下の通り、ルート外にあるsrcから、distへ書き出す前提です。JavaScriptを作成しないため、srcディレクトリ内にjsディレクトリはありません。 package.json postcss.config.js webpack.config.js src └ scss └ style.scss dist ├ index.html └ css └ style.css webpack.config.js 以下のとおりです。 Dart Sass、PostCSSのautoprefixerを経由しています。 さらにMiniCssExtractPluginで、JSにバンドルせずCSSの実体を書き出し、RemoveEmptyScriptsPluginで使用しなかった＝空の状態で生成されたbundle.jsを削除しています。 const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const RemoveEmptyScriptsPlugin = require('webpack-remove-empty-scripts'); module.exports = { entry: { 'style': `${__dirname}/src/scss/style.scss` }, output: { path: `${__dirname}/dist`, filename: 'bundle.js', }, module: { rules: [{ test: /\.(sa|sc|c)ss$/, use: [ MiniCssExtractPlugin.loader, { loader: 'css-loader', options: { url: false }, }, { loader: 'postcss-loader', options: { postcssOptions: { plugins: [ require('autoprefixer') ] } }, }, 'sass-loader', ], }] }, plugins: [ new MiniCssExtractPlugin({ filename: 'css/[name].css' }), new RemoveEmptyScriptsPlugin() ], }; postcss.config.js 納品時のビルドのために、PostCSSの設定ファイルも必要となります。 module.exports = { plugins: [ require('autoprefixer')({ grid: 'autoplace', }) ] }; package.json npm scriptsは以下のとおり、作業時はwebpack、納品時はDart SassとPostCSSを生で呼び出します。autoprefixerのbrowserslistと、private宣言も忘れず書きます。 ...略 "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "prod": "run-s prod:scss prod:postcss", "prod:scss": "sass src/scss:dist/css --style expanded --no-source-map", "prod:postcss": "postcss ./dist/css -c=postcss.config.js --no-map --dir ./dist/css", "dev": "webpack --watch --mode development" }, ...略 "browserslist": [ "> .2%", "not ie <= 11", "not op_mini all" ], "private": true } 使用する 作業時 npm run dev 納品時 npm run prod webpackは本来、旧来のコーディング案件に使うものではないのでしょうが、明らかに作業効率化になりましたし、案件ごとにpackage.jsonを変えるのは手間なのでこうなりました。 もしwebpack 5で非圧縮CSSを書き出す方法があればコメントなどで教えてもらえるとありがたいです。

前回までのあらすじ 【第七回】コロナ禍だから何かできることを 実装イメージ図 LINEを利用して保健所の担当者の負担を軽減するとともに、自宅療養者はいつでもつながっている安心感を持たせるためのツールイメージです。 今回はWEB画面上でできる機能の説明をします。 権限情報 前回、作業者の権限によって利用できる画面が変わると説明しました。 実際に利用できる画面が以下のようになります。 画面名 システム管理者 管理者 作業管理者 作業者 ログイン 〇 〇 〇 〇 メニュー 〇 〇 〇 〇 連絡情報 〇 〇 〇 〇 連絡修正 〇 〇 〇 〇 利用者情報 〇 〇 〇 × 利用者修正 〇 〇 〇 × 地区情報 〇 × × × 地区修正 〇 × × × 作業者情報 〇 〇 × × 作業者修正 〇 〇 × × 個人情報 〇 〇 〇 〇 各画面説明 ログイン ユーザーコードとパスワードを入力し、ログインボタンからログインします。 メニュー ログインが認証されれば、メニュー画面を表示します。 メニュー画面には、未確認と自宅療養中の利用者で、以前からのコンタクトが24時間以上空いている一覧を表示します。 詳細ボタンから、連絡先を表示しアクションを起こすことができます。 連絡情報 連絡情報からは、検索のフィルタが存在します。 状態 利用者の状態を絞って検索します。すべてチェックがない場合は、未確認と自宅療養中のみが対象となります。 利用者名 任意検索できます。文字列の順番も関係なくイメージのデータだと「やまだ」と「太郎」で２件ヒットします。 住所 同じく任意検索でき、文字列の順番も関係ありません。 LINE連携 LINE連携がされているかどうかの絞り込みです メニューと同じく詳細ボタンから、連絡先を表示しアクションを起こすことができます。 連絡修正 利用者の詳細が表示されます。 連絡先や住所から、電話連絡や訪問を行い、状態変更に情報の入力を行います。 一覧で、処理をした履歴を確認することもでき、LINEとの連係情報も表示されます。 情報入力 利用者情報 利用する情報を表示します。 LINE連携をする際に伝える番号がこのコードになります。 今回は入力方式のみでの実装ですが、ここからQRコードの発行機能をつけてLIFFをQR読み取り処理に変更すればもう少し親切になるかと思います。 利用者修正 利用者の新規、修正共に利用する画面です。 地区情報 地区の一覧を表示します。 ここから、新規・修正を行います。 地区修正 地区の新規、修正共に利用する画面です。 作業者情報 作業者の一覧を表示します。 ここから、新規・修正を行います。 作業者修正 作業者の新規、修正共に利用する画面です。 ここでは自分の情報を修正することはできないようにしているため、個人情報画面での変更になります。 個人情報 ログイン者全員が使える画面で、パスワードや名称を変更することができます。 コロナ禍だから何かできることをー　自宅療養者連絡ツール　ー 【第一回】実装イメージ図と動画 【第二回】LINEからデータを取得して返すまでの流れ 【第三回】LINEからデータベースまでの流れ 【第四回】データベースへの更新までの流れ 【第五回】ユーザー登録の仕組み-LINEbotの設定部分 【第六回】ユーザー登録の仕組みLIFFで表示する画面の開発 【第七回】データベースの構造 ->>【第八回】WEB画面上でできる機能 【第九回】まとめ

はじめに 今回の記事は、前回の【ローカル環境へ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