WordPressテーマ開発の流れ
WordPressのテーマを開発する流れを書いていきます。
必要に応じて加筆をしていきますのでわかりづらい部分などありましたら、メンバーはサロンで、それ以外の方はTwitter(@takada_r)でご質問ください。
開発環境を作る
Local by flywheelをインストール
Local by flywheelは、ローカルでWordPressの開発環境を作るのに便利なアプリです。
MAMPやVagrantよりお手軽にできるのでおすすめです。
参考記事：超簡単にローカル環境が構築できるLocalbyFlywheelの使い方
https://bazubu.com/local-by-flywheel-33920.html
VS Codeをインストール
テキストエディタです。
Progateでは、ブラウザからソースを書くことができましたがローカルではテキストエディタなどを使います。
ここではVS Codeをおすすめしていますが、AtomやSublimeTextでも問題ありません。
参考記事：【2019年最新】html,cssコーディング時に便利なVScodeの設定とプラグイン
https://zukulog098r.com/cord-vscode/
参考記事：VSCodeでWordPress開発するための拡張機能とおすすめの設定
https://haniwaman.com/vscode-wordpress/
Preprosをインストール
Preprosは、SASSやJSなどをコンパイルしたり、色々してくれるアプリです。※私もよくわかってませんが多分便利。
ここではSASSのコンパイルをメインに使います。
現場では、Gulpやnpm-scriptsを使う機会も多いので機会があればそれも勉強しておきましょう。
https://prepros.io/
Sourcetreeをインストール
これは、ターミナル（コマンドライン）で出来る人は入れなくても大丈夫です。ただ、ソースの変更履歴などはGUIの方が見やすいです。
github、bitbucketのアカウントを作る
実際に仕事をするとgithubやbitbucketでリモートリポジトリを管理していることが多いのでアカウントを作っておきましょう。
githubは、自分のプロダクトを公開して技術アピールすることも有効です。
WordPressテーマ作成の準備
Local by flywheelにテストサイトを作成
Local by flywheel（Localに名前変わった？）がインストール出来たら右下の+ボタンを押して新規サイトを作ります。
_sを使ってスケルトンのテーマを作成する
_sはWordPress本体が作っているスケルトンテーマです。
インストールしても何もCSSが当たっていません。ただ、ファイル構成やコーディング規約など勉強になるのでこれをベースに作ります。
_sは、WP CLIを使ってインストールしましょう。
Local by flywheelで作ったサイト名を右クリックするとOpen Site Shell（バージョンによってはOpen site SSH）という項目があるのでそれをクリックします。すると、ターミナルで接続することが出来ます。
WP CLI - wp scaffold _s
wp scaffold _s <slug>リモートリポジトリを作りpushする
リモートリポジトリを作ってpushします。
メンバーの方は私に
_sの要らない物を削除してpush
※ここは一旦無しにします。
_sが便利な関数を出力してくれるのですが勉強の為、削除して新たに作った方がよいと思いましたが…やっぱり使いましょう。
まずは、WordPressテーマの開発経験を積んでみましょう。
テーマの作成
SCSSファイルの整備・コンパイルしてみる
SCSSファイルはA3Cのやり方に合わせて下さい。
※メンバー以外の方は自由に。
SCSSファイルの構成
コーディングルールの確認
コーディングルールはWordPressを遵守します。
WordPressコーディング規約
大まかな全体のレイアウトを作る
○レスポンシブ
ここでは、ヘッダーとフッターの位置、メインカラムとサイドカラムのレイアウトを作ります。
また、スマホ、iPadでも表示崩れがないように調整しましょう。
PDFとpngのシングルページのデザインです。
ダウンロードして使ってください。
特に画像など使っていないので以下の形式で大丈夫かと思います。
header.php
○ロゴ
○グローバルナビ
○ドロワーメニュー
footer.php
○ウィジェットエリア
sidebar.php
○ウィジェットエリア
index.php
○条件分岐で各post毎に表示を分ける
single.php
○カテゴリー・タグ
○thumbnail
○コメント
page.php
○single.phpから要らない物を削除
archive.php
○ページネーション
home.php
○タイトルの変更
front-page.php
○メインビジュアル
○カスタムフィールドを使ってカテゴリー一覧
この記事が気に入ったらサポートをしてみませんか？