【初心者向け】WordPressでPDFやWordを埋め込む！Document Embedderプラグイン徹底解説

WordPress
2025.06.01
この記事は約13分で読めます。
  1. 【初心者向け】WordPressでPDFやWordを埋め込む！Document Embedderプラグイン徹底解説のPodcast
  2. はじめに
  3.  Document Embedderプラグインって何？
    1. 導入するとこんなに便利！
    2. どんなドキュメントが埋め込めるの？
  4.  Document Embedderプラグインをインストールしてみよう！
    1. 準備するもの
    2. ステップ1: WordPress管理画面からプラグインをインストール
    3. ステップ2: プラグインを有効化
  5. ドキュメントをページに埋め込んでみよう！
    1. 方法1: Gutenberg（グーテンベルク）ブロックエディタで埋め込む（推奨）
      1. ステップ1: 埋め込みたい投稿や固定ページを開く
      2. ステップ2: Document Embedderブロックを追加
      3. ステップ3: ドキュメントを選択・アップロード
      4. ステップ4: 表示設定を調整
      5. ステップ5: プレビューと公開
    2. 方法2: 管理画面からショートコードを生成して埋め込む（旧エディタ・上級者向け）
  6. Document Embedderプラグインの活用事例
    1. 事例1: 製品カタログや会社案内をウェブサイトで公開する
    2. 事例2: オンラインセミナー資料や講義ノートを共有する
    3. 事例3: 社内規定や業務マニュアルをイントラネットで共有する
  7. 知っておきたい！よくある質問と注意点
    1. Q1: Document Embedderプラグインは無料で使えますか？
    2. Q2: 埋め込めるファイルの最大サイズは？
    3. Q3: スマートフォンやタブレットでも正しく表示されますか？
    4. Q4: 他のWordPressプラグインやテーマと問題が起きることはありますか？
    5. Q5: 埋め込んだドキュメントのセキュリティは大丈夫ですか？
  8. 【発展】サイト制作からDXの内製化へ
  9. まとめと次のステップ
    1. さらなる活用のヒント
  10. 参考情報

【初心者向け】WordPressでPDFやWordを埋め込む！Document Embedderプラグイン徹底解説のPodcast

下記のPodcastは、Geminiで作成しました。

はじめに

ウェブサイトに資料を載せたいけれど、「ダウンロードさせるのは手間だな…」「もっと手軽に見てもらいたい！」と感じたことはありませんか？そんな時に役立つのが、WordPressの「Document Embedder」プラグインです。

このプラグインを使えば、訪問者はあなたのウェブサイトのページを離れることなく、PDFやWord、Excelなどのドキュメントを直接閲覧できるようになります。今回は、その便利な機能と使い方を、初心者の方でも安心して使えるように丁寧に解説していきます。

 Document Embedderプラグインって何？

「Document Embedder」は、あなたのWordPressサイトに、さまざまな種類のドキュメントファイルを「埋め込む）」ことができるプラグインです。

このプラグインのすごいところは、Googleが提供する「Google Drive file viewer API」という技術を使っている点です。これにより、特別な設定や変換作業なしに、様々なファイル形式に対応できるんです。

導入するとこんなに便利！

  • 訪問者の利便性アップ: ユーザーはドキュメントをダウンロードしたり、専用のソフトで開いたりする手間なく、あなたのウェブサイト上でスムーズに情報を閲覧できます。

  • コンテンツが魅力的になる: 報告書、製品カタログ、プレゼンテーション資料などを視覚的にページに組み込むことで、文字だけでは伝わりにくい情報を効果的に伝えられます。

  • 情報共有が楽になる: 最新の情報をウェブサイト経由で素早く簡単に共有できます。ファイルの更新も、WordPressの「メディアライブラリ」でファイルを差し替えるだけでOKです。

どんなドキュメントが埋め込めるの？

Document Embedderプラグインは、16種類以上の非常に多くのファイル形式に対応しています。

  • PDF: .pdf

  • Microsoft Word: .doc, .docx

  • Microsoft Excel: .xls, .xlsx

  • Microsoft PowerPoint: .ppt, .pptx

  • Apple Pages: .pages

  • Adobe Illustrator: .ai (PDF互換部分がプレビューされます)

  • Adobe Photoshop: .psd (プレビュー画像が表示されます)

  • 画像ファイル: .jpeg, .png, .gif, .tiff, .bmp

  • 動画ファイル: WebM, .MPEG4, .3GPP, .MOV, .AVI, .MPEGPS, .WMV, .FLV

  • テキストファイル: .txt

  • マークアップ/コード: .CSS, .HTML, .PHP, .C, .CPP, .H, .HPP, .JS

  • Tagged Image File Format: .tiff

  • Autodesk AutoCAD: .dxf

  • Scalable Vector Graphics: .svg

  • PostScript: .eps, .ps

  • TrueType: .ttf

  • XML Paper Specification: .xps

  • アーカイブファイル: .zip, .rar

注意点: .ai や .psd のような専門的なファイルは、元のソフトで開いたときのような完全な機能は使えず、あくまで「プレビュー」としての表示になります。PDFや主要なオフィスドキュメント（Word, Excel, PowerPoint）が最もきれいに表示されます。

 Document Embedderプラグインをインストールしてみよう！

WordPressサイトにDocument Embedderプラグインを導入する手順はとても簡単です。

準備するもの

  • 正常に動作しているWordPressサイト

  • 埋め込みたいサンプルファイル（PDFやWordなど）

  • 念のため、WordPressサイトの「バックアップ」を取っておくことをお勧めします。

ステップ1: WordPress管理画面からプラグインをインストール

  1. WordPressの管理画面（「ダッシュボード」）にログインします。

  2. 左側のメニューから「プラグイン」にマウスカーソルを合わせ、「新規追加」をクリックします。

  3. プラグイン追加画面の右上の検索ボックスに「Document Embedder」と入力します。

  4. 検索結果の中から「Document Embedder - Document Embedder Plugin」（作者: bPlugins LLC）というプラグインを見つけ、「今すぐインストール」ボタンをクリックします。

ステップ2: プラグインを有効化

  1. インストールが完了すると、「今すぐインストール」ボタンが「有効化」ボタンに変わります。

  2. 「有効化」ボタンをクリックします。

  3. 画面上部に「プラグインを有効化しました。」というメッセージが表示されれば、インストールと有効化は完了です。

これで、Document Embedderプラグインを使う準備が整いました！

ドキュメントをページに埋め込んでみよう！

いよいよ、実際にドキュメントをWordPressのページに埋め込んでみましょう。Document Embedderプラグインは、主に「Gutenberg（グーテンベルク）ブロックエディタ」を使う方法と、管理画面から「ショートコード」を生成して埋め込む方法の2種類があります。

方法1: Gutenberg（グーテンベルク）ブロックエディタで埋め込む（推奨）

この方法が最も直感的で簡単です。

ステップ1: 埋め込みたい投稿や固定ページを開く

  1. WordPressの管理画面にログインし、ドキュメントを埋め込みたい「投稿」または「固定ページ」の編集画面を開きます。（例: 「投稿」>「新規追加」または既存の投稿を選択）

ステップ2: Document Embedderブロックを追加

  1. WordPressの標準エディタである「Gutenberg（グーテンベルク）エディタ」内で、新しいブロックを追加するための「+」アイコンをクリックします。

  2. 検索窓に「Document Embedder」と入力し、表示された「Document Embedder」ブロックを選択して記事内に挿入します。

ステップ3: ドキュメントを選択・アップロード

  1. 挿入されたDocument Embedderブロック内に表示される「アップロード」ボタン、または「メディアライブラリ」ボタンをクリックします。

  2. 埋め込みたいファイルをメディアライブラリから選択するか、あなたのコンピューターから新規にアップロードします。

ステップ4: 表示設定を調整

  1. ファイルをアップロードまたは選択すると、エディタ内にドキュメントのプレビュー（または埋め込み枠）が表示されます。

  2. 画面右側のブロック設定パネル（サイドバー）で、必要に応じて以下のオプションを設定します。

    • 幅（Width）: 埋め込み領域の横幅を指定します。100%に設定すると、ページの幅いっぱいに表示され、「レスポンシブデザイン」に対応しやすくなります。

    • 高さ（Height）: 埋め込み領域の縦幅を指定します。700pxなど、コンテンツ全体が見える適切な値を設定しましょう。

    • ファイル名を表示（Show Filename）: ドキュメントの上部にファイル名がはっきりと表示されるように切り替えます。これにより、何のドキュメントか一目で分かります。

    • ダウンロードボタンを表示（Show Download Button）: 訪問者がドキュメントをダウンロードするためのボタンを、ドキュメントの上部に便利に配置します。これにより、PDFなどを素早くダウンロードできるようになります。

ステップ5: プレビューと公開

  1. すべての設定が終わったら、画面右上の「プレビュー」ボタンをクリックし、「新しいタブでプレビュー」を選択して実際の表示を確認します。

  2. 問題がなければ、「公開」または「更新」ボタンをクリックして変更を保存します。

これで、あなたのウェブサイトにドキュメントが埋め込まれました！

方法2: 管理画面からショートコードを生成して埋め込む（旧エディタ・上級者向け）

WordPressの旧エディタ（クラシックエディタ）を使用している場合や、ショートコードを直接記述したい場合は、この方法を使います。

  1. プラグインをインストールして有効化すると、WordPress管理画面の左側メニューに「Document Embedder」という新しいメニューが表示されます。

  2. 「Document Embedder」>「Add New Doc」をクリックします。

  3. 表示された画面で、埋め込みたいドキュメントの設定を行います。

  4. 設定を保存すると、対応する「ショートコード」が生成されます。このショートコードをコピーします。

  5. ドキュメントを埋め込みたい投稿や固定ページの編集画面を開き、テキストエディタモード（またはクラシックエディタ）でコピーしたショートコードを貼り付けます。

  6. 記事を「公開」または「更新」して変更を保存します。

私が使用しているエディターは、「Advanced Editor Tools」のクラシックエディターで利用しています。そこで、この「方法2」の方法で、Skyworkで作成したこの文書のスライドを「ショートコード」で以下に埋め込みます。

PDF Loading...

Document Embedderプラグインの活用事例

Document Embedderプラグインは、さまざまなシーンであなたのウェブサイトの価値を高めることができます。

事例1: 製品カタログや会社案内をウェブサイトで公開する

  • 課題: 最新の製品情報や会社情報を手軽に提供したいが、ダウンロードさせるだけでは見てもらいにくい。

  • 活用例: PDF形式の製品カタログや会社案内を、製品ページや会社情報ページに直接埋め込みます。訪問者はページを離れることなく、資料を閲覧できます。資料が更新された場合も、メディアライブラリでファイルを差し替えるだけでOKです。

事例2: オンラインセミナー資料や講義ノートを共有する

  • 課題: セミナー参加者やオンラインコースの受講者に、配布資料や講義ノートをウェブサイト上で簡単に閲覧・共有したい。

  • 活用例: PowerPointで作成したプレゼンテーション資料やPDF形式の講義ノートを、セミナーのアーカイブページや会員専用ページに埋め込みます。学習者はブラウザを離れることなく、スライドをめくりながら資料を確認できます。

事例3: 社内規定や業務マニュアルをイントラネットで共有する

  • 課題: 社員が社内規定や業務マニュアルに、いつでも社内ネットワークから簡単にアクセスできるようにしたい。

  • 活用例: Word文書の社内規定やExcelファイルの各種テンプレートなどを、社内ポータルサイト（イントラネット上に構築されたWordPressサイト）に埋め込みます。適切なアクセス制限と組み合わせることで、必要な社員だけがドキュメントを閲覧できます。

知っておきたい！よくある質問と注意点

Q1: Document Embedderプラグインは無料で使えますか？

はい、基本機能は無料で利用できます。これにより、多くの一般的なドキュメント埋め込みニーズに対応できます。

より高度な機能は、有料の「Pro版」で提供されています。Pro版では、以下のような機能が追加されます。

  • ポップアウト無効化: Googleビューアが表示する「別ウィンドウで開く」ボタン（ポップアウト）を非表示にし、サイトからの離脱を防ぎます。

  • Lightbox（ライトボックス）表示: ドキュメントへのリンクやサムネイル画像をクリックした際に、現在のページの上にオーバーレイする形でドキュメントを大きく表示し、よりスムーズなユーザー体験を提供します。

  • ローディングインジケーター表示: ドキュメントが完全に読み込まれるまでの間、読み込み中であることを示すアニメーション（ローディングインジケーター）を表示し、ユーザーの待ち時間のストレスを軽減します。

  • Google Drive API連携: WordPressのメディアライブラリを経由せず、ご自身のGoogle Driveアカウントに保存されているファイルを直接指定して埋め込むことができます。

  • Dropbox API連携: 同様に、Dropboxアカウントに保存されているファイルを直接指定して埋め込むことができます。

Q2: 埋め込めるファイルの最大サイズは？

一般的に、20MBまでのファイルに対応しています。これより大きなファイルは、表示に時間がかかったり、うまく表示されなかったりする可能性があります。ウェブでの利用を考慮し、可能な限りファイルを圧縮して軽くすることをお勧めします。

Q3: スマートフォンやタブレットでも正しく表示されますか？

はい、Document Embedderプラグインはレスポンシブデザインに対応しています。画面サイズに合わせて表示が調整されるように設計されていますが、ドキュメント自体のレイアウトによっては、小さな画面での見やすさに限界がある場合もあります。実際に様々なデバイスで表示を確認することが重要です。

Q4: 他のWordPressプラグインやテーマと問題が起きることはありますか？

ほとんどの標準的なWordPressプラグインやテーマとは問題なく動作するように設計されています。しかし、ごく稀に、他のプラグインやテーマとの間で「干渉（コンフリクト）」が起こり、表示が崩れたり、機能がうまく動かなくなったりする可能性はゼロではありません。もし問題が発生した場合は、一度他のプラグインを一時的に無効にしたり、WordPressのデフォルトテーマに切り替えたりして、原因を特定する「トラブルシューティング」を試してみてください。

Q5: 埋め込んだドキュメントのセキュリティは大丈夫ですか？

Document Embedderプラグインは、GoogleのAPIを利用しており、Googleのセキュリティ基準に基づいて運用されています。ファイル自体はあなたのWordPressサイトのメディアライブラリにアップロードされるため、そのファイルの管理やアクセス権限はWordPressサイト自体のセキュリティ設定に依存します。機密性の高い情報を扱う場合は、SSL化やパスワード保護、会員制プラグインの導入など、WordPressサイト自体のセキュリティ対策を徹底することが重要です。

【発展】サイト制作からDXの内製化へ

当サイトではサイト制作に関する情報を発信していますが、サイト制作に限らずDX・IT化の内製化全般をお考えの方は、以下の記事も非常に参考になります。

参考記事：DXの内製化はなぜ必要｜メリット・デメリットを解説

まとめと次のステップ

Document Embedderプラグインを使えば、専門知識が少ない方でも、あなたのウェブサイトのコンテンツを格段に豊かにし、訪問者にとって価値の高い情報を提供しやすくなります。

このガイドで学んだことを活かして、ぜひあなたのウェブサイトでDocument Embedderプラグインを効果的に活用してみてください。

さらなる活用のヒント

  • 視覚的な訴求力向上: テキストコンテンツに、関連する報告書やインフォグラフィック、事例集などを埋め込むことで、内容の理解を助け、訪問者の関心を引きます。

  • 情報アクセスの容易化: FAQページに関連する詳細マニュアルをPDFで埋め込むなど、必要な情報へスムーズにアクセスできる導線を設計しましょう。

  • コンテンツの鮮度維持: 定期的に更新されるレポートや価格表などは、ファイルを差し替えるだけで最新情報を手軽に提供できます。

最も効果的な学習方法は、実際に手を動かしてみることです。様々な種類のファイルをあなたのテストサイトに埋め込んでみて、どのような表示になるか、どのような設定が最適かを試してみてください。

参考情報

コメント

タイトルとURLをコピーしました