WordPressの個別記事内でJavaScriptを記載し使用する方法

昨日、「住所入力でGoogleマップ画像を表示するツール」を作成した。
これは、JavaScriptを記事中に記載して動作しているものだけど、WordPressの記事投稿でJavaScriptを書くのは今までちょっとめんどくさかった。
なぜなら、WordPressは改行をbrタグに変換したり、pタグに変換したり等、文章を自動で整形してしまうから。

今までは、直接データベースを弄んだり、ハックしたりして凌いできたけど、なんかいい方法ないかと検索したらドンピシャリなプラグインを発見。

カスタムフィールドに書いたhtmlやJavaScriptを整形することなく出力してくれるというもの。
便利なものを発見しました。

インストール方法や設定の類は上記リンクを参照して頂くとして、このプラグインの簡単な使い方をちょこっとだけ紹介。

カスタムフィールドのHTMLを記事に挿入するプラグイン「ContentEx」の使い方

カスタムフィールドに出力したいhtmlやJavaScriptを記載。
任意で「キー」を命名する。

記事内で

{{insert_meta カスタムフィールドのキー名}}

と記載すれば、その場所にカスタムフィールドに記載したhtmlやJavaScriptが整形されることなくそのまま出力される。

使用する際のささいな注意点

ただ、少し注意しないといけない点がある。
文章中に

文章文章文章文章文章文章文章文章。
{{insert_meta カスタムフィールドのキー名}}
文章文章文章文章文章文章文章文章。

のように{{insert_meta}}の前後に改行がない場合、そのまま{{insert_meta カスタムフィールドのキー名}}が出力されてしまう。
必ず前後に改行を入れて

文章文章文章文章文章文章文章文章。

{{insert_meta カスタムフィールドのキー名}}

文章文章文章文章文章文章文章文章。

という形で記事に挿入してあげた方がいいみたい。

便利なプラグインですね。

ちょっとしたJavaScriptのサンプル、JavaScriptじゃないと動作しないブログパーツや広告などではとても重宝しそう。

5年ほど前JavaScript使いまくって、仕掛けだらけのサイトを作ったことがあったなぁ。。
予期せぬところでマウスオーバー、画像ドーンみたいな。
ちょっとしたいたずら心で、このブログも仕掛けだらけになるやもしれませぬ。

WordPress関数リファレンスガイド

著者/訳者:藤本 壱

出版社:ソシム( 2010-11 )

定価:

Amazon価格:¥ 2,160

単行本 ( 279 ページ )

ISBN-10 : 4883377377

ISBN-13 : 9784883377374


「WordPressの個別記事内でJavaScriptを記載し使用する方法」への4件のフィードバック

  1. mapとかのブロックdom判定でハックしちゃえばいいじゃないと思ってたけど、確かに便利ですね〜

  2. jsはあれですが、the_contentにカスタムフィールドを書き出すことで、携帯プラグインをハックせずに表示できるメリットは大きいですよね。

  3. ===naどの===
    ほんと便利よ。
    ハックもだんだんメンドクサクなってくるからねぇ。
    土曜日からよろしく。

  4. ===おさむらいさま===
    きゃんぱくのブログパーツを投稿記事に貼る時などほんと便利です。
    runPHPでハックとか小技を使わなくて済むので非常に楽になりました。
    次回もブログパーツを楽しみにしております。
    って無茶ぶりですかね。笑

コメントを残す

メールアドレスが公開されることはありません。

8 − one =