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

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

今回は、それを「プラグイン化してみよう」という内容です。実際にやってみましょう。

しらこ

今回のこのタイトルにした理由ですが、子テーマのfunctions.phpにコードを書くことはできても、それをプラグインにするにはどのようにすればよいのだろう?という方向けに0→1を応援したいなと考えて、このようにしました。そして、この記事は、出来る限り多くの方が、その疑問が解決したり、達成感が得られることを目指しています。

目次

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

今回は、以下の内容をプラグイン化します。前回の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.phpreadme.txtをそれぞれ作成します。現段階では、それぞれ中身が空になります。

こんな感じになればOK!

実際に、先程あなたが作ったフォルダにもmy-plugin.phpreadme.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へのリンクを追加します。

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

こうなれば完成です!
STEP
すべて保存をします

すべて保存をクリックしたら、VSCodeを終了します。

すべて保存をすれば完成です!
STEP
ZIPファイルに圧縮します

Windowsであれば、my-pluginのフォルダを右クリック>送る>圧縮(zip形式)フォルダーを選択すると、my-plugin.zipが生成されます。

STEP
WordPressの管理画面からプラグインをアップロード

WordPress管理画面のプラグイン>新規追加にて、上部にプラグインのアップロードというボタンが現れますので、ファイルを選択に先程生成したmy-plugin.zipを選択し、今すぐインストールをします。有効化すると、実際にプラグインを使用することができます。

有効化したら、これが出ればOKです!

手順は以上です。大変お疲れ様でした。

もっと詳しく見るには、WordPress Codex日本語版を参照してください。

おまけ

併せて見て欲しい・チャレンジしてみて欲しい内容などを、以下に書きます。

おまけ1:子テーマのfunctions.phpに記述したものをプラグイン化することについて

この記事の趣旨でもあるのですが、子テーマのfunctions.phpに記述したものをプラグイン化することについて、そのメリットなどをSWELL開発者の了さんが語られています。

この記事が気に入ったら
いいね または フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

WordPress・EC周りをいじるフリーランス。ずっと自作PCを作り続け、外ではSurface使いです。30代・埼玉県民。WordPressテーマ「SWELL」ユーザー。このブログでは、サイト・ブログのカスタマイズ方法などを発信します。

目次