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代・第二新卒・既卒向けの転職エージェントです。

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

【経験者向け】レバテックキャリア

ITエンジニア専門の転職エージェントです。

元エンジニアなど高い専門性を持つアドバイザーが理想の求人を提案してくれます。

▼こんな方におすすめ
・20代後半~40代前半
・年収を上げたい
・スキルアップしたい
・手厚いサポートを受けたい

COMMENT

メールアドレスが公開されることはありません。 が付いている欄は必須項目です