WordPress

【WordPress】javascriptの簡単な使い方

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)などを一括で設定することができます。

プラグインのインストール

まずはプラグインをインストールします。その後有効化します。

JavaScript コードを追加

有効化すると、左のメニューに「カスタム CSS & JS」が表示されます。こちらのカスタムJSの追加を選択します

下記のコードを追加して公開してみます。ページを開いた際にポップアップでメッセージを表示します

jsが適用されていることが確認できました!

このほかにもHTMLのHEAD、CSSを設定することもできます。

Scripts n Styles の使い方

Scripts n Styles を使って書いたコードはサイト内の個別のページに対して適用されます。投稿ページにそれぞれ入力する場所があるので、そこでそのページに対して追加したいコードを記述する形になります。

プラグインのインストール

まずはプラグインをインストールします。その後有効化します。

JavaScript コードを追加

有効化した後に新規投稿ページを開くと、このような画面になります。

同様にalert でポップアップを表示するように設定したページを用意しました

こちらではこのページのみに適用されていることが下記リンクから確認できました!

エンジニアの転職ならこれ!

【第二新卒向け】マイナビジョブ20's

マイナビジョブ20'sは、20代・第二新卒・既卒向けの転職エージェントです。

▼こんな方におすすめ
・はじめて転職しようと思っている
・転職できるだけのスキルが自分にあるか不安
・手厚いサポートを受けたい

【フリーランス向け】 Midworks

Midworksは豊富な案件と「フリーランス」と「正社員」の良いとこ取りをした働き方を実現する手厚い保障が特徴です。

▼こんな方におすすめ
・現在正社員でフリーランスになろうか悩んでいる
・フリーランスとして働いているが、先行きが不安がある  (安定的な案件確保や保障など)
・自分の市場価値を知りたい、見合った案件で参画したい
・今後のキャリアビジョンを踏まえて案件を選びたい