WordPressのCSSやJSをテーマのphpファイルをいじらずにダッシュボードだけでカスタマイズする方法

WordPressの前回の記事でGutenbergのブロックを使いコードを1行も書かずにペライチページを作りました。それにしてもTwenty Nineteenは…クセが強い！CSSとJSのカスタマイズ、テーマのphpファイルをいじらずにダッシュボードだけで完結できました。自作テーマどころか子テーマを作るのも面倒だ！という方は是非こちらの方法をお試しください。

【目次】

Twenty Nineteenはクセが強い！
これまでのカスタマイズ（自作テーマ、子テーマ）
- 自作テーマ
- 子テーマ
外観＞カスタマイズの「追加CSS」でCSSをカスタマイズ
外観＞ウィジェットの「カスタムHTML」でJSをカスタマイズ
保存ができない場合の推奨プラグイン「Simple Custom CSS and JS」
最後に

Twenty Nineteenはクセが強い！

久々に出た公式テーマTwenty Nineteen。なくなってしまうのかと思ってたので出てくれたのは嬉しい。レイアウトがワンカラムなのもスマホ時代に合っていると思う。ただ、ちょっとクセが強い。。

f:id:idr_zz:20190704233452j:plain

いきなり大画面でこのまっ暗いメインビジュアルは面食らう。カスタマイズしたい。。

これまでのカスタマイズ（自作テーマ、子テーマ）

これまで、WordPressのテーマカスタマイズは主に2つの方法があった。

自作テーマ
子テーマ

自作テーマ

自作テーマは自分でゼロから静的なHTMLページを作り、phpのパーツを埋め込んでいく方法。私は普段は主にこの方法を取っている。

メリットは完全に自由にテーマを作れること。デメリットは工数がかかることとPHP、SQL、WordPressテンプレートタグの知識が必要なこと。

※参考：【WordPress、PHP、SQL文】Webデザイナーでもわかるサーバサイドの基本まとめ！（6記事） - クモのようにコツコツと

子テーマ

既存テーマを使えば期間は自作テーマより早く済む。

※参考：WordPress Themes | WordPress.org

そのものずばりな既存テーマがみつかればいいがいいが大なり小なりカスタマイズは生じると思う。

既存テーマのカスタマイズには別のデメリットがあって、既存テーマが更新されるとカスタマイズした部分が上書きされてしまう。

それを防ぐために、既存テーマから子テーマを作って紐づける設定を行う。

※参考：WordPressの子テーマを作る理由と子テーマを自作する方法

外観＞カスタマイズの「追加CSS」でCSSをカスタマイズ

自作テーマどころか子テーマすら作る時間がない、という場合にダッシュボードでCSSを直接カスタマイズする方法がある。「追加CSS」！

「外観」の「カスタマイズ」を開く。 f:id:idr_zz:20190704233458j:plain （ここは前回も色などが変更できた場所）

サイドバーの一番下の「追加CSS」を押す。 f:id:idr_zz:20190704233507j:plain

CSSの入力欄が開く。 f:id:idr_zz:20190704233513j:plain

まずは何と言ってもこの真っ黒なメインビジュアルをなんとかしたい！

.site-header.featured-image:after {
    background: #888;
}

.site-header.featured-image{
    min-height: 75vh;
}

デベロッパーツールでclass名を調べながら、背景の色を薄く。あと、全画面になっていたので高さをvhで75%に。

（vhについてはこちら）
※参考：もしかしてだけどCSSのvwやvhを使うとメディアクエリ無しでレスポンシブ対応できちゃうんじゃないの？（オマケにvmin、vmaxも） - クモのようにコツコツと

（デベロッパーツールについてはこちら）
※参考：Chromeデベロッパーツール事始め！HTML、CSS、JSを直感的に修正しよう - クモのようにコツコツと

おお！リアルタイムで右の画面のスタイルが変わった！これは便利。 f:id:idr_zz:20190704233522j:plain CSSもシンタックスハイライトの色がついてわかりやすい！（入力欄が狭いのだけ惜しい）

スクロールしていくと…そうそう、Twenty Nineteenは文字も大きいんだよなー。。 f:id:idr_zz:20190704233530j:plain

文字のサイズも変更しよう。こんな感じで。

h2 {
    font-size: 28px; 
    border-left: 5px solid #A66970; 
    font-weight: normal;
    background: #eee; 
    padding: 15px;
}

h2:before { 
    content: none; 
}
    
p {
    font-size: 16px;
}

見出しの背景色も設定してみた。

こちらもリアルタイムで見えるので数値設定が直感的にできた！ f:id:idr_zz:20190704233536j:plain

なお、この編集はテーマフォルダのphpファイルには影響がないので、テーマのバージョンアップの影響は受けないらしい！
（「外観＞テーマエディタ」はテーマのphpファイルを直接書き換えるため、テーマ更新の影響を受けてしまう）

外観＞ウィジェットの「カスタムHTML」でJSをカスタマイズ

さて、CSSはカスタマイズができた。JSを変える方法も試す。「カスタムHTML」が使えそう。

「外観」の「ウィジェット」を開く。 f:id:idr_zz:20190704233541j:plain

「カスタムHTML」というウィジェットがあるので「フッター」にドラッグ f:id:idr_zz:20190704233547j:plain

三角アイコン（▼）を押す。 f:id:idr_zz:20190704233552j:plain

HTMLの入力欄が現れる。 f:id:idr_zz:20190704233558j:plain

HTMLなのでJS直書きではなくscriptタグで囲う。

<script>
//DOM
const btn = document.querySelector('.wp-image-26');

//イベント
btn.addEventListener('click', function () { 
 alert("当たり！おめでとう！！");
}, false); 
</script>