見出し画像

WorsPressテーマ開発の流れ

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でも問題ありません。

VS Code

参考記事:【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
○メインビジュアル
○カスタムフィールドを使ってカテゴリー一覧

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
2

こちらでもピックアップされています

WordPressのあれこれ
WordPressのあれこれ
  • 8本

WordPress歴10数年のエンジニアが、10数年ご飯を食べさせてくれたWordPressに恩返しの意味も含めて、これからWPエンジニアを目指す人に向けて情報を発信していきます。

コメントを投稿するには、 ログイン または 会員登録 をする必要があります。