記事ごと、あるいはページ全体のカスタムCSSやScript、そしてHTMLに対応したWordPressプラグイン「Scripts n Styles」をご紹介します。
ショートコード化もできたりと、なかなかの高機能で使い所も広いです。
Webページをより美しく、そして魅力的にするためには、CSSという技術が欠かせません。 CSSを使うと、文字の色やサイズ、背景画像、レイアウトなど、Webページの見た目を思い通りにカスタマイズすることができます。 本稿では、CSSの意味や基礎、具体的な書き方まで、初心者の方にもわかりやす...
目次
インストール方法
WordPressダッシュボードの左メニュー（プラグイン > 新規追加）から「Scripts n Styles」を検索してインストールして下さい。
もしくは、下記のサイトからプラグインをダウンロードし、wp-content/pluginsディレクトリにインストールしてください。
「Scripts n Styles」は安全性を考慮して、サーバー環境が推奨のPHPバージョン以上でしか動作しないようになっています。
機能の紹介
Scripts n Stylesの主な機能は次の4つです。
- カスタムHTML
- カスタムCSS
- カスタムスクリプト
- ショートコード生成
カスタムHTML（head,body内）
サイト全体のhead内とbody内末尾にHTMLやスクリプトを挿入できます。
プラグインさえ削除しなければ、テーマを変更したりアップデートしても消えないので、GoogleAnalyticsなどのアクセス解析タグはここに保存しておくと良いでしょう。
カスタムCSS（サイト全体+ページごと）
サイト全体とページごとにスタイルを設定しておくことができます。
カスタムスクリプト（サイト全体+ページごと）
サイト全体とページごとにJavaScriptを設定しておくことができます。head、bodyに入れるかまで指定できます。
ショートコード生成
ショートコードを記録して呼び出すことができます。ショートコードを生成するだけのプラグインも多数ありますが、これだけで事足りそうですね。
使い方
サイト全体に挿入＆設定
プラグイン有効化後に、【ツール】のところに「Scripts n Styles」が追加されています。
以下、設定項目の翻訳になります。
- Global： サイト全体に挿入
- HTML(head tag)： headタグ末尾
- HTML(end of the body tag)： bodyタグ末尾
- LESS： Less専用
- CSS Styles： CSS記述箇所
- CoffeeScript： CoffeeScrip専用
- Scripts(for the head element)： head内
- Scripts(end of the body tag)： bodyタグ末尾
- Enqueue Scripts： wp_enqueue_scripts
- Hoops： ショートコード生成
- Settings：設定
- Hide Metabox by default： メタボックスの表示選択
- Menu Position： メニューの設置箇所
- Hoops Widgets： ショートコードをテキストウィジェットで利用可能にするか
- Delete Data When Uninstalling： プラグイン削除時にデータを削除するか
- Theme： ソース表示のデザイン
- Usage：利用中のページ一覧
ページごとにCSS＆Scriptsを挿入
プラグインを有効化すると、ページごとにカスタムCSSとカスタムスクリプトが利用できます。次のようなインターフェイスで表示されています。
最後に：TCDテーマとの緩衝は大丈夫？
「Scripts n Styles」の機能や使い方を解説しました。カスタムCSS・スクリプトだけのプラグインかと思いきや、かなり高機能なプラグインで驚きました。
ところで、TCDテーマにもカスタムCSSやカスタムスクリプトをデフォルトで実装しているテーマは多いです。直近のテーマにはサイト全体だけでなく、ページごとにも対応していたりします。ですので、「同じ機能だから緩衝しちゃう？」と心配にはなったのですが、いくつかのテーマで検証したところ、テーマ側もプラグイン側も双方で動作しました。しかし、同様の機能を実装したテーマで利用することはあまりおすすめではありません。
また、すべてのテーマで検証したわけではないので、使えなかったら申し訳ありません。
なお、WordPressのコードエディター上でJavaScriptを動作させたいのであれば、<script></script>をdivで囲んでしまう手もあります。
WordPressの記事上でJavaScriptを使うには少し工夫が必要です。そのままJavaScriptのコードを書いても動作しないからです。 原因はWordPressのエディターの自動改行機能により、文中に挿入された<script>～</script> 内に含まれる...
コメント