解決アプローチと注意事項について
SWELLマニアのかんた（@swell_mania）です。
僕が紹介する有料記事部分内では、カスタマイズ方法だけでなく、ちょっとしたアレンジ方法やカスタマイズが上手く行かない場合の解決アプローチを記事の後半で紹介しています。
トラブルシューティングはおよそ共通なアプローチがあるので本記事にまとめておきます。
ちなみに記事内で紹介しているカスタマイズは、テスト環境上で動作確認した後、本番環境に実装するのがおすすめです。
基本的に、記事執筆時に利用可能な最新バージョンのWordPressと最新バージョンのSWELLを有効化しただけのプレーンな環境で動作確認をしています。独自のカスタマイズや記事内で紹介していないSWELLの設定などがないプレーンな環境でお試しください。
解決アプローチ
Code Snippetsでコードが保存できない
Code Snippetsプラグインにコードを書くという方法を紹介していますが、レンタルサーバーによっては、WAFの影響で「保存できない」、「エラーが出る」というケースがあります。
そんな場合はWAFを作業の間だけ無効化しましょう。
通常の作業を外部からの攻撃だと勘違いしているのが原因です。セキュリティーの観点からWAFを無効化したままというのはよろしくないので、作業後はWAFを有効化しましょう。
以下、一部レンサバのWAFのマニュアルです。
独自カスタマイズが干渉している
表示がずれるまたは全く反映されないといったケースでは、自分が追加しているコードがないか確認してみましょう。特に、表示がずれるという場合は追加しているCSSが影響している可能性があります（カスタマイザー内の追加CSSや、SWELL設定のCSSを見直してください）。
その他CSS以外にも独自カスタマイズのコードを一旦全て削除しましょう。
＜対象となるもの＞
CSS
PHP
JS系
プラグインによる干渉
有効化しているプラグインが原因の可能性があります。
カスタマイズが全く反映されない、または部分的にしか反映されないというケースでプラグインを一つずつ停止して、カスタマイズが反映されているか確認しましょう。
事項で説明しますが、プラグインを停止した後はキャッシュをクリアするのを忘れずに！
キャッシュ
「カスタマイズしたのに設定が反映されない！」
そんな場合キャッシュが原因の可能性があります。ブラウザのキャッシュサ、ーバーのキャッシュなどをクリアしたのち再度表示を確認しましょう。
ブラウザのキャッシュのクリアが不明な場合はググるか、作業以外で使っているブラウザでサイトを閲覧してみましょう。
不要なコードが含まれてしまう
記事内ではCSSやphpのコードを紹介しています。コピペ時に不要なコードが混じってしまうことが原因で正しく反映されないケースがあります。
子テーマから親テーマに切り替えたら設定が消えた
テーマによっては、テーマを子テーマに切り替えると親テーマのカスタマイザーなどで設定した内容が「一切引き継がれない」「部分的に引き継がれない」ことがあります。
これはテーマ次第。。。。
例えば僕がよく使うSWELLの場合だと、子テーマに切り替えるとカスタマイザー内の「追加CSS」が子テーマ上には反映されませんでした。
もし、子テーマに切り替える場合は、親テーマ有効中にカスタマイザー内の「追加CSS」をコピペするといった作業が必要になります。
「親テーマ」→「子テーマ」への切り替えへのインパクトはテーマ次第。事前にテスト環境で試した後、本番環境で切り替えを行うのが無難です。
バージョン違い
ワードプレスやテーマその他プラグインが記事内で紹介しているバージョンと異なる場合は動作しないことがあるので注意しましょう。特に古いバージョンのワードプレスやテーマを使っていると正常に動かないことがあります。
ご自身の使っている環境を確認しましょう。
Code Snippetsについて
「このコードをCode Snippetsに貼ってね」といった、カスタマイズについてです。
初心者の皆さんとすると、「Code Snippetsって何？」って疑問を持つと思いますので簡単に概要と使い方を説明します。
Code Snippets、カタカタ読みするとコードスニペット。もしくはコードスニペッツ。
Code SnippetsはWordPressの無料プラグインです。有料バージョンもありますが、無料バージョンだけしか僕は使っていません。僕の紹介するカスタマイズの場合無料バージョンで充分です。無駄な課金は不要です。
Code Snippetsプラグインのインストール方法
WordPressのダッシュボードからインストールできます。
一般的なプラグイン同様に、「新規プラグインを追加」をクリック↓
検索ボックスに「Code Snippets」と入力すると該当のプラグインが表示されます↓※画面とは異なる位置に表示される可能性があります。
「今すぐインストール」をクリックし、「有効化」しましょう。
以上でCode Snippetsのインストールは完了です。
Code Snippetsの基本的な使い方
プラグインを有効化すると、ダッシュボードの左側にスニペットという管理メニューが追加されます↓
登録している一覧が表示されます。投稿や固定ページの一覧なんかと同じです。追加したい場合は、「新規追加」。いらないものは無効化したり、削除することができます。
新規に追加してみる
新規にコードを追加する作業についてです。
「新規追加」をクリックすると、次の画面が表示されます↓
上部のEnter title hereは、管理目的の名称入力するエリアです。後で自分が分かるような適当な名前を入力しておきます。
Code部分にカスタマイズのコードを貼り付けます↓
※初期のタブが「Functions」になっているので、ここはこのまま変更しないでください。
「Active」をクリックします↓
その他のオプションは、変更の必要はありません。
正常に作業が完了すると、「Snippet created and activated.」と表示されます↓
以上で作業完了です。
スニペットの一覧画面に戻ると、有効化しているのが確認できます↓
追加したコードを一時的に無効化する
「コードを追加したけど一時的に無効化したい」、そんな場合は、該当部分のつまみ部分をクリックしましょう↓
一覧画面上で、「有効化」と「無効化」を切り替えることができます。
子テーマを使う場合
「できるだけプラグインは使いたくない！」「Code Snippetsプラグインは使いたくない！」そんな場合は、子テーマを活用しましょう。
子テーマを利用する場合、最低限、子テーマとはなんぞやというのが分かる人に限ります。
SWELLの子テーマは、SWELL購入者であればマイページからダウンロード可能です。
他のテーマでもほとんどの場合、開発元のサイトからダウンロード可能です。もちろん子テーマを自作したものを利用しても構いません。
注意事項
有料記事執筆時に利用可能な最新バージョンのWordPress、SWELLで動作したものを紹介しています。当然ながら将来的に起こるWordPressやSWELL、ブラウザの仕様変更により意図した動作にならないことがあります。
可能な限りアプデに対応した形で記事を更新していますが、指定の環境以外での動作を保証するものではありません。記事内にはデモサイトを設けている場合がほとんどですのでご自由にお試しください。
ご自身が望む環境で動作するかご確認の後、ご購入していただくと嬉しいです！
この記事が気に入ったらサポートをしてみませんか？