【今日から携わる】既存の静的HTMLサイトをWordPress化するHowToサイトのまとめ


携わるタスク

HTMLで作られたサイトを、WordPress化する

記事を書いた理由

今日、既存のHTMLサイトをWordPressサイトにする案件に携わった際に参考にしたいサイトをまとめました。

まとめ

 参考1

2015年6月23日 5:01 PM

[HTMLサイトをWordPressに移行する手順のまとめーその1]

  1. HTMLサイトのコピーをローカルに作成
  2. HTMLファイルを整理する
  3. HTMLファイルとWordpressテンプレートとの対応を考える
  4. WordPressテーマの基本的なファイルを作成
  5. 元のHTMLファイルをパーツ化しWordpressテンプレートファイルに移行
  6. htmlの一部をphpコードに置き換える
  7. style.cssとfunctions.php
  8. WordPressテーマをzip化し、アップロード
  9. この後の作業をリストアップ

 参考2

2015年7月17日 11:57

[HTMLサイトをWordPressに移行する手順のまとめ ‐ その2]

  1. 大まかな流れ
  2. WordPressをサーバーにインストールする
  3. wp-config.phpをデバッグモードにする
  4. テーマをアップロードする
  5. サイトを作る場合は固定フロントページの設定を
  6. PHPファイルの記述の誤りを修正していく
  7. 残りのテンプレートファイル(page.php、archive.phpなどの作成)
  8. パーマリンク設定
  9. コンテンツの作成・メニューやウィジェットなど
  10. 基本的なプラグインの導入
  11. 全体的な動作確認
  12. wp-config.phpをデバッグモードをオフに
  13. トップページをhtmlからwordpressに切り替える作業
  14. リダイレクト設定(必要な場合)

 参考3

2018年6月22日

[静的HTMLサイトをWordPress化するときの具体的な移行手順]

下記の静的HTMLサイトを実際にWordPress化していきます。

1 静的HTMLサイトをWordPress化するときの手順
1.1 1.テーマフォルダを作成
1.2 CSS、JavaScript、画像ファイルをテーマフォルダにコピー & 読み込み
1.3 テーマの宣言
1.4 index.phpを「とりあえず」作成
1.5 テンプレートファイル分割
1.6 固定ページ作成
1.7 投稿ページ作成
2 WordPress化の検討事項
2.1 URL構造
2.2 メニュー機能
2.3 ウィジェット機能
2.4 カスタム投稿タイプ
2.5 記事のトレース
3 WordPress移行後のチェック
3.1 URL構造のチェック
3.2 リンク切れがないかチェック
4 おわり

 参考4

[HTMLをWordPressテンプレートにする方法]

  1. imageファイルを紐付る
  2. index.htmlを分割する
  3. header.phpをWP用に編集する
  4. page.php・single.phpをWP用に編集する
  5. archive.php、search.phpをWP用に編集する
  6. functions.phpを作成する
  7. sidebar.phpを編集する
  8. footer.phpを編集する
  9. style.cssを編集する
  10. wp-contents>theme にフォルダをアップロードする

Wordpressのテーマを自作する参考サイト

ワードプレス自作テンプレート作成

初心者必見!自作のWordPressオリジナルテーマを作成する方法を徹底解説(2018.08.20)
https://plusers.net/wordpress_theme_0
demo:https://plusers.net/theme-sample/
評価:96点

WordPressのテーマを自作してオリジナルサイトを作る方法 2018/8/21 2018/10/29
https://www.sejuku.net/blog/68742

WordPressのテーマを自分で作成してみたら意外と簡単だった!(2018.10.02)
https://wpmake.jp/contents/theme/theme_create/

ざっくりWordPressの自作テンプレートの作り方(2018年02月10日に更新、2015年07月20日に投稿)
https://qiita.com/kazukichi/items/5126a4fd259d374e99ae

WordPressオリジナルテーマを作成するための全手順【自作は簡単です】2018.10.17
https://creive.me/archives/1136/

WordPress オリジナルテーマの作り方
https://www.webcreatorbox.com/tech/wordpress-original-theme

WordPressテーマの自作方法を解説する!【ここまでできればWPはOK】2018.12.16 2019.04.12
https://yukinishimura.net/wordpress-theme-create/

超倍速でWordPressオリジナルテーマ作成!骨だけ「Bones」の使い方をザックリと
http://websae.net/wordpress-bones-20141203/
demo:https://themble.com/bones/
評価:65点