Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
WPBカップ
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

WordPressのブログ投稿にPDFやスプレッドシートなどを埋め込む方法

ダウンロード可能なPDFや適切にフォーマットされたスプレッドシートなど、追加リソースの恩恵を受けることができるブログ投稿を書いたことがありますか?

私たちは、サイトにさまざまなコンテンツを追加することのパワーを知っています。しかし、ドキュメンテーションをどのように埋め込むかを考えることは、特に、考慮すべき多くの異なるフォーマットやファイルタイプがある場合、困難なように思えるかもしれません。

この投稿では、PDF、スプレッドシート、パワーポイント、その他のドキュメンテーションをWordPressブログ投稿に埋め込む方法を紹介します。このガイドを完了すれば、貴重なドキュメンテーションを読者と共有することで、コンテンツを次のレベルに引き上げる準備が整います。

Embedding PDF, Spreadsheet and Others in WordPress Blog Posts

以下のクイックリンクから、埋め込みたいドキュメントのタイプに直接ジャンプできます:

プラグインなしでWordPressブログ投稿にPDFを追加する

WordPressでは、PDFをサイトにアップロードし、そのファイルをページや投稿日に表示することができます。また、「ダウンロード」ボタンも追加されるので、訪問者はPDFをローカルコンピューターに保存することができます。

A PDF, embedded using the built-in WordPress File block

これは、訪問者が保持する必要があるファイルに適しています。例えば、ダウンロード可能なPDFの製品カタログを作成したり、WordPressで電子書籍のダウンロードを追加したりすることができます。

この方法を使うには、ダウンロード可能なPDFを追加したいページや投稿を開き、新しい「ファイル」ブロックを作成するだけです。

Add file block

その後、「アップロード」をクリックし、使用したいPDFファイルを選択します。

WordPressはページや投稿にPDFを埋め込み、ファイル名と「ダウンロード」ボタンを表示します。ファイル名や「ダウンロード」テキストを変更するには、テキストをクリックして変更します。

Download PDF link

ダウンロードボタンを非表示にしたい場合は、右側のメニューにある「ダウンロードボタンを表示する」をクリックして無効化するだけです。

最後に、ページ上部の「公開する」または「更新」をクリックし、変更を反映させます。

Embedded PDF in blog post with Download button

また、この方法を使用して、Microsoft Wordドキュメント、Excelスプレッドシート、PowerPointプレゼンテーションなどの他のドキュメントのダウンロード可能なリンクを追加することもできます。ただし、ファイルブロックではWordPressサイト内にドキュメントのコンテンツが表示されないため、訪問者がファイルを見るにはダウンロードする必要があります。

もしこの方法を選ぶのであれば、埋め込みファイルの最大幅を設定して、他のページレイアウトに合うようにするとよいでしょう。

PDFプラグインでWordPressブログ投稿にPDFを追加する

WordPressビルトインファイルブロックを使用することは、ブログ投稿にいくつかの簡単なPDFを埋め込むには問題ありません。しかし、カスタマイザーのオプションが少ないので、プラグインを使うことをお勧めします。

PDF Embedderは WordPressのための最高のPDFプラグインの一つです。WordPressの投稿やページにモバイルフレンドリーなPDFファイルを簡単に埋め込むことができます。

PDF Embedder

プラグインは自動的にPDFファイルのサイズを調整し、それはナビゲーションボタン、ズーム機能、ダウンロードボタン、PDF検索ボタン、および大いに多くを備えたツールバーを提供しています.

開始するには、PDF Embedderプラグインをインストールして有効化する必要があります。ヘルプが必要な場合は、WordPressプラグインのインストール方法のチュートリアルを参照してください。

注:あなたが使用することができますPDF Embedderの無料版があります。しかし、プラグインのプレミアムバージョンは、より高度な機能が付属しています。

プラグインを有効化したら、WordPressダッシュボードから設定 PDF Embedderに移動します。

Embedding PDF files in a WordPress blog or website

ここでは、PDFビューアの設定を行うことができます。例えば、PDFの幅や高さを指定することができます。

また、ツールバー表示の変更、ページの連続スクロールの有効化、PDFダウンロードボタンの追加、クリック可能なリンクの有効化、検索バーの追加なども可能です。

How to embed PDFs in your WordPress website using a plugin

プラグインの設定が完了したら、「変更を保存」ボタンをクリックします。

これで、WordPressの投稿にPDFを埋め込む準備ができました。そのためには、新規投稿を作成するか、PDFを表示したい投稿を開きます。

次に、「+」ボタンを押し、「PDF Embedder」ブロックをクリックして追加します。

Add the PDF Embedder block in WordPress

その後、PDF EmbedderリンクをクリックしてWordPressメディアライブラリを開き、埋め込みたいPDFファイルを選択します。

PDFファイルを選択したら、ページ上部の「更新」または「公開」ボタンをクリックします。これで、WordPressブログにアクセスし、PDFビューアの動作を確認することができます。

Embedded PDF viewer in WordPress blog post

詳しくは、WordPressにPDFビューアを追加する方法をご覧ください。

Microsoft Word、スプレッドシート、その他のドキュメントの埋め込み

PDFファイル以外のものを埋め込みたいですか?例えば、Microsoft Word文書、スプレッドシート、PowerPointプレゼンテーションをサイトに表示したい場合があります。

そのような場合は、すべての種類のドキュメンテーションを埋め込むことができるEmbed Any Documentをお勧めします。Google Docs ViewerやMicrosoft Office Onlineとも統合できます。

まず、あなたのサイトにEmbed Any Documentプラグインをインストールして有効化する必要があります。詳しくはWordPressプラグインのインストール方法をご覧ください。

その後、新規投稿を作成するか、既存の投稿を開きます。そして「+」ボタンをクリックし、「埋め込み」セクションの下にある新しい「ドキュメント」ブロックを見つけてください。

Add Document Block in WordPress Editor

ページや投稿にブロックを追加するにはクリックしてください。

その後、「アップロード」ボタンをクリックします。

Uploading files to a WordPress website

コンピューターからドキュメントをアップロードできるようになりました。

ドキュメントがオンラインで公開されている場合は、「URL」を選択し、リンクを入力します。

Embedding documents in WordPress blog posts

ドキュメントを選択すると、埋め込みをカスタマイズするさまざまな方法が表示されます。

これらの設定はかなり簡単なので、目を通して好きなように変更してください。埋め込み設定に満足したら、先に進み、’インサーター’をクリックしてください。

Add Spreadsheet Advanced Options

その後、投稿に埋め込まれたドキュメントが表示されます。

この時点で、右側のメニューにあるドキュメントの表示オプションを見て、必要な変更を行うとよいでしょう。

Spreadsheet Embedded in WordPress Editor

最後に、「更新」または「公開する」のいずれかを選択して、ドキュメントを公開します。

あなたのサイトにアクセスすると、ブログ投稿に埋め込まれたドキュメントが表示されます。

Spreadsheet Embedded in WordPress Preview

WordPress投稿へのSlideShareプレゼンテーションの埋め込み

WordPressのビルトインツールを使って、サードパーティのサイトからいくつかのコンテンツを埋め込むことができます。特に、WordPressにはYouTube動画ツイート、SlideShareプレゼンテーション用の埋め込みブロックがあります。

SlideShareを例にしてみよう。

WordPressのブログ投稿にプレゼンテーションを埋め込むには、新規投稿を作成するか、既存の投稿を編集します。そして、ブログ投稿に新しい’SlideShare’ブロックを追加するだけです。

Add SlideShare Embed Block in WordPress Post Editor

次に、SlideShareのサイトにアクセスし、埋め込みたいプレゼンテーションのリンクをコピーします。

その後、SlideShare埋め込みブロックにリンクを貼り付け、「埋め込み」ボタンをクリックします。

Embed SlideShare URL in WordPress Post

WordPressはSlideShareのプレゼンテーションを取得し、自動的に投稿に追加します。

右側のメニューでブロックオプションをチェックし、投稿を更新または公開することができます。

SlideShare Presentation Added in WordPress Editor

それでは、SlideShareのプレゼンテーションの様子をブログ投稿でご覧ください。

異なるスライドをスクロールするには、プレゼンテーションの下にあるボタンを使用するだけです。

SlideShare Presentation Added in WordPress - Preview

WordPressにGoogleドキュメントやシートなどを埋め込む方法

これまで、ローカルコンピューターからPDFやその他のドキュメンテーションを追加する方法をご紹介してきました。しかし、多くの人はGoogleドライブを使ってオンラインでドキュメントを作成・保存しています。

iFrameを使えば、簡単にGoogleドライブのファイルをWordPressの投稿に埋め込むことができます。

WordPressにGoogleドキュメントを埋め込むには、まずブラウザーでドキュメントを開きます。その後、「ファイル」メニューから「共有」を選択し、続いて「ウェブに公開する」を選択する。

Publishing a Google Doc to the web

表示されるポップアップで、「Embed」タブを選択します。

そして、「公開する」ボタンをクリックします。

Click Publish to Find the Embed Code for Google Doc

Googleドライブに独自のiFrame埋め込みコードが表示されるようになりました。

WordPressにこのコードを追加する必要があるので、コピーしてください。

Embed a Google Doc Code

次に、Googleドキュメントを埋め込みたい投稿を開きます。

その後、青い「+」アイコンをクリックし、カスタムHTMLブロックをページや投稿に追加することができます。

Add Custom HTML Block in WordPress Post

これで、iFrame埋め込みコードをカスタムHTMLブロックに貼り付けるだけです。

ドキュメントの表示方法によっては、埋め込みコードに高さと幅のパラメータを追加する必要があります。

以下は、これらのパラメータがどのように見えるかの例である:

<iframe src="https://docs.google.com/document/d/e/2PACX-1vQXyRM7bAOY2Em38yYkFKDlFwMp7tlofsdfdgeGDFg4lVkv_9HB_5WbGLwfMScaGQmDf34mIH/pub?embedded=true" width="550" height="600"</iframe>
Google Doc Embed Code Added in WordPress Post

コードの見た目に満足したら、投稿を保存し、ライブサイトでプレビューすることができます。

Googleドライブにある他のドキュメンテーションを埋め込むには、上記と同じプロセスを繰り返すだけです。

Google Doc Embedded in WordPress Post -preview

WordPressでPDF、スプレッドシート、その他のドキュメントを販売する方法

WordPressを使ってオンラインでブログを書いてお金を稼ぐ方法はたくさんありますが、多くのサイトオーナーはデジタルドキュメントの販売を選択します。例えば、契約書や遺言書、確定申告書などの重要な法律文書のテンプレートを販売することができます。

オンライン・コースを販売しているのであれば、模擬試験問題やプレミアム・プレゼンテーションのような、役に立つプレミアム・リソースを作成することもできます。

上記の方法を使えば、無料でドキュメンテーションを共有することができますが、PDF、スプレッドシート、その他のドキュメントから収入を得たい場合は、Easy Digital Downloadsプラグインの使用をお勧めします。

Easy Digital Downloadsは、デジタルドキュメントの販売に最適なWordPress eコマースプラグインです。

WordPressとEasy Digital Downloadsを使えば、高額な取引手数料を支払うことなく、好きなだけドキュメンテーションを販売することができます。これは、Sellfy、Gumroad、Sendowl、WooCommerceなどの他のプラットフォームよりも大きな利点があります。

さらに、WordPressのホスティングサービスとしてSiteGroundをご利用の場合、Digital Downloadsがプレインストールされていますので、すぐにデジタルドキュメントの販売を開始することができます。

すべてのドキュメンテーションを販売する方法については、WordPressでGoogleスプレッドシートを販売する方法をご覧ください。

WordPress投稿でファイルダウンロードをトラッキングする

ダウンロード可能なドキュメンテーションを埋め込んでいる場合、そのドキュメントのパフォーマンスを知りたいでしょう。これは、あなたがデジタルダウンロードを販売している場合や、訪問者の連絡先情報を収集し、メールリストを増やすためにダウンロードを使用している場合は特に重要です。

ダウンロードをトラッキングすることで、訪問者に最も人気のあるファイルの種類を確認することができます。これにより、将来的に訪問者に同様のコンテンツを提供し、WordPressサイトでさらに多くのダウンロードを獲得することができます。

ファイルのダウンロードをトラッキングする最も簡単な方法は、MonsterInsightsを使用することです。これは最高のWordPressアナリティクスプラグインで、Googleアナリティクスで詳細なレポートを見ることができます。

MonsterInsights

MonsterInsights Liteバージョンは、ファイルのダウンロードをトラッキングするのに必要なものがすべて含まれているので、すぐに始めることができます。

しかし、MonsterInsights Proバージョンにアップグレードすると、WordPressダッシュボード内で最も人気のあるダウンロードを他の高度なレポートと一緒に見ることができます。

まず、サイトにMonsterInsights Liteプラグインをインストールし、有効化します。詳しくは、WordPressプラグインのインストール方法をご覧ください。

次に、WordPressサイトとGoogleアナリティクスを接続する必要があります。MonsterInsightsを使えば、コードを書いたり専門家を雇ったりすることなく、接続を行うことができます。

詳しい手順については、WordPressにGoogleアナリティクスをインストールする方法をご覧ください。

サイトにGoogleアナリティクスを追加すると、MonsterInsightsが自動的にファイルダウンロードのトラッキングを開始します。

MonsterInsights Proバージョンを使用している場合は、WordPressダッシュボードのInsights ” Reportsでレポートを見ることができます。次に、「公開する」タブを選択します。

The Publishers tab in MonsterInsights

その後、「Top Download Links」レポートまでスクロールするだけで、どのファイルが最もダウンロードされているかを確認できます。

このようなパフォーマンスの高いコンテンツをより多く作成することで、サイトの総ダウンロード数を増やすことができるはずだ。

monsterinsights top download links

MonsterInsightsは初期設定で一般的なファイルタイプをすべてトラッキングします。しかし、MonsterInsightsの設定を変更することで、より多くのファイルをトラッキングすることができます。

詳しくは、WordPressでファイルのダウンロードを管理、トラッキング、コントロールする方法をご覧ください。

WordPressの投稿にPDFやスプレッドシートなどのドキュメンテーションを埋め込む方法について、この投稿がお役に立てれば幸いです。また、WordPressのページコンテンツを別のページや投稿に挿入する方法や、WordPressでインタラクティブマップを追加する方法についてのガイドもご覧ください。

If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.

情報開示 私たちのコンテンツは読者支援型です。これは、あなたが私たちのリンクの一部をクリックした場合、私たちはコミッションを得ることができることを意味します。 WPBeginnerの資金源 をご覧ください。3$編集プロセスをご覧ください。

アバター

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

究極のWordPressツールキット

ツールキットへの無料アクセス - すべてのプロフェッショナルが持つべきWordPress関連製品とリソースのコレクション!

Reader Interactions

42件のコメント返信を残す

  1. Jiří Vaněk

    Is there a quality plugin that, in addition to embedding PDFs, can also generate PDFs? E.g. from the article so that the user can save it as a PDF.

    • WPBeginner Support

      We do not have a specific plugin we would recommend at the moment.

      管理者

      • Jiří Vaněk

        Thank you for your reply, I will continue to look for such a plugin. Thank you for your time.

  2. Joseph

    Hi,
    I have several embedded documents in my website. since I started embedding the power-point slides, Google stopped indexing my site. Could there be a problem?

    • WPBeginner Support

      Hey Joseph,

      Embeds are usually not an issue with SEO. However, if the main content area of your website only contains an iframe embed with no other content surrounding it, then it will be harder for search engines to rank those pages. They will be crawled and indexed but will not perform well for the keywords you are trying to target.

      管理者

  3. erica

    way to FAST! cannot get instruction as going SO SO FAST

  4. Prasad GURLA

    Did not know you could embed pdf files inside blog posts. Is it possible to keep the view of the embedded pdf on a particular page? Like, page 2 is shown in the embed instead of default 1st page?

    Thanks a lot in advance,
    Prasad

  5. Tom

    My PDF file embeds and there’s a download hyperlink for people to use. Is there a way I can count the number of downloads from my site?

  6. Suchitra

    Hi,
    I tried to follow this video, but when I tried to use the mentioned plugin, Sucuri security gives me an error saying “Access to backdoor or suspected location denied”. How can I embed spreadsheets or PDFs on my site? Please help.

    • hanzla

      dont use such plugin this will hack your site

    • Nate Richie

      Looks like the plugin is outdated. Try ‘Embed Any Document’ instead.

  7. linux

    Thanks for the above tutorial. Please i want to embed a PDF in my post and make people download it only when they give my page on facebook a like. I would be happy if you would help me.

  8. sally keszey

    I have hyperlinks within my pdf document that I would like to embed in my wordpress post. Is there any way to make these hyperlinks active within the post?

    • Gary

      Googlle document embedded is discontinued.. They say if it still works , good., but don’t call if it does not. Problem is now although I can upload a PDFs document with Google Document embedded, the hyperlinks with in the doCumenet do not work. I’ve tried several PDFs embedded and None allow hyperlinks gas to work. Does anyone have a solution for this?

  9. Antonia

    Your site is fantastic! Thank you so much. It is easy to follow and on the right level.

  10. tamy

    I have installed the plugin and updated a PDF, then deleted the plugin but now there is a PDF icon on all the pages. I can’t seem to locate the file to delete it. It was google page view plugin. How can I locate and delete it?

  11. Donna

    I was searching for a solution to embed a working Excell document in a WP site and this really helped me! Just one thing: there is a button in the document but the button does not show in the WP site. Do you know how to solve this problem?

    Thanks!

  12. Jac

    Sorry but it is not working anymore and there is no feedback from the creators. Below is the error message you get and this file is only 1.87Mb.

    This happened as soon as WordPress updated to the latest version.

    You’ve reached the bandwidth limit for viewing or downloading files that aren’t in Google Docs format. Please try again later.

  13. Tanay Talesra

    Hi, I want to embed a Google form (doc) on my WordPress website. How can I do this?

    • WPBeginner Support

      Simply create your Google Form, and then click on the Send button, this will bring up a popup. Click on the embed button in the popup to get the embed code. Copy and paste this code inside your post or pages.

      管理者

  14. anand kjha

    awsm post sir!

  15. shamsher khan

    Thank you for sharing it is informative but on thing i would like to ask we should upload . documents on our host or should upload it on Google drive. which method is good for seo.

    • WPBeginner Support

      Uploading them on your site would be better if your PDF files do not contain encrypted text then search engines can read and index them as well.

      管理者

  16. arthur c van wyk

    I embedded an Excel spreadsheet and it embeds as a solid image in the Google Docs Viewer. How do I get it to work as a spreadsheet in Wordpress?

  17. Ryan

    Okay so I have come a little bit closer to making this work but I havent quite got there yet. The error message i get now is “Sorry, we were unable to find the document at the original source. Verify that the document still exists. You can also try to download the original document by clicking here.” So when I click “Here” the page comes up no problem. Any ideas why this is the case?

    • Bruno

      I have the same problem and it seems that the plugin only works when the document is accessible for Google. Behind a firewall in an Intranet the plugin is showing this behavior.

      • Linda Ploszaj

        I am having the same problem, I uploaded directly from my computer, not google drive. It shows the error above in the viewer, but the download link works. Any help?

  18. Ryan

    Do you know of a workaround for IE? Can’t help but wonder why 49% of my users are using IE…

  19. Alison Genet

    Is there a way to add a document on your site that has fill-in areas that later can be printed out?

    For example, a contract where someone can fill in their name and the date and either download it with their name or print it?

    • Editorial Staff

      Editable PDFs have to be done on your computer end not on WordPress end. If you upload a PDF that has editable fields, then the web browser will understand that.

      管理者

  20. Emily

    Thanks so much for this tutorial. But I’m wondering — is there a way to make the PDF take up the whole page, rather than showing up as an image within the wordpress site frame? The PDF is of my resume, and I’d like my “resume” tab to open a page that has the resume taking up the full screen…

    • Editorial Staff

      Hey Emily,

      You should consider uploading your PDF by going to Media tab and Add New. Then link directly to that PDF. Send us an email using the contact form if you get stuck :)

      管理者

  21. Crysislevel

    thanx for this plugin. i never knew der was a viewer too….i used to simply link the pdf file to the site its available on! :)

  22. smseleem

    @wpbeginner Can you help how can I disable Theme Option in WordPress Admin Panel?

  23. jkretch

    @wpbeginner Nice! Thanks for sharing. Cool way to share presentations and the like without going to Slideshare.

  24. jasonfox_me

    Thats great! I have always uploaded the document and created a 301 from the page tab. being able to use shortcode to embed them in the page could be very helpful. Thanks for the tip.

  25. After9Design

    This was something I’ve been looking for. I’m going to get the plugin and find out where you got that shortcode from.

  26. Heather Hapeta

    good stuff

  27. Connor Crosby

    Looks like an excellent read, thanks :)

返信を残す

コメントありがとうございます。すべてのコメントは私たちのコメントポリシーに従ってモデレートされ、あなたのメールアドレスが公開されることはありませんのでご留意ください。名前欄にキーワードを使用しないでください。個人的で有意義な会話をしましょう。