生成AIを使った、WordPressプラグインの開発方法

WordPress用のPDFプレビュープラグインを作成しました。このプラグインの主な機能と使用方法をご説明します。

主な機能

1. PDFプレビュー表示: PDFの最初のページを画像として表示
2. 内容表示ボタン: クリックでモーダルウィンドウでPDF全体を表示
3. ダウンロードボタン: PDFファイルを直接ダウンロード
4. レスポンシブデザイン: 様々な画面サイズに対応

使用方法

ショートコードで表示

[url="https://example.com/sample.pdf" title="サンプルPDF" width="300" height="400"]

パラメータ

1. url (必須): PDFファイルのURL
2. title (オプション): 表示するタイトル（デフォルト: “PDF文書”）
3. width (オプション): プレビュー画像の幅（デフォルト: 300px）
4. height (オプション): プレビュー画像の高さ（デフォルト: 400px）

使用例

[pdf_preview url="/wp-content/uploads/2024/company-profile.pdf" title="会社案内" width="250" height="350"]

技術的特徴

1. PDF.js: Mozilla開発のPDFレンダリングライブラリを使用
2. Ajax対応: 非同期でPDF情報を取得
3. セキュリティ: WordPressのnonce機能でセキュリティを確保
4. モーダル表示: ユーザーフレンドリーなPDF閲覧体験

必要な環境

• WordPress 4.0以上
• モダンブラウザ（PDF.js対応）
• インターネット接続（PDF.js CDN使用）

このプラグインをそのまま使用するか、必要に応じてカスタマイズしてください。追加機能や修正が必要でしたらお知らせください。

• １ファイルにPHP,JS、CSSが含まれるソースコードに違和感（保守性懸念）
  • プラグインファイル構成案をプロンプトに追加
• PDF.jsはクライアント（ブラウザ側）にPDFファイルを全て読み込むため、ファイルサイズの大きいPDFを並べて表示する場合など性能懸念あり
  • JavaScriptを使用せず、PHPとCSSのみで構成するようプロンプトを修正
• URL指定が面倒
  • メディアライブラリ中のファイル名で指定等、ショートコード仕様をプロンプトに追加

WordPress用のPDFプレビュープラグインを作成いたしました。以下の4つのファイルで構成されています：

ファイル構成

1. pdf-preview-plugin.php – メインファイル
2. pdf-preview-style.css – スタイルファイル
3. README.md – プラグインの説明書

主な機能

使用方法

基本的な使用法

[pdf_preview filename="document.pdf"]

完全な設定例

[pdf_preview filename="manual.pdf" title="ユーザーマニュアル" description="製品の使い方を説明したガイドです。"]

特徴

• JavaScript最小限: モーダル機能のみに限定
• 自動アイコン生成: PDFアイコンを自動生成
• セキュリティ対応: 直接アクセス防止、入力値検証
• WordPressネイティブ: 標準のメディアライブラリ機能を活用

インストール手順

1. pdf-preview-pluginフォルダをwp-content/plugins/にアップロード
2. WordPress管理画面でプラグインを有効化
3. メディアライブラリにPDFファイルをアップロード
4. 投稿・固定ページでショートコードを使用

このプラグインは要件を満たしつつ、WordPressの標準に準拠した実装となっています。

• 最小限のJavaScriptは残るのは致し方ないとしてもPDFをモーダル表示に<iframe>を利用しておりモバイルでは使いづらい。
  • 「内容表示」ボタン押下時は、別タブで表示させる様にプロンプトに追加
• 下記の特徴は継続させるためにプロプトに追加
  • 自動アイコン生成: PDFアイコンを自動生成
  • WordPressネイティブ: 標準のメディアライブラリ機能を活用
• 生成されたコードがクラスベース
  • 、関数ベースでの実装とするようプロンプトを調整

WordPress用のPDFプレビュープラグインを作成いたしました。以下が各ファイルの内容です：

作成したファイル

1. pdf-preview-plugin.php – メインプラグインファイル
2. pdf-preview-style.css – スタイルシート
3. README.md – 使用方法・技術仕様

主な機能

使用方法

基本的な使用法

[pdf_preview filename="sample.pdf"]

完全な設定例

[pdf_preview filename="sample.pdf" title="重要な文書" description="この文書には重要な情報が含まれています。"]

インストール手順

1. pdf-preview-pluginフォルダを作成
2. 上記3つのファイルを配置
3. /wp-content/plugins/pdf-preview-plugin/にアップロード
4. WordPress管理画面でプラグインを有効化

技術的な特徴

• WordPress標準関数を活用: get_posts(), wp_get_attachment_url(), wp_enqueue_style()等を使用
• クラス化なし: 要件に従い関数ベースで実装
• 自動画像生成: プラグインアクティベーション時にPDFアイコンを自動生成
• ヒアドキュメント使用: 複数行HTMLの出力に使用

プラグインをアクティベート後、メディアライブラリにPDFファイルをアップロードしてショートコードを使用できます。

ほぼ思い通りに機能が実装されたので、スリム化（余剰機能の削減）を検討

• Imagick は直接利用しない
• 画面を構成する一部品
  • レスポンシブ対応は不要

WordPressプラグインを作成します。要件に従って、クラス化せずに関数ベースで実装し、WordPressの標準機能を最大限活用します。

:

WordPressプラグインが完成しました。要件に従って以下の機能を実装しています：

実装内容

主要機能

• PDFプレビュー表示: WordPressの標準機能でPDFの1ページ目サムネイルを表示
• ショートコード対応: [pdf_preview filename="example.pdf"] で簡単設置
• ボタン機能: 「内容表示」（別タブでPDF表示）と「ダウンロード」ボタン
• 自動アイコン生成: プラグイン有効化時にGDライブラリでPDFアイコンを作成

技術的特徴

• クラス化なし: 要件通り関数ベースで実装
• WordPress標準機能活用: wp_get_attachment_image(), wp_get_attachment_url()等を使用
• セキュリティ対策: XSS防止、直接アクセス防止、入力値検証を実装
• ヒアドキュメント: 長いHTML出力で使用

ファイル構成

pdf-preview-plugin/
├── pdf-preview-plugin.php   # メイン機能（374行）
├── pdf-preview-style.css    # スタイリング
├── images/                  # プラグイン有効化時に自動作成
│      └── pdf-icon.png     # GDライブラリで自動生成
└── README.md                # 詳細な使用方法とトラブルシューティング

使用方法

1. インストール: pdf-preview-pluginフォルダを/wp-content/plugins/にアップロード
2. 有効化: WordPress管理画面でプラグインを有効化
3. PDFアップロード: メディアライブラリにPDFファイルをアップロード
4. ショートコード使用: 投稿・固定ページで以下を記述

[pdf_preview filename="manual.pdf"]
[pdf_preview filename="catalog.pdf" title="製品カタログ" description="最新の製品情報をご覧ください"]

注意事項

• PDFサムネイル: サーバーにImageMagickまたはGhostscriptが必要
• ファイル検索: ファイル名でメディアライブラリから検索（大文字小文字区別なし）
• エラーハンドリング: ファイルが見つからない場合は適切なエラーメッセージを表示

プラグインは即座に使用可能で、WordPressの標準機能を最大限活用した堅実な実装となっています。