私たちは長年にわたり多くのWordPressプラグインを作成し、自分たち自身と何千ものユーザーを助けてきました。多くの読者から、自分たちもプラグインを作成する方法を知りたいという問い合わせを受けています。
WordPressプラグインの作成は、最初は難しく思えるかもしれませんが、実際には非常に楽しくやりがいのあるものです。サイトに新しい機能を追加したい場合でも、他の人と役立つ情報を共有したい場合でも、プラグインの作成はそれを実現するための素晴らしい方法です。
このガイドでは、最初のWordPressプラグインをステップバイステップで作成する方法を説明します。
初めてのWordPressプラグインを作成するために必要なものは？
WordPressプラグインは、WordPressウェブサイト用のアプリのようなものです。スマートフォンのアプリと同様に、WordPressにプラグインをインストールして新機能を追加できます。
WordPressプラグインの詳細については、WordPressプラグインとその仕組みに関するガイドをご覧ください。
最初のWordPressプラグインを作成するには、PHP、CSS、HTML、JavaScriptのような基本的なコーディング言語の知識が必要です。
これは多くに聞こえるかもしれませんが、心配しないでください。チュートリアルに従うことができます。ステップバイステップでプロセスを進めていきます。最終的には、簡単なWordPressプラグインを作成するためのWordPressプログラミングの十分な理解が得られるでしょう。
このため、基本に忠実に、WordPressの高度なコーディングスキルには踏み込みません。
次に、コンピューター上でWordPressプラグインをテストするためのローカル開発環境が必要です。これを設定するには、WindowsコンピューターにWordPressをインストールする方法またはMacのガイドを参照してください。
プラグインはステージングサイトでテストすることもできます。ただし、エラーが発生した場合、ウェブサイトが破損してアクセスできなくなる可能性があります。
これらの問題に対処するには、一般的なWordPressのエラーを修正する方法に関するガイドをご覧ください。
コードを記述するには、プレーンテキストエディタも必要になります。メモ帳やテキストエディットで問題ありません。ただし、より高度なものを試したい場合は、開発者向けのコードエディタをご覧ください。
これらが準備できたら、チュートリアルを開始しましょう。以下のクイックリンクを使用して、特定のトピックにスキップできます。
- ステップ1：基本的なWordPressプラグインを作成する
- ステップ2：最初のWordPressプラグインをインストールして有効化する
- ステップ3：プラグインをWordPress.orgプラグインリポジトリに送信する
- ステップ4：Subversion（SVN）を使用してプラグインをアップロードする
- Step 5: Add Artwork to Your Plugin on WordPress.org
ステップ1：基本的なWordPressプラグインを作成する
最初の手順は、デスクトップまたはドキュメントフォルダに新しいフォルダを作成し、wpb-plugin-tutorialやmy-first-pluginのような名前を付けることです。
次に、テキストエディタで新しいファイルを作成し、プラグインフォルダ内に wpb-plugin-tutorial.php または my-first-plugin.php として保存します。重要なのは .php 拡張子ですが、ファイル名は自由に付けられます。
テキストエディタでそのPHPファイルを開く必要があります。
プラグインファイルに追加する必要がある最初のものは、プラグインヘッダーです。このコメントブロックは、WordPressにプラグインの名前、バージョン、ウェブサイト、プラグイン作成者の名前などを伝えます。
/*
Plugin Name: WPBeginner Plugin Tutorial
Plugin URI: https://www.wpbeginner.com
Description: A short little description of the plugin. It will be displayed on the Plugins page in WordPress admin area.
Version: 1.0
Author: WPBeginner
Author URI: https://www.wpbeginner.com
License: GPL2
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: wpb-tutorial
Domain Path: /languages
*/
プラグインヘッダーを追加したら、その下にプラグインコードの追加を開始できます。
このチュートリアルでは、各記事の最後にTwitterでフォローするようにユーザーに促すメッセージを追加する簡単なプラグインを作成します。
プラグインヘッダーブロックの下に、以下のコードをコピーして貼り付けるだけです。
<?php
function wpb_follow_us($content) {
// Only do this when a single post is displayed
if ( is_single() ) {
// Message you want to display after the post
// Add URLs to your own Twitter and Facebook profiles
$content .= '<p class="follow-us">If you liked this article, then please follow us on <a href="http://twitter.com/wpbeginner" title="WPBeginner on Twitter" target="_blank" rel="nofollow">Twitter</a> and <a href="https://www.facebook.com/wpbeginner" title="WPBeginner on Facebook" target="_blank" rel="nofollow">Facebook</a>.</p>';
}
// Return the content
return $content;
}
// Hook our function to WordPress the_content filter
add_filter('the_content', 'wpb_follow_us');
変更を保存する前に、TwitterとFacebookのプロフィールURLをご自身のものに置き換えるのを忘れないでください。
次に、コンピューターのデスクトップに移動し、プラグインフォルダのzipファイルを作成します。
Macユーザーはフォルダを右クリックし、「wpb-plugin-tutorialを圧縮」を選択できます。Windowsユーザーはフォルダを右クリックし、「zipファイルに圧縮」を選択できます。
ステップ2：最初のWordPressプラグインをインストールして有効化する
プラグインを作成したので、テストできるようにインストールする時期です。ステップバイステップの手順については、WordPressプラグインのインストール方法に関する記事をご覧ください。
ウェブサイトのWordPress管理画面にアクセスし、プラグイン » 新規追加ページに移動します。
プラグインをアップロードするには、上部にある「プラグインのアップロード」ボタンをクリックする必要があります。これにより、プラグインのアップロードボックスが表示されます。
作成したzipファイルを選択するには、「ファイルの選択」ボタンをクリックしてください。次に、「今すぐインストール」ボタンをクリックしてプラグインをアップロードし、インストールします。
インストールが完了したら、プラグインを有効化してください。
これで、ウェブサイトにアクセスしてプラグインが機能していることを確認できます。
新しい段落は、すべてのシングル投稿の末尾に表示されるようになります。
ステップ3：プラグインをWordPress.orgプラグインリポジトリに送信する
プラグインが他のWordPressユーザーに発見され、使用されるようにしたい場合は、WordPress.orgのプラグインリポジトリに送信できます。
そのためには、まずプラグインの「Read Me」ファイルを作成する必要があります。空白のテキストファイルを開き、プラグインフォルダにreadme.txtとして保存します。
このreadme.txtファイルは、WordPress.orgのreadmeファイル構文を満たす必要があります。readme.txtファイルに追加した情報は、WordPress.orgのプラグインページに表示されます。
以下は、開始点として使用できるサンプルreadme.txtファイルです。
=== Your Plugin Name ===
Contributors: WPBeginner
Tags: wpbeginner, plugin tutorial
Requires at least: 6.0
Tested up to: 6.2
Stable tag: 1.0
License: GPLv2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
A WordPress plugin to teach beginners how to write a WordPress plugin.
== Description ==
This simple plugin is part of our beginner's guide to writing a WordPress plugin.
== Installation ==
1. Upload the plugin folder to your /wp-content/plugins/ folder.
1. Go to the **Plugins** page and activate the plugin.
== Frequently Asked Questions ==
= How do I use this plugin? =
Answer to the question
= How to uninstall the plugin? =
Simply deactivate and delete the plugin.
== Screenshots ==
1. Description of the first screenshot.
1. Description of the second screenshot.
== Changelog ==
= 1.0 =
* Plugin released.
それでは、WordPressプラグインのreadmeファイルの構文がどのように機能するかを少し説明します。これにより、プラグインに合わせてカスタマイズできます。
プラグインのreadmeの最初の行はプラグイン名です。この名前がWordPress.orgのプラグインディレクトリにプラグインのタイトルとして表示されます。
次の行は「コントリビューター」です。これらは、WordPress.orgでプラグインを管理する責任のあるユーザーIDです。まだWordPress.orgのユーザーアカウントをお持ちでない場合は、無料のWordPress.orgユーザーアカウントを作成して、ユーザーIDを取得できます。
「必須バージョン」と「テスト済みバージョン」は、プラグインが動作するWordPressのバージョンを指します。「安定版タグ」は、ご自身のプラグインのバージョンです。
「ライセンス」フィールドは、GPL のまま、URLもそのままにしておくことができます。
次に、Description（説明）エリアを編集して、プラグインが何をするのかを説明できます。
プラグインのreadmeファイルを編集した後、変更を保存することを忘れないでください。
これで、プラグインはWordPress.orgのプラグインチームによるレビューの準備ができました。プラグインを送信するには、無料のWordPress.orgアカウントが必要です。
プラグインを追加ページにアクセスし、まだログインしていない場合は、「ログインしてください」ボタンをクリックします。
ログインすると、プラグインをアップロードしてレビューのために提出できるようになります。
「ファイルの選択」ボタンをクリックして、プラグインのzipファイルを選択します。その後、該当するすべてのボックスにチェックを入れて「アップロード」をクリックします。
WordPress.orgのプラグインレビューチームが、一般的なエラーやセキュリティチェックのためにプラグインコードを確認します。承認されると、プラグインチームからメールが届きます。
このメールには、WordPress.orgでホストされているプラグインのSubversion（SVN）リポジトリへのリンクが含まれています。
ステップ4：Subversion（SVN）を使用してプラグインをアップロードする
Subversionはバージョン管理ソフトウェアです。 ユーザーは、変更の記録を保持し、さまざまなバージョンを管理し、共同作業を可能にしながら、ファイルやディレクトリの変更を行うことができます。
プラグインをWordPress.orgにアップロードするには、コンピューターにSVNクライアントがインストールされている必要があります。
Windowsユーザーは、SilkSVNまたはTortoiseSVN（無料）を使用できます。Macユーザーは、コンピューターにSmartSVNまたはVersions Appをインストールできます。
この記事では、Mac版Versionsアプリのスクリーンショットを紹介します。ただし、GUIを備えたすべてのSVNアプリでプロセスは非常に似ています。
インストールしたら、Versionsアプリを開き、WordPressプラグインのリポジトリのコピーをチェックアウトする必要があります。「New Repository Bookmark」ボタンをクリックするだけです。
これによりポップアップが表示され、まずこのブックマークの名前を指定する必要があります。プラグインの名前にちなんで名前を付けることができます。
その後、WordPressプラグインのSVNリポジトリURLを追加する必要があります。
「作成」ボタンをクリックしてリポジトリに接続します。
Versions App は、プラグインのリポジトリのコピーをコンピューターにダウンロードします。次に、ブラウザビューでリポジトリ名を右クリックし、「チェックアウト」を選択します。
フォルダの名前を入力し、コンピュータ上のどこに保存したいかを選択するよう求められます。プラグインディレクトリと同じフォルダ名を使用し、「チェックアウト」ボタンをクリックして続行できます。
Versionsアプリは、コンピューター上にプラグインのローカルコピーを作成します。 これは、プラグインのリポジトリの下で表示するか、Finderアプリを使用して参照できます。
次に、プラグインファイルをコピーして、ローカルリポジトリのtrunkフォルダ内に貼り付ける必要があります。
そのようにすると、Versionsアプリの新しいファイルの横に疑問符のアイコンが表示されることに気づくでしょう。
これらのファイルは以前は存在しなかったため、「追加」する必要があります。新しいファイルを選択し、「追加」ボタンをクリックして、これらのファイルをローカルフォルダに追加します。
プラグインファイルがサブバージョンに追加されたので、それらをアップロードする準備ができました。基本的に、ローカルフォルダとサブバージョンディレクトリの変更を同期します。
ローカルリポジトリをクリックして選択し、「コミット」ボタンをクリックします。
新しいポップアップが表示されます。
変更のリストとコミットメッセージを追加するボックスが表示されます。「コミット」をクリックして続行してください。
SVNアプリが変更を同期し、プラグインのリポジトリにコミットします。
プラグインファイルをトランクにアップロードしたので、バージョンにタグ付けする時期です。
プラグインのローカルコピーに移動し、trunkフォルダ内のファイルをコピーします。その後、tagsフォルダを開き、その中に新しいフォルダを作成する必要があります。
このフォルダにバージョン名と同じ名前を付けます。プラグインのヘッダーに入力したバージョンと一致していることを確認してください。上記のサンプルコードでは、プラグインにバージョン1.0を使用しました。
/tags/フォルダに1.0フォルダを追加した後。Versionsアプリでフォルダ名の横に疑問符アイコンが表示されることに気づくでしょう。
これは新しいフォルダなので、リポジトリにフォルダとそのすべてのファイルを含めるには、「追加」ボタンをクリックする必要があります。
その後、「コミット」ボタンをクリックして変更を同期できます。ローカルコピーでプラグインファイルの編集を続けることができます。
変更が完了したら、コミットボタンをクリックするだけでWordPress.orgリポジトリと同期できます。
プラグインに大きな変更を加えた場合は、バージョン番号の名前を付けた新しいフォルダを追加して新しいバージョンを追加したいと思うでしょう。バージョン番号がプラグインのヘッダーと一致していることを確認してください。
WordPress.orgプラグインディレクトリでプラグインをプレビューできるようになりました。
ステップ5：WordPress.orgでプラグインにアートワークを追加する
WordPress.orgでは、プラグインにアートワークやスクリーンショットを追加できます。これらの項目は標準的な命名規則に従う必要があり、Subversionを使用してアップロードする必要があります。
プラグインヘッダーバナー
これは、プラグインページの先頭に表示される大きな画像です。772 x 250ピクセルまたは1544 x 500ピクセルのJPEGまたはPNGファイル形式で指定できます。常に次のように名前を付ける必要があります。
- banner-772×250.jpg または banner-772×250.png
- banner-1544×500.jpg または banner-1544×500.png
プラグインアイコン
このより小さな正方形の画像ファイルは、検索結果やプラグインリストにプラグインアイコンとして表示されます。125 x 125ピクセルまたは250 x 250ピクセルのJPEGまたはPNGファイル形式で提供できます。
このアイコンファイルの名前は次のようになっている必要があります。
- icon-128×128.jpg または icon-128×128..png
- icon-256×256.jpg または icon-256×256.png
スクリーンショット
スクリーンショットファイルの名前は次の形式を使用してください。
- screenshot-1.png
- screenshot-2.png
いくつでも追加できます。これらのスクリーンショットは、readme.txtファイル内のスクリーンショットの説明と同じ順序で表示されるはずです。
すべてのアートワークを準備したら、プラグインのローカルコピーのアセットフォルダに配置できます。
その後、assetsフォルダの横に疑問符アイコンが表示されます。「追加」ボタンをクリックして、新しいassetsファイルをリポジトリに追加します。
最後に、コミットボタンをクリックしてファイルをWordPress.orgリポジトリにアップロードします。しばらくすると、プラグインページにアートワークが表示されるようになります。
WordPressプラグイン開発を学ぶための究極のガイド
WordPressプラグインは、上記で紹介したような簡単なものから、クイズ、カウントダウンタイマー、RSVP、投票、Googleレビューなど、さらに強力なものまであります。
一部の強力なWordPressプラグインには、アドオンも含まれる場合があります。これらのアドオンは、他のプラグインを拡張するプラグインのように機能します。
WordPressプラグインに機能を追加するさまざまな方法について、さらに詳しく学ぶのに役立つリソースを以下に示します。
- 初心者向けの便利なWordPressコードスニペット
- WordPressにショートコードを追加する
- functions.phpファイルトリックを、サイト固有のプラグインで使用できるようになりました
- カスタム投稿タイプとタクソノミーの作成
- WordPressでスタイルシートとJavaScriptを適切に追加する
この記事がWordPressプラグインの作成方法を学ぶのに役立ったことを願っています。また、WordPressの新機能提案方法に関するガイドや、最も成功したWordPressビジネスと企業のリストもご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Onno
Loved this article. Followed it as an exercise to get into developing a WP plugin. Good overview of the basics without getting distracted with details. The code does need some updating. That helped me helped me exercise my troubleshooting skills
先頭にphpタグが必要です。また、いくつかの規約の変更がありますが、記事にはあまり関係ありません。
Thanks for this article and hope I could give something back
WPBeginnerサポート
The plugin should have the php tag in our code snippet but thank you for letting us know!
管理者
デニス・ムトミ
コーディング経験が全くない私にとって、WordPressプラグイン開発に関するこの記事は非常に役立ち、よく説明されていました。
すぐに自分でプラグインをコーディングするようにはなりませんが、明確なステップバイステップの説明のおかげで、いくつかの重要な概念を理解することができました。特に、開発者がWordPressプラグインリポジトリにプラグインを提出する方法について学べたのが良かったです。
自分でコーディングするようにはならないでしょうが、一つ確かなことは、今日何か新しいことを学んだということです！WPBeginnerさん、ありがとうございました！
WPBeginnerサポート
ガイドがお役に立てて嬉しいです！
管理者
mohadese esmaeeli
私たちが思いつくすべての機能がプラグインとして作成され、WordPressにインストールできるというのは興味深いですね。Jannahテーマをサイトにインストールしましたが、いくつかのショートコードがあり、テーマを変更する予定です。あなたが提供した方法で、新しいテーマと一緒に前のテーマのショートコードをプラグインとして保持できるかもしれません。
WPBeginnerサポート
It would require some coding knowledge but you could look to add the features to your new theme
管理者
maven
プラグインコードはどのように終了しますか？ この } で終わるのですか？
WPBeginnerサポート
使用しているコードによりますが、閉じられるべき開き括弧{がある場合は}を使用したいと思いますが、特定のファイルの終わりを示すマーカーは必要ありません。
管理者
アンドレア・ヴィロンダ
「add_filter(‘the_content’, ‘wpb_follow_us’);」を使用しないとどうなりますか？
WPBeginnerサポート
そのコードを使用しない場合、フォローリンクを含む段落はコンテンツの末尾に追加されません。$contentは追加されるリンクであり、add_filterはそれをコンテンツに含めるものです。
管理者
アンドレア・ヴィロンダ
「テキストドメイン」と「ドメインパス」の意味は何ですか？
WPBeginnerサポート
テキストドメインは、翻訳目的でテキストがどこにあるかを伝えるために使用され、フォルダ名と同じでなければなりません。
ドメインパスは、プラグインの翻訳が見つかる場所です。
管理者
Ritik
ありがとうございます。
とても参考になります。
WPBeginnerサポート
Glad we could show how to create a plugin in a beginner friendly way
管理者
Raja Poudel
あなたの説明は、WordPressプラグイン開発初心者である私にとって、非常に分かりやすいです。
WPBeginnerサポート
Glad you found our guide helpful
管理者
Ahroihan
こんにちは、
プラグインを作成したいのですが、チュートリアルを教えていただけますか？
ありがとうございます
mamta
こんにちは、私はPHP開発者であり、WordPress開発者です。カスタムWordPressプラグインを作成したいです。チュートリアルを送ってください。
シヴァ
こんにちは、私はPHPとWordPressの開発者です。カスタムWordPressプラグインを作成したいです。
プラグインチュートリアルとプラグイン作成のヘルプをお願いします。
ラメシュ・ラム
こんにちは、私はPHP開発者であり、WordPress開発者です。カスタムWordPressプラグインを作成したいです。チュートリアルを送ってください。
マーシー
I’m a virgin programer, but have decided to create my own plug in for a fund raiser thermometer for my adoption blog because none of the ones I’ve found are comparable with my WP version and have what I want on them… and needless to say, I need help, direction, tips, something similar to what I need that I can tweek… etc. Please help !
thanks
suresh
良い記事で、とてもシンプルです
シュリニ
WPプラグイン開発を学ぶのに良い記事です…
JasonCrews
Wordpressmodderは現在バイアグラのサイトです
rakeshtiwary022
こんにちは、私はPHPとWordPressの開発者です。カスタムWordPressプラグインを作成したいです。
プラグインチュートリアルとプラグイン作成のヘルプをお願いします
email:-rakeshtiwary022@gmail.com
HomeTivi
こんにちは、私はPHPとWordPressの開発者です。カスタムWordPressプラグインを作成したいです。
プラグインチュートリアルとプラグイン作成のヘルプをお願いします
マンヌシン
こんにちは、私はPHPとWordPressの開発者です。カスタムWordPressプラグインを作成したいです。
プラグインチュートリアルとプラグイン作成のヘルプをお願いします
BanksBen
PHPの知識は限られています。古いサイトを新しいWPサイトに統合しています。古いサイトは、リードを収集して保存するPHP SQL駆動システムです。私のサイトは http://www.moverscommunity.com/ および http://tsveetech.com です
バゲシュ・シン
私はプログラマーです。過去2日間、カスタムプラグインを作成しようとしており、これは大いに役立ちました。本当にありがとうございます。
ナイジェル
Thanks for this great collection of articles. I can’t wait to get started hacking together my own plugin
ダダン・イスカンダル
PHPプログラミングを学んでいるので、この記事を見つけられてとても感謝しています。 とても良い兄弟です
ジョン・フランクリン
とても良いですね。私はWordpressの大ファンで、新しくて本当に役立つプラグインがリリースされるのを見るのは素晴らしいことです。ダウンロードして確認してみます。まさに何週間も探していたものです。本当にありがとうございます！
ケント・タン
チュートリアルの良いコレクションですね。より高度なもの、例えばプラグインを設定するためのオプションページを作成するなど、どこで入手できますか？
編集スタッフ
プラグインの本を1冊購入してください… CodexとTrunkを勉強してください。
管理者
ブラッド
記事をありがとうございます。プラグイン作成についてもう少し知りたいと思っていましたので、これで試してみます！
ロスティ・ザ・スノーマン
このリストは非常に役立つと思います
ありがとう
I also agree you should change the title
Tim Trice
最初の4つのうち2つは、「Hello World」をエコーするという同じ機能をカバーしています（少なくとも最初のものは、エコー文をカスタマイズできます）。プラグインの標準、非アクティブ化フック、DBからのデータの削除、およびエクスポートに焦点を当てた記事をもっと見たいです。
Joe
+1 change title
Marco
Well, I suggest to change the title from “How to Create a WordPress Plugin” to “A list of the best tutorials to help you create your own WordPress Plugin”.
回答
それは良いアイデアですね…!!! 同意します
Nikunj Tamboli
素晴らしい記事です。この記事を使っていくつかのプラグインを作成してみます。