PHP
HTML
CSS
WordPress

WordPress 初心者 オリジナルテーマ作り【1】

HTMLとCSSが問題なく出来るようになってきたのでPHPのコーディングを進めていたのですが、
エラーを連発してしまい、自分で解決出来なくなってしまいました。。

もう1度初めから、1個1個の過程を理解しながら進める為にもブログに記録していきます。
※ここでは作りたいページのHTML・CSSが完成しているところから進めます

1.wordpressがどのように構成されているのか

HTML・CSS・PHPなどのファイルや画像フォルダ、データベースにはMySQLを利用している。
このファイルやフォルダ群とデーターベースの間で、データを取得し、データを返す、と言う作業を行っており、サーバーへ表示されている。

2.wordpressのディレクトリ構成

wordpressをインストールしてみると、たくさんのフォルダやファイルが!

wp-content
wordpressのテーマやプラグイン、画像などのデータが入っているフォルダ。
オリジナルテーマ作り(私のような初心者)はこのフォルダ内で主に作業します。
※wp-contentの中のthemeフォルダにテーマが入っています。
このthemeフォルダ内にオリジナルテーマを配置していきます!

wp-admin
wordpressの管理画面に関するファイルなどのデータが入っているフォルダ

wp-includes
wordpressシステム全体に関するデータフォルダ

wp-config.php
wordpressの設定ファイル。

wp-login.php
ログイン画面に関するフォルダ

wp-load.php
動作に必要なプログラム類のフォルダ

index.php
サイトにアクセスされた時に最初に表示されるファイル

その他にもいろいろなファイルやフォルダがあります〜

3.環境構築

①wordpressのインストール
②データベースのインストール
データベースMySQLを使えるようにするため、ローカル環境としてMAMPをインストールし、その上でwordpressをインストールしました。
そのほかにもLocalやXAMPP、Dockerなど、使用する方の環境(macなのかwindowsなのか)にあったものをインストールしてください。

データベースについてまた詳しく調べてまとめ次第、ブログに書こうと思います。
とりあえず今ここではオリジナルテーマ作成を進めていきましょう。

4.テーマフォルダを作成

上記にもあるように
wordpress
 ∟wp-content
  ∟theme
このthemeフォルダの中にテーマフォルダを作っていきます。

ここではmario_themeとします(私の名前のテーマ!)
最小構成としてmario_themeフォルダ内には
①index.php
index.htmlをindex.phpにリネームすればOK
②style.css
index.htmlに対してのCSSファイル。
これはテーマフォルダの直下ではないといけないルールがあるそうです。

そしてこのCSSファイル内にテーマについての記述をする

Theme name : テーマの名前(必須) ここではmario_themeとします
Theme URI : テーマのURI(URL)
Description : テーマの説明 例)オリジナルテーマ、など
Version : バージョン 初めは1.0でいいんじゃないんですかね
Author: 作った人の名前
Author URI: 作った人の URL
License: ライセンス
License URI: ライセンスの URL
などですが、全て記入しなくてもいい

/*
Theme name : mario_theme
Theme URL : 
Description : オリジナルテーマ
Version : 1.0
*/

こんな感じでCSSファイルの一番上に挿入。

これでひとまずwordpress上にテーマとして表示出来るようになる…
といろいろなサイトで見かけましたが、私の場合はこれで出来ず、
ここで時間がかかったものです泣

このオリジナルテーマフォルダmario_themeを圧縮しなければいけなかったのです!
圧縮するって当たり前のことなんですかね?私は全然知らなかったです。

index.phpとstyle.cssがあればページは表示されますが、
テーマを選択する際に、どのテーマなのかわかりやすいように、
そのページのスクリーンショットをサムネイルとして表示させますので、
スクリーンショットをテーマフォルダに保存します。
この時、screenshot.pngとしておくと、自動的にテーマ選択時のサムネイル画像となります。

5.wordpressの管理画面からオリジナルテーマをインストールする

管理画面(ダッシュボード)

外観

テーマ

新規追加 or 新しいテーマを追加

テーマのアップロード

ファイルを選択
ここで圧縮したZIP形式のテーマファイルを選択

いますぐアップロード

をするとこんな感じになります

スクリーンショット 2018-07-06 1.47.06.png

もともと入っているテーマもありますが、アップロードしたオリジナルテーマmario_themeにカーソルを合わせると
”有効化”と言うボタンが出てくるので、クリックするとオリジナルテーマが適応されます。
これでHTMLとCSSで構成した内容と同じものが、ホーム画面として表示されるはずです。

ちょっと番外編

管理画面から、とさらっと書きましたが、
私はその管理画面の出し方さえわからずググりました笑
むしろワイのwordpressのページはどこじゃ、状態でした。

https://bazubu.com/how-to-login-to-wordpress-22995.html
こちらを参考にしてみてください。

wordpressの構造を理解した今なので、
ログイン画面はホームのアドレスの後にwp-login.phpをつけることや、
管理画面はwp-adminだってことがわかりました。

バッチバチの初心者だと、本当にわからないことだらけです。
ちなみにスクリーンショットのやり方も知りませんでした笑

そんなこともわからない初心者の私ではありますが、
次の記事では具体的にファイルを作っていきます!!

参考にさせていただきましたのはこちら
https://webst8.com/blog/wordpress-theme-howto-make/
こちらとってもわかりやすいです。神様。。