STEP 4
機能を実装する
WordPressの「フック」という仕組みを使って、プラグインに実用的な機能を追加しましょう。ショートコード、カスタム投稿タイプ、Ajax処理など、現場でよく使う実装方法を学びます。
🪝 フックとは何か
フック(Hook)は WordPress の核心的な仕組みです。WordPress が処理を実行するタイミングに「引っかかる」ことで、プラグインが独自の処理を割り込ませることができます。
アクションフック
WordPress が特定の処理を実行するタイミングに、追加の処理を実行します。
- ページ読み込み時に処理を追加
- 投稿保存時に処理を追加
- メール送信時に処理を追加
フィルターフック
WordPress が出力するデータを途中で受け取り、加工して返します。
- 投稿本文を加工する
- タイトルを変更する
- クエリを変更する
アクションフックの使い方
// 基本的な書き方
add_action( 'フック名', '実行する関数名', $priority, $args );
// 例: 投稿保存時にメールを送信
function mfp_notify_on_publish( $post_id ) {
if ( get_post_status( $post_id ) !== 'publish' ) {
return;
}
$title = get_the_title( $post_id );
wp_mail( get_option( 'admin_email' ), '新しい投稿', '「' . $title . '」が公開されました。' );
}
add_action( 'save_post', 'mfp_notify_on_publish' );
よく使うアクションフック一覧
| フック名 | 実行タイミング | 用途例 |
|---|---|---|
| init | WordPress初期化時 | カスタム投稿タイプの登録 |
| wp_enqueue_scripts | フロントエンドのスクリプト読み込み時 | CSS/JSの追加 |
| admin_menu | 管理メニュー構築時 | メニューの追加 |
| save_post | 投稿保存時 | 追加処理の実行 |
| wp_head | <head>タグ内の出力時 | メタタグの追加 |
| wp_footer | フッター出力時 | スクリプトの出力 |
| the_content | 投稿本文の出力時(フィルター) | 本文への要素追加 |
フィルターフックの使い方
// 基本的な書き方(必ず値を return する)
add_filter( 'フック名', '実行する関数名' );
// 例: 投稿本文の末尾に著者情報を追加
function mfp_add_author_info( $content ) {
// 投稿ページのみ処理
if ( ! is_single() ) {
return $content;
}
$author = get_the_author();
$author_info = '<div class="author-box"><p>著者: ' . esc_html( $author ) . '</p></div>';
return $content . $author_info; // 必ず return する
}
add_filter( 'the_content', 'mfp_add_author_info' );
⚠️ フィルターフックの注意点
フィルターフックの関数は必ず値を return してください。return を忘れると、コンテンツが消えてしまいます。
🏷️ ショートコードの作成
ショートコードは [shortcode] のように記事中に書くだけで機能を呼び出せる仕組みです。初心者でも使いやすく、非常に強力な機能です。
// 基本的なショートコード
function mfp_hello_shortcode() {
return '<p>こんにちは、世界!</p>';
}
add_shortcode( 'hello', 'mfp_hello_shortcode' );
// 使い方: [hello]
// 属性(パラメータ)付きショートコード
function mfp_greeting_shortcode( $atts ) {
// デフォルト値を設定してマージ
$atts = shortcode_atts(
array(
'name' => '世界',
'color' => '#1976D2',
),
$atts
);
$name = esc_html( $atts['name'] );
$color = esc_attr( $atts['color'] );
return '<p style="color:' . $color . ';">こんにちは、' . $name . '!</p>';
}
add_shortcode( 'greeting', 'mfp_greeting_shortcode' );
// 使い方: [greeting name="太郎" color="#FF6B35"]
💡 ショートコードの出力は必ず return
ショートコード関数では echo ではなく return を使います。echo を使うと、予期しない場所にコンテンツが表示されることがあります。
📂 カスタム投稿タイプの登録
通常の「投稿」「固定ページ」以外に、独自のコンテンツタイプを作成できます。「お知らせ」「ポートフォリオ」「商品」など、用途に合った投稿タイプを定義できます。
function mfp_register_news_post_type() {
$labels = array(
'name' => 'お知らせ',
'singular_name' => 'お知らせ',
'add_new' => '新規追加',
'add_new_item' => 'お知らせを追加',
'edit_item' => 'お知らせを編集',
'all_items' => 'お知らせ一覧',
);
$args = array(
'labels' => $labels,
'public' => true, // フロントエンドに表示
'has_archive' => true, // アーカイブページを持つ
'supports' => array( 'title', 'editor', 'thumbnail' ),
'menu_icon' => 'dashicons-megaphone',
'rewrite' => array( 'slug' => 'news' ),
);
register_post_type( 'mfp_news', $args );
}
add_action( 'init', 'mfp_register_news_post_type' );
カスタムタクソノミーの追加
カスタム投稿タイプに独自のカテゴリー分類(タクソノミー)を追加できます。
function mfp_register_news_taxonomy() {
register_taxonomy(
'mfp_news_category', // タクソノミー名
'mfp_news', // 対象の投稿タイプ
array(
'label' => 'お知らせカテゴリー',
'hierarchical' => true, // true=カテゴリー型 / false=タグ型
'rewrite' => array( 'slug' => 'news-cat' ),
)
);
}
add_action( 'init', 'mfp_register_news_taxonomy' );
💡 パーマリンクを更新する
カスタム投稿タイプを登録したあとは、管理画面の「設定」→「パーマリンク」を開いて「変更を保存」をクリックしてください。これでURLが正しく機能します。
⚡ Ajax処理の基礎
Ajax を使うと、ページを再読み込みせずにサーバーと通信できます。「いいねボタン」や「自動補完検索」など、インタラクティブな機能に使います。
// Ajax ハンドラー関数を登録
add_action( 'wp_ajax_mfp_like_post', 'mfp_like_post_handler' ); // ログインユーザー用
add_action( 'wp_ajax_nopriv_mfp_like_post', 'mfp_like_post_handler' ); // 未ログインユーザー用
function mfp_like_post_handler() {
// nonce を検証
check_ajax_referer( 'mfp_like_nonce', 'nonce' );
$post_id = intval( $_POST['post_id'] );
$likes = get_post_meta( $post_id, 'mfp_likes', true );
$likes = $likes ? intval( $likes ) + 1 : 1;
update_post_meta( $post_id, 'mfp_likes', $likes );
// JSON でレスポンスを返す
wp_send_json_success( array( 'likes' => $likes ) );
}
// フロントエンドにAjaxのURLとnonceを渡す
function mfp_enqueue_scripts() {
wp_enqueue_script( 'mfp-script', plugin_dir_url( __FILE__ ) . 'js/script.js', array( 'jquery' ), '1.0.0', true );
wp_localize_script( 'mfp-script', 'mfpData', array(
'ajaxUrl' => admin_url( 'admin-ajax.php' ),
'nonce' => wp_create_nonce( 'mfp_like_nonce' ),
));
}
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_scripts' );
jQuery(function($) {
$('.like-button').on('click', function() {
var postId = $(this).data('post-id');
$.ajax({
url: mfpData.ajaxUrl,
type: 'POST',
data: {
action: 'mfp_like_post', // wp_ajax_{action} の {action} 部分
nonce: mfpData.nonce,
post_id: postId
},
success: function(response) {
if (response.success) {
$('.like-count').text(response.data.likes);
}
}
});
});
});
✏️ 演習:自分のショートコードを作ろう
📝 課題
[profile name="名前" job="職業"]と書くとプロフィールカードを表示するショートコードを作成する- 「お知らせ」カスタム投稿タイプを登録し、管理画面に表示させる
- (発展)いいねボタンをAjaxで実装してみる
✅ 次のステップに進む前のチェックリスト
- アクションフックとフィルターフックの違いを理解した
- add_action() と add_filter() を使えた
- ショートコードを作成して記事で使えた
- カスタム投稿タイプを登録できた
- Ajax の基本的な仕組みを理解した
- 演習問題に取り組んだ