簡易スクリプトやカスタムの独自スタイルをサイト全体に適用させるのは割と簡単です。
しかしながら特定のページだけに適用させたいスタイルやスクリプトをサイト共通の設定で適用させてしまうと、その必要のないページではただ単にページが重くなる要因のひとつとなって無駄でしかありません。
ブロックエディターでも特定のページだけに適用させたい時は工夫が必要です。
汎用的なやり方
やり方としてはいくつかあります。
- Simple Custom CSS and JSなどのプラグインを使う
- カスタムフィールドを利用する（プラグインのAdvanced Custom Fieldsを使うとラクかも）
- functions.phpに設定を書き込む、など
ただどれも敷居が高いっちゃ高いので、おススメするなら比較的ラクなSimple Custom CSS and JSを使うことでしょうか。
なおここでは上記のやり方の詳細は割愛しますが、たとえばカスタムフィールドを使ったやり方ですと下のような項目が投稿欄の下に表示されます。
（ヘッダーCSSとかフッターJSという名称はこちらで勝手につけたものです）
上の方には専用のスタイルを、下の方にはスクリプトの内容なんかを書き込むとそのページのみで適用される仕様です。
他のページにはいっさい影響は与えません。
こんな感じで（ブロックエディタでの編集と言えども）基本的には上記のようなやり方で対処するしかないでしょうか。
《SWELL》でのやり方
このサイトは《SWELL》という（完全ブロックエディター対応）テーマを採用しております。
この《SWELL》ですが、ありがたいことにカスタムスタイルやカスタムのスクリプトを登録できる機能がデフォルトで備わっています。
そのやり方ですが、2枚の画像を使用してビフォーとアフターをスライダー表示（比較）できる『Beer Slider』というスクリプトを例に簡単にご紹介します。
「Beer Slider」はiPhoneで正常に作動しなくなったので「Cocoen」というスクリプトに変えました。
このスクリプト「Cocoen」は専用のスタイルと専用のスクリプトをページ内に読み込ませる必要があります。
ここで使えるのが『投稿』パネルのかなり下の方にあるカスタムCSS＆JSという設定ボックス。
（投稿エリア下部にある場合もあります）
『CSS用コード』内には専用のスタイルをコピー＆ペーストします。
（※下の画像は「Beer Slider」時のものですが「Cocoen」でもやり方は同じです）
通常はスタイルのみの記述がほとんどですが、スクリプトによっては下の赤枠内のように専用の外部スタイルを読み込むコードを追加で入れざるを得ない場合もあります。
でもそうすると正常には機能してくれません。
そういうときはオプションのチェック欄にチェックを入れて、なおかつ一連のスタイルの前後を<style>～</style>ではさんであげれば正常に機能します。
この使い分けができるのはホントに便利です。
独自スタイルを追加する5つのやり方
独自スタイルを追加するには複数のやり方があります。
- 1.テーマ付属のスタイル
-
ワードプレス管理画面の＜外観＞→＜テーマファイルエディター＞で表示される編集画面（style.css）に直接加筆するやり方です。
ただしこのやり方はテーマファイル本体への書き込みになるので危険度は”高”です。コーディングに詳しい方以外は触らない方が無難です。
またテーマがアップデートされると追加した独自スタイルは消去されてしまうため再度書き込む必要もあります。いずれにしてもこのやり方は非推奨です。
- 子テーマのスタイルシート
-
子テーマが用意されてるテーマなら子テーマ内のstyle.cssに書き込むというやり方もあります。こちらは前項と同じstyle.cssですが、テーマのアップデートによって内容が消えることはありません。
もしもテーマ付属のマニュアルを見てもわからないという方はやはり触らない方が無難です。また（独自）スタイルは一文字でも書き方を間違えるとレイアウト崩れが起きたり表示されないなどの弊害が起きる可能性もあるので注意は必要です。
なおそこに加筆したスタイルは全ページに適用されます。
- 3.追加CSS
-
テーマによっては管理画面の＜外観＞→＜カスタマイズ＞を開くと《追加CSS》という項目が表示されます。そこに追加した独自スタイルはテーマのアップデートでも消えることはありません。
また追加スタイルは前項と同じく全ページに適用されるので、広範囲で利用可能な独自スタイルを追記する際に使うと便利です。
- 4.プラグイン
-
《追加CSS》機能がない（or 見つからない）テーマや独自スタイルをわかりやすく管理したいという場合は「Simple Custom CSS and JS」や「Simple Custom CSS」などの無料プラグインを使うというやり方もあります。
Code snippetsという、PHP（function.php）やCSSを子テーマなしに簡単に追加や管理ができる超便利なプラグインもあります。ただし無料版はPHPとHTMLは使えますがスクリプトやCSSなどは有料版でないと使えないという制限があるので使いどころが難しいです。価格もそれなりに高いです。
- 5.カスタムCSS＆JS
-
テーマ《SWELL》であれば《カスタムCSS＆JS》を使うやり方もあります。
通常は編集画面下部にあるのでそこの『CSS用コード』内に書き込みます。
もしも表示されない場合は右上の《縦三点リーダー（オプション）》→『設定』→『一般』タブ→「カスタムCSS & JS」のチェックがOFFになってる可能性があるのでそこをONにします。
なお《カスタムCSS＆JS》に書き込んだ追加スタイルや追加スクリプトはそのページにのみ適用されるものでほかのページは適用外になります。
そのため汎用的に使う独自スタイルであれば2.の子テーマのstyle.cssか3.の《追加CSS》に書き込んだ方が効率的です。
反対に適用したいページが少ない場合は《カスタムCSS＆JS》に書き込むことで他ページへの余計な干渉を防ぐことができます。
そして【JS用コード】内には専用のスクリプトを書き込みます。
オプションチェック欄も先ほどと同じで、チェックを外したままならスクリプトコードをそのまま書くだけ。
これで『Cocoen』用の専用スタイルと専用スクリプトはそのページだけでの適用となります。
（※下の画像は「Beer Slider」時のものですが「Cocoen」でもやり方は同じです）
ちなみに『Cocoen』の表示用コードはページ内に記述する必要があるのですが、その場合は【カスタムHTML】ブロックを開いてその中にコードをコピー＆ペーストした後、必要部分を修正していきます。
（※下の画像は「Beer Slider」時のものですが「Cocoen」でもやり方は同じです）
【ワードプレス 7.0.2＆SWELL 2.17で動作検証済】
コメント