どうも、にわじゅん（@niwajun_blog）です。
ブログが投稿できるサービスで有名なWordPressのテーマ作成を、自分でやり始めたので学習のアウトプットとして記録していきます。
WordPressは、作成した記事（タイトルや文章、画像など）をテーマと呼ばれる枠みたいな物にあてはめてブログなどのサイトを表示させています。
このテーマ、初めから3つくらいテーマがインストールされていますし、ダウンロードすれば他のテーマも使えます。今回はそのテーマを自作してみます。
自分のPCにWordPressの環境を作ろう
今回、自分のPC内にWordPressの環境が作れる、Local by Flywheel という、フリーソフトを使っていきます。
実際にサイトをネット上に公開させるには、サーバーをレンタルしたり、ドメインを取得したりなどの手順が必要ですが、Local by Flywheel （以下 Local）はサーバーやDB（データベース）、WordPressのインストールといった必要な環境が手軽に作れるのでおススメです！
Localで作ったテーマは、サーバーなどをレンタルしてアップすれば公開できます。なので公開前のテスト的な感じですかね。
Localのインストール～設定手順はいろんなサイトで公開されていますので、検索してみてください。
Localでのサイト名やWordPressのログインパスワードなどの設定が終わると次のような画面になると思います。今回は『MyBlog』という名前で登録してサイトを作成しました。
まず、作成したサイトを使えるようにしましょう。
左上の方のサイト名をクリックして選択します。次に右上の『START SITE ▶』をクリックしてサーバーやデータベースなどを起動させます。
『START SITE ▶』が『STOP SITE ■』になればOKです。これでローカル環境でWordPressが使えるようになります。
『OPEN SITE』をクリックするとブラウザから見たサイトが表示され、『ADMIN』をクリックするとWordPressのログイン画面が表示されます。
『OPEN SITE』をクリックするとサイトが表示。
『ADMIN』をクリックするとWordPressのログイン画面が表示されます。Localで設定したユーザーネーム、パスワードを入力してログインします。
WordPressの設定
ログインするとWordPressのダッシュボードと呼ばれる管理画面が表示されます。
LocalでWordPressをインストールした場合は、最初は英語表示なので、日本語が表示されるように設定変更していきます。『Settings』→『General』とクリックして設定画面へ。
下の方にスクロールしていき、Site LanguageのEnglishを『日本語』へ。TimezoneのUTC+０を『UTC+９』へ変更し、さらに下の方の『Save Changes』クリックし設定を保存。
これで日本語と時間設定が完了しました。ちゃんと日本語表示になってますね。
あとは、WordPressの機能を拡張できる、プラグインを入れます。日本語のサイトを作成する時には入れておいた方が良いプラグインです。
では実際にプラグインを入れていきましょう。ダッシュボードの『プラグイン』→『新規追加』をクリックします。
検索欄に『wp multibyte patch』と入力すると候補が表示さるので、『今すぐインストール』→『有効化』をクリック。
『プラグインを有効化しました。』と表示されればOK。これでプラグインが有効化されました。
以上で環境作成からWorsPressの基本的な設定は完了です。（設定はもっと細かく編集できたり、プラグインも他にもたくさんありますが今回は省略します。）
自作テーマを作ろう
WordPressの基本的な設定が出来たのでテーマを作っていきます。
まず、テーマを作るのに最低限必要なフォルダとファイルを作ります。
Localのサイト名を右クリック→メニューの中の『Show Folder』をクリックするとサイトのmyblogフォルダーが表示されます。
myblogからさらに、app → public → wp-content → themesと開いていきます。このthemesフォルダに自作テーマとなるフォルダを作ります。
ファイル構成はこんな感じになってます。
twentynineteenなどの他のテーマがあるので、そこに『myblog』という名前でフォルダー作ってみました。好きな名前でOKです。
テーマに必要なindex.phpとstyle.cssファイルを作る
テーマを作るには『index.php』と『style.css』の２つのファイルが最低限必要なので、myblogフォルダの中に作ります。
僕は普段、VSCodeというテキストエディタを使っているので、そのエディタでファイルを作成しました。
次に、テーマの名前などの基本情報を設定するためにstyle.cssにこんな感じで記述していきます。
Author: 作成者の名前
Description: テーマの説明文
Version: テーマのバージョン
テーマの名前、作成者、テーマの説明などを記述。設定できる項目は他には、作成者のURLやライセンスなどがありますが、全て記述する必要はありません。
編集が終わったら保存してダッシュボードからテーマが作成されているか確認してみます。
LocalのADMINをクリックしてWordPressのダッシュボードを表示させます。『外観』→『テーマ』をクリック。
マイテーマというのが追加されていますね。
テーマの詳細をクリックすると、先ほどstyle.cssで編集した情報が表示されています。
有効化のボタンをクリックすればテーマが適用されて使えるようになります。
これで自作したテーマをWordPressに登録して使えるようになりました。
今回はテーマの基本的なファイルを作成しただけなので、記事を投稿してもブラウザには何も表示されません。とりあえず、基本的なテーマ作成は出来たので今回はココまで。
コメント