登場人物

俺：どちらかというとフロントの人。

パイセン：どちらかというとバックの人。

事の発端

俺「WordPressのいいテーマないんじゃが」

パイセン「そりゃ(無料の中から探したら)そうなんじゃねーの？」

俺「これじゃ俺様の超カッコいいサイトが作られへんやん」

パイセン「なんで自分で作らんのよ。あんたフロント屋さんやろ？」

俺「だってPHP分からへんねやもん・・・」

パイセン「いや、ゆーても作り変えるところなんて所詮HTMLとCSSやんけ」

俺「んな事ゆーても・・・」

パイセン「何事もチャレンジや。やってみーや」

俺「はえー。これがパイセン式スパルタっすね」

パイセン「んな事ゆーとる暇があったらやりーや」

とりあえず探してみた

俺「とりあえずカスタマイズのやり方から探すか・・・」

俺「[Wordpress カスタマイズ]で検索っと」

俺「なになに、”ブランクテーマ”っちゅー奴がおるんやな」

俺「”ブランク”っちゅーだけあって最低限のフレームだけ定義して、そこに足していけばええんやな」

俺「とりあえず、この"Bones"ってやつが人気らしいからこれつこてみよう」

Bonesのダウンロード

Bones公式サイトにアクセス。

俺「おっ、この"Download Now"からダウンロードすればええんやな！」

俺「」

俺「マジかよ。とりあえずGitHubのリンクあるからそっち行ってみよ」

俺「最終リリース2年前やん」

俺「当時のWordpressって4.xだよね？んで今は5.3。どう考えても危険な香りしかしない。やめよう」

もうちょっと新しい記事を探そう

俺「そもそもWordPressなんだから世の中のWeb屋さんが記事作ってるやろ」

~~俺「それこそ大量に紹介記事出してPV稼いどんちゃう？」~~

俺「なにぃ？今は”スターターテーマ”って言われとるんやな」

俺「とりあえず今は"Sage"ってやつと”UNDERSCORES”ってやつが割と有名なんやね」

Sage

Sage公式サイト

俺「なるほど、Composer使うのか・・・」

俺「Bootstrap4が使えるからイマドキな感じやな~~(どうせグリッドしか使わんしVer.3でええけどな)~~」

UNDERSCORES

UNDERSCORES公式サイト

俺「え？これってUnderscore.jsとはなんの関係もないんですか？？？」

俺「なになに、”超最小限のCSSだけあるからあとはがんばりーな。”(糞要約)やって」

俺「どう考えてもこれやな。これ使ってみよう」

と、いうわけでUNDERSCORESを使ってみた

ダウンロード

テキストボックスにテーマ名を入れてダウンロード。

俺「とりあえず”oresama(俺様)”でいいか。」

俺「なるほど、こんな感じで一式が出来上がるのか」

俺「とりあえずこれ当ててみるか」

ローカルでWordpressの環境を立ち上げる

俺「とりあえず前に作ったDocker環境使ってローカルに立てるか」

$ git clone https://github.com/hikaruright/docker-wordpress.git

俺「WordPressのバージョンが5.2で若干古いけどまあ問題ないやろ。」

俺「あとはビルドして起動っと。」

$ cd docker-wordpress
$ docker-compose build
$ docker-compose up -d

俺「この状態でhttp://localhost:9810に接続するで」

俺「よし、あとは適当に設定してっと」

俺「よし、完成や」

パイセン「いや、ここからが本番やろ」

空のテーマをアップロード

俺「メニューの、外観 > テーマ > 新規作成を選んで、さっきのoresama.zipをアップロードっと。」

俺「これでアップロード完了。試しに見てみるか」

俺「はえー。UNDERSCORESってこんなにシンプルなんか。思った以上だぞこれ」

俺「まあいいや。ここまできたらなんとかなるやろ」

Dockerコンテナに繋いで作業を行う

俺「コンテナ接続といえばVSCodeさんや。頼むで！」
※知らない人は「Remote - Containers」というExtensionをインストールしましょう。

右下のアイコンをクリックするとメニューが出るので、

Remote Containers: Attach to Running Containerを選んで、

最後にwp-appを選ぶ。

新しいウィンドウが開くので、以下のディレクトリを開く。

/var/www/html/wp-content/themes/oresama/

俺「よし、とりあえずなんとかスタートラインに立ったぞ」

適当にいじってみる

俺「まずは、header.phpがヘッダ部分っぽいからここからやってみよう」

俺「次にcssやな。style.cssって奴がそれっぽいから、試しに変えてみるか」

style.cssの末尾に追加

/*-----------------------------------
 * Appended Styles
 *-----------------------------------*/

.site-title {
	 background-color : pink;
 }

俺「どれどれ・・・」

俺「おっ、かわっとるやん！」

※変わらない場合にはブラウザのキャッシュクリアをしてみてください。

あとはやるだけ

俺「よし、あとはフロントエンジニアの腕の見せどころやな」

俺「しかし疲れたし今日はここまでにしとこ」

パイセン「マジか。なんもしてへんやん」

作ったテーマを取り出す方法

俺「あ、そういえば改造したやつの取り出し方ってどうするんやろ？」

俺「まあ適当に取り出せばいいか」

俺「ホストからコマンド実行してっと」

$ docker cp wp-app:/var/www/html/wp-content/themes/oresama ./oresama

俺「これでオッケー」

パイセン「なんかDockerの使い方間違ってへん・・・？」

最後に

パイセン「そういえばお前、ECサイトの実装にPHP使ってなかったっけ？」

俺「あれほぼコピペでしたし、そもそもそれ以外はPHP一切使ってなかったっすよ」

パイセン「マジか」