※このブログはアフィリエイト広告を利用しています
こんにちは！キャメルコードブログのしゅんです。
今回の記事では、WordPressにテーマを導入するまでの流れについて解説をしていきます。
オリジナルテーマ開発をする際に何から手をつけていいか分からない！という方も多いと思いますが、まずは今回の記事に書いてあるところから始めてみましょう！
Localを使ってローカル開発環境を作ろう
まずはLocalを使ってWordPressをローカル環境にインストールしましょう。
Localは、ローカル環境でのWordPress開発を可能にしてくれる無料のローカル開発ツールです。今後WordPressを開発していく際にはローカル環境で開発を進めていくことになります。
Localについて簡単に解説をします^^
まず、WordPressを構築するためにはPHPやデータベースが動作する環境が必要です。その理由として、
- JavaScriptなどのフロントエンド言語(ブラウザで動く言語)とは異なり、PHPはサーバーサイド言語(サーバーで動く言語)であるため、PHPが動作するためにはWebサーバーが必要である
- WordPressではデータベース管理システム（MySQL）なども必要となる
これらを超簡単にローカル環境に整えてくれるのがLocalです。
こちらの記事がとても分かりやすいので、参考にしながらLocalの導入までぜひ自分で挑戦してみてください^^
WordPressのテーマを確認してみよう
LocalでWordPressのインストールまで終わったら「WP Admin」をクリックして管理画面を開いてください。
英語になっている場合は日本語に変更しておきましょう。
外観からテーマを見てみると、3つのテーマが入っているのが分かります。
それでは一旦Localの管理画面に戻ってフォルダを開いてみましょう。
フォルダを開いて「app→public→wp-content→themes」と辿っていくと、「themes」の中に3つのテーマがデフォルトで入っていることが確認できます。これがWordPressの管理画面で先ほど確認したテーマの本体ファイルです。
これから作る新しいオリジナルテーマもこの「themes」の中で作っていきます^^
- /wp-admin/・・・管理画面用のファイル群（触らない）
- /wp-content/・・・サイト表示に関わるファイル群
- /wp-includes/・・・WordPressのコアファイル群（触らない）
- /wp-config.php/・・・データベースの定義
オリジナルテーマに必要なファイルを作成する
それでは「themes」の中に自分のテーマフォルダを作り、vscodeなどのエディタで開きます。
テーマとして認識させるために、index.phpとstyle.cssを作ります。この2つのファイルはテーマ開発をしていく上で必ず必要となります。
上記のようにstyle.cssにテーマ名、テーマの説明、作成者を記載します。
ここまで終わったら管理画面に戻り、テーマを確認してみましょう。
しっかり反映されていますね^^
このタイミングでよく使うテンプレートファイルも作っておきましょう。
よく使用する代表的なテンプレートファイル
- front-page.php：トップページ用
- single.php：投稿ページ用
- page.php：固定ページ用
- archive.php：一覧ページ用
- 404.php：404ページ用
- functions.php：WordPressの機能を管理
WordPressにはテンプレート階層という概念があります。非常に重要な概念なので、テンプレート階層についてはぜひこちらの記事もご覧ください^^
拡張機能「WordPress Snippet」を入れよう
VScodeの拡張機能「WordPress Snippet」は、WordPressの関数を予測変換してくれる優れものです。これもインストールしておきましょう！
このように関数を途中まで入力するだけでサジェストしてくれます。そのため関数を一言一句完璧に覚える必要は全くありません^^
まとめ：テーマを反映させよう
今回はここまでにします^^
- ローカル環境にWordPressの開発環境を整える
- WordPressに自分のテーマを反映させる
ローカル環境にWordPress開発環境を整え、自分のテーマを反映できました。
次回からもWordPressのオリジナルテーマ開発に関する記事を続けていきます^^
僕も自分のサイトを作りながらブログを書いていきますので、読者のみなさんもぜひご自身で手を動かしながら学んでください^^
引き続き一緒に頑張りましょう！
