先日サイトを少し整理した話で書いたように、現在使っている「Beans」テーマが古くなってきたので新しいテーマへの変更を検討したところ、何故かブランクテーマを改造することになっていた話。
やっぱり気になってしまったので、気分転換にサイトを改装することにした。備忘録として、何を変えたかをまとめておきます。
本当はUnderscoresを使いたかった
テストサイト用に StarServerFree で新しいサーバーをレンタルしたところから開始。
色々テンプレートを探した結果、既存の国産テーマは文章主体で痒いところに手が届かない…（今思うとファイルごとカスタマイズすればよかったかもしれないけど）。というわけで海外のブランクテーマ「Underscores」をベースで使うことに。（ただし、後に挫折して妥協した。）
Underscores | A Starter Theme for WordPress
カスタマイズすることが多すぎる Underscores
評判通り必要最低限、まっさらのデザイン。目標は UIkit3を組み込んで Beans を再現すること。
まず、function.phpに追記してUIkitをCDNで読み込ませるところまではできた。
次にレイアウトを左サイドバーの2カラムにしたかったけどこれがうまく行かず。この記事によると layout > sidebar-content.css を使えば良いことまでは分かったが肝心の「layout」フォルダがない。なんでやねん。
メインメニューもかっこいいスライド式か妥協してアコーディオンにしたかったけど実装するには骨が折れすぎるので断念。
UnderStrap で妥協
UnderscoreにBootstrapを組み込んだ UnderStrap で妥協することに。でもBootstrap、重くてもっさりしてるんだよなあ。
どっこい Sass が使えない（技術的に）
子テーマまではインストールすることができた。だけど子テーマは基本色が紫でなんともダサい。
この段階では、BootstrapのCSSを手作業で書き換えるのは結構大変なのでこれを機にSassも勉強してみるか…とか抜かしてた。バーカ。
CSSをSassで変更するには色々インストールしないといけないらしい。
以下はプログラミング関連が殆ど分からないなりにやってみた格闘の記録。
Sassを書いてみる
Sassの文法すら知らないのでとりあえずコピペ。
/sass/theme/_child_theme.scss か同一フォルダ内の_child_theme_variables.scss どっちか（結局どっちか分からんかったので両方）に $primary-color: red; と書いて基本色の文字が赤くなればゴール。
これで色が変わるかな？
……はいダメ～。（ちきしょう世の中甘くない）
オンラインではうまく行かない
書いたSassを「使えた」状態にするにはSassをコンパイルしてCSSファイルを出力することになるらしい。知らんけど。
web上でSassをコンパイルするには「WP-SCSS」とかいうプラグインを使う方法が良いらしい。そういう記事がググるといっぱい出てくる。
どっこいこのプラグインは今年の7月にサービス終了していた。なんでやねん。
一応、GitHub にてそれっぽいzipファイルを配布していたがインストールしてもダッシュボードの設定メニューに反映されず…なんでやねん。
その後代替プラグインSCSS-Libraryを使って同様のことをする方法も試してみたけどうまく行かず。どういうふうにうまく行かなかったかはもう忘れた。ちきしょう。
ローカル環境の構築
web上でうまく行かないならローカル環境を構築すればいいじゃない。
今まで知らなかったけどwordpressのローカル環境構築は「LOCAL」というソフトを使えばめちゃ簡単にできるらしい。
というわけでインストール。嫌だったけど。
あとはSassをコンパイルできるようになるだけ
Sassをコンパイルするには3つほど手順もといインストールをする必要があるらしい。具体的にはnode.js、npm、gulpの３つ……多分。これだけでも結構手こずったけど何とか目的の場所にインストールが完了した（一度gulpをインストールする場所を間違えた）。
これで「gulp watch」を走らせた状態でSassファイルを編集保存するとリアルタイムコンパイル（？）されればゴール。
何の成果も得られませんでした
「gulp watch」を走らせるところまではできた。けどエラーがいっぱい出てコンパイルできない。なんでやねん。
長いこと格闘したけどよく分からず。もうやだ。
つーか手作業でCSS書き換えたほうが早くね？
この辺で目的と手段が入れ替わっていることに気付く。Sassを使うのは手段であって目的ではない……結局、書き換えにSassを使うのは諦めることにした。ちきしょう。
ていうかSassって何なんだ。今も謎。
まとめ
上記、経緯をさっくり書いてるけど各工程の試行錯誤に数時間かかってるからな。ちきしょう。
全体的に「そんなものないよ…」と言いたくなることが多かった印象。ただ、ローカル環境でwordpressを動かせるようになったのは収穫だったかな。ダッシュボードのテーマエディタより使いやすい「Brackets」で編集できるし。
というわけで次回はCSSファイルと各種phpファイルの追記＆改変をまとめた「改造編」を書く予定。
おわり。