WordPress①環境構築〜オリジナルテーマ作成の基礎【day119】

WordPress

今日は、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で紹介されている方法だと、

1.MAMPなどのツールをダウンロード
2.WordPressのファイルをダウンロード
3.FTPでアップロード

といった作業が必要です。(結構複雑…)

Local by Flywheelというツールを使えば、上記3ステップを1ツールで行うことができるので、とても簡単です!

 …そもそもWordPressとはなんだ?!

わたしのブログ運営でも使っているWordPressですが、そもそもどういったものなのでしょうか。

正体は、CMSです!

CMSとは?
C:コンテンツ
M:マネジメント
S:システム の略。
HTMLやCSSの知識がなくても、簡単にWebサイトを作り、管理することのできるシステムのことです。

CMSでは、記事やその他ページをデータベースに入れることで管理しています。

ページの枠組み(=テーマ)に、データベースから持ってきた記事などのコンテンツを入れることで、簡単にテンプレートに沿ったWebページが出来上がるのです。

データベースから取ってきたコンテンツは同じでも、当てはめるテーマが違えば、異なるデザインのページになる。

今回の学習では、このページの枠組みであるテーマをオリジナルで作成していきます

オリジナルテーマ作成の準備

さっそくオリジナルテーマの作成のための準備をしていきます。

ここでは、ローカル環境構築を「Local by Flywheel」で行ったものとして進めていきます。

作成するテーマを置くフォルダを探す

作成するテーマに関するファイルを置くためのフォルダを探します。

まず「Local by Flywheel」のアプリを開きます。

作成したサイトの管理画面に、パスが書かれています。

赤枠で囲ったところにパスがあるので、そちらをクリックするとフォルダを開くことができます。

ここから、app > public > wp-content > themes を開きます。
自作テーマに関するファイルは全てこちらに入れていきます。

新規フォルダの作成

先ほどの図にあるように、themes > の中に「mytheme」という新しいファイルを作りました。この中に、テーマに関するファイルを入れていきます。

新規ファイルの作成

mythemeファイルに新規ファイルを作成します。

ファイルの内容↓

index.php:基本的なテンプレート
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 Name:テーマ名
Theme URI :テーマのアドレス
Description:テーマの説明
Version:バージョン
Author:作成者
Author URI:作成者のアドレス
Tags:タグ
License:ライセンス
License URI:ライセンスのアドレス

 

あとがき

亀ペースになってしまいましたが、なんとかテーマのファイルをアップロードすることができました。
明日からは、実際にphpファイルをいじってみます!コツコツコツコツ…..

今日は以上です。

 

*ただいま、もりけん塾で勉強中です!

もりけんさん(@terrace_tec)のHPはこちら