Bloosh Company

Development>WordPress

プラグインなしでWordPress個別記事にPHP・JS・cssスクリプトを埋め込む方法!

, , , , , ,

個別記事にPHP、JavaScript、cssのコードを埋め込んでみたいと思います。
Advanced Custom Fieldsを使っていますが、普通のカスタムフィールド機能でもいけると思います。
 

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

だいたいこんな感じでカスタムフィールドを作成してください。
改行は「なにもしない」にしてください。
カスタムフィールドの設定
 

cssの実行

記事投稿画面を開くとこのように入力欄がでてきますので、コードを書いてみます。
まずは通常のテキストエディタにサンプルのタグを入力します。
このとき、テキストエディタのタブは「ビジュアル」ではなく「テキスト」を選択してください。
(クラシックエディターを使っています。)

<p class="jugemu">じゅげむじゅげむ</p>

そして、カスタムフィールドのcssにこのように入力してみます。
cssコードの例
そしてsingle.phpの最初の方、ループ開始直後あたりにこれを書きます。

<style type="text/css"><?php the_field("css"); ?></style>

文字がピンクになりました。↓

じゅげむじゅげむ

 

JavaScriptの実行

今度はJavaScriptです。
さっきのサンプルタグに追加してみます。

<p class="jugemu" onclick="jugemuFunc(this)">じゅげむじゅげむ</p>

クリックするとjugemuFunc()が発動するようにしました。
カスタムフィールドのJavaScriptにはこのように書きます。
赤い線がついて分かりにくいですが、渡された要素のテキストをアラート表示する関数です。
jsのサンプル
今度はsingle.phpの後ろのほう、ループを閉じる直前あたりにこれを書きます。

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

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

ここをクリックしてね

 

PHPの実行

いよいよPHPです。
入力したコードをテンポラリファイルに保存し、読み込んで実行するという流れです。
まずはこんな感じでサンプルコードを書いてみます。
PHPサンプルコード
そしてまたsingle.phpに下記コードを記述します。私は本文出力のthe_content()の下に書きました。

<?php
	if(get_field("php")){
		$tmpfile = tmpfile();

		//テンポラリファイルに書き込み
		fwrite($tmpfile, "<?php " . get_field("php"));

		//テンポラリファイルのパスを指定して読み込み
		include(stream_get_meta_data($tmpfile)["uri"]);

		//テンポラリファイルを削除
		fclose($tmpfile);
	}
?>

テンポラリファイルは勝手に削除されるらしいですが念のためfclose()しています。
改行させたいときは<br />もセットで出力させてね!
WordPressの関数もちゃんと実行されています。
2021年11月8日追記: 途中で?>で閉じてHTMLタグを書いてもちゃんと出力されていました。
 
実行結果:

ヒーハー300プラグインなしでWordPress個別記事にPHP・JS・cssスクリプトを埋め込む方法!
プラグインなしでWordPress個別記事にPHP・JS・cssスクリプトを埋め込む方法! #WordPress #ウェブデザイン #ウェブ制作 #WEBデザイン #WEB制作 #ACF #AdvancedCustomFields #css #JavaScript #PHP #カスタムフィールド #スクリプト

<<次の記事

JavaScriptとcssで要素をふわっと表示させるアニメーション

前の記事>>

JavaScriptを使った文字サイズスイッチの作り方

Tweets by blooshcompany