スタティック(静的)なサイトをWordPress化する方法 1/2

はじめに

ただ空っぽなWordPressのサイトを作ってみるだけ

対象のサイトを組み込む部分は次回。

やってみたこと

WordPress化対象のサイトコンテンツを取得

WordPressの最小環境を構築

$ cd /path/to/workdir
$ mkdir wordpress
$ npm init
$ npm install @wordpress/env --save
  • wp-envの起動
$ npx wp-env start

こんな感じで動作が確認できる

最小テーマの作成

$ 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サイトのテンプレートが使えるので便利

コメントする

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です