HTML,CSSで作ったファイルをWordPressのテーマに変換したい！
今回はこのような悩みを解決します。
WordPressの学習の一部として、静的なサイトをPHPを使いテーマ化すると言う学習方法がありますが、初心者の方はどのようにすればいいか分からない方も多いでしょう。
静的サイト→テーマ化にはテンプレートのような型があって、慣れてしまえば１時間もあればテーマ化できてしまいます。
この記事ではよく使うWordPress関数の使い方や、テーマ化までの一連の流れをご紹介します。
✔︎こんな方にオススメ
- HTMLファイルをWordPressに転換したい方
- 初心者で学習の流れを知りたい方
- WordPressの学習マニュアルが欲しい方
HTMLからWordPress化の一連の流れ
まず前提として、index.htmlとstyles.cssが入った（sampleフォルダ）が存在し、すでにコーディングが終わっている事とします。
- ローカル環境の構築
- 構築した環境のフォルダにsampleフォルダをコピペ
- index.html→index.php|styles.css→style.cssに変える
- header.php|footer.php|functions.php|single.phpファイルを作る
- index.phpを分割し4で作成したファイルに分割する
- 色々関数を書き込む
- テーマ化終了
かなりざっくりで適当ですがこんな感じです。
1.ローカル環境の構築
まず始めにWordPressを動かすためのローカルサーバーが必要になってきます。
XAMPPやMAMPを使って構築しても良いですが、管理が便利でワンクリックでサーバーができるLocal By Flywheelがオススメです！
2.静的ファイルをローカル環境フォルダに移行
静的ファイルをWordPressとして動かすには、構築したローカル環境フォルダにコピーペーストする必要があります。
プロジェクトの管理画面で作成したローカルサーバーの上で右クリックすると、Reveal in Finderという項目が出てくるので選択します。
【app→public→wp-content→themes→ここにペースト】ペーストする場所は赤の矢印も部分です。
でもこのままではWordPress化はできていません。
3.ファイル名をWordPress用に変更する
静的ファイルはhtml形式になっているのでWordPressが認識できるように.phpに変える必要があります。
またスタイルシートの読み込みも特殊で、styles.cssではなくstyle.cssでないといけません。
この一つのsに長時間悩まされる人も多いので、ここはしっかりと押さえておきましょう。
4.必要なファイルを作成
今回は初心者向けなので、基本的なファイルのみを紹介します。
- functions.php:関数を指定、作成する
- header.php:ヘッダー部分
- footer.php:フッター部分
- sidebar.php:サイドバー部分
- single.php:個別ページ部分
- page.php:固定ページ部分
- search.php:検索結果の表示部分
基本的に最低限これだけあれば簡単なテーマは作成可能です。
5.index.phpを分割する
index.phpにはヘッダー部分、メイン部分、サイドバー部分、フッター部分があるかと思いますが、
ヘッダー部分→header.phpへ
フッター部分→footer.phpへ
サイドバー部分→sidebar.phpへ
このようにそれぞれカットアンドペーストします。
そしてカットしたindex.php部分に各ファイルを読み込むために
<?php get_header();?>,<?php get_footer();?>,<?php get_sidebar();?>とそれぞれ記述します。
6.必要な関数を書き込む
このプロセスに関しては書き出すと無限にあるので、必ず使う重要な部分だけをご紹介します。
何か実装したい機能があればその都度ググってください。
- <?php wp_head();?>：ワードプレスの機能を呼び出す
- <?php wp_footer();?>：同上
- <?php echo get_stylesheet_uri();?>：スタイルシートの読み込み
- <?php get_title();?>：記事のタイトル
- <?php get_content();?>:記事の本文
書くときりがないので、この程度にしておきます。
あくまでイメージを掴んでもらうためのものなので、暗記する必要はありません。
重要なのは「ここにサイドバーを設置したいな」と思ったときに【WordPress sidebar関数】とググれるかどうかです。
まとめ
この記事を参考にHTMLの静的ページWordPress化するイメージができたかと思います。
全体像が掴めたらあとは自走力が重要です。
WordPressの情報はGoogleには山ほどあるので、自分で調べて実行する癖をつけて自分のスキルに変えていきましょう。
最後までご覧いただきありがとうございました。
