この前書いた「子テーマ」の記事、そこそこアクセスがあるんですが、正直そんなに気に入ってるわけではないので、作り変えようかなと思い立ちました。せっかくなんでフルスクラッチまでいかないけど自分で作りたいなーって感じのCSSフレームワークを使った作り方をメモっておきますね。

WordPressテーマを作るためには、他にこんな記事も参考になるとおもいます。

けど、私はそんなに熱心じゃない(というより真面目にやってるフィールドがここではない)のでこのブログでは自分の忘備録。

 

1.テーマ開発用のWordPressをローカルに用意

2.テーマユニットテストを入れとく

日本語版をダウンロードして、テーマ開発用のWordPressにインポート

3.スターターテーマを用意する

ゼロからコードを書くよりも簡単。

4.テーマ内で使うコードに詰まったらこんなのとか。

※もっと色々いじりたい人は最近出版されたこの本はオススメ

 

 

5.各テンプレートをコーディング

あ、テーマにコードを書く時は、テンプレート階層とテンプレートファイルの関係やWordPress の表示ロジックとかこの辺の理解があると、無駄で力技なテンプレート作らなくて済むとおもいますだ。

WordPress テンプレート階層

 

6.SCSSをコンパイルしながらCSSを作成

基本的にこむずかしい技を使ってるわけではなく、各パーツごとにSCSSファイルを作成し、それを連結させるようなstyle.scssを作ってコンパイルしてるだけです。

/*!
Theme Name: nekomimi_bootstrap4
Theme URI: http://nekomimi-taicho.com/
Author: nekomimiTaicho
Author URI: http://nekomimi-taicho.com/about
Description: Web site to deliver to the concept of nekomimi-taicho.com
Version: 1.0
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: nekomimi_bootstrap4
Tags: two-columns, right-sidebar, custom-menu
*/

/* underscores -----------------------------------------------*/
//@import "_s/normalize";
//@import "_s/typography";
@import "_s/elements";
@import "_s/forms";
//@import "_s/navigation";
@import "_s/accessibility";
@import "_s/alignments";
@import "_s/alignments";
@import "_s/clearings";
@import "_s/widgets";
@import "_s/content";
//@import "_s/infinite-scroll";
@import "_s/media";

/* nekomimi_bootstrap4 -------------------------------------------*/
@import "base";
@import "header";
@import "footer";
@import "primary";
@import "secondary";
@import "breadcrumb";
@import "page_navi";
@import "tag_links";
@import "variables";

 

7. Bootstrap4の理由

まあやってみたかったというのは前述のとおり。
今回はBootstrap4のsassファイルを直接いじるのはやめました。それでもremベースだったりグリッドが変わってたり、card使ってみてなんか面白いなーってのは感じました。次回はダウンロードしたsassでカスタマイズしてみよう〜。

参考:Bootstrap 4の主な変更点とファーストインプレッション – Qiita
参考:Bootstrap 3からBootstrap 4に移行する時に知っておく必要がある注意点のまとめ – コリス

とまあ、夜寝る前にちょっとずつコチコチ作ってたので、ものすごい簡単な作りなのに1ヶ月もかかってしまった。
やっぱりconcrete5の方がテーマは作るの楽だなぁw