SWELLをダークモードに:準備編
今回はSWELLにダークモード設定を作るための準備編となります。
CONTENTS
SWELLの子テーマを入れる
SWELLはアップデートがあるためせっかく作ったコードも消えてしまう可能性があります。
なのでまずは子テーマをダウンロードしておく必要があります。
SWELLのマイページから子テーマをダウンロードする
マイページからSWELL製品ダウンロードにある「子テーマ」をダウンロードする
※zipファイルは展開しないこと！
WordPressのテーマへ追加する
WordPressの管理画面から「外観」「テーマの追加」
「テーマのアップロード」へダウンロードしたデータを入れる
子テーマを有効化する
プラグイン「Code Snippets」を入れる
このプラグインはfunction.phpを直接触らずともコードの入力ができるものです。たとえ子テーマがアップデートされてもこちらにデータが残るので、消えることはありません。データ自体も取り出したり、自身で記入したコードをこのプラグイン内に入れることも可能です。
「Code Snippets」を探す
WordPressの管理画面から「プラグイン」検索画面で「Code Snippets」を入力する。
有効化する
管理画面からプラグインを選択し、「Code Snippets」を有効化する
注意点
function.phpを直接触って編集すると、たった一つのコードを入力しただけでも「真っ白」になってしまうことがあります。今回はそれを避けるため、このプラグインを設定します。
今回のダークモード以外にも、function.phpを触らずに設定したい時におすすめです！
無料で登録できるのは5つまでです。それ以上登録したい場合は有料になるので注意！
※一つのスニペッドにすべて入力してしまえばいいかもしれませんが。
プラグイン「Simple Custom CSS and JS」を入れる
カスタムCSSにコードを入れるのもいいけど、私はこちらに打ち込んで使用しています。CSSだけでなく、HTMLやJSも追加できるとても便利なプラグインです。登録の仕方は上記と同じです。
カスタムCSSではいけない？
カスタムCSSに入力してもいいのですが、どこに何のコードを入れたのかがわからなくなってしまうので…。整理するためにも私はこちらに入力することが多いですね。
終わりに
今回は準備編として子テーマの設定とコード入力のためのプラグインの紹介をしました。ダークモード設定以外でもテーマの設定を替えたい方には便利かもしれませんね。では、次回。
