注意点やトラブルシューティング参考資料の紹介まとめはじめに自分で作ったサイトをWordPressへ移行するメリットは何なのでしょうか?それは、サイトの更新が容易になるという点です。HTML/CSSだけのブログではやりづらかったサイトの更新が、WordPressでは「投稿」という形で行うことができるようになります。新しい情報を付け加えたり、修正することが、コードをいじらなくてもできるようになります。アクセスの多い投稿を表示させたり、投稿した日時を表示させたりするといった便利な機能が使用できるのもWordPressが多く広まっている理由です。WordPressはPHPファイルによって構築されているため、HTML/CSSのサイトを移行するためには、自分でPHPを用いたファイルを作成する必要があります。具体的に何のファイルが必要なのか、ファイルの中身はどのようなことを書くのかということについて説明していきます。移行の前提条件HTML/CSSの基本的な書き方がわかること移行後のサイトで頻繁に更新したいコンテンツがあることPHPファイルでは、条件に応じてHTMLを表示させるということを記述するので、基本的なHTMLの書き方を理解しているというのは必須です。移行前に必ず元のファイルのバックアップをとっておいてください。WordPressではどのようにページが表示されるのかどのようにページが表示されるのか理解することで、なぜテンプレートファイルが必要なのかわかります。通常のWebページの場合url(〇〇.com/index.html)はファイルの位置を示していて、Webサーバー上のHTMLファイルが読み出されます。そのほかのファイル(画像やCSSなど)は、HTMLファイルからリンクを貼ることで呼び出されています。通常のWebページの表示WordPressの場合WordPressにはHTMLファイルがありません。それではどのようにしてウェブサイトを表示しているのでしょうか。1ユーザのurlのリクエストに応じて、2WordPressがリクエストに沿うように適切なファイルを選択します。3ページの表示に必要な情報をデータベースから取得して、5HTMLデータを生成してから6ユーザへ応答します。WordPressでのWebページの表示つまり、WordPressテーマを作るためには2で選択されるテンプレートファイルを作る必要があるわけです。テンプレートファイルとは何なのか例えば、100個のHTMLで書かれた記事があったとします。この記事全てに、投稿日の記述を追加したいとします。この時HTMLのファイル全てに対して変更を行う必要があり、とても大変です。ここで役立つのがテンプレートファイルです。テンプレートという名の通り、このファイルにはHTMLの雛形を書いておきます。記事を雛形に沿って書いていくというわけです。全ての記事に投稿日を表示したいと思った時は、この雛形だけを変更することによって、全ての記事に反映させることができます。修正が楽になったり、構成に統一性を持たせることができるのです。どのようなテンプレートファイルが必要なのでしょうか。必要なファイル(これらのファイルが欠けていると、テーマとして認識されません。...固定ページ用のテンプレート基本テンプレートから表示を変えたいページがある場合はさらにテンプレートファイルの数が増えていきます。必須のファイルがあればWordPressが動作するのに、どうして他のPHPファイルを作成するのかというと、コードを管理しやすくするためです。ヘッダー、フッターなど、コンテンツごとにファイルを分けておけば、管理・修正がしやすくなりますし、読み込むべき箇所を最小化することで、処理効率も良くなります。主要ファイルについての説明と、基本的な記述記述は以下になります。それぞれのファイルの表示箇所index.php必須ファイルです。サイトのトップページに相当するファイルです。トップページ全体の箱のようなものです。WordPressが、urlの要求に従ってテーマテンプレートを探していくのですが、テンプレートファイルが見つからなかった場合表示されるのが、このindex.phpになります。最後の砦のようなものです。逆に言えば、index.phpさえあればテーマテンプレートが存在しないという事態は避けられます。?>style.css必須ファイルです。テーマの見た目を装飾するファイルです。Name:任意のテーマ名*/functions.php必須ファイルです。通常のテーマファイルと異なり、HTMLの出力はしないファイル。テーマの設定やWordPressないで使用する関数についての定義が行われるファイル。このファイルの記述にミスがあると、サイトが表示されなくなることもある。etc...header.php<html>の先頭から、<body>の先頭あたりまでの記述を担当するファイルです。ほとんどの場合このファイルが存在するので、他ファイルからheader.phpを読み出す専用の関数である「get_header()」が存在します。//</head>タグの直前に記述する。これがないとスタイルシートが読み込まれなかったり、javascriptが正常に動作しなくなる原因となることがある。//<body>タグの直後に記述する。javascriptを出力するのに使う。記述しないと、プラグインが適切に動かなくなることがある。?>footer.php全てのページ共通のフッター部分についての記述ファイルです。「get_footer()」関数により、読み出されます。//</body>タグ直前に記述。javascriptを読み込むのに必要な記述。記述しないと、プラグインが動作しなくなることがある。?></body>sidebar.phpブログでサイドバーを作りたい場合に作るテンプレートファイルです。何を表示させるか書くこともできますが、ウィジェットで設定できるようにしておくと管理がしやすいです。dynamic_sidebar('任意の名前');//functions.phpでウィジェットの設定をすることにより読み込みができるようになります。?></div>archive.phpアーカイブページ(日付やカテゴリーごとのページ)のテンプレートファイルになります。このファイルの中にサイドバーの読み込みや、コンテンツの記述などを書きます。?>contents.php主に<body>タグの中身の記述を行います。私は、トップページでの記事の羅列や、人気の記事の表示などの記述をしています。他のファイルから、get_template_part(‘contents’);という関数を実行すると、このcontents.phpを読み込むことができます。class="contents"></div>single.php個別ページを表示するテンプレートファイルになります。?>HTML/CSSからの移行手順サイトの公開までの手順は以下になります。元のHTML/CSSファイルをコピーする。functions.phpなど必要なファイルを作る。コピーしたHTMLファイルを分割し、PHPファイルに記述するfunctions.phpや記事の繰り返し表示など、WordPress特有の部分に関しての記述を行うWordPressを動かせるテスト環境を用意する。作ったファイルをzipにし、テスト環境で動かしてみる。元のHTMLファイルをPHPファイルの分割させて、WordPress特有の部分の記述をするというのが基本の流れになります。6でひと通りファイルを記述したら表示させますが、おそらく思った通りに表示されなかったり、リンクがおかしかったりすると思います。テーマファイルエディター」から、ファイルの中身を適宜修正していきます。CSSファイルの記述も適宜追加していきます。表示されなくなり、どうしようもなくなったことがあります。いったことから、テスト環境で作業することを推奨します。「完成したサイトを更新したい!」「コードは書いたけど動くのか確かめたい!」サイトの修正を行うときにいきなり本番環境をいじるわけにはいかないので、本番環境をデータベースごとコピーしローカル環境に再現...本サイトの本番環境にはエックスサーバーを使用しています。WordPress簡単インストールという設定があったり、SSHの設定が簡単なことから利用しています。注意点やトラブルシューティング第一にやっていただきたいのは、ファイルのバックアップを定期的に取るということです。コードを自作しているので、おそらくたくさんのエラーを経験すると思います。致命的なエラーが発生してしまったとしても、バックアップがあれば復旧は容易です。ローカル環境に保存するか、githubなどを利用しましょう。サイトを公開する前に、セキュリティに関する設定は必ず行ってください。PHPファイルにエスケープ処理を行ったり、セキュリティに関するプラグインを導入してください。はじめから、ていねいに。」という本でPHPの基本、WordPressについて学びました。この本で得た知識を応用させて、私はテーマを完成させました。初心者にもわかりやすく解説されているので、かなりおすすめです。リンク私のサイト作成の全体像についての記事こうのーと【独学】ワードプレスの自作テーマを作成するための9ステップ「WordPressのテーマを自分で作ってみたい!」「でもどんな道筋で進めていけばいいかわからない」このサイトはなんの知識もなかった状態から独学で作成しました。時間はかかりますが、着実に1つ1つステップを踏...まとめHTML/CSSのサイトからWordPressへ移行する手順と必要なファイルについて説明してみました。難しそうだなと思って躊躇している方にも、この記事や本を参考に自分でテーマを作っていただけると幸いです。me!工業大学生のこうです。IT、コーヒー、留学の体験など、自分の体験を「ノート」として残していきます。ートこうのート節約フィンランドITコーヒ。