WordPressでローカル環境を構築し、自作テーマを作るまでの下準備

WordPressでローカル環境を構築し、自作テーマを作るまでの下準備を説明する。

テキストエディタのダウンロード

まずはコード編集のためにテキストエディタが必要になる。

Atom, Sublime textなど、エディタがあるので、好きなテキストエディタをダウンロードする。

今回は、Atomをダウンロードした。

Local by Flywheelをダウンロード

次にローカルで環境構築できるようにするため、Local by Flywheelをダウンロードする。

Local by Flywheelの使い方説明に関しては、下記動画がとてもわかり易い。

Local by Flywheel上でサイトを追加

Local by Flywheel上でサイトを作成する。

左下の＋からウェブサイトを追加できる。

追加作業の時にログインとパスワードを決める場所があるが、これは後々wordpressの管理画面に入る際に必要になるので、忘れないようにしておく。

すでに追加してしまっているが、追加が終わると、画像上の「Beautiful Local Japan」「wp_development」というような形で、表示される。

OPEN SITEで現在のサイトを確認

OPEN SITEのボタンを押すと、現在のウェブサイトを確認できる。

初期設定では、テーマは「Twenty Twenty-One」というテーマのサイトが設定されている。

ADMINを押すと、編集画面に移行

Adminを押すと、編集画面へ移行する。

最初は英語表記なので、Setting > General の Site Languageを日本語にしておくと、やり易いだろう。

テーマを追加するためのフォルダを用意

外観＞テーマに進むと現在のテーマを確認できる。

初期設定では、テーマは「Twenty Twenty-One」というテーマになっている。

ここに自作テーマを追加していく。

テーマの格納場所

local by flywheelでURLの部分の矢印を押すとファイル構成が見える。

app>public>wp-content-themesをクリックしていくと、既存のテーマが確認できる。

初期テーマのtwentytwentyoneに加え、選択肢にあったtwentynineteenやtwentytwentyのフォルダも確認できる。

ここのthemeフォルダの中で、新しく自分の自作テーマのフォルダを追加する。

自作テーマに必要最低限なファイルを格納する

index.phpとstyle.cssの二つのファイルが自作テーマを反映させるにあたり必要なファイルとなる。

なので、themesの中に、新しくフォルダを作り、その中にindex.phpとstyle.cssのファイルを入れる。

この時点では、二つのファイルには何も書かなくても良い。

自作テーマの作成を進めていくと、大体下記のファイルも必要になってくるので、中身は空でいいので、ファイルだけ入れておいてもよい。

• functions.php…投稿表示数の変更、管理画面の権限の設定など、様々なオプションを記載できるファイル
• style.css…テーマのデザイン
• header.php…ヘッダー部分に表示されるファイル
• footer.php…フッター部分に表示されるファイル
• sidebar.phpサイドナビ部分に表示されるファイル
• index.php…トップページ用ファイル
• page.php…固定ページ用ファイル
• single.php…投稿記事のデザイン
• archive.php…アーカイブ（カテゴリ等）用ファイル
• search.php…検索結果表示用ファイル
• screenshot.png…テーマを選択する時の一覧時に表示される画像

自作テーマが追加されているか管理画面を確認

この状態で管理画面を見ると、新しくテーマが追加されているのが分かる。

テーマを有効にして、”Hello World”が画面に反映されるか確認

ここでテーマを有効にして、サイトを見ると、何も書かれていないので、真っ白な画面が見える。

また、テーマは有効になっているので、index.phpを編集すると、即座に変更内容が反映されるようになっている。

試しに自作テーマフォルダの中に入っているindex.phpに、HelloWorldと打ち込んでみる。

そしてファイルを保存すると、ウェブサイト上で、Hello Worldが反映されるのが確認できる。

テーマのサムネイルを追加する

フォルダの中に、screenshot.pngという画像を保存すると、先ほど何も表示されていなかったサムネイルの部分に画像が表示される。

下記のように画像を入れる。

するとサムネイル画像が表示されているのが分かる。

追加したい機能に応じてファイルを追加する

ウェブサイトを作成するにあたって、トップページだけでなく、色々なページを追加したいはず。

それぞれのページの種類によって、追加するファイルの種類は異なる。

自分がサイトに取り入れたい機能に応じて下記のファイルを先程のフォルダの中に追加していく。

• functions.php : テーマに使用する関数等
• style.css : テーマのデザイン
• header.php：ヘッダー部分
• footer.php：フッター部分
• sidebar.php：サイドナビ部分
• index.php：トップページや全体のベース
• page.php：固定ページ用ページデザイン
• single.php：投稿記事用ページデザイン
• archive.php：アーカイブページ用テンプレート
• search.php：検索結果表示用テンプレート

後は各ファイルにHTML、CSS、必要とあればjavascriptのファイルを追加・記述していき、自作テーマを作成していく。

HTMLサイトからwordpressへの移行に関しては、こちらを参照。