Warning: Trying to access array offset on value of type bool in /home/c0843558/public_html/enakat-service.online/wp-content/themes/cocoon-master/lib/utils.php on line 2618

Warning: Trying to access array offset on value of type bool in /home/c0843558/public_html/enakat-service.online/wp-content/themes/cocoon-master/lib/utils.php on line 2618

Warning: Trying to access array offset on value of type bool in /home/c0843558/public_html/enakat-service.online/wp-content/themes/cocoon-master/lib/utils.php on line 2646

WordPressプラグイン作成時のディレクトリ構造をまとめてみた|サンプルコード付き


Warning: Trying to access array offset on value of type bool in /home/c0843558/public_html/enakat-service.online/wp-content/themes/cocoon-master/tmp/eye-catch.php on line 19

Warning: Trying to access array offset on value of type bool in /home/c0843558/public_html/enakat-service.online/wp-content/themes/cocoon-master/tmp/eye-catch.php on line 20

Warning: Trying to access array offset on value of type bool in /home/c0843558/public_html/enakat-service.online/wp-content/themes/cocoon-master/tmp/eye-catch.php on line 21
WordPress

WordPressプラグインを作成する際の基本的なディレクトリ構造と各ファイルのサンプルコードは以下の通りです。

基本的なディレクトリ構造

my-plugin/
├── my-plugin.php
├── readme.txt
├── assets/
│   ├── css/
│   │   └── style.css
│   └── js/
│       └── script.js
└── includes/
    └── class-my-plugin.php

各ファイルのサンプルコード

1. my-plugin.php

<?php
/**
 * Plugin Name: My Plugin
 * Description: これはサンプルのWordPressプラグインです。
 * Version: 1.0
 * Author: あなたの名前
 */

if ( ! defined( 'ABSPATH' ) ) {
    exit; // Exit if accessed directly
}

// プラグインのメインクラスを読み込む
require_once plugin_dir_path( __FILE__ ) . 'includes/class-my-plugin.php';

// プラグインを初期化する
function run_my_plugin() {
    $plugin = new My_Plugin();
    $plugin->run();
}
run_my_plugin();

2. readme.txt

=== My Plugin ===
Contributors: あなたの名前
Tags: sample, plugin
Requires at least: 5.0
Tested up to: 6.0
Stable tag: 1.0

== Description ==

これはサンプルのWordPressプラグインです。

== Installation ==

1. このプラグインをダウンロードします。
2. プラグインをWordPressにアップロードします。
3. プラグインを有効化します。

== Changelog ==

= 1.0 =
初版リリース。

3. assets/css/style.css

/* プラグインのスタイル */
.my-plugin {
    background-color: #f0f0f0;
    padding: 20px;
}

4. assets/js/script.js

// プラグインのスクリプト
document.addEventListener('DOMContentLoaded', function() {
    console.log('My Plugin is loaded!');
});

5. includes/class-my-plugin.php

<?php

class My_Plugin {
    public function run() {
        add_action( 'wp_enqueue_scripts', array( $this, 'enqueue_scripts' ) );
    }

    public function enqueue_scripts() {
        wp_enqueue_style( 'my-plugin-style', plugin_dir_url( __FILE__ ) . '../assets/css/style.css' );
        wp_enqueue_script( 'my-plugin-script', plugin_dir_url( __FILE__ ) . '../assets/js/script.js', array(), false, true );
    }
}

この構造とサンプルコードを基に、あなたのプラグインを開発してみてください。必要に応じて、機能を追加したり、ファイルを整理したりできます。
my-plugin/ ディレクトリをWordPressに追加するには、以下の手順に従ってください。

プラグインの追加手順

  1. WordPressのインストールディレクトリを開く
  • WordPressがインストールされているサーバーやローカル環境のディレクトリに移動します。
  1. プラグインディレクトリに移動
  • wp-content/plugins/ フォルダに移動します。このフォルダがWordPressのプラグインを管理する場所です。
  1. プラグインディレクトリを作成
  • plugins フォルダ内に、新しいフォルダを作成します。このフォルダ名はプラグインの名前にすることが一般的です。ここでは my-plugin とします。
   wp-content/plugins/my-plugin/
  1. プラグインファイルを追加
  • 先ほど作成した my-plugin/ フォルダ内に、以下のファイルとディレクトリを作成します。
   my-plugin/
   ├── my-plugin.php
   ├── readme.txt
   ├── assets/
   │   ├── css/
   │   │   └── style.css
   │   └── js/
   │       └── script.js
   └── includes/
       └── class-my-plugin.php
  1. ファイルを編集
  • 各ファイルに先ほど提供したサンプルコードをコピーして貼り付けます。
  1. WordPress管理画面にアクセス
  • WordPressの管理画面にログインし、「プラグイン」メニューを開きます。
  1. プラグインを有効化
  • 作成したプラグインが一覧に表示されるので、「有効化」リンクをクリックしてプラグインを有効にします。

最後に

これで、プラグインがWordPressに追加され、使用できるようになります。必要に応じて、プラグインの機能を追加したり、コードを修正したりしてください。

WordPressテーマ作成に関する記事も書いています。
ぜひ、参考にしてみてください。

コメント

タイトルとURLをコピーしました