LoginSignup
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

@sarap422(sarap422)

はじめてのWordPressプラグイン開発 - 申請・登録のやり方

Posted at

プラグインの開発が完了したら、次はWordPress.org公式ディレクトリに掲載する準備です。実際に「Category Color Picker」プラグインの申請・承認・公開を通じて学んだ、申請から公開までの完全ガイドをお届けします。

📋 申請前の準備チェックリスト

1. プラグインの完成度チェック

申請前に、以下の点をしっかりと確認しましょう：

  • ✅ 基本機能が完動している
  • ✅ エラーハンドリングが適切
  • ✅ セキュリティ対策済み
  • ✅ WordPress標準に準拠
  • ✅ 独自性がある（既存プラグインとの差別化）

2. 必須ファイルの準備

category-color-picker/
├── category-color-picker.php (メインファイル)
├── category-color-picker.js (必要に応じて)
├── readme.txt (最重要！)
└── languages/ (日本語対応)
    ├── category-color-picker.pot
    ├── category-color-picker-ja.po
    └── category-color-picker-ja.mo

3. readme.txt の作成（最重要！）

readme.txtはプラグインの顔となる最も重要なファイルです。WordPress.org専用の形式で作成する必要があります：

=== Category Color Picker ===
Contributors: sarap422
Tags: category, color, picker, styling, css, customizable, selectors, accessibility
Requires at least: 5.0
Tested up to: 6.8
Requires PHP: 7.4
Stable tag: 1.0.4
License: GPL v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html

Add customizable color pickers to categories with automatic text color adjustment for optimal accessibility.

== Description ==

Category Color Picker allows you to assign colors to WordPress categories and automatically apply them to your website using customizable CSS selectors. Unlike existing category color solutions that are limited to specific themes or require manual text color configuration, this plugin offers complete flexibility and accessibility-first design.

**Key Features:**

* **Customizable CSS Selectors** - Configure any CSS selector to apply category colors
* **Automatic Text Color Adjustment** - Uses relative luminance calculation for optimal contrast
* **Theme Independent** - Works with any WordPress theme
* **Plugin Independent** - No dependency on specific plugins or frameworks
* **Developer Friendly** - Easy to integrate with existing themes and plugins
* **Accessibility First** - WCAG compliant color contrast automatically maintained
* **Maintenance Free** - No need to manually set text colors

**Perfect for:**
* Developers who need flexible category color integration
* Designers who want accessibility-compliant color schemes
* Site owners who want maintenance-free category styling

== Installation ==

1. Upload the plugin files to `/wp-content/plugins/category-color-picker/`
2. Activate the plugin through the 'Plugins' menu in WordPress
3. Go to Posts → Categories to assign colors to your categories
4. Configure CSS selectors in Settings → Category Color (optional)

== Frequently Asked Questions ==

= How does automatic text color work? =
The plugin calculates the relative luminance of your selected background color and automatically chooses white or dark text for optimal readability.

= Can I customize which elements get colored? =
Yes! Go to Settings → Category Color to configure custom CSS selectors. Use {$slug} as a placeholder for the category slug.

= Does it work with my theme? =
Yes, the plugin is theme-independent and uses CSS selectors to target elements, making it compatible with any theme.

== Screenshots ==

1. Category color picker in category edit screen
2. Category list showing assigned colors
3. Settings page for customizing CSS selectors
4. Frontend display with automatically adjusted text colors

== Changelog ==

= 1.0.4 =
* Bug fixes and stability improvements
* Enhanced CSS selector handling
* Improved error handling

= 1.0.3 =
* Initial release
* Color picker integration
* Automatic text color adjustment
* Customizable CSS selectors

🚀 申請手順

1. WordPress.orgアカウント作成

  1. WordPress.orgでアカウントを作成
  2. プロフィールを充実させる
  3. 「Account & Security」でSVNパスワードを設定

2. プラグイン申請

  1. Plugin Developer Handbookを一読
  2. プラグイン申請ページにアクセス
  3. 以下の情報を入力：
    • Plugin Name: Category Color Picker
    • Plugin Description: Add customizable color pickers to categories with automatic text color adjustment for optimal accessibility.
    • Plugin URL: （空欄でもOK）

3. 審査待ち

  • 通常1-2週間で審査結果がメールで届く
  • 承認されればSVNリポジトリのアクセス権が付与される

⚠️ よくある却下理由と対策

セキュリティ関連

WordPress.orgが最も重視するのはセキュリティです。以下の3つは特に注意：

  1. エスケープされていない出力
// 悪い例
echo $user_input;

// 良い例
echo esc_html($user_input);
  1. サニタイズされていない入力
// 悪い例  
$value = $_POST['field'];

// 良い例
$value = sanitize_text_field(wp_unslash($_POST['field']));
  1. Nonce検証なし
// 悪い例
if (isset($_POST['submit'])) {
    // 処理
}

// 良い例
if (isset($_POST['submit']) && wp_verify_nonce($_POST['_wpnonce'], 'action_name')) {
    // 処理
}

その他の却下理由

  • 既存プラグインとの機能重複
  • コード品質が低い
  • readme.txtの不備
  • 独自性の不足

🔧 プラグインチェックツールの活用

申請前にPlugin Checkを使用して、問題がないか確認しましょう：

# WordPress管理画面から
プラグイン → 新規追加 → "Plugin Check" で検索・インストール
ツール → Plugin Check → あなたのプラグインを選択して検査

よくあるエラーと修正方法：

  • NonceVerification: Nonce検証の追加
  • ValidatedSanitizedInput: 入力値のサニタイズ
  • EscapedOutput: 出力値のエスケープ

✅ 承認後の作業

1. SVNアクセス準備

承認メールが届いたら（通常24時間以内）：

# macOSの場合
brew install svn

# Ubuntuの場合
sudo apt-get install subversion

📁 SVNの作業ディレクトリについて詳しく解説

SVN（Subversion）は、WordPressプラグインディレクトリで使用されているバージョン管理システムです。初心者には理解しにくい概念なので、詳しく説明します。

SVNリポジトリの基本構造

category-color-picker/
├── trunk/     # 開発中の最新版（メインブランチ）
├── tags/      # リリース版（1.0.0、1.1.0など）
├── assets/    # スクリーンショット・バナー画像
└── branches/  # ブランチ（通常は使用しない）

trunk/フォルダの役割

  • 開発中の最新コードを格納
  • WordPress.orgが新機能やバグ修正をチェックする場所
  • ユーザーには直接配布されない

tags/フォルダの役割

  • リリース版のスナップショットを格納
  • tags/1.0.0/、tags/1.0.1/のように、バージョンごとにフォルダが作成される
  • ユーザーが実際にダウンロードするのはこのファイル

assets/フォルダの役割

  • プラグインページの画像ファイルを格納
  • screenshot-1.png、banner-1544x500.pngなど

2. 初回アップロード手順

# 1. リポジトリをチェックアウト（作業ディレクトリを作成）
svn co https://plugins.svn.wordpress.org/category-color-picker

# 2. フォルダに移動
cd category-color-picker

# 3. プラグインファイルをtrunkにコピー
cp /path/to/your/plugin/* trunk/

# 4. ファイルをSVNに追加
svn add trunk/*

# 5. 初回コミット
svn commit -m "Initial plugin submission v1.0.3"

# 6. 最初のリリースタグを作成
svn copy trunk tags/1.0.3
svn commit -m "Tagging version 1.0.3"

作業ディレクトリの重要なポイント

⚠️ よくある混乱ポイント

多くの初心者が混乱するのは、2つの異なるフォルダを扱うことです：

  1. 開発用フォルダ: 自分のPCにある元のプラグインファイル
  2. SVN作業ディレクトリ: svn coでチェックアウトしたフォルダ
# 開発用フォルダ（例）
/Users/yourname/Documents/my-plugins/category-color-picker/

# SVN作業ディレクトリ（svn coで作成される）
/Users/yourname/category-color-picker/

正しいワークフロー

# 1. SVNの作業ディレクトリに移動
cd ~/category-color-picker

# 2. 開発用ファイルをSVNのtrunkにコピー
cp /path/to/development/files/* trunk/

# 3. SVNで作業（add, commit, tag）
svn add trunk/*
svn commit -m "Update message"

🔄 バージョンアップのやり方（詳細解説）

プラグインを更新する際の手順を、実際のコマンド例とともに詳しく解説します。

バージョンアップの全体的な流れ

  1. 開発環境でコード修正
  2. バージョン番号の更新
  3. SVNにデプロイ
  4. 新しいバージョンタグの作成

手順1: 開発環境での準備

// category-color-picker.php のヘッダーを更新
/**
 * Plugin Name: Category Color Picker
 * Version: 1.0.4  // ← バージョンを更新
 */

// readme.txt のStable tagを更新
Stable tag: 1.0.4  // ← バージョンを更新

== Changelog ==
= 1.0.4 =
* Bug fixes and improvements
* Enhanced error handling

手順2: SVNでのデプロイ

# 1. SVN作業ディレクトリに移動
cd ~/category-color-picker

# 2. SVNの最新状態を取得
svn update

# 3. 修正したファイルをtrunkにコピー
cp /path/to/updated/files/* trunk/

# 4. 変更状況を確認
svn status
# M    trunk/category-color-picker.php  ← Modified（変更）
# M    trunk/readme.txt

SVN statusの読み方

svn status

表示される記号の意味：

  • M: Modified（変更されたファイル）
  • A: Added（新しく追加されたファイル）
  • D: Deleted（削除されたファイル）
  • ?: Unversioned（SVNで管理されていないファイル）

手順3: 変更をコミット

# 5. 新しいファイルがあれば追加
svn add trunk/新しいファイル名  # 必要に応じて

# 6. 変更をコミット
svn commit -m "Update to version 1.0.4 - Bug fixes and improvements"

手順4: バージョンタグの作成

# 7. 新しいバージョンのタグを作成
svn copy trunk tags/1.0.4
svn commit -m "Tagging version 1.0.4"

バージョンアップ時の注意点

✅ 事前チェックリスト

  • プラグインヘッダーのVersionを更新
  • readme.txtのStable tagを更新
  • Changelogに変更内容を記載
  • ローカル環境でテスト完了

⚠️ よくあるミス

  1. バージョン番号の不整合
// プラグインファイル: 1.0.4
// readme.txt: 1.0.3  ← 更新し忘れ
  1. 作業ディレクトリの間違い
# 間違い：開発フォルダでSVNコマンド実行
cd /path/to/development/folder
svn commit  # エラーになる

# 正解：SVN作業ディレクトリで実行
cd ~/category-color-picker
svn commit

デプロイ後のタイムライン

  • 即座: SVNリポジトリに反映
  • 数分: WordPress.orgのプラグインページに新バージョン表示
  • 数時間: ユーザーの管理画面でアップデート通知表示
  • 最大72時間: 検索結果に新バージョンが反映

トラブルシューティング

よくあるエラー1: Nonce検証エラー

svn commit
# SVNパスワードが間違っている場合

解決方法：

  1. WordPress.orgプロフィールでSVNパスワードを再設定
  2. 正しいユーザー名（大文字小文字区別）を使用

よくあるエラー2: ファイルが見つからない

cp /wrong/path/* trunk/
# No such file or directory

解決方法：

# ファイルの場所を確認
ls -la /correct/path/
# 正しいパスでコピー

📊 公開後のタイムライン

💡 成功のコツ

差別化を明確にする

既存プラグインとの違いをreadme.txtで明確にアピール：

  • 独自機能の強調（Category Color Pickerの場合：カスタマイズ可能なCSSセレクタ）
  • 技術的優位性の説明（相対輝度による自動テキスト色調整）
  • 対象ユーザーの明確化（開発者向け、テーマ非依存）

品質を重視する

  • 徹底したテスト
  • エラーハンドリング
  • ユーザビリティ
  • パフォーマンス

コミュニティとの関わり

🎯 まとめ

WordPressプラグインの申請から公開までは複雑ですが、しっかりと準備すれば必ず成功できます。特に重要なのは：

  1. セキュリティ対策の徹底
  2. 独自性の明確化
  3. readme.txtの充実
  4. SVNの正しい理解と使用方法
  5. 継続的なメンテナンス

実際の成功例

Category Color Pickerプラグインは、以下のポイントで審査を通過しました：

  • 明確な差別化: 既存プラグインにない柔軟性
  • アクセシビリティ重視: WCAG準拠の自動色調整
  • 開発者フレンドリー: カスタマイズ可能なセレクタ

最初は難しく感じるかもしれませんが、一歩ずつ確実に進めていけば、プラグインを公開できます。

0
0
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
0
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?