Scripts n Stylesの使い方【投稿ページでscriptが埋め込める】

2021年1月12日

今回はScripts n Stylesというプラグインの使い方について解説したいと思います。

このプラグインはワードプレスの投稿ページの編集画面でspriptの埋め込みができるという大変便利なプラグインとなっています。

主な使用用途は個別記事ごとにjqueryで動的な操作を行う目的で使用します。

cssやhtmlの操作も可能となっています。

スポンサーリンク

Scripts n Stylesの使い方【投稿ページでscriptが埋め込めるプラグイン】

まずScripts n Stylesを新規追加でインストールして有効化

投稿記事の編集画面を開くと画面の下部にsqript編集画面が出現している。

クラシックエディター(旧編集画面)じゃないと使えないみたいなので事前にクラシックエディターのプラグインをインストールしておく

headとbodyの上と下二箇所ありますが基本的にどちらでも良いです。

クリックイベントなどの操作を挟みたい場合はbodyの方が良いと思われます。

最初の動作確認などでjqueryで色変更の確認をしたい場合head内での記述で問題ありません。

jqueryを埋め込む

jqueryをこのプラグイン上でつかう場合テーマエディターと違って

<?php wp_enqueue_script('jquery’); ?>や<script type="text/javascript">などの初期宣言は必要なく

そのままjqueryの操作を書き込むだけで動作する。

テーマエディターとの違いは

jQuery(document).ready(function(){

じゃないと動かない。

またテーマエディターの場合()の中は’シングルコーテーションで囲いますが

jQuery(“h1").css(“color", “blue");

“ダブルコーテーションじゃないと動かない模様

動作確認用

cssを埋め込む

cssの書き方はテーマエディターのcssの書き方と全く同じで大丈夫です。

動作確認用