WordPressプラグイン開発環境と基本準備
コードの執筆を始める前に、適切なローカル開発環境を準備する必要があります。これには、ローカルサーバー(XAMPP、MAMP、またはLocal by Flywheelなど)、コードエディタ(VS CodeやPHPStormなど)、そしてテスト用のWordPressのインストールが含まれます。使用するPHPのバージョンがWordPressの公式推奨バージョンと一致していることを確認してください。
WordPressプラグインの核心部分は、以下の場所にあるファイルです:/wp-content/plugins/ディレクトリ内にあるフォルダです。このフォルダの名前があなたのプラグインの識別子となりますので、小文字、数字、ハイフンを使用することをお勧めします。このフォルダ内には、フォルダと同名のPHPのメインファイルが必ず存在しなければなりません。例えば:my-first-plugin.phpこのファイルはプラグインのエントリーポイントであり、プラグインに関するメタ情報が含まれています。
最初のプラグインファイルを作成しましょう。
まずは、最もシンプルなプラグインの作成から始めましょう。このプラグインは、ウェブサイトの管理画面に歓迎メッセージを表示するものです。
推薦図書 WooCommerceプラグインの徹底解析:初心者向けの設定から高度なカスタマイズまでの完全ガイド。
プラグインのヘッダー部分にコメントを記述する方法
すべてのWordPressプラグインは、特定のヘッダーコメントで始まる必要があります。WordPressはこれらの情報を読み取ることで、プラグインを認識し表示します。あなたのプラグインフォルダー(例えば…)内にあるプラグインも同様に、このヘッダーコメントを含めてください。my-first-pluginその中で、メインファイルを作成します。my-first-plugin.phpそして、以下のコードを記述してください:
<?php
/**
* Plugin Name: 我的第一个WordPress插件
* Plugin URI: https://example.com/my-first-plugin
* Description: 这是一个用于学习WordPress插件开发的入门插件,将在管理后台添加一个欢迎提示。
* Version: 1.0.0
* Author: 你的名字
* Author URI: https://example.com
* License: GPL v2 or later
* Text Domain: my-first-plugin
*/ ファイルを保存した後、WordPressの管理画面にログインし、「プラグイン」ページに移動してください。そこでは「My First WordPress Plugin」というプラグインがプラグインリストに表示されているはずです。この時点でプラグインを有効にすることができますが、まだ何の機能もありません。
プラグインに最初の機能を追加します。
では、このプラグインに簡単な機能を追加しましょう。管理画面の上部にカスタムの管理通知を表示する機能です。WordPressを使用してこれを実現します。admin_noticesフック。
メインファイル内でmy-first-plugin.phpのヘッダーコメントの下に、以下のコードを追加してください:
// 在管理后台添加一个欢迎提示
function my_first_plugin_admin_notice() {
?>
<div class="notice notice-success is-dismissible">
<p>「私の最初のWordPressプラグイン」のご利用をお歓迎します!このプラグインの有効化に成功しました。</p>
</div>
<?php
}
add_action( 'admin_notices', 'my_first_plugin_admin_notice' ); このコードは、``という名前のものを定義しています。my_first_plugin_admin_noticeその関数は、HTMLコードを出力し、閉じることができる成功通知ボックスを生成します。add_action()この関数は、このカスタム関数をWordPressに「マウント」します。admin_noticesこのアクションフックを使用してファイルを保存し、WordPressの管理画面を更新すると、ページの上部にこの緑色のウェルカムメッセージが表示されるようになります。
推薦図書 ウェブサイト構築の実践ガイド:ゼロからオンライン公開までの完全な開発プロセスと技術選定の手引き。
WordPressプラグインの核心メカニズムを理解する:フックとフィルター
WordPressプラグイン開発の核心は、WordPressコアとの相互作用にあります。これは主に「フック」メカニズムを通じて実現されます。フックには2種類あります:アクションとフィルターです。
アクションフックの使用方法
アクションフックを使用すると、WordPressが実行される特定のタイミングでカスタムコードを挿入することができます。ちょうど先ほど私たちが使用したのがその例です。admin_noticesもう一つのよくある例はinitフック(Hook)とは、WordPressが初期化される際に実行される処理です。主に、カスタムの記事タイプやカテゴリを登録するために使用されます。
例えば、プラグインの初期化時にオプションの値を設定することができます:
function my_first_plugin_set_default_option() {
// 如果选项不存在,则添加它
if ( false === get_option( 'my_first_plugin_greeting' ) ) {
add_option( 'my_first_plugin_greeting', 'Hello from my plugin!' );
}
}
add_action( 'init', 'my_first_plugin_set_default_option' ); フィルターフックの使用方法
フィルターフックは、プロセス内で伝達されるデータを変更することを可能にします。例えば、the_contentこのフィルターを使うと、記事の本文の表示内容を変更することができます。例えば、各記事の末尾に自動的に著作権情報を追加するように設定することも可能です。
function my_first_plugin_add_copyright( $content ) {
// 仅对主循环中的单篇文章生效
if ( is_single() && in_the_loop() && is_main_query() ) {
$copyright = '<p><em>この文章は著作権によって保護されています。転載する場合は出典を明記してください。</em></p>';
$content .= $copyright;
}
return $content;
}
add_filter( 'the_content', 'my_first_plugin_add_copyright' ); この例では、関数my_first_plugin_add_copyright元のデータを受け取ります。$content条件判断を経て(単一の記事ページでのみ効果を発揮するように確認した後)、そのページの末尾にHTMLコードを追加しました。最後に、修正された内容を必ず保存しなければなりません。$content戻る。
より複雑なプラグインの構築:ショートコードと設定ページ
機能が完全なプラグインでは、通常、フロントエンドでのインタラクション(ショートコードなど)とバックエンドでの設定(ページの設定など)の両方が提供される必要があります。
推薦図書 検索エンジン最適化(SEO)の強力なツール:ゼロからWordPressウェブサイトのSEO戦略を構築する。
カスタムショートコードを作成する
ショートコードにより、ユーザーは簡単なタグ(例えば)を使用して…[my_greeting])記事やページにプラグイン機能を挿入するには、ショートコードを登録して使用します。add_shortcode()関数。
// 注册一个简单的问候短代码
function my_first_plugin_greeting_shortcode( $atts ) {
// 使用 shortcode_atts 定义默认属性并合并用户输入
$attributes = shortcode_atts( array(
'name' => '访客',
), $atts );
// 获取我们之前设置的选项
$greeting_text = get_option( 'my_first_plugin_greeting', 'Hello' );
// 生成输出
$output = '<div class="my-plugin-greeting">';
$output .= esc_html( $greeting_text ) . ', ' . esc_html( $attributes['name'] ) . '!';
$output .= '</div>';
return $output;
}
add_shortcode( 'my_greeting', 'my_first_plugin_greeting_shortcode' ); 現在、ユーザーはエディター内で入力することができます。[my_greeting name="张三"]その場合、フロントエンドには「Hello from my plugin! 張三!」と表示されます。
プラグイン設定ページを追加します。
ユーザーが挨拶文を自分でカスタマイズできるようにするためには、管理バックエンドに設定ページを追加する必要があります。これには、トップメニューやサブメニューページの追加、およびフォームに入力された情報の保存処理が含まれます。
// 在后台“设置”菜单下添加子菜单页
function my_first_plugin_add_settings_page() {
add_options_page(
'我的插件设置', // 页面标题
'我的第一个插件', // 菜单标题
'manage_options', // 所需权限
'my-first-plugin', // 菜单slug
'my_first_plugin_render_settings_page' // 回调函数,用于输出页面内容
);
}
add_action( 'admin_menu', 'my_first_plugin_add_settings_page' );
// 渲染设置页面的HTML
function my_first_plugin_render_settings_page() {
?>
<div class="wrap">
<h1>私の最初のプラグインの設定</h1>
<form method="post" action="/ja/options.php/" data-trp-original-action="options.php">
<?php
settings_fields( 'my_first_plugin_settings_group' );
do_settings_sections( 'my-first-plugin' );
submit_button();
?>
<input type="hidden" name="trp-form-language" value="ja"/></form>
</div>
<?php
}
// 注册设置、区域和字段
function my_first_plugin_register_settings() {
register_setting(
'my_first_plugin_settings_group', // 设置组名
'my_first_plugin_greeting' // 选项名
);
add_settings_section(
'my_first_plugin_main_section', // 区域ID
'问候语设置', // 区域标题
null, // 区域回调函数(可为空)
'my-first-plugin' // 页面slug
);
add_settings_field(
'greeting_text_field', // 字段ID
'问候语文本', // 字段标题
'my_first_plugin_greeting_field_callback', // 字段HTML的回调函数
'my-first-plugin', // 页面slug
'my_first_plugin_main_section' // 所属区域ID
);
}
add_action( 'admin_init', 'my_first_plugin_register_settings' );
// 渲染问候语输入字段
function my_first_plugin_greeting_field_callback() {
$greeting = get_option( 'my_first_plugin_greeting' );
echo '<input type="text" name="my_first_plugin_greeting" value="' . esc_attr( $greeting ) . '" class="regular-text" />';
} このコードは、標準的なWordPressの設定ページを作成します。ユーザーが設定ページで挨拶文を変更して保存すると、以前に作成されたショートコードに新しい挨拶文のテキストが使用されるようになります。
概要
このチュートリアルを通じて、私たちはゼロから基本的な機能を持つWordPressプラグインを完成させました。プラグインのファイル構造の作成方法、プラグインヘッダー情報の記述方法、アクションフックを利用したバックエンドでの通知の追加方法、フィルターを使ったコンテンツの変更方法、ユーザーがフロントエンドで呼び出せるショートコードの作成方法、そしてプラグインの設定オプションを管理するための完全な設定ページの構築方法を学びました。これらはWordPressプラグイン開発において最も核心的で基本的なスキルです。これらのスキルをマスターしたら、WordPressの公式プラグインマニュアルを参照しながら、カスタムデータベーステーブルの作成、REST APIエンドポイントの利用、AJAX処理など、さらに多くのAPIについて深く学ぶことができます。そうすることで、より機能的で専門的なプラグインを開発することができるでしょう。
FAQ よくある質問
WordPressプラグインを開発するには、どのようなプログラミング言語の知識が必要ですか?
WordPressプラグインの開発には主にPHPの知識が必要です。なぜなら、WordPressのコア自体がPHPで書かれているからです。また、プラグインのフロントエンドインターフェースやインタラクションロジックを構築するためには、HTML、CSS、基本的なJavaScriptにも精通している必要があります。SQLについても基本的な理解があると、より複雑なデータ操作を処理するのに役立ちます。
私のWordPressプラグインをどのようにデバッグすればいいのでしょうか?
まず、ご自身の環境で以下のことを確認してください:wp-config.phpファイルを開くWP_DEBUGこのモードでは、PHPのエラーや警告が画面上に表示されます。次に、以下のように使用することができます:error_log()この関数は、デバッグ情報をサーバーのエラーログに書き込みます。より複雑なデバッグを行う場合は、Xdebugのような専用のPHPデバッグツールを使用するか、WordPressのデバッグプラグインをインストールして問題の特定を補助することを検討してください。
私が開発したプラグインをWordPressの公式プラグインディレクトリにどのように公開するか教えてください。
WordPress.orgにアクセスし、開発者アカウントを作成してください。その後、Subversion(SVN)ツールを使用して、自分のプラグインコードを公式に割り当てられたコードリポジトリにコミットしてください。プラグインはGPLライセンスに準拠していなければならず、コードの品質、セキュリティ、ドキュメントは一定の審査基準を満たす必要があります。審査に合格すると、プラグインは公式のディレクトリに掲載され、ユーザーがダウンロードできるようになります。
プラグインのフロントエンド用CSSファイルとJavaScriptファイルは、どのようにして正しく読み込むべきでしょうか?
競合を避け、パフォーマンスを確保するためには、テンプレートファイル内に直接リソースを読み込むべきではありません。正しい方法は、以下のようにリソースを使用することです:wp_enqueue_style()とwp_enqueue_script()関数です。管理バックエンドのリソースについては、以下のようにマウントする必要があります:admin_enqueue_scriptsフック(hook)とは、ウェブサイトのフロントエンドにあるリソースをどこにマウント(mount)すべきかを指定するための仕組みです。wp_enqueue_scriptsフック(hook)です。これにより、依存関係が正しく保たれ、同じファイルが繰り返し読み込まれるのを防ぐことができます。
次はどうする?
拡大読書と実践的知識
以下は、この記事のトピックに関連しており、さらに深く読むのに適している。あなたの現在の問題に最も近い記事から優先順位をつけ、徐々に周辺のトピックに広げていく方が良い場合が多い。