STEP 5
フロントエンド機能
サイト訪問者が見る画面(フロントエンド)にプラグインの機能を表示する方法を学びます。CSS/JavaScriptの読み込み、ウィジェット作成、データベーステーブルの操作まで解説します。
🎨 CSS/JavaScriptの読み込み
プラグイン独自のスタイルやスクリプトは、wp_enqueue_style() と wp_enqueue_script() を使って読み込みます。直接 <link> や <script> タグを出力するのは推奨されません。
function mfp_enqueue_assets() {
// CSSの読み込み
wp_enqueue_style(
'mfp-style', // ハンドル名(一意のID)
plugin_dir_url( __FILE__ ) . 'css/style.css', // ファイルのURL
array(), // 依存するスタイル
'1.0.0' // バージョン番号
);
// JavaScriptの読み込み
wp_enqueue_script(
'mfp-script', // ハンドル名
plugin_dir_url( __FILE__ ) . 'js/script.js', // ファイルのURL
array( 'jquery' ), // 依存するスクリプト
'1.0.0', // バージョン番号
true // フッターに出力(true推奨)
);
}
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_assets' );
特定のページだけで読み込む
全ページで読み込むと表示速度が低下します。必要なページだけで読み込みましょう。
function mfp_enqueue_assets() {
// 投稿ページのみ読み込む
if ( is_single() ) {
wp_enqueue_style( 'mfp-style', plugin_dir_url( __FILE__ ) . 'css/style.css' );
}
// 特定のカスタム投稿タイプのみ読み込む
if ( is_singular( 'mfp_news' ) ) {
wp_enqueue_style( 'mfp-news-style', plugin_dir_url( __FILE__ ) . 'css/news.css' );
}
}
add_action( 'wp_enqueue_scripts', 'mfp_enqueue_assets' );
💡 plugin_dir_url() の使い方
plugin_dir_url( __FILE__ ) は現在のファイルがあるプラグインフォルダのURLを返します。ファイルのパスを書き間違えるミスを防ぐために必ず使いましょう。
🔲 ウィジェットの作成
ウィジェットはサイドバーやフッターに配置できる小さな機能ブロックです。WP_Widget クラスを継承して作成します。
// WP_Widget クラスを継承してウィジェットを作成
class MFP_Hello_Widget extends WP_Widget {
// コンストラクタ(ウィジェットの基本情報を設定)
public function __construct() {
parent::__construct(
'mfp_hello_widget', // ウィジェットID
'ご挨拶ウィジェット', // ウィジェット名
array( 'description' => 'サイドバーにご挨拶を表示します。' )
);
}
// フロントエンドへの出力
public function widget( $args, $instance ) {
echo $args['before_widget'];
echo $args['before_title'] . esc_html( $instance['title'] ) . $args['after_title'];
echo '<p>' . esc_html( $instance['message'] ) . '</p>';
echo $args['after_widget'];
}
// 管理画面のフォーム
public function form( $instance ) {
$title = isset( $instance['title'] ) ? $instance['title'] : 'ご挨拶';
$message = isset( $instance['message'] ) ? $instance['message'] : '';
echo '<p><label>タイトル:
<input class="widefat" name="' . $this->get_field_name('title') . '"
value="' . esc_attr($title) . '"></label></p>';
echo '<p><label>メッセージ:
<textarea class="widefat" name="' . $this->get_field_name('message') . '">'
. esc_textarea($message) . '</textarea></label></p>';
}
// 保存時の処理(サニタイズ)
public function update( $new_instance, $old_instance ) {
$instance['title'] = sanitize_text_field( $new_instance['title'] );
$instance['message'] = sanitize_textarea_field( $new_instance['message'] );
return $instance;
}
}
// ウィジェットを登録
function mfp_register_widgets() {
register_widget( 'MFP_Hello_Widget' );
}
add_action( 'widgets_init', 'mfp_register_widgets' );
👥 ユーザー権限の管理
WordPress のユーザーにはそれぞれ「役割(ロール)」があり、できる操作が決まっています。プラグインでは、処理の前に必ず権限を確認しましょう。
主なユーザー役割と権限
| 役割 | 主な権限 | capability例 |
|---|---|---|
| 管理者(Administrator) | すべての操作が可能 | manage_options |
| 編集者(Editor) | 全ユーザーの投稿を編集・公開 | edit_others_posts |
| 投稿者(Author) | 自分の投稿を公開・管理 | publish_posts |
| 寄稿者(Contributor) | 自分の投稿を作成・編集(公開不可) | edit_posts |
| 購読者(Subscriber) | プロフィールの閲覧・編集のみ | read |
// ログインチェック
if ( is_user_logged_in() ) {
// ログイン中のみ表示
}
// 権限チェック
if ( current_user_can( 'manage_options' ) ) {
// 管理者のみ実行できる処理
}
// 現在のユーザー情報を取得
$current_user = wp_get_current_user();
$user_id = $current_user->ID;
$user_name = $current_user->display_name;
// ユーザーが所有しているかチェック(投稿を編集する前など)
$post_author_id = get_post_field( 'post_author', $post_id );
if ( get_current_user_id() !== intval( $post_author_id ) ) {
wp_die( 'この投稿を編集する権限がありません。' );
}
🗄️ データベーステーブルの作成
WordPress 標準のテーブル(wp_posts、wp_options など)では管理しきれない複雑なデータには、カスタムテーブルを作成します。有効化フックと dbDelta() を使います。
// テーブルを作成する関数
function mfp_create_table() {
global $wpdb;
// テーブル名にプレフィックスを付ける
$table_name = $wpdb->prefix . 'mfp_access_log';
// テーブルが存在しない場合のみ作成
if ( $wpdb->get_var( "SHOW TABLES LIKE '$table_name'" ) === $table_name ) {
return;
}
$charset_collate = $wpdb->get_charset_collate();
// CREATE TABLE 文(カラム定義に注意:2スペースのインデント必須)
$sql = "CREATE TABLE $table_name (
id bigint(20) NOT NULL AUTO_INCREMENT,
post_id bigint(20) NOT NULL,
user_ip varchar(100) NOT NULL,
accessed_at datetime NOT NULL,
PRIMARY KEY (id),
KEY post_id (post_id)
) $charset_collate;";
// dbDelta() でテーブルを作成・更新
require_once( ABSPATH . 'wp-admin/includes/upgrade.php' );
dbDelta( $sql );
// テーブルバージョンを記録
update_option( 'mfp_db_version', '1.0' );
}
// プラグイン有効化時にテーブルを作成
register_activation_hook( __FILE__, 'mfp_create_table' );
// データの挿入
function mfp_log_access( $post_id ) {
global $wpdb;
$wpdb->insert(
$wpdb->prefix . 'mfp_access_log',
array(
'post_id' => intval( $post_id ),
'user_ip' => sanitize_text_field( $_SERVER['REMOTE_ADDR'] ),
'accessed_at' => current_time( 'mysql' ),
),
array( '%d', '%s', '%s' ) // データ型の指定
);
}
⚠️ dbDelta() を使う際の注意点
- 各カラム定義の前に2スペースのインデントが必要
PRIMARY KEYの後ろに2スペースが必要- 文字コードは必ず
$wpdb->get_charset_collate()で取得する
✏️ 演習:サイドバーウィジェットを作ろう
📝 課題
- 管理画面で「表示するカテゴリー数」を設定できるウィジェットを作成する
- フロントエンドでそのカテゴリー一覧をリスト表示する
- ウィジェット用のCSSを外部ファイルで読み込む(特定ページのみ)
✅ 次のステップに進む前のチェックリスト
- wp_enqueue_style / wp_enqueue_script を使えた
- 特定ページのみアセットを読み込む条件分岐ができた
- WP_Widget クラスを継承したウィジェットを作成できた
- current_user_can() で権限チェックができた
- dbDelta() でカスタムテーブルを作成できた
- $wpdb->insert() でデータを挿入できた
- 演習問題に取り組んだ