SWELLをダークモードに:準備編
SWELLをダークモードに:準備編
今回はSWELLにダークモード設定を作るための準備編となります。
- SWELLの子テーマを入れる
- 子テーマの設定のやり方
- プラグイン「Code Snippets」を入れる
- プラグインの設定のやり方
- Code Snippetsの使い方
- function.phpを直接触らない理由
- 注意点
- プラグイン「Simple Custom CSS and JS」を入れる
- Simple Custom CSS and JSの使い方
- カスタムCSSではいけない?
- 終わりに
1.SWELLの子テーマを入れる
SWELLはアップデートがあるためせっかく作ったコードも消えてしまう可能性があります。
なのでまずは子テーマをダウンロードしておく必要があります。
SWELL


SWELL子テーマのダウンロード | WordPressテーマ SWELL
SWELLの子テーマは、会員サイトマイページよりダウンロード可能です。 子テーマは無料です。子テーマに自動更新機能はございません。親テーマであるSWELLをご購入してご使…
子テーマの設定のやり方
- SWELLのマイページから子テーマをダウンロードする
- マイページからSWELL製品ダウンロードにある「子テーマ」をダウンロードする
※zipファイルは展開しないこと!
- マイページからSWELL製品ダウンロードにある「子テーマ」をダウンロードする
- WordPressのテーマへ追加する
- WordPressの管理画面から「外観」「テーマの追加」
「テーマのアップロード」へダウンロードしたデータを入れる
- WordPressの管理画面から「外観」「テーマの追加」
- 子テーマを有効化する
2.プラグイン「Code Snippets」を入れる
WordPress.org 日本語


Code Snippets
An easy, clean and simple way to enhance your site with code snippets.
このプラグインはfunction.phpを直接触らずともコードの入力ができるものです。たとえ子テーマがアップデートされてもこちらにデータが残るので、消えることはありません。データ自体も取り出したり、自身で記入したコードをこのプラグイン内に入れることも可能です。
プラグインの設定の仕方
- プラグインを探す
- WordPressの管理画面から「プラグイン」
検索画面で「Code Snippets」を入力する
- WordPressの管理画面から「プラグイン」

function.phpを直接触らない理由
function.phpを直接触って編集すると、たった一つのコードを入力しただけでも「真っ白」になってしまうことがあります。今回はそれを避けるため、このプラグインを設定します。
今回のダークモード以外にも、function.phpを触らずに設定したい時におすすめです!
注意点
無料で登録できるのは5つまでです。それ以上登録したい場合は有料になるので注意!
※一つのスニペッドにすべて入力してしまえばいいかもしれませんが。
3.プラグイン「Simple Custom CSS and JS」を入れる
カスタムCSSにコードを入れるのもいいけど、私はこちらに打ち込んで使用しています。CSSだけでなく、HTMLやJSも追加できるとても便利なプラグインです。登録の仕方は上記と同じです。

カスタムCSSではいけない?
カスタムCSSに入力してもいいのですが、どこに何のコードを入れたのかがわからなくなってしまうので…。整理するためにも私はこちらに入力することが多いですね。

4.終わりに
今回は準備編として子テーマの設定とコード入力のためのプラグインの紹介をしました。ダークモード設定以外でもテーマの設定を替えたい方には便利かもしれませんね。では、次回。







