WordPressのテーマ作成の備忘録⑤

javascriptの設定を追加

webpack.mix.jsを変更

mix.postCss(
  './assets/css/style.css',
  './theme/style.css'
).options({
  postCss: [
    require('postcss-import')(),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    tailwindcss('./tailwind.config.js'),
  ],
  processCssUrls: false,
}).js(
  'assets/js/app.js',
  'theme/js'
);

動作確認し、問題ないのを確認。

WordPressのテーマ作成の備忘録④

寄り道してunderscoresに
tailwindcss3とAlpinejsをLaravel Mixで導入。

underscoresを公式からダウンロードして

underscores.me

ダウンロードしたファイルをthemeフォルダに展開し
モジュールを入れる。

yarn init
yarn add --dev laravel-mix tailwindcss alpinejs cross-env postcss-import cross-env postcss-nesting
yarn tailwindcss init
touch webpack.mix.js

ディレクトリ構成はこんな感じ

├── assets　// css、jsを格納
├── mix-manifest.json
├── node_modules
├── package.json
├── tailwind.config.js
├── theme　// underscoresをここに展開
├── webpack.mix.js
└── yarn.lock

取り急ぎcssをテストできる状況に。

webpack.mix.js

const mix = require('laravel-mix');
const tailwindcss = require('tailwindcss');

mix.postCss(
  './assets/css/style.css',
  './theme/style.css'
).options( {
  postCss: [
    require('postcss-import')(),
    require('tailwindcss/nesting')(require('postcss-nesting')),
    tailwindcss('./tailwind.config.js'),
  ],
  processCssUrls: false,
});

Tailwindcss2から3になり設定が多少変わっているので
こちらを参考に修正。

tailwindcss.com

tailwind.config.js

module.exports = {
  darkMode: 'class',
  content: [
    './theme/**/*.php',
  ],
  safelist: [
    {
      pattern: /^font-/,
    },
  ],
  theme: {
    extend: {
    },
  },
  plugins: [],
}

これでCSSの生成まで完了。
次はAlpinejsを動かします。

WordPressのテーマ作成の備忘録③

実のところ、既に同じ構成で作ってあるのだけれど、
いろいろ思うところがあって作り直すことにした。
まず前バージョンで実装していなかったダークモード対応を入れたい。

Tailwind CSSとAlpine.jsが組み込まれているので、
そちらで組んでいく。

まずは
Tailwind CSS にダークモードの設定を追加。
helpでいうとここ。
バージョン違うけど。

tailwindcss.com

tailwind/tailwind.config.js

module.exports = {
  darkMode: 'class', //ここを追加
}

これでprefixのdarkが有効に。
ダークモードの制御用のコードを作成

テンプレに埋め込むこともできるけど、
モジュール化しておく。

script/darkmode.js

export default () => ({
  dark: false,
  isDark() {
    return this.dark;
  },
  toggle() {
    this.dark = !this.dark;
    this.setMode();
  },
  setMode() {
    localStorage.setItem('dark', this.dark);
  },
  mounted() {
    this.dark = window.matchMedia('(prefers-color-scheme: dark)').matches;
    if (localStorage.getItem('dark') !== null) {
      this.dark = JSON.parse(localStorage.getItem('dark'));
    }
  },
})


ここにきてLaravel Mixが使われていない事に気付く。
Javascriptをどう処理するか悩む。
でも悩み続けるのも嫌だなぁ。
Tailwind CSSのバージョンもまだ2系統だし
Underscoresに仕込んだ方が楽な気もしてる。

さてどうしようか。

WordPressのテーマ作成の備忘録②

まずはUnderscoreTWからソースコードを取得。
Advanced Optionsを選択し、適当にデータを入れてダウンロード。

f:id:monogusabase:20211225155306p:plain

https://underscoretw.com/

ダウンロードしたものを解凍し、composer周りのアップグレードに
postcss、postcss-nestingを入れ、themeファイルを作成

composer update

composer upgrade

composer clearcache

yarn add --dev postcss postcss-nesting

yarn

yarn run watch

これで弄ってないテーマの作成が完了
取り急ぎthemeフォルダにシンボリックリンクを張り
テーマが動いているか確認。
デザインが入っていない状態で問題なく表示されている。

WordPressのテーマ作成の備忘録①

WordPressでブログを書き始めた。

有料テーマを買うお金もないので
無料のテーマを使おうと思ったのだけれど、
細かい修正を入れようと思うと
根が深くて修正不可能だったりする。

ならば自作してしまおうと考えたわけだが
1から調べながらやるのも面倒なもの。
良さげなスターターテーマを使って拡張していくことにした。

スターターテーマの検討だが、
普段から使っているTailwind CSSが導入済みのものがいい。
ReactやVueのようなJSフレームワークを導入済みなのがありがたい。
そんなものがあるのか？ と思ったらすんなり見つかる。
それがこちらのUnderscoreTW。

こちらはUnderscoresからフォークされて作成されていて

Laravel Mixを導入Tailwind CSSとAlpine.jsが導入済み。
手間がメチャクチャ省けてありがたすぎる。

次からは実際の導入方法を記載していく。