WebとかIoTのブログ

はじめに

ただ空っぽな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サイトのテンプレートが使えるので便利