
今日は、WordPress①環境構築〜オリジナルテーマ作成の基礎をアウトプットします。
こんにちは。駆け出しコーダーのharuです。
2歳0歳の育児をしながら、22時〜2時にプログラミングを独学しています。
2020.5.11~学習スタート
2020.8.10~実務でコーディングしています
まだHTML/CSS(SCSS)/jQuery のよわよわです。これからもっと知識をつけていきたく、インプット・アウトプットを続けています。
普段から学習していてわかったことや、気付きをログに残しています。
※認識の間違っている箇所があれば、ご教授いただけるとうれしいです!
WordPress①環境構築〜オリジナルテーマ作成の基礎
WordPressのテーマ作成や、カスタマイズのお仕事をしたく今日から学習をスタートさせました。
参考書籍は、こちらです。
こちらは、WordPressのローカル環境構築でわたしが使った「Local by Flywheel」の説明もあり、とてもわかりやすいです。
ローカルサーバー環境構築
WordPressのサイト制作を、自分のPCのみで進めるときに必要なのがローカルサーバー環境の構築です。
ローカルサーバー環境内でWordPressをいじる分には、実際にweb上に公開されたりしません。
案件でサイト制作をする際にも使用します。(制作途中のものが公開されては困る!)
今回は「Local by Flywheel」というツールを使いました!
ドットインストールやYouTubeで紹介されている方法だと、
2.WordPressのファイルをダウンロード
3.FTPでアップロード
といった作業が必要です。(結構複雑…)
Local by Flywheelというツールを使えば、上記3ステップを1ツールで行うことができるので、とても簡単です!
…そもそもWordPressとはなんだ?!
わたしのブログ運営でも使っているWordPressですが、そもそもどういったものなのでしょうか。
正体は、CMSです!
C:コンテンツ
M:マネジメント
S:システム の略。
HTMLやCSSの知識がなくても、簡単にWebサイトを作り、管理することのできるシステムのことです。
CMSでは、記事やその他ページをデータベースに入れることで管理しています。
ページの枠組み(=テーマ)に、データベースから持ってきた記事などのコンテンツを入れることで、簡単にテンプレートに沿ったWebページが出来上がるのです。
今回の学習では、このページの枠組みであるテーマをオリジナルで作成していきます!
オリジナルテーマ作成の準備
さっそくオリジナルテーマの作成のための準備をしていきます。
ここでは、ローカル環境構築を「Local by Flywheel」で行ったものとして進めていきます。
作成するテーマを置くフォルダを探す
作成するテーマに関するファイルを置くためのフォルダを探します。
まず「Local by Flywheel」のアプリを開きます。
作成したサイトの管理画面に、パスが書かれています。
赤枠で囲ったところにパスがあるので、そちらをクリックするとフォルダを開くことができます。
ここから、app > public > wp-content > themes を開きます。
自作テーマに関するファイルは全てこちらに入れていきます。
新規フォルダの作成
先ほどの図にあるように、themes > の中に「mytheme」という新しいファイルを作りました。この中に、テーマに関するファイルを入れていきます。
新規ファイルの作成
mythemeファイルに新規ファイルを作成します。
ファイルの内容↓
style.css:テンプレートに使うCSS
editor-style.css:編集画面(エディター)用のCSS
function.php:各種設定につかうファイル
jpg:テーマの管理画面に表示される画像(png, jpeg, gif)
テーマを有効化する
ここまでできたら、WordPressの管理画面にすすみます。
Local by Flywheelの画面からADMINをクリック。
WordPressの管理画面に入れます。
これからのサイドバーから、外観 > テーマと進むと、すでに先ほど作成したテーマが入っています。(ファイルを指定のフォルダに入れるだけで、テーマができるなんて…!)
テーマの有効化を選べば、完了です。(この時点では、index.phpが真っ白&記事をデータベースに入れていないので、何も表示されません。)
テーマの基本情報を編集する
テーマの管理画面に表示される情報を編集します。
サイドバーから 外観 > テーマエディター を選びます。
style.cssのファイルを選び、以下のように記述します。
Theme Nameのあとにスペースを入れると、うまく反映されません。(ハマった…)下図のように、スペースは入れずに記述します。

これで保存をして、テーマ一覧に戻ってみます。
テーマ名が「MY THEME」に変更されました。
「テーマの詳細」を押すと、そのほかのディスクリプションなども表示されます。
記述する内容は、以下です。全て記述する必要はありません。
Theme URI :テーマのアドレス
Description:テーマの説明
Version:バージョン
Author:作成者
Author URI:作成者のアドレス
Tags:タグ
License:ライセンス
License URI:ライセンスのアドレス
あとがき
亀ペースになってしまいましたが、なんとかテーマのファイルをアップロードすることができました。
明日からは、実際にphpファイルをいじってみます!コツコツコツコツ…..
今日は以上です。
*ただいま、もりけん塾で勉強中です!
もりけんさん(@terrace_tec)のHPはこちら