wordpressプラグイン開発の基礎

先日wordpressで制作したお客さんのwebサイトに、施設の予約状況などが各部屋ごとに1日単位でわかるシステムを導入したいと打診されました。

当初は既存カレンダー系のプラグインをカスタムして対応しようとしましたが、要件を満たしているカレンダープラグインがなかったので、プラグインを作ってみました。

今回はワードプレスのプラグインを作成する為の基礎や、方法をメモ書きしました。

プラグインの基礎

まずはコメント内に必要な情報を記述します。
これさえ記述してあればプラグインとして認識されます。

Calendar-day.php

<?php
/*
  Plugin Name: Calendar-day
  Plugin URI:
  Description: 予約状況をカレンダーに表示する自作プラグイン
  Version: 1.0.0
  Author: MAKOTO ADACHI
  Author URI: 
  License:
 */

?>

管理画面上に表示される各種情報を設定

・add_menu_page関数内にタイトルや各種設定を記述していきます。

https://developer.wordpress.org/resource/dashicons/
で管理画面に表示されるアイコンを選択できます。

function show_page()内に記述した内容が、プラグインページに表示されます。

Calendar-day.php

add_action('init', 'CustomCalendarDay::init');

class CustomCalendarDay
{

    function add_pages()
    {
        add_menu_page(
            'カレンダー',  /* タイトル*/
            'カレンダー登録', /* メニュータイトル */
            'manage_options', /* 権限選択 */
            'calendar-index-day', /* プラグインURL */

            //ここに記述した関数が描画される
            [$this, 'show_page'],   
            /*表示アイコンの選択*/    
            'dashicons-clipboard', 
            3 /* 表示位置のオフセット */
        );
    }
    function show_page()
    {
        //ここに記述した内容がに表示される

    }

} 

?>

指定したアイコンで管理画面に表示されました！

外部ファイル読み込み

外部ファイルの読み込みに以下の方法を用います。

CSSファイルの読み込み方法

Calendar-day.php

function myplugin_load() {
  wp_register_style('myplugin_css', plugins_url('css/myplugin_css.css', __FILE__));
  wp_enqueue_style('myplugin_css');
}

JSファイルの読み込み

Calendar-day.php

function my_scripts_method() {
    wp_enqueue_script('myplugin_js', plugins_url('js/myplugin_js.js', __FILE__ ), array(), '1.0', true);
}
add_action( 'wp_enqueue_scripts', 'my_scripts_method' );

まとめ

ひとまずはここら辺の記述だけで簡単なプラグインなら作れてしまいます。
今回は小規模なプラグインだったのですんなり開発できました。
今後は大規模なプラグインも開発していきたいです。