functions.phpにカスタマイズした内容を、プラグイン化してみよう！（WordPressプラグインを自作してみよう）

2021.3.202024.3.29

先日書いた以下の記事で、子テーマのfunctions.phpにWordPressのカスタマイズ内容を記述して、実際に機能追加を行ってみました。

今回作成するプラグインの内容

今回は、以下の内容をプラグイン化します。前回のfunctions.phpに記述する方法を見たい方はこちらをどうぞ。

//管理用ヘッダーにメニューを追加する
function mytheme_admin_bar_render() {
	global $wp_admin_bar;
	$wp_admin_bar->add_menu( array(
		'id' => 'newmenu',
		'title' => 'WEB管理用',
		'href' =>  '#'
	));

	$wp_admin_bar->add_menu( array(
		'parent' => 'newmenu',
		'id' => 'menuanalytics',
		'title' => 'Google Analytics',
		'href' => 'https://analytics.google.com/analytics/web/#/',
		'meta' => array(
			'target' => '_blank',
		),
	));

	$wp_admin_bar->add_menu( array(
		'parent' => 'newmenu',
		'id' => 'menuconsole',
		'title' => 'Google Search Console',
		'href' => 'https://search.google.com/search-console',
		'meta' => array(
			'target' => '_blank',
		),
	));
}

add_action( 'wp_before_admin_bar_render', 'mytheme_admin_bar_render' );

まずはエディターをダウンロードする

VSCode（Visual Studio Code、無料です）を使用します。

せっかくだからプロっぽく専用のエディターを使いましょう！気分は大事です。

日本語化します。拡張機能（Japanese Language Pack for Visual Studio Code）をダウンロードします。

左側のアイコン（上から5番目）をクリックし、左側の検索窓に「Japanese Language Pack」と入力し、おそらく一番上にJapanese Language Pack for Visual Studio Codeが出ますので、それをインストールします。

これでVSCodeの準備が整いました。

手順

それでは、実際にプラグインを作る準備をしていきましょう。

作成するフォルダは1つ、ファイルは以下の2つです。留意点がありますので、以下を確認してください。

my-plugin.php（多くのプラグインはフォルダ名と名前を揃えてありますが、確か違ってもOK）
readme.txt（公式ディレクトリに登録するときは必要ですが、野良プラグインであればなくてもOK）

注意してほしいのは、フォルダ名・PHPファイル名ともに、あなたが考えた他にない唯一のものを入力します。

STEP

適当な場所にフォルダを作成します

PCのデスクトップ上などに適当な場所にフォルダを英数字で作成してください。あなたが考えた他にない唯一のものを入力します。たとえば、my-pluginとします。

STEP

VSCodeの「フォルダーを開く」をクリックして、指定したフォルダを開きます

その中に、以下のピンクで囲った部分のボタンをクリックし、my-plugin.phpとreadme.txtをそれぞれ作成します。現段階では、それぞれ中身が空になります。

実際に、先程あなたが作ったフォルダにもmy-plugin.phpとreadme.txtの2つのファイルが作成されているはずです。

STEP

my-plugin.php・readme.txtにそれぞれ以下の内容を追記していきます。

my-plugin.phpには以下の内容を順番に記述します。

まず最初に、プラグイン情報を以下のように書きます。以下は一例です（ライセンスをGPLにした場合）。

<?php
/*
Plugin Name: WP Admin Bar Plus (Google Service)
Description: WordPressの管理バー（アドミンバー）にGoogle AnalyticsとGoogle Search Consoleへのリンクを追加します。
Author: しらこ
Version: 0.1
Author URI: https://tecchan.jp/
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
*/

Plugin Name	プラグインの名前
Description	プラグインの短い説明
Author	プラグイン作者の名前
Version	バージョン情報
Author URI	プラグイン作者のURI
License	ライセンス名の「スラッグ」
License URI	ライセンスを記載したURI

そのすぐ下に、以下のコードを記述します。

if ( ! defined( 'ABSPATH' ) ) exit;

上記は、PHPファイルのURLに直接アクセスされても中身見られないようにするためのセキュリティコードです。

そして、その下に子テーマのfunctions.phpから以下のコードを削除して、そのまま書き写ししてきます。

//管理用ヘッダーにメニューを追加する
function mytheme_admin_bar_render() {
	global $wp_admin_bar;
	$wp_admin_bar->add_menu( array(
		'id' => 'newmenu',
		'title' => 'WEB管理用',
		'href' =>  '#'
	));

	$wp_admin_bar->add_menu( array(
		'parent' => 'newmenu',
		'id' => 'menuanalytics',
		'title' => 'Google Analytics',
		'href' => 'https://analytics.google.com/analytics/web/#/',
		'meta' => array(
			'target' => '_blank',
		),
	));

	$wp_admin_bar->add_menu( array(
		'parent' => 'newmenu',
		'id' => 'menuconsole',
		'title' => 'Google Search Console',
		'href' => 'https://search.google.com/search-console',
		'meta' => array(
			'target' => '_blank',
		),
	));
}

add_action( 'wp_before_admin_bar_render', 'mytheme_admin_bar_render' );

上記の3つをまとめると、以下の通りになります。

次に、readme.txtには以下の内容を記述します。以下は一例です。

Plugin Name: WP Admin Bar Plus (Google Service)
Plugin URI: https://tecchan.jp/

License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html

Description: WordPressの管理バー（アドミンバー）にGoogle AnalyticsとGoogle Search Consoleへのリンクを追加します。

多少、書き方は違いますが、先程のプラグイン情報と内容はほぼ同じです。