前回、WordPressの開発環境が完成しました。今回は、HTML,CSS,JavaScriptのみで作られたサイトをWordPressのテーマファイルにしていきます。
HTML,CSS,JavaScriptのみで作った和みサポートさんのサイトのテンプレートを用意しました。しかし実在するサイトなので、表で公開すると様々な問題が生じます。よって、テンプレートを使って練習したいという方は、ハナプレのコンタクトフォームから僕にお問い合わせください。
テンプレートをダウンロードして解凍したら、ファイルを移動させて、Wordpressのテーマとして認識させて行きたいと思います。
まず、大きく”nagomi-support”と書かれた所の左下の”Go to site folder”と書いてある所をクリックします。
するとFinderが開きます。その下の、app>public>wp-content>themesに移動します。
そこに、さっきダウンロードして解凍したnagomi-supportのテーマファイルを移動させましょう。
移動させたテーマファイル内のindex.htmlファイルをブラウザにドラッグ&ドロップしてみてください。すると、和みサポートさんのサイトと、ほぼ同じ見た目のサイトが表示されると思います。
しかし、ここのサイトにはお知らせ機能やお問い合わせ機能がまだ実装されていません。ここにそれらの機能を追加しようとすると、HTML,CSS,JavaScriptだけでは不可能です。そこでこのテンプレートファイルを、Wordpressのテーマファイル化して、サイトを完成させたいと思います。
この解説では、エディターはVSコードを使用していきます。和みサポートさんのテンプレートをVSコードで開くと以下のように表示されます。
このフォルダの直下にindex.phpと、style.cssというファイルを追加してください。そしてstyle.cssファイルには、
/*
Theme Name: 和みサポート
*/と入力します。これで最低限、テーマファイルとして認識される準備が整いました。
最後に、index.htmlファイルのファイル名をfront-page.phpに変更しておきましょう。
それでは、Wordpressの管理画面に移動して、テーマファイルを有効化したいと思います。前回、説明した方法でWordpressの管理画面へ移動して、左のメニューの「外観」の所をクリックします。すると、「和みサポート」と言う名前のテーマファイルが認識されていると思います。
「和みサポート」と書かれたテーマファイルをホバーすると、有効化と書かれたボタンが出現すると思うので、そこをクリックすると「和みサポート」のテーマファイルが有効化される。
テーマファイルが有効化されたら、前回説明した方法で、サイトのページに移動しましょう。すると、和みグループのサイトが表示されると思います。
しかし、このままだとhtmlしか表示されていなくて、css,JavaScript,imgファイルが読み込まれていません。そこで、次回、css,JavaScript,imgファイルが読み込まれるように、front-page.phpファイルの中身を書き換えて行きましょう。
