投稿にカスタムフィールドを挿入するショートコードのプラグイン Insert Custom Fields

2011年6月18日 by 村上和久

WordPressの投稿にカスタムフィールドを挿入するショートコードのプラグイン Insert Custom Fields を作ってみました。このプラグインを使えば、WordPressのショートコードを使って、カスタムフィールドの内容をページや投稿の本文に入れることができます。

htmlコードなどをビジュアルエディタの自動変換の影響を受けずに入れたいときに使ったり、カスタムフィールドに書いたJavaScriptやPHPコードを実行することもできます。ページや投稿の<head>内に、カスタムフィールドに書いたCSSやJavaScriptを入れる機能も付けました。

ビジュアルエディタtinyMCEを使っていると編集中にタグが勝手に自動変換されてしまうので、JavaScriptなどを書けないのをなんとかしたいと思っていたのですが、かといってtinyMCEをオフにするのも不便。tinyMCEを使いながらも、投稿内に書いたhtmlコードやJavaScritptなどが自動改行などの影響を受けないようにしたい。

そこで、カスタムフィールドがビジュアルエディタの影響を受けないので、そこにJavaScriptを記述して、ショートコードで本文に埋め込めばスマートに解決！と気がついて早速プラグインを作ってみました。ついでに、<head>内にhtmlコードを埋め込んだり、PHPを実行できるようにもしてみました。

ダウンロード：

insert-custom-fields.1.0.0.zip

インストール：

1. zipファイルを解凍してできたフォルダを wp-content/plugins/ にアップロードします。
2. WordPressの管理画面でこのプラグインを有効化します。

使い方：

ページや投稿の編集画面で、カスタムフィールドを新規追加します。カスタムフィールド名は好きな名前でかまいません。カスタムフィールドの値に好きな内容を書いてください。htmlコードやJavaScriptやPHPなども記述できます。

そして、本文にショートコードを次のいずれかの書式で書きます。

[cf "カスタムフィールド名" (オプション)]
[cf name="カスタムフィールド名" (オプション)]
[cf (オプション)]カスタムフィールド名[/cf]

(オプション)：

php =”0|1″(デフォルト=0) PHPコードを実行する
encode=”0|1″(デフォルト=0) 特殊文字をエスケープする
nl2br =”0|1″(デフォルト=0) 改行を<br />に変換する
autop =”0|1″(デフォルト=0) 改行を<br />や<p>…</p>に変換する

例：

JavaScriptやhtmlを入れたいとき
本文：

[cf "js-field"]

カスタムフィールド js-field：

<script type="text/javascript">
document.write('hello world');
</script>

PHPを入れたいとき
本文：

[cf "php-field" php="1"]

カスタムフィールド php-field：

<ul>
<?php wp_tag_cloud('number=0&smallest=10&largest=28'); ?>
</ul>

テキストのとき(htmlコードもそのまま表示したいとき)
本文：

[cf "text-field" encode="1"]

カスタムフィールド text-field：

<br />などのhtmlコードもそのまま表示します。
カスタムフィールド内で改行しても
改行しないで表示されます。

自動改行させたいとき
本文：

[cf "lines-field" encode="1" nl2br="1"]

カスタムフィールド lines-field：

カスタムフィールド内で改行すると
<br />が付いて改行して表示されます。

段落を自動改行させたいとき
本文：

[cf name="paragraphs-field" encode="1" autop="1"]

カスタムフィールド paragraphs-field：

カスタムフィールド内で改行すると
改行して表示されます。

カスタムフィールド内で2回改行すると
<p></p>が付いて別の段落として表示されます。

カスタムフィールドをヘッダに挿入：

このプラグインをインストール後、カスタムフィールドを ‘insert_head’ という名前で新規作成して値を入れると、その値がページや投稿の<head>…</head>内に自動的に挿入されます。PHPも記述できます。

次の例は、upoadsディレクトリにあるJavaScriptを投稿ページの<head>内に読み込みます。

カスタムフィールド insert_head：

<script type='text/javascript' src='<?php echo WP_CONTENT_URL; ?>/uploads/hoge.js'></script>

応用例：

ソースコードを整形表示するプラグインSyntax Highlighter にこのプラグイン Insert Custom Fields を組み合わせて、ソースコードをカスタムフィールド内に書くと、ソースコードのインデントなどがビジュアルエディタの影響を受けずにきれいに整形できます。

本文(Syntax Highlighterのショートコードとの組み合わせ)：

[javascript][cf "src-filed" encode="1"][/javascript]

カスタムフィールド src-field(整形表示したいソースコードをそのまま入力)：

<script type="text/javascript">
	document.write('hello world');
</script>

投稿者: 村上和久

アクセス解析・Webコンサルティングのアナライズネット代表・Webアナリスト。Googleアナリティクスの導入とカスタマイズ、ウェブ分析、アクセス解析に関するセミナーなどを行っている。

murak.net

アクセス解析・Googleアナリティクス・ネット戦略・SEO・Webプログラミングなどを綴るブログ

投稿にカスタムフィールドを挿入するショートコードのプラグイン Insert Custom Fields

ダウンロード：

インストール：

使い方：

例：

カスタムフィールドをヘッダに挿入：

応用例：

関連しているかもしれない記事

投稿者: 村上和久

3件のコメント

ダウンロード：

インストール：

使い方：

例：

カスタムフィールドをヘッダに挿入：

応用例：

関連しているかもしれない記事

投稿者: 村上 和久

3件のコメント

投稿者: 村上和久