AWA Bizの小川です。弊社が普段からWordPressオリジナルテーマ制作案件で使用しているテンプレートを販売します（と言ってもテンプレートのダウンロードのみでしたら無料で可能ですので、自分で環境構築などできる方はご自由にお使いください）

環境構築やコードの説明については有料にさせていただきました。使い方は詳細に記載しましたので、gulpやwebpack、Lintの設定に慣れていない人でも使えるようになっているかと思います。

販売のきっかけ

CMSを使ったサイト制作ではまだまだWordPressが現役で使われており、その中でオリジナルテーマで制作する案件も多いです。Lightning、Snow Monkeyなどテーマを使用した構築もしておりますが、お客さまに合ったオリジナリティあるデザインを再現しようと思うと、やはりオリジナルテーマでの構築がいいな、と思ってます。ヘッドレスCMSなども出てきておりますが、メインで使用するプラットフォームを移行するのはまだ先になりそうということもありm(_ _)m
コーディングの効率性、保守性を考え弊社では基本的な初期設定を組み込んだ最低限のファイルをベースにコーディングを行っています。制作会社やフリーランスの方で独自のテンプレートを持っている方はいらっしゃるかもしれませんが、ソースコードや使い方がまとまったものはあまり公開されていないと思いましたので、今回販売させていただこうと思いました。

テンプレートのフォルダ・ファイル構成

テンプレートの全体構造は以下の通りになっています。

├── src                 ・・・開発用ソースを格納するディレクトリ
│    ├── images          ・・・画像ファイルを格納するディレクトリ
│    │   └── common     ・・・共通で使用する画像ファイルを格納するディレクトリ
│    │   └── index      ・・・indexページの画像ファイルを格納するディレクトリ
│    │   └── 各ページごとにフォルダを作成する
│    ├── js              ・・・jsファイルを格納するディレクトリ
│    │   ├── bundle.js    ・・・メインでコンパイルされるjsファイル
│    │   ├── common.js    ・・・各ページ共通のjsファイル
│    │   └── fade.js      ・・・フェードインの挙動専用jsファイル
│    │   └── header.js    ・・・ヘッダーの挙動専用jsファイル
│    │   └── anchor-link.js ・・・アンカーリンクの挙動専用jsファイル
│    │   └── sp.js 　　　　　　　　　　　　　　・・・SP時専用のjsファイル
│    └── styles          ・・・スタイルシートを格納するディレクトリ
│        ├── foundation  ・・・サイト全体に関連するscssを格納するディレクトリ
│        │   ├── _base.scss     ・・・基本設定のscssを記述　基本的に変更しない。
│        │   ├── _mixin.scss    ・・・mixinのscssを記述
│        │   ├── _reset.scss    ・・・リセットscss　基本的に変更しない
│        │   └── _variable.scss ・・・色、使用フォント、z-indexなどを記述したscss
│        ├── layout  ・・・サイト全体で使用するパーツなどに関連するscssを格納するディレクトリ
│        │   ├── _l-base.scss     ・・・制作するサイト全体で共通する部分のscssを記述
│        │   ├── _l-header.scss    ・・・headerのscssを記述
│        │   └── _l-footer.scss    ・・・footerのscssを記述
│        └── object
│            ├── component  ・・・共通パーツのscssを格納するディレクトリ
│            │   ├── _c-btn.scss     ・・・サイトで共通するボタンに関連するscssを記述
│            │   ├── _c-content.scss    ・・・コンテンツ関連のscssを記述
│            │   └── _c-section.scss    ・・・セクションで共通するscssを記述
│            └── project  ・・・制作するページのscssを格納するディレクトリ
├── /wp-content/themes/theme  ・・・テーマファイルを格納するディレクトリ
│         ├── index.php ・・・トップページ用ファイル
│         ├── header.php ・・・ヘッダーファイル
│         ├── footer.php ・・・フッターファイル
│         ├── page-about.php ・・・固定ページサンプルファイル
│         ├── archive.php ・・・アーカイブページファイル
│         ├── single.php ・・・投稿ページファイル
│         ├── 404.php ・・・404ページファイル
│         ├── functions.php ・・・初期状態ではCSS、JS読み込みのみ記述
├── gulpfile.js 
├── webpack.config.js
├── package.json
├── .editorconfig
├── .eslintrc.json
├── .eslintignore
├── .stylelintrc.js
├── .prettirrc
├── .gitignore
└── ReadMe.md

詳細な使い方は後述しますが、基本的にLocalなどでWordpressの初期環境構築が完了した後、そこに組み込むことを想定しています。

含まれているファイル・機能について

・テーマフォルダ（theme）
→最低限必要なサンプルのphpファイルで作成しています。フォルダ名は適宜変更します
・ScssはFLOCSSフォルダ構成（Dart Sassに対応）
・gulpの設定
→画像の圧縮、Scssのコンパイル、BrowserSyncで使用しています
・webpackの設定
→JSファイルのコンパイルで使用しています（Babel設定済み）
・ScssとJSのLint設定
→ESLint、Styleintファイル
→VSCodeのプラグインが必要になります（プラグインの推奨設定に記載してます）
・必要なnodeモジュール設定（package.jsonに記載）

前提条件

• WordPressのローカル環境構築ができること
• nodeの開発環境があること（v14.16.0で動作確認済み）
• npm、yarnの実行環境があること（できれば）
• コードエディタをVSCodeを使用していること（必須ではありませんがLint関連の拡張機能で使用するため）

テンプレートファイル

以下がテンプレートファイル一式です。
こちらからダウンロードください。
wordpress-templateダウンロード
使い方に関してはnoteで有料記事とさせていただきました。
下記リンクから購入ください。
WordPress案件で使用しているオリジナルテーマテンプレートの使い方解説