とりさんのソフト屋さん

cssやJavaScriptをヘッダに追加するプラグイン(WordPress)

cssやJavaScriptをヘッダに追加するWordPressプラグインを作成。

一回きりの個別の記事やページだけに適応するcssやJavaScriptをわざわざテーマに追加するのは無駄なので、カスタムフィールドを利用してwp_head()関数でcssやjsを出力してくれるようにした。

使い方はカスタムフィールドに以下の名前でcssやJavaScriptを記述すればHTMLのheadタグの中に出力してくれるというもの。

• 「css」という名前のカスタムフィールドにスタイルシートを記述することで

  <style type="text/css">値</style>

  の形式で出力

• 「cssfile」という名前のカスタムフィールドにcssファイルのパスを記述することで

  <style type="text/css">値</style>

  という形式で出力

• 「js」という名前のカスタムフィールドにJavaScriptを記述することで

  <script type="text/javascript">値</script>

  の形式で出力

• 「jsfile」という名前のカスタムフィールドにjsファイルのパスを記述することで

  <script type="text/javascript" src="値"></script>

  という形式で出力

アーカイブページでもsingleやpageと同じように出力してくれます。

投稿画面のキャプチャは以下

上のキャプチャの内容で投稿した場合での出力HTMLは以下(headタグ内に出力されます。)

<style type="text/css">
#bbb {
margin:0;
}
#aaa {
margin:0;
}
</style>
<link rel="stylesheet" href="/css/aaa.css" type="text/css" />
<link rel="stylesheet" href="/css/bbb.css" type="text/css" />
<script type="text/javascript">
var $a = '';
var $b = '';

</script>
<script type="text/javascript" src="/js/aaa.js"></script>
<script type="text/javascript" src="/js/bbb.js"></script>

printmetaショートコード

v0.6.1からカスタムフィールドの値を埋め込むためのprintmetaショートコードを実装しています。

hogehogeという名前のカスタムフィールドの値を埋め込むには以下のようにします。

[printmeta name="hogehoge"]

name=”カスタムフィールドの名前”をショートコード内で与えてください。

WordPressの自動整形機能をすり抜けて好きなHTMLタグやJavaScriptコードなどを埋め込むことが出来ます。

注意点としては$postをグローバルで取得しているため、正常な$postデータがグローバルにセットされていない場合、正常にカスタムフィールドの値を取得できません。

ダウンロード

• add-css-js v0.6.1(ショートコード実装版)
• add-css-js v0.5.1