みなさん、こんにちは。
やっと涼しくなってきて、かなり気分が良いこの頃です。
今回も最近受けた案件の紹介（備忘録）をします。
使ったプラグインなども記載しているので、かなり参考になると思います（よ？）
内容は、コーダーさんからコーディングしたhtmlデータを受け取り、それをWordPress化する作業です。
WordPressマスターのみなさんにはもってこいの案件ですよね！（圧力）
昔一度だけ作業したことがあるのですが、その時はCMS部分は必要なく、すんなりいった作業でした。
今回はCMS部分があり、割とやることが多いな～と感じました。
しかし、テンプレートの概念を知っていると、割と楽しかったです。
そもそもなぜこのような案件があるのかを考えてみると、
ブロックエディタでは作りにくい、デザイン性の強いサイトを作りたい場合に、HTMLで構築したいのかなと思いました。
全体像は下記のようになりそうです。
ワイヤー→デザイン→HTMLコーディング→WP化
サイト構成
サイト構成は下記のような形でした。
- TOPページ
- 下層／会社概要
- 下層／サービス
- 下層／採用情報
- 下層／お問い合わせ（ContactForm想定）
- 下層／社員ブログ（一覧／詳細）★CMS
- 下層／施工事例（一覧／詳細）★CMS
テーマファイル
テーマファイルでは下記のような作業を行います。
- htmlをphp化
- css、画像ファイルをWordPressで読み込むように変更
- ループ部分を記述
- 投稿編集画面から記入する部分をWordPress用のコードに変更
必須ファイル
style.css
テーマ情報を記載します。
/*
Theme Name: テーマの名前
Theme URI: テーマの詳細ページのURL
Author: 作成者の名前
Author URI: 作成者のWebサイトのURL
Description: テーマの簡単な説明
Version: 1.0.0
License: ライセンス情報（例: GNU General Public License v2 or later）
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: テーマのテキストドメイン（翻訳に必要）
Tags: テーマに関連するキーワード（例: blog, e-commerce, responsive）
*/
index.php
基本的にindex.htmlを使用して作ります。
function.php
アイキャッチ画像をサポート、スタイルとスクリプトを読み込む、などのコードを記述
header.php
ヘッダーの共通部分と以下を記載。
<?php wp_head(); ?>footer.php
フッターの共通部分と以下を記載。
<?php wp_footer(); ?>構成に合わせて作るもの
archive.php内で条件分岐を使えば、さらにファイル数を減らすことができるかもしれませんが、コードをシンプルに保つために、以下のような別ファイルを作成しました。
| ファイル名 | 内容 |
|---|---|
| home.php | 投稿一覧ページ |
| category.php | カテゴリーページ |
| date.php | 日付アーカイブページ |
| single.php | 投稿ページ |
| archive-work.php | 施工事例一覧ページ |
| taxonomy-work_category.php | 施工事例のカテゴリーのページ |
| single-work.php | 施工事例ページ |
あとは各固定ページを「page-***」として作成します。（***は各ページのスラッグ）
PHPファイルのインデントを整える再は、vscodeの「intelephense」という拡張機能が便利でした。
詳細はこちら
プラグイン
運用に必要なものと、制作中にあると便利なものを紹介します。
運用に必要なもの
| プラグイン | 内容 |
|---|---|
| Advanced Custom Fields | クライアントが施工事例ページ用に編集画面から画像を選択したり、施工情報を書き込んだりできるように |
| Contact Form 7 | お問い合わせ |
| Contact Form 7 Multi-Step Forms | お問い合わせのサンクスページ |
| Contact Form CFDB7 | お問い合わせのデータベース保存 |
| Custom Post Type UI | 施工事例用のカスタム投稿を追加 |
| UpdraftPlus – バックアップ/復元 | サイトのバックアップ。 制作中も変更前に使うと安心 |
| WP-PageNavi | 投稿一覧にページネーションを追加 |
| Yoast Duplicate Post | 投稿ページを複製。 制作中に、投稿を10個くらい作って投稿一覧で確認するときにも使用 |
制作中にあると便利なもの
以下のものは制作中だけ使用して、公開後は削除で良いと思います。
| プラグイン | 内容 |
|---|---|
| Show Current Template | 現在の読み込みテーマの確認 |
| WP File Manager | FTPを開けるのが億劫なので、、テーマファイルを複製するときなどに |
| パスワード保護 | 制作中のサイトが閲覧されないようにベーシック認証を追加 |
