ブルーシュ

IT技術の勉強記録

ホーム > Tips > WordPress

プラグインなし WordPress 記事ごとにJavaScriptを実装する

, , , ,

個別記事にJavaScriptのコードを埋め込んでみたいと思います。
関連記事

 
Advanced Custom Fieldsを使っていますが、普通のカスタムフィールド機能でもいけると思います。
 

カスタムフィールドの設定

テキストエリアのフィールドを作ります。
フィールド名・・・「javascript」
フィールドタイプ・・・テキストエリア
改行・・・なにもしない
カスタムフィールドの設定
 

single.phpを編集

投稿記事のテンプレートファイルを編集します。

JavaScriptを読み込ませる

後ろのほう、ループを閉じる直前あたりにこれを書きます。

<script type="text/javascript"><?php the_field("javascript"); ?></script>

 

それでは、実際に記事投稿画面から入力してみます。

 

動作サンプル

記事投稿画面を開き、まずはコードエディターのブロックにサンプルのタグを入力します。
<p class="jugemu" onclick="jugemuFunc(this)">じゅげむじゅげむ</p>
クリックするとjugemuFunc()が発動するようにしました。
 

JavaScriptの例

カスタムフィールドのJavaScriptにはこのように書きます。
赤い線がついて分かりにくいですが、渡された要素のテキストをアラート表示する関数です。

jsのサンプル
function jugemuFunc(jgm){ alert(jgm.innerTxt); }

↓クリックすると実行されるよ!

ここをクリックしてね

プラグインなし WordPress 記事ごとにJavaScriptを実装する #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #JavaScript #カスタムフィールド #ACF #AdvancedCustomFields #スクリプト

作者の似顔絵

プログラミング歴19年🌈調べたことをブログにまとめていきます。
記事の感想・質問・間違い指摘などはツイッター ( @blooshcompany ) へお願いします。

秋田のウェブ活用をサポート

ホームページを自作してコスト削減!秋田の事業者は無料で利用できます。
ネットショップ・WordPress・SEO対策などさまざまなお悩みをサポートします。

その他、フロントエンド案件のご依頼はインフォメーション

秋田市 レンタル着物 笹パンダ堂のバナーリンク