【Local by Flywheel】を使用して環境構築なしでWordPressでオリジナルテーマを作成する
先日、Wordpressの自作を行いました。このテーマはオリジナルです。
そこでこれからWordpressのテーマを作成しようと考えている方向けに、どういう風に作成すればいいのか、作成の仕方など書いていきます。
PHPが分からないエンジニアでも、プログラミングをやった事がないデザイナーでも簡単に作成できます。
- 画面構成を作成するためHTMLとCSSを学ぼう
- オンライン学習でWordpressのオリジナルテーマの作成方法を学ぼう
- サーバーや環境構築なしで開発できる【Local by Flyheel】を使用しよう
- 無料のテーマのソースを確認してみよう
スポンサードサーチ
【Wordpressのオリジナルテーマ作成①】
画面構成を作成するためにHTMLとCSSを学ぶ
WordPressのテーマを作成するにあたって行うことはデータベースの設定だったり、PHPの記法だったりありますが、
まずは画面の作成が必要になってきます。
WordPressといってもこれから作成するのは、ただのWebサイトを作成する手順と特に変わりません。
そのため、まずは画面の作成から行います。
この時点で、HTMLやCSSの基本がよく分からないという人は、Progateやドットインストールなどのオンライン学習サービスを使用してみてください。
個人的には、Progateの方が効率よく学べるかなーと思います。より深く知りたいという人は、ドットインストールの方をオススメします。
■ Progateの場合
HTML & CSS講座
初級〜上級 道場まで終わらせた方いい■ ドットインストールの場合
はじめてのHTML (全15回)
はじめてのCSS (全17回)
実践！ウェブサイトを作ろう (全16回)
実践！スマートフォンサイトを作ろう (全22回)
WordPressのオリジナルテーマの画面を作成するにあたって気をつける2つのこと
- PCとスマホ両方で、サイトが見られる事
- 構造化マークアップを行う事
【MFI対応】PCとスマホの両方でサイトが見られる事
現在のWebの主流はMFI（Mobile First Index）と呼ばれ、昨今のスマホの普及によりGoogleがスマホ対応を行なっていないWebページの順位を下げる傾向にあります。
そのため、PCで開発していてスマホの表示を特に考慮していない設計の場合、せっかくオリジナルのテーマを作成したのに、検索結果の順位が下がる。なんて事があるので気をつけましょう。
このオリジナルテーマに関しても、PCとスマホの両方で見られる設計になっています。
【構造化マークアップを行う事】
普通にHTMLを書けば、画面の作成が完了という訳にはいきません。
実は、画面（見た目）を作成するだけではなく、その画面がどのような構造になっているのか詳細に書く必要があります。それが、構造化マークアップです。
Webサイトの発見は、クローラーと呼ばれるロボット（プログラム）が行っています。
そのロボットに「うちの画面の構成はこうなってますー！」と正確に伝えるために行う作業です。
これをしないと、画面にどのような部品があるかロボットは判断できないため、検索結果の順位が下がってしまいます。
構造化マークアップは例えば、以下のようなHTMLがあった場合、構造化マークアップはitemprop="description"の部分になります。
<div class="article-description">
<p itemprop="description">この記事の説明文が入ります。</p>
</div>
構造化マークアップの正しい書き方や詳しいサンプルはこちらの参考サイトの方に詳しく書いてあります。
【Wordpressのオリジナルテーマ作成②】
オンライン学習でWordpressのオリジナルテーマの作成方法を学ぼう
画面の作成の仕方を学んだあとは、Wordpressを実際に動かすためのコーディングが必要になりますが、そのやり方の基本はドットインストールで学ぶ事ができます。
レッスンでは環境構築（このブログではその環境構築を行わないで開発できる方法を下記で書いています）から実際にコーディングして動かすところまで行なっています。
レッスンをがっつり受講する必要はない
ここのレッスンで重要と思ったのは、レッスンの事を全て頭に叩き込まない事。
テーマによりけりで構成が変わってくるので、どのページをどう切り分けるのか、関数の意味などの参考程度で大丈夫です。目安としては、レッスン3〜22までが重要。
画面のパーツ名は把握しておきたい
「どのファイルが画面のどのパーツになるのか」だけはちゃんと把握しておくとコーディングの際にイメージがつきやすいと思います。
また、機能によってファイルを分割することもありますが、その時もわかりやすい名前で行うと迷子になりにくいです。
header.php → 画面のヘッダー footer.php → 画面のフッター single.php → 記事の詳細 page.php → 固定ページ index.php → メインページ部分 sidebar.php → サイドバー部分
【Wordpressのオリジナルテーマ作成③】
《Local by Flywheel》サーバーや環境構築なしでWordpress開発できる
ドットインストールではローカル開発環境を既に構築してあることを前提に話が進んでいますが、今回はそういった面倒な事は行いません。
ネットの色々なWordpressの開発を行う際の記事を見ましたが、前提として、既に開発環境の構築や自前のサーバーを持っているとか初心者からするとその時点で無理ゲーでは？と思いました。
サーバーや面倒な環境構築も必要がない。エンジニアじゃなくても簡単に設定と開発ができる「Local by Flywheel」を使用しましょう。
Local by Flywheel 公式サイト
インストール方法
公式サイトに飛んだら[“FREE DOWNLOAD”]というボタンを押します。そうすると以下のように、OS選択と入力欄があるので入力します。赤枠部分が入力必須の項目です。名前とか会社の名前は入れなくてOK。
ダウンロードしたファイルを開くと、自動的に必要なツールが自動的にインストールされます。
※Virtual Boxというソフトが入っていないと、「ダウンロードしますか？」というダイアログが出る場合がありますが、インストールしてOKです。仮想環境で開発ができるようになる便利なものと考えていただければ良いです。
必要なツールが全てインストールされると、以下のような画面になるので[“CREATE A NEW SITE”]のボタンをクリックします。
サイト名を入力する欄が出てくるので、赤枠部分に自身の好きなサイト名を入力します。想定しているテーマの名前と一致させておくと良いかも。
次に、ローカルでWordpressの管理画面へのログインする際の情報を登録します。
実際に管理画面へのログインに必要なので、Username （もしくはEmail）/ Passwordはメモしておいてください。
ちなみにメールアドレスはローカルで使用するものなのでお好みでOK。
次に、「環境をどうしますか？」という画面が表示されます。特にこだわりがない人は、デフォルト（preferred）で問題ありません。
ただ一応、環境は確認しておきましょう。
・PHPのVersionが7以上である事
・Apache もしくは nginx
・MySQLが5以上
これで設定は完了です。
全ての設定が完了すると、以下のような管理画面が出てくると思います。
そしたら、[“ADMIN”]というボタンを押して、Wordpressの管理画面へ飛びましょう。
■ADMIN
→ Wordpressの管理画面ページに飛びます。
■VIEW SITE
→ ローカルでページを見られます。
■1番右上のボタン
→ サイトの起動、停止ボタン
以下のようなログインページに遷移するので、先ほど登録したUsername（またはEmail）/ Passwordを入力してください。
以下のような画面にログインできたら成功です。
作成したテーマはどこにアップロードすればいいのか
実際にサーバーにファイルを上げる際には、FTPツールなどが必要ですが、このLocal by Flywheelを使用する場合は必要ありません。直接ファイルを編集して更新すればOK。
※PATHは環境によって異なります
/Local Sites/notes（サイト名）/app/public/wp-content/themes/****(テーマ名)
おそらく、既存で既にいくつかのテーマが既に入っています。（twentynineteen, twentyseventeenみたいな名前のものが）
自作のテーマをアップロードしたいときは、管理画面からアップロードしてもいいですがZIP形式にしなくてはならないため、ディレクトリ（テーマ名）を作成して必要なファイルを配置していく方がいいかも。
【Wordpressのオリジナルテーマ作成④】
無料のテーマのソースを確認してみよう
テーマのソースの覗き方
・WordressのVersionが4系の場合 ["ダッシュボード"] → ["外観"] → ["テーマの編集"] ・WordressのVersionが5系の場合 ["ダッシュボード"] → ["外観"] → ["テーマエディター"]
WordPressは通常のPHPと違い、結構特殊な書き方をします。
コーディングがしやすいように、便利な関数が既に用意されているので、そういった部分をどのように記法するのか無料のテーマのコードを覗いてみて、分からなければググりましょう。
ただ、基本的に動かすだけなのであればドットインストールの受講だけで事足ります。
それ以外に欲しい機能はどのように動いているのか確認すると良いです。
- categoryやtagに紐付いた記事はどのように取得するのか
- URLやタイトルはどのように取得しているのか…etc
無理にコーディングしようと考えなくても良い
これは僕独自の考えもあるんですが、オリジナルのテーマだからって0から100まで作成する必要はないと思っています。
現在は便利なプラグインがあるので、それを利用すれば特にコーディングが必要なく機能を追加することができます。
コンタクトフォームを作成したい
→ Contact Form 7などおすすめ、関連記事を表示したい
→ Contextual Related Postsなど最近の投稿を表示したい
→ Recent Posts Widget Extendedなど
お金に余裕があれば有料のテーマを購入して参考にするもアリ
僕はマナブさん（@manabubannai）という方のテーマを元々購入していて、それを参考にしてこのテーマを自作しました。
ブロガーの中で有名なテーマは「JIN」とかでしょうか。ちょっと値段が高いので参考にするならもうちょっと値段が安いテーマの方がいいですが…
1つの手段として有料テーマを参考にするのも良いと思います。デザインだったり構造化だったりは有料ならではでしっかりしています。
スポンサードサーチ
まとめ
WordPressのオリジナルテーマのロードマップを書きました。
自作の良いところは、自分で作成したものなのでカスタマイズしやすいところですね。
自分のポートフォリオとしても使用できるので、エンジニアやデザイナーの方は勉強がてら作って損は無いと思います。