はじめに
ただ空っぽなWordPressのサイトを作ってみるだけ
対象のサイトを組み込む部分は次回。
やってみたこと
WordPress化対象のサイトコンテンツを取得
- コンテンツをダウンロード
- 【著作権表示なし・商用可】無料ホームページテンプレート｜フリーホームページ.net https://free-hp.net/
- 「飲食店向けテンプレート」をダウンロードしてみる
WordPressの最小環境を構築
- wp-envのインストール
$ cd /path/to/workdir
$ mkdir wordpress
$ npm init
$ npm install @wordpress/env --save- wp-envの起動
$ npx wp-env start- ブラウザでアクセス（http://localhost:8888）
こんな感じで動作が確認できる
- ブラウザでアクセス（http://localhost:8888/wp-admin）
最小テーマの作成
$ code index.php
$ code style.css
$ code .wp-env.json>index.php
hoge>style.css
@charset "UTF-8";
/*
Theme Name: sample-theme
*/>wp-envの設定ファイル
{
"themes":["."]
}WordPressならではのコンテンツを追加
- WordPressは、テンプレートファイルに、登録データを対応付けて、動的にページを表示する
- とあるロジックに基づいて、利用するテンプレートを決めている。
- https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/#%E5%A4%96%E8%A6%B3%E5%9B%B3
- ロジックの詳細はこちらに書いてある
- https://ja.wordpress.org/team/handbook/theme-development/basics/template-hierarchy/#%E6%A6%82%E8%A6%81
最後に
- とりあえず最小構成をつくって、いじって、どう変わるかを試してみるとよい
- できれば、テンプレート階層や表示ロジックも把握しつつ試せるとよい
- 対象のサイトを組み込む部分は次回。
参考
- Theme Developer Handbook | WordPress Developer Resources https://developer.wordpress.org/themes/
- テーマ開発の方法について書かれている
- 【著作権表示なし・商用可】無料ホームページテンプレート｜フリーホームページ.net https://free-hp.net/
- 無料でWEBサイトのテンプレートが使えるので便利
