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使いまくって、仕掛けだらけのサイトを作ったことがあったなぁ。。
予期せぬところでマウスオーバー、画像ドーンみたいな。
ちょっとしたいたずら心で、このブログも仕掛けだらけになるやもしれませぬ。
[tmkm-amazon]4883377377[/tmkm-amazon]

スポンサード リンク
このエントリーをはてなブックマークに追加

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

  1. na

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

  2. ごわざむらい

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

  3. だいすけ Post author

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

  4. だいすけ Post author

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

コメントを残す

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

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください