ウェブサイト検索

シンプルなWordPressプラグインを作成する方法


WordPress は多くの人に愛されており、それは当然のことです。驚くほど使いやすく、無料 (またはオープンソース) で柔軟性があり、最も優れた点は非常に拡張可能です。プラグインのおかげで、WordPress を拡張して、実質的に思い描いたあらゆる機能を追加できます。

あなたが完全な初心者であれば、WordPress プラグインは携帯電話のアプリと同じです。携帯電話はそのままでも十分に機能しますが、アプリを使用してさらに機能を追加できます。 WordPress コンテンツ管理システム (CMS) にも同じことが当てはまります。

WordPress プラットフォームはすでに強力ですが、プラグインを使用するとさらに多くのことを実現できます。たとえば、WordPress プラグインを使用すると、電子商取引、SEO、スパム保護、高度なフォーム、ソーシャル メディア、セキュリティの強化、ライブ チャット、ビジュアル ページ構築などの追加機能を追加できます。

世の中には無料およびプレミアムの WordPress プラグインが何千もあります。公式 WordPress プラグイン リポジトリだけでも、この記事の執筆時点で 59,000 を超える無料プラグインがあります。 CodeCanyon などの他のマーケットプレイスでは、何千ものプレミアム WordPress プラグインが提供されています。

つまり、WordPress サイトに追加する必要があるほぼすべての機能に対応するプラグインが存在する可能性があります。それでも、場合によっては、前述のプラグイン ソースからは入手できないものが必要になる場合があります。その場合、WordPress プラグインを最初から作成するか、既存のプラグインを変更 (またはフォーク) する必要がある場合があります。

そして今日の投稿では、シンプルな WordPress プラグインの作成方法を説明します。これは、シンプルなものを作成したい場合、またはプラグイン開発に真っ向から取り組みたい場合に最適です。前置きはこのくらいにして、取り上げなければならないことが山ほどあるので始めましょう。

シンプルな WordPress プラグインの作成: 基本

楽しい部分に入る前に、知っておくべき基本的なことがいくつかあります。初心者にとって、WordPress プラグインの作成は難しいと思うかもしれません。いや、そうではありません。コンピューター サイエンスの学位を持っているかどうかに関係なく、誰でもプラグインの作成方法を学ぶことができます。

同時に、将来さらにプラグインを作成する予定がある場合は、PHP コーディングの知識が大いに役立ちます。これは、WordPress プラグインが PHP プログラミング言語でコーディングされているためです。この知識があれば、PHP 関数がどのように機能するかをよりよく理解できるようになり、作業がはるかに容易になります。それでも、それは簡単なことです。

また、必要な機能に応じて、プラグインには 1 つのファイルだけが含まれる場合もあれば、CSS スタイルシート、JavaScript スクリプト、メディア ファイルなどの複数のファイルが含まれる場合もあります。最後に、安全を確保するために、WordPress のコーディング標準とベスト プラクティスをよく理解しておくことが重要です。

今日は複雑なことには触れないので、安心してください。シンプルなプラグインを作成する方法を示し、作業を容易にするいくつかのツールとリソースを共有します。もう興奮していますか?確かにそう願っています 🙂

WordPress プラグインを作成するために必要なもの

WordPress プラグインを作成する前に、いくつかの作業を行う必要があります。まず第一に、ライブサイトでプラグインをテストしないでください。何か問題が発生すると、Web サイトがダウンしてしまう危険があり、問題を修正する間にひどいダウンタイムが発生します。

代わりに、ローカルまたはサーバー上にテスト サイトまたはステージング サイトを作成します。方法は次のとおりです。

  • WAMP を使用して WordPress を Windows にローカルにインストールする
  • MAMP を使用して WordPress を Mac にローカルにインストールする

あるいは、Local by Flywheel や DevKinsta などのツールを使用することもできます。

それ以外に、Notepad++、SublimeText、Atom などのテキスト エディターが必要です。必須ではありませんが、Pluginplate や Plugin Boilerplate などのツールを使用すると、開発をスピードアップできます (これについては後で詳しく説明します)。

ここからは楽しい部分ですが、簡単な WordPress プラグインを作成してみましょう。このチュートリアルでは、構築中の架空のレストラン Web サイトにカスタム投稿タイプを追加するプラグインを作成します。

初心者のために説明すると、WordPress はページ、投稿、添付ファイル、リビジョン、ナビゲーション メニューなどのいくつかの投稿タイプをサポートしています。このケースのシナリオでは、「レシピ」カスタム投稿タイプを追加する単純なプラグインを作成します。説明のために、プラグインを「Hot Recipes」と呼びます。

早速入ってみましょう。

シンプルな WordPress プラグインの作成方法

各 WordPress プラグインにはメイン ファイルがあり、手動で、または Plugin Boilerplate や Pluginplate などのツールを使用して作成できます。時間を節約するために、Pluginplate (IMO のほうが直感的です) を使用して、メイン ファイルと、後で必要になる可能性のある追加のファイルとフォルダーをいくつか生成しましょう。ただし、現時点ではメイン ファイルが必要なだけです。

メインファイルの作成

Pluginplate.com にアクセスし、以下で強調表示されているように [プラグインの作成] ボタンをクリックします。

次に、以下に示すようにプラグイン情報を入力します。ページの下部に、プラグインに追加機能を追加できるモジュールセクションが表示されます。また、以下で詳しく説明するように、プラス (+) をクリックして各モジュールをカスタマイズできることにも注意してください。問題がなければ、[生成プラグイン] ボタンをクリックします。

その後、[ダウンロード] ボタンをクリックしてプラグインをコンピュータに保存します。

これで、メイン ファイルを含む、必要な基本ファイルがすべて揃いました。ただし、このままではプラグインは何もしませんので、まだバブルを解除しないでください。プラグインをアクティブ化するときに実行されるコードを追加する必要があります。この例に基づくと、私のメイン ファイルはhot-recipes.php であり、次のセクションで編集するファイルです。

機能の追加

hot-recipes.php メール ファイルを見つけるには、Pluginplate からダウンロードした ZIP フォルダーを解凍します。

フォルダー内にメイン ファイルが表示されます。この場合も、hot-recipes.php です。

プラグイン フォルダー内には他のファイルがたくさんありますが、現時点ではそれらのファイルは必要ありません。次に、メインファイルにいくつかの関数を追加しましょう。メイン ファイル (hot-recipes.php) をお気に入りのテキスト エディター (私は Notepad++ を使用しています) で開きます。

Pluginplate でフォームに記入した方法に応じて、次のコードまたはそれに類似したコードが表示されます。

<?php
/**
* Hot Recipes
*
* @package HOTRECIPES
* @author Freddy
* @license gplv2-or-later
* @version 1.0.0
*
* @wordpress-plugin
* Plugin Name: Hot Recipes
* Plugin URI: https://vistamedia.me
* Description: The Hot Recipes WordPress plugins adds a custom post type suitable for restaurants.
* Version: 1.0.0
* Author: Freddy
* Author URI: https://vistamedia.me
* Text Domain: hot-recipes
* Domain Path: /languages
* License: GPLv2 or later
* License URI: https://www.gnu.org/licenses/gpl-2.0.html
*
* You should have received a copy of the GNU General Public License
* along with Hot Recipes. If not, see <https://www.gnu.org/licenses/gpl-2.0.html/>.
*/

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

// Plugin name
define( 'HOTRECIPES_NAME', 'Hot Recipes' );

// Plugin version
define( 'HOTRECIPES_VERSION', '1.0.0' );

// Plugin Root File
define( 'HOTRECIPES_PLUGIN_FILE', __FILE__ );

// Plugin base
define( 'HOTRECIPES_PLUGIN_BASE', plugin_basename( HOTRECIPES_PLUGIN_FILE ) );

// Plugin Folder Path
define( 'HOTRECIPES_PLUGIN_DIR', plugin_dir_path( HOTRECIPES_PLUGIN_FILE ) );

// Plugin Folder URL
define( 'HOTRECIPES_PLUGIN_URL', plugin_dir_url( HOTRECIPES_PLUGIN_FILE ) );

/**
* Load the main class for the core functionality
*/
require_once HOTRECIPES_PLUGIN_DIR . 'core/class-hot-recipes.php';

/**
* The main function to load the only instance
* of our master class.
*
* @author Freddy
* @since 1.0.0
* @return object|Hot_Recipes
*/
function HOTRECIPES() {
	return Hot_Recipes::instance();
}

HOTRECIPES();

いいですね、すべてが素晴らしそうです。上記のコードは、プラグインの名前、バージョン、作成者、ライセンス、その他の詳細を WordPress に伝えます。何も編集する必要はありません。次のステップに進みましょう。

上記のコードのすぐ下に、次のコードを追加します。

/**
 * Registers the recipes post type.
 */
function hot_recipes_register_post_types() {

	// Set UI labels for the recipes post type.
	$labels = array(
		'name' => _x( 'Recipes', 'Post Type General Name', 'hot-recipes' ),
		'singular_name' => _x( 'Recipe', 'Post Type Singular Name', 'hot-recipes' ),
		'menu_name' => __( 'Recipes', 'hot-recipes' ),
		'parent_item_colon' => __( 'Parent Recipe', 'hot-recipes' ),
		'all_items' => __( 'All Recipes', 'hot-recipes' ),
		'view_item' => __( 'View Recipe', 'hot-recipes' ),
		'add_new_item' => __( 'Add New Recipe', 'hot-recipes' ),
		'add_new' => __( 'Add New', 'hot-recipes' ),
		'edit_item' => __( 'Edit Recipe', 'hot-recipes' ),
		'update_item' => __( 'Update Recipe', 'hot-recipes' ),
		'search_items' => __( 'Search Recipe', 'hot-recipes' ),
		'not_found' => __( 'Not Found', 'hot-recipes' ),
		'not_found_in_trash' => __( 'Not found in Trash', 'hot-recipes' ),
	);

	// Set other arguments for the recipes post type.
	$args = array(
		'label' => __( 'recipes', 'hot-recipes' ),
		'description' => __( 'Recipes.', 'hot-recipes' ),
		'labels' => $labels,
		'supports' => array(
			'title',
			'editor',
			'excerpt',
			'author',
			'thumbnail',
			'comments',
			'revisions',
			'custom-fields',
		),
		'taxonomies' => array(),
		'hierarchical' => false,
		'public' => true,
		'show_ui' => true,
		'show_in_menu' => true,
		'show_in_nav_menus' => true,
		'show_in_admin_bar' => true,
		'menu_position' => 5,
		'can_export' => true,
		'has_archive' => true,
		'exclude_from_search' => false,
		'publicly_queryable' => true,
		'capability_type' => 'post',
		'show_in_rest' => true,
	);

	// Registes the recipes post type.
	register_post_type( 'recipes', $args );

}
add_action( 'init', 'hot_recipes_register_post_types' );

上記のコードは、カスタム投稿タイプ「レシピ」をオプションの配列とともに登録するだけです。また、リビジョン、カスタム フィールド、抜粋、コメント、注目の画像などのサポートなどの機能も追加されます。これらは、新しいレシピを追加するときに投稿エディター内に表示される機能です。

余談: 今日の投稿の範囲を超えているため、初心者としてこの時点では構文についてあまり心配する必要はありません。ただし、PHP の知識があれば、上記のコードのすべての部分と、各部分が何を行うのかを理解できるでしょう。さらに、インターネット上には、学習したり実践したりできるリソースやコードがたくさん転がっています。

プラグインフォルダーを圧縮する

すべての変更を保存します。 hot-recipes フォルダ (編集したばかりの hot-recipes.php メイン ファイルが見つかったフォルダです) を hot-recipes.zip< に圧縮します。 アーカイブ (Mac では右クリックしてファイルを圧縮するのと同じくらい簡単です。PC でもこれは非常に似ていると思います)。フォルダーが .ZIP 拡張子として保存されていることを確認してください。拡張子が付けられていない場合、プラグインはインストールされません。

次に、テスト サイトにログインし、以下に示すように[プラグイン] > [新規追加]に移動します。

次に、[プラグインのアップロード] ボタンをクリックし、コンピュータからプラグインの ZIP フォルダを選択して、[今すぐインストール] をクリックします。

次に、 プラグインを有効化します。

ここで、WordPress 管理メニューを確認すると、新しいレシピを追加する機能を備えた新しいレシピ投稿タイプに気づくでしょう。

初めてのシンプルなプラグインの作成、おめでとうございます!この導入により、さらに進んでコードを試して、何が得られるかを確認することができます。また、他のプラグインのソース コード (すべての WordPress プラグインはオープンソースです) を調べて詳細を学ぶこともできます。

必要なのは、さらにいくつかのリソース (プラグイン ハンドブックを確認してください) とたくさんの練習だけです。そうすれば、レジェンドのようにすぐにコーディングできるようになります。


WordPress プラグインのプログラミングと作成は、特に初心者にとって、最初は怖気づくかもしれません。しかし、適切なツールと学習リソースがあれば、すぐに優れたプラグインを開発できます。多少のコーディングと決断が必要なだけで、半分まで到達できます。

このチュートリアルが、プラグインを理解する上で正しい方向に導いてくれれば幸いです。この投稿は、何でもできる複雑な WordPress プラグインを開発するための足掛かりとなるはずです。ここで終わらず、上で推奨したリソースをチェックして、WordPress プラグイン開発の知識を深めてください。

このチュートリアルが役に立ったと思われた場合、または他に追加したいことがあれば、ぜひお知らせください。以下のコメントセクションでご意見を共有してください。またね!