WordPress 自作プラグインの作り方と css、jsファイル読み込み。

自作プラグインを作るのは簡単です。　

WordPress内でphpを走らせようとすると『Insert PHP』というプラグインを使うか、function.phpに直接書き込む方法があります。　『Insert PHP』は簡単ですがセキュリティリスクがある可能性もあるそうです。　WordPress.orgでは、ショートコードとphpを連携させてphp実行させる方法だけを推奨しています。　ひとつはfunction.phpに書く。　もう一つは自作のプラグインを作って書く、の２通りあります。 function.phpを書き換えて間違ったら全てのページが表示されなくなり元に戻せなかったら怖いので、自作プラグインにしました。　自作プラグインなら最悪無効にすれば復旧するので。　

手順

ディレクトリとファイルを作る

ファイル名と同じディレクトリを作成。　私はWindowsなのでWindows内どこでも良いのでmy-plugin-2というディレクトリ（フォルダ）を作りました。
*Linuxではディレクト、Windowsではフォルダと呼ぶそうですが、同じ意味です。　ありがとうとThank youの違いですね。
そして、そのディレクトリ内にディレクトリ名と同じ名前で拡張子がphpのファイルを作ります。　my-plugin-2.phpを作りました。

phpコードを記述

phpファイル内にNotepad++や他のエディタでコードを書き保存します。　UTF-8で保存する必要があります。　Notepad++は自動でUTF-8で保存してくれますが、普通のNotepadでは保存する時、『文字コード』でUTF-8を選んで保存する必要があります。　
下の例はショートコードを埋め込んだ場所で走るphpコード例です。（説明はこの記事の下の方で。）

<?php
/*
Plugin Name: my-hello
Plugin URI: 
Description: 自作プラグイン
Version: 0.0.1
Author: ichiri
Author URI:
License: GPLv2
*/
?>
<?php
add_shortcode( 'hello2',  'hello2_func' );
function hello2_func( $atts, $content = ""){
		 $a = shortcode_atts( array(
        	'who' => 'Mike',
    	), $atts,"hello2" );
		return $a['who']."に". $content;
}
?>

zipファイルを作る

ディレクトリごとzipファイルにします。 Windowsの場合、エクスプローラーでそのディレクトリ上で右クリックすると、『zipに圧縮』の様なメニューが現れるので選択。
*プラグインは全てzipファイルになっています。　他のプラグインも実はzipファイルです。

プラグインを追加

WordPressのダッシュボードの左メニューから『プラグイン』をクリック、画面上に表示される『新規追加』をクリック。

画面上に『プラグインのアップロード』が表示されるのでクリック。
『ファイルを選択』が現れるのでクリックし、先ほど作ったzipファイルを選択。
zipファイルが表示されたら、『今すぐインストール』をクリック。

『プラグインを有効化』をクリック。　

これで下の様にmy-helloがプラグインに追加されたのが分かりますね。　php内のPlugin Name: に書いたmy-helloと表示されます。

コードの説明

<?php ?>

最初にこの部分がありますが、これはプラグイン情報を入れた宣言の様なものです。　無ければプラグインとして認識されないのでインストールされません。

<?php
/*
Plugin Name: my-hello
Plugin URI: 
Description: 自作プラグイン
Version: 0.0.1
Author: ichiri
Author URI:
*/
?>

各名称の意味

‘hello2’はショートコードタグ名です。　ショートコードを書く時にこの名称で紐づけします。　好きなショートコードタグ名を付ける事が出来ます。（注意：他との重複禁止）
ショートコードがどのfunctionに紐づけられるかを定義しています。　好きなfunction名を付ける事ができます。(注意：他との重複禁止）
‘who’はショートコードの角括弧内に入れる属性です。　
予約されていない好きな名前を付ける事が出来ます。
以下の例では、初期値が’Mike’で、ショートコード内の’ichiri’に置き換わっています。
属性はカンマで区切って複数個使用できます。
shortcode_atts(array(),$attr, ショートコードタグ名)のarray()内に記述する必要があります。　
$contentショートコード間の値の予約語です。　入力としては下の例の場合”ハロー！”になります。　また$contentは返り値にもなるので、ショートコードがあるところに$a[‘who’].”に”.$contentが表示されます。　つまり”ichiriにハロー！”になります。
$attsは属性の決まり予約語です。　functionの
return値は$contentでショートコードの部分に表示されます。 $a[‘who’]は初期値は’Mike’だったのですが、’ichiri’になります。この部分に文字列として<div></div>や<p></p>等のhtmlタグをDBから読み込んだ値と組み合わせて入れるといろいろな表現が出来ます。

ショートコードタグ名とfunction名は他とダブってはいけません。　有効化できなかったりします。

実際にプレビュー

ichiriにハロー！と出てきていますね。

css, jsの読み込み

外観〜カスタマイズ〜追加cssなどでカスタムcssを書き込めますが、画面が縦長で見づらいのでVScodeで編集して自動でcssが読み込まれるようにします。　以下のコードでpluginを作ってichiri_dx.cssとichiri_dx.jsを読み込みます。

<?php
/*
Plugin Name: Ichiri DX CSS JS
Description: dx.ichiri.biz用 カスタムCSS・JS読み込みプラグイン
Version: 1.0
Author: ichiri
License: GPLv2
*/

// 直接アクセス禁止（セキュリティ対策）
if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * CSSとJSの読み込み処理
 * plugin_dir_url( __FILE__ ) を使うことで、このファイルがある場所を自動的に ./ として扱います。
 */
function ichiri_dx_enqueue_scripts() {
    // ベースURL（このプラグインのフォルダURL）を取得
    $plugin_url = plugin_dir_url( __FILE__ );
    // ベースパス（ファイルの更新日時取得用）を取得
    $plugin_path = plugin_dir_path( __FILE__ );

    // 1. CSSの読み込み (ichiri_dx.css)
    wp_enqueue_style(
        'ichiri-dx-style', // ハンドル名（識別子）
        $plugin_url . 'ichiri_dx.css', // URL
        array(), // 依存関係
        filemtime( $plugin_path . 'ichiri_dx.css' ) // バージョン（更新日時を付与してキャッシュ問題を回避）
    );

    // 2. JSの読み込み (ichiri_dx.js)
    wp_enqueue_script(
        'ichiri-dx-script', // ハンドル名
        $plugin_url . 'ichiri_dx.js', // URL
        array( 'jquery' ), // jQueryに依存する場合（不要なら array() に変更）
        filemtime( $plugin_path . 'ichiri_dx.js' ), // バージョン
        true // フッターで読み込むか（true推奨）
    );

    // JSに変数を渡したい場合（PHPのデータをJSで使う例）
    $js_data = array(
        'page_uri' => $_SERVER['REQUEST_URI'],
        'site_url' => site_url(),
    );
    wp_enqueue_script( 'ichiri-dx-script' ); // 念の為ハンドルを指定
    wp_localize_script( 'ichiri-dx-script', 'ichiri_vars', $js_data );
}
add_action( 'wp_enqueue_scripts', 'ichiri_dx_enqueue_scripts' );

/**
 * (オプション) 管理画面（ブロックエディタ）にもCSSを適用する場合
 */
function ichiri_dx_admin_style() {
    wp_enqueue_style( 
        'ichiri-dx-editor-style', 
        plugin_dir_url( __FILE__ ) . 'ichiri_dx.css',
        array( 'wp-edit-blocks' ),
        filemtime( plugin_dir_path( __FILE__ ) . 'ichiri_dx.css' )
    );
}
// 必要であれば以下のコメントアウトを外してください
// add_action( 'enqueue_block_editor_assets', 'ichiri_dx_admin_style' );

/**
 * 簡易デバッグログ関数（必要な場合のみ使用）
 * 使用法: ichiri_log($data);
 */
if ( ! function_exists( 'ichiri_log' ) ) {
    function ichiri_log( $value ) {
        $log_file = plugin_dir_path( __FILE__ ) . 'debug_log.txt';
        $time = date( 'Y-m-d H:i:s' );
        $log = print_r( $value, true );
        error_log( "[{$time}] {$log}\n", 3, $log_file );
    }
}

/**
 * サンプルショートコード Mikeに
 * テスト用：Hello Worldを表示
 */
add_shortcode( 'hello', 'ichiri_hello_func' );
function ichiri_hello_func( $atts, $content = "" ) {
    $atts = shortcode_atts( array(
        'who' => 'Guest',
    ), $atts );
    return $atts['who'] . "さん、" . $content;
}
?>

ディレクトリとphpファイル名は同じにしないといけないので、私の場合まずichiri_dx_css_jsというディレクトリを作りました。
そしてそのディレクトリ直下にichiri_dx_css_js.phpというファイルを作り、上記のコードを入れました。
- コードの最後のadd_shortcode()はphpが動作しているか確認するためのものです。
- [hello who="いちり"]wowというショートコードを入れると、『いちりさん、wow』と表示されたらphpは動作しています。
phpができたら、ichiri_dx_css_js.cssとichiri_dx_css_js.jsも同じディレクトリに入れます。
ichiri_dx_css_jsの親ディレクトリに移動して、zip -r ichiri_dx_css_js.zip ichiri_dx_css_jsとして、ディレクトリとphpファイルと同じ名前のzipファイルをディレクトリごと入れ込みます。
プラグインの追加でそのzipファイルを読み込むと『Ichiri DX CSS JS』という名前でインストールされます。
『有効化』にします。
まず2のショートコードを入れてphpが表示されるか確認します。OKなら
ChromeかEdgeのDevToolのNetworkでichiri_dx_css_js.cssとichiri_dx_css_js.jsが読み込まれている事を確認します。
- 【注意】jsとcssはブラウザでキャッシュされるので、ファイル名が同じだと毎回キャッシュをクリアしないと反映されません。　なので上記phpではjsとcssの更新時間をファイル名にversionとして追記しています。
- ichiri_dx.js?ver=1769505068　とこんな形になっていると思います。
js.ファイルにconsole.logを書いてちゃんとDevToolのコンソールに表示されることを確認します。
cssでbody{ color:red;}など書き込んで背景色が赤になることを確認します。
これらがOKなら全ての画面でこのjsとcssが適用されます。
私は一旦phpが動作して、cssとjsが動作したら、私の場合Xserverですが、Xserverにssh接続してVScodeで直接cssやjsを編集しています。　めっちゃ簡単でらくちんです。
cssの採用配下の通り。　同じセレクタで同じ点数の場合はichiri_dx.cssは追加CSSや各ページのカスタムCSSに負けます。　勝つ方法はセレクタの点数を上げることです。
- SWELL の style.css　← 最初
- SWELL の main.css
- 子テーマの style.css
- プラグインの CSS（ ichiri_dx.css）
- 追加CSS（Customizer）
- 各ページのカスタムCSS ← 最後

ページごとでjsの採用

add_scripts_by_page()というfunctionを作る。
$PAGES_ICHIRIなどの変数にarrayで入れる。
- 数字は編集画面の場合はスラッグ名で表示されないのでprevie_id（=post_id)を入れます。
- 本番は公開したときのスラッグ名です。

function add_scripts_by_page(){
	global $in_value;
	$PAGES_ICHIRI=array(4416,5481,5650,5372,6036,6030,6415,7303,
				"how_to_use_mathjax-latex_and_list",
				"ascii-table"		
			);
    if(is_single($PAGES_ICHIRI)) {

		wp_enqueue_script(
			$handle='my_php_handle',
			$src=plugins_url() . '/my-plugin-1/ichiri_test_db.js',
			$deps=array('jquery','enlighterjs','crypt-js'),
			$ver='0.0.0.1',
			$in_footer=true);
		wp_localize_script('my_php_handle','js_var',$in_value);
	}
}
add_action($hook='wp_enqueue_scripts', $function='add_scripts_by_page',$priority=10, $arg_num=1);

プラグインの追加編集

ちょっとした変更はこれでOKと思います。　

『プラグイン』をクリックして、その下の『プラグインエディター』をクリック。
プルダウンからmy-helloをクリック。
『選択』をクリック。
編集後の実際に反映させるには画面下の『ファイルを更新』をクリック。

大規模で変更する場合は、ssh接続でVScodeで編集しています。

注意

サイトが表示されなくなる

プラグインでエラーがあるとサイト内の全ページが正しく表示されません。　なので、一番良いのはテストサイトを作り、まず動作確認して移行するのが良いと思います。（私はまだできていませんが）　私の様にまだそこまでできていない人は、プラグイン編集後、実際にページを表示してみてエラーとなったら、素早くエラーをキャプチャーして、すぐ変更箇所をコメントアウトして元にプラグインを変更前に戻して、再度同じページが正しく表示されるかどうか確認する事です。　もしそれでも正しく表示されなければ、プラグインを無効化して落ち着いて対処しましょう。（この場合、ショートコードを埋め込んでいるページには影響が出ますが、少なくともその他のページは動作します。）

更新に失敗しました。

下書きを保存した時に『更新に失敗しました。』のエラーメッセージが出る。　echoを書いているとこのエラーが出ます。　なので、returnでメッセージを出すようにして、一度『ｘ』でこのメッセージを閉じて、再度『下書き保存』してもこのメッセージは出てこなくなります。　

因みに、このメッセージが出ても保存は出来ています。　しかし、保存出来てもこのメッセージが出たまま、ウィンドウを閉じようとすると、毎回以下のメッセージが出てきて、『このページを離れる』をクリックしなければ閉じる事ができないので鬱陶しいです。

function.phpを書き換えるのが怖かった理由

ファイル名	取扱い
以下の理由で下記ファイルは一切書き換えず、自分用のファイルで作っています。バージョンアップ時書き換えられて、折角作ったコードが無くなるかもしれない。何か不具合が発生した時対処できない恐怖もある。
function.php	自作プラグインphpファイルで制御。ショートコードにするコード等。 DBから読み出してhtml化。
javascript.js	自作のjsファイル。自分のプラグインのディレクトリに置いています。自作プラグインphpでwp_enqueue_styleで読み込んまする。
style.css	自作のcssファイル。自分のプラグインのディレクトリに置いています。自作プラグインphpでwp_enqueue_styleで読み込んでます。編集が見づらいし管理しにくいのでカスタムcssもテスト実行時だけ使用し、最終は自作cssに統一しています。