WordPressプラグイン・Viteの開発環境・ショートコード

<?php
/*
Plugin Name: プラグイン名
Plugin URI: プラグインの詳細ページURL
Description: プラグインの簡単な説明
Version: 1.0
Author: 開発者名
Author URI: ウェブサイトURL
*/

//直接的なアクセスを防ぐ
if( ! defined( 'ABSPATH') ){
    exit;
}

<?php
// セキュリティチェック
if (!defined('WP_UNINSTALL_PLUGIN')) {
    die;
}

// プラグインフォルダのパスを取得
$plugin_dir = plugin_dir_path(__FILE__);

// プラグインフォルダを削除
function rrmdir($dir) {
    if (is_dir($dir)) {
        $objects = scandir($dir);
        foreach ($objects as $object) {
            if ($object != "." && $object != "..") {
                if (is_dir($dir . "/" . $object) && !is_link($dir . "/" . $object))
                    rrmdir($dir . "/" . $object);
                else
                    unlink($dir . "/" . $object);
            }
        }
        rmdir($dir);
    }
}

rrmdir($plugin_dir);

register_activation_hook(__FILE__, function() {
    // アクティベーション時の処理
});

register_deactivation_hook(__FILE__, function() {
    // デアクティベーション時の処理
});

register_uninstall_hook(__FILE__, function() {
    // アンインストール時の処理
});

//動作を確認用
add_action('wp_head', function() {
    error_log('テスト');
});

define('WP_DEBUG', true);
define('WP_DEBUG_LOG', true);  // デバッグログを有効にする
define('WP_DEBUG_DISPLAY', false);  // エラーメッセージを画面に表示しない
@ini_set('display_errors', 0);  // PHPエラーメッセージを画面に表示しない

log_errors = On
error_log = "/path/to/wordpress/wp-content/debug.log"

cd /path/to/wordpress/wp-content
touch debug.log
chmod 666 debug.log

tail -f /path/to/wordpress/wp-content/debug.log

src/
  ├── utils/
  │   └── common.js
  ├── effect1/
  │   ├── effect1.js
  │   └── effect1.css
  ├── effect2/
  │   ├── effect2.js
  │   └── effect2.css

プラグインフォルダ/
├── my-effects.php
├── frontend/  
│   ├── src/
│   │   └── effect1/
│   │       ├── effect1.js
│   │       └── effect1.css
│   ├── package.json
│   └── vite.config.js
├── dist/

import { defineConfig } from 'vite';
import { resolve } from 'path';

//環境変数EFFECTが設定されていない場合、'all'
const effect = process.env.EFFECT || 'all';

const input = effect === 'all'
  ? {
      effect1: resolve(__dirname, 'src/effect1/effect1.js'),
      // 他のエフェクトをここに追加
    }
  : {
      [effect]: resolve(__dirname, `src/${effect}/${effect}.js`)
    };

export default defineConfig({
  build: {
    manifest: true,
    rollupOptions: {
      input,
      output: {
        entryFileNames: 'assets/[name].[hash].js',
        chunkFileNames: 'assets/[name]-[hash].js',
        assetFileNames: 'assets/[name]-[hash][extname]'
      }
    },
    outDir: resolve(__dirname, '../dist'),
  }
});

{
  "scripts": {
    "dev:effect": "EFFECT=effect vite",
    "build": "vite build"
     }
}

//開発中のエフェクトのjsファイル
<script type="module" src="/src/effect1/effect1.js"></script>

//開発環境の立ち上げ
npm run dev:effect

//全てのエフェクトをビルド
npm run build

{
  "src/effect1/effect1.js": {
    "file": "assets/effect1.BoyTrGyr.js",
    "name": "effect1",
    "src": "src/effect1/effect1.js",
    "isEntry": true,
    "css": [
      "assets/effect1-BcNcH9bZ.css"
    ]
  }
}

/**
 * 指定されたエントリーポイントに関連するアセットファイルのパスを取得
 *
 * @param string $entry エントリーポイントのパス（例: 'src/effect1/effect1.js'）
 * @return array|null アセットファイルのパスの配列（JSとCSSのパス）、またはnull
 */
function get_asset_paths($entry) {
    // マニフェストファイルのパスを定義
    $manifest_path = plugin_dir_path(__FILE__) . 'dist/.vite/manifest.json';

    // マニフェストファイルが存在するかをチェック
    if (file_exists($manifest_path)) {
        // マニフェストファイルの内容を読み込み、JSONとしてデコード
        $manifest = json_decode(file_get_contents($manifest_path), true);

        // 指定されたエントリーポイントがマニフェストに存在するかをチェック
        if (isset($manifest[$entry])) {
            // アセットファイルのパスを格納する配列を初期化
            $paths = array();

            // JSファイルのパスを配列に追加
            $paths['js'] = plugins_url('dist/' . $manifest[$entry]['file'], __FILE__);

            // CSSファイルが存在する場合、各CSSファイルのパスを配列に追加
            if (isset($manifest[$entry]['css'])) {
                $paths['css'] = array_map(function($css_file) {
                    return plugins_url('dist/' . $css_file, __FILE__);
                }, $manifest[$entry]['css']);
            }
            // アセットファイルのパスを返す
            return $paths;
        } else {
            // エントリーポイントがマニフェストに存在しない場合のエラーログ
            error_log('Entry point not found in manifest: ' . $entry);
        }
    } else {
        // マニフェストファイルが存在しない場合のエラーログ
        error_log('Manifest file does not exist at path: ' . $manifest_path);
    }
    // エントリーポイントが見つからないか、マニフェストファイルが存在しない場合はnullを返す
    return null;
}

/**
 * 任意のエントリーポイントのアセットをキューに登録する関数
 *
 * @param string $entry エントリーポイントのパス（例: 'src/effect1/effect1.js'）
 * @param string $handle_prefix スクリプトやスタイルのハンドルのプレフィックス
 */
function enqueue_assets($entry, $handle_prefix) {
    if (!is_admin()) {  // 管理画面ではない場合にのみエンキューする
        $asset_paths = get_asset_paths($entry);
        if ($asset_paths) {
            if (isset($asset_paths['js'])) {
                // ハンドル名に 'myeffect-js' を追加
                wp_enqueue_script("{$handle_prefix}-myeffect-js", $asset_paths['js'], array(), null, true);
               //wp_localize_scriptを使ってプラグインURLをJavaScriptに渡す
                wp_localize_script("{$handle_prefix}-myeffect-js", 'myPlugin', array(
                    'url' => plugin_dir_url(__FILE__) . 'dist/'
                ));
                error_log("Script localized with URL: " . plugin_dir_url(__FILE__));
            }
            if (isset($asset_paths['css'])) {
                foreach ($asset_paths['css'] as $css_path) {
                    wp_enqueue_style("{$handle_prefix}-css", $css_path, array(), null);
                }
            }
        }
    }
}

//エンキューする
add_action('wp_enqueue_scripts', function() {
    enqueue_assets('src/effect1/effect1.js', 'effect1');
});

//jsでプラグインURLを取得
const pluginUrl = typeof myPlugin !== 'undefined' ? myPlugin.url : '/';

//テンプレートリテラルで対応
`${pluginUrl}images/logo.png`

//モジュールタイプをスクリプトタグに追加するフィルタフック
function add_module_type_to_script($tag, $handle, $src) {
    // 'myeffect-js' を含むハンドル名のスクリプトのみに適用
    if (strpos($handle, 'myeffect-js') !== false) {
        $tag = '<script type="module" src="' . esc_url($src) . '"></script>';
    }
    return $tag;
}
add_filter('script_loader_tag', 'add_module_type_to_script', 10, 3);

//ショートコードの機能を提供するためのPHP関数
function my_shortcode_function($atts) {
    return "Hello!";
}
//ショートコードの登録
add_shortcode('my_shortcode', 'my_shortcode_function');

function my_shortcode_function($atts) {
    // デフォルト属性を定義
    $atts = shortcode_atts(array(
        'attr1' => 'default1',
        'attr2' => 'default2'
    ), $atts, 'my_shortcode');

    // ショートコードの動作を定義する
    return "Attribute 1: " . $atts['attr1'] . ", Attribute 2: " . $atts['attr2'];
}

add_shortcode('my_shortcode', 'my_shortcode_function');

function my_enclosing_shortcode_function($atts, $content = null) {
    return '<div class="my-enclosing">' . do_shortcode($content) . '</div>';
}

add_shortcode('my_enclosing_shortcode', 'my_enclosing_shortcode_function');

function custom_content_shortcode($atts) {
    $atts = shortcode_atts(array(
        'title' => 'Default Title',
        'message' => 'Default Message'
    ), $atts, 'custom_content');

    ob_start();
    ?>
    <div class="custom-content">
        <h2><?php echo esc_html($atts['title']); ?></h2>
        <p><?php echo esc_html($atts['message']); ?></p>
    </div>
    <?php
    return ob_get_clean();
}

add_shortcode('custom_content', 'custom_content_shortcode');