WordPressを使っていると、自分でjavascriptを書きたい場合などがでてきます。パターンとしてはサイト全体に適用したい場合と、個別のページで適用したい場合があると思います。
全体に適用したい場合はSimple Custom CSS and JS というプラグインを使うと容易に設定することができます。また、個別ページにのみ適用したい場合はScripts n Stylesというプラグインを使うことをおすすめします。
この記事ではSimple Custom CSS and JS と Scripts n Styles の使い方などを色々と試してみたいと思います。
Simple Custom CSS and JS の使い方
Simple Custom CSS and JS を使って書いたコードはサイト内のすべてのページに対して適用されます。すべてのページで共通して行いたい処理(JavaScript)やデザイン(CSS)などを一括で設定することができます。
プラグインのインストール
まずはプラグインをインストールします。その後有効化します。
![](https://web.archive.org/web/20220705000524im_/https://pg-life.net/wp-content/uploads/2022/05/image-51-1024x370.png)
JavaScript コードを追加
有効化すると、左のメニューに「カスタム CSS & JS」が表示されます。こちらのカスタムJSの追加を選択します
![](https://web.archive.org/web/20220705000524im_/https://pg-life.net/wp-content/uploads/2022/05/image-53.png)
下記のコードを追加して公開してみます。ページを開いた際にポップアップでメッセージを表示します
![](https://web.archive.org/web/20220705000524im_/https://pg-life.net/wp-content/uploads/2022/05/image-55.png)
jsが適用されていることが確認できました!
![](https://web.archive.org/web/20220705000524im_/https://pg-life.net/wp-content/uploads/2022/05/image-52-1024x243.png)
このほかにもHTMLのHEAD、CSSを設定することもできます。
Scripts n Styles の使い方
Scripts n Styles を使って書いたコードはサイト内の個別のページに対して適用されます。投稿ページにそれぞれ入力する場所があるので、そこでそのページに対して追加したいコードを記述する形になります。
プラグインのインストール
まずはプラグインをインストールします。その後有効化します。
![](https://web.archive.org/web/20220705000524im_/https://pg-life.net/wp-content/uploads/2022/05/image-56.png)
JavaScript コードを追加
有効化した後に新規投稿ページを開くと、このような画面になります。
![](https://web.archive.org/web/20220705000524im_/https://pg-life.net/wp-content/uploads/2022/05/image-57-1024x692.png)
同様にalert でポップアップを表示するように設定したページを用意しました
![](https://web.archive.org/web/20220705000524im_/https://pg-life.net/wp-content/uploads/2022/05/image-58.png)
こちらではこのページのみに適用されていることが下記リンクから確認できました!