WordPressサイトに直接PDFを表示することで、ドキュメンテーション、電子書籍、その他の貴重な資料に簡単にアクセスできるようになり、ユーザーエクスペリエンスが向上します。
PDFビューアを埋め込むことで、閲覧者はサイト上でコンテンツをシームレスに表示し、インタラクティブに操作することができます。さらに、訪問者がどの端末を使用していても、すべてのファイルが同じレイアウトであることを保証します。
私たちは過去にWPBeginnerやパートナーサイトでPDFビューアーを使用しており、ユーザーにとってPDFビューアーがどれだけアクセシビリティと利便性を向上させるかを経験してきました。
この投稿では、WordPressにPDFビューアを簡単に追加する方法を紹介します。コーディングは必須ではありませんので、初心者の方でも安心してご利用いただけます。
なぜWordPressにPDFビューアが必要なのか？
WordPressサイトの多くは、サービスや製品に関する情報を共有するためにPDFファイルを使用しています。例えば、レストランのサイトをお持ちの場合、メニューをオンラインPDFとして公開することができます。
PDFをサイトにアップロードし、WordPressでダウンロードリンクを追加することはいつでもできます。しかし、これはPDFドキュメントをすぐに見たい、あるいは完全なファイルをダウンロードしたくないユーザーにとっては最高のユーザーエクスペリエンスではありません。
その代わりに、WordPressでPDFビューアを追加し、PDFをサイトに直接表示することができます。これにより、訪問者はドキュメントをダウンロードすることなく見ることができ、スマートフォンやタブレットのユーザーには特に便利です。
また、サイトへの訪問者を維持することで、ページビューを増やし、直帰率を下げることができます。
それでは、WordPressにPDFビューアを簡単に追加する方法を見ていきましょう。クイックリンクを使えば、使いたい方法にすぐにジャンプできます：
方法 1 ： ブ ロ ッ ク エデ ィ タ を使っ て PDF ビ ュ ーアを追加 （簡単）
WordPressサイトでPDFを表示する最も簡単な方法は、Gutenbergエディターのビルトインファイルブロックを使用することです。
この方法には特別なプラグインは必須ではありませんが、ビューアをカスタマイズできる方法は限られています。より高度なカスタマイズや機能が必要な場合は、代わりにWordPressプラグインを使用することをお勧めします。
まずは、PDFビューアを追加したいページや投稿を開き、「ブロックを追加」（＋）ボタンをクリックして新しいブロックを追加してください。
その後、「ファイル」とタイプし始め、右のブロックが表示されたらそれを選択する。
すでにWordPressのメディアライブラリにPDFをアップロードしている場合は、「メディアライブラリ」ボタンをクリックしてください。埋め込みたいPDFを選択します。
まだPDFをアップロードしていない場合は、「アップロード」をクリックし、コンピューターからファイルを選択してください。
WordPressは自動的に埋め込みPDFのサイズを選択します。
ファイルのサイズによっては、初期設定ではドキュメント全体が表示されない場合があります。しかし、閲覧者はツールバーの設定を使ってPDFを拡大・縮小したり、スクロールすることができます。
お望みであれば、PDFビューアの高さを変更して、埋め込まれたドキュメントをより多く、またはより少なく表示することができます。
これを行うには、右側のメニューにある「ピクセル単位の高さ」スライダーを使用するだけです。
来訪者がPDFをダウンロードしたいと思うこともあるので、常に身近に置いておくことができる。
例えば、カスタマイザーは、最も人気のある製品のユーザーマニュアルや、次回のイベントやカンファレンスのプログラムスケジュールをダウンロードしたいと思うかもしれません。
WordPressの初期設定では、ツールバーに「ダウンロード」アイコンが表示され、PDFの下にボタンが表示されます。
ダウンロード」ボタンは、PDFツールバーの様々なアイコンに不慣れな訪問者に役立つかもしれません。
この点を考慮すると、「ダウンロード」ボタンは有効化したままにしておいた方がよいでしょう。しかし、このDuplicatorコンテンツを含めたくない場合は、’Show Download Button’トグルをクリックして無効化することができます。
PDFの設定に満足したら、「更新」または「公開する」をクリックして変更を反映させます。
WordPressのサイトにアクセスすると、PDFビューアーが表示されます。
方法2：プラグインを使ってWordPressにPDFビューアを追加する（よりカスタマイズ可能）
WordPressビルトインファイルブロックは、単にいくつかのPDFを埋め込みたい場合には良い設定です。しかし、ビューアーをもっとコントロールしたい場合は、代わりに無料のプラグインを使用することをお勧めします。
PDF Embedderは 最高のWordPress PDFビューアープラグインの一つです。PDFファイルのサイズを自動的に調整したり、幅を指定するとプラグインが自動的に高さを計算してくれます。
また、「次へ」「前へ」ボタンやズームボタンなど、ナビゲーションや表示が簡単なPDFビューアも付属しています。オンラインコースの参考資料など、長いドキュメントの表示に最適です。
まず、PDF Embedderプラグインをインストールして有効化する必要があります。WordPressプラグインのインストール方法については、こちらのステップバイステップガイドをご覧ください。
注：WordPressにモバイルフレンドリーなPDFを簡単に埋め込むことができるプラグインには無料版があります。しかし、このチュートリアルでは、より高度な機能を備えたプレミアムバージョンを使用します。
有効化した後、WordPressダッシュボードから設定” PDF Embedder ページにアクセスし、プラグインの設定を行います。
メイン設定」タブでは、PDFの幅と高さを設定することができます。ほとんどの場合、各PDFを埋め込む際に、これらの初期設定を上書きすることができます。例えば、個々のPDFのサイズや縮尺を変更することができます。
しかし、初期設定を変更することで、時間と労力を大幅に節約することができますので、ご自身の必須条件に一致するように変更することをお勧めします。
PDF Embedderは、訪問者が文書の上にマウスオーバーすると、ツールバーを上部に表示します。
しかし、長いドキュメンテーションや複数ページのPDFを含める予定がある場合は、初期設定でツールバーを表示すると便利です。これを行うには、「ツールバーを常に表示する」オプションを選択するだけです。
また、ツールバーの位置を上部、下部、または両方に設定したり、ドロップダウンメニューをクリックして完全に無効化することもできます。
ページをスクロールすると、PDFビューアの設定をさらに行うことができます。例えば、スクロールバーの表示、連続ページスクロールの有効化、ツールバーへのPDF検索ボタンの追加などが可能です。
さらに、ツールバーにPDFダウンロードボタンを表示することで、訪問者がドキュメンテーションをダウンロードできるようにすることもできます。また、表示とダウンロードのトラッキングを有効化することで、PDFが訪問者にどれだけ人気があるかを測定することもできます。
プラグインの設定に満足したら、「変更を保存」をクリックします。
これでWordPressにPDFビューアを追加する準備ができました。PDFを表示したいページや投稿を開き、「+」ボタンをクリックするだけです。
PDF Embedder」と入力し、適切なブロックが表示されたら選択します。
次に、リンクをクリックしてWordPressメディアライブラリを開き、PDFを選択します。次に、ライブラリからPDFを選択するか、コンピューターからファイルをアップロードします。
プラグインは初期設定を使ってPDFを表示しますが、右側のメニューにある設定を使ってPDFの見え方や動作を微調整することができます。
ここでは、PDFの高さ、幅、ツールバーの位置、ツールバーのマウスオーバー、外部リンク、検索ボタンを変更できます。
PDFの設定に満足したら、「更新」または「公開する」をクリックするだけです。これで、WordPressブログやサイトにアクセスして、埋め込まれたPDFビューアを見ることができます。
訪問者は簡単にPDFドキュメントを表示し、ツールバーを使ってフルスクリーンモードにしたり、拡大したり、ページを移動したり、PDFをダウンロードしたりすることができます。
ボーナス：埋め込みPDFからお金を稼ぐ方法
もしあなたが質の高い、役に立つPDFを持っているなら、WordPressを使ってオンラインでお金を稼ぐことができる。
PDFドキュメントをサイトに埋め込むと、そのページや投稿を会員限定のコンテンツにすることができます。訪問者は、そのページや投稿にアクセスし、埋め込まれたPDFを見るために、メンバーシップを購入することができます。
WordPressを会員制サイトにする最も簡単な方法は、MemberPressを使用することです。MemberPressはWordPressの会員制プラグインで、どのようなページや投稿も、埋め込みPDFを含む購読者限定のコンテンツに変えることができます。
WordPressを使った会員制サイトの作り方をステップ・バイ・ステップでご紹介しています。
また、Easy Digital Downloadsを使ってPDFドキュメンテーションを管理し、サイトで販売することをお勧めします。あらゆる種類のデジタル商品を簡単に販売でき、商品ページにもプレビューとしてPDFを埋め込むことができます。
この投稿がWordPressにPDF Viewerを追加するのにお役に立てば幸いです。WordPressのブログ投稿にPDFやスプレッドシートなどを埋め込む方法についての初心者向けガイドや、WordPressにTikTok動画を埋め込む方法についてのチュートリアルもご覧ください。
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.
Dennis Muthomi
Great guide!
one question though – is there any notable impact on page load times when embedding larger PDF files using the plugin method?
For sites with many embedded PDFs, especially if some of those PDFs have huge file sizes, it would be good to know if there are any performance considerations to keep in mind.
sometimes serving up large PDF files could potentially slow down page loading.
WPBeginner Comments
If the PDF has a large file size, then it may take a bit for the PDF to load on the page. However, in many cases this won’t be a problem.
Mrteesurez
Good, helpful post.
But is it possible to embed a PDF and earn income while people read it online, something like Amazon KDP. Can this plugin be used to achieve this ?? or any custom way, let me know, thanks.
WPBeginner Support
We do not have a method we would recommend at the moment for that.
管理者
Christian
Works great on the latest version!
WPBeginner Support
Thanks for letting us know
管理者
Ian
I see that PDF Viewer has not been updated in 3 years, and has not been tested with my current version of Wordpress (v4.9.1). Is this still the suggested plugin to use? It’s looking like no one is maintaining it, perhaps?
WPBeginner Support
Hi Ian,
You are right. You should check out these PDF plugins for WordPress.
管理者
Manoj jidugu
if am clicking print for my word press web page i am getting the page which is not properly aligned.
I am getting all the urls and content combined
Marek
On the plugin page it says:
“This plugin hasn’t been updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress.”
Maybe that’s why it does not work for some.
Kallol Das
In my site pdfviewer does not work. In fact I cannot embed any pdf file on my blog post.
rajesh
hi i want to publish a book in my wordpress site and people only read the book so can u refer me any easy pdf reader plugin
Omar
This is not working for me on the last version of WP. Someone know a workaround? Or another option that works?
fred
Hi guys,
the problem with PDF plugins like this ones, is that you cannot remove sibar(s) when generating your PDF, an that changes style a lot !
If ever I find one that has this so useful feature, I come back here to tell you ! Or maybe someone found one somewhere ?
ibrar
NIce information
Nate Richie
You should try ‘Embed Any Document’. It’s a much better alternative.
AllyG
Thanks for the recommendation. It works great!!
Piet Marisael
Is it possible to set the viewer by opening a file to 110% view automaticly and how i gonna do that?
It’s a perfect plugin used by Wordpress 4.4.2 and twenty-eleven theme
Darron
Hi Syed,
Many thanks for the ‘heads up’ on this issue.
I’ve been using the following free version of this plugin for the last two years, though have just upgraded to the premium due to the high number of fPDF’s held on my clients site:
So far I’ve had no issues at all with the premium version, I’m also able to ‘unbrand’ the document, plus track the number of download/views.
Rita
I read the info that you indicated. Looks like the pdf viewer is not available for wordpress.com. Too bad. I understand the issue that readers who click on my url for a pdf will go to a separate page, and may not return to my blog. That is a problem. I didn’t know that I would have this a need to display pdfs when I started with wordpress.com, or I may have made a different choice.
Rita
Am I correct that WordPress.org is the required application for the embedding plugin? If so, I suggest that information be clearly stated as a requirement. All references that I saw are to the generic WordPress, so it’s not possible (Did I miss it?) to determine whether there is a specific application requirement. It would help us newbies to avoid mistakes, and direct us to potentially making different decisions.
Thanks.
Dan
I really appreciate your posts that identify a DIY (do it yourself) issue in wordpress, and then provide some alternate solutions, usually involving plug ins.
“But”, am wondering if you take the time to read some of the reviews posted by users on the plugin page in wordpress.org directory, and also the LAST UPDATED info.
For example, this PDF VIEWER plugin was last updated “8 months” ago, and is compatible up to WP 4.2.6
Also, per one reviewer….
“November 4, 2015 for WP 4.3.1
This plugin was precisely what I needed. Thanks!
******Only concerns are:
(1) This plugin leverages Mozilla PDF.JS framework. As of 2015-NOV, this plugin is significantly behind the present version of that framework:
Plugin Settings page states:
PDF.js Version Date
Stable 1.1.1 18 Mar 2015
Beta 1.1.114 7 May 2015
PDF.JS page states as of 2015-NOV:
Stable 1.1.366
Beta 1.1.469
SUMMARY > Don’t you think it’s good practice to use plugins with good ratings, but that are also consistently updated and highly rated ? If you do, please include some info in your posts that acknowledge a suggested plugin hasn’t been updated in a while, but appears to be the best solution among the ones currently available.
WPBeginner Support
PDF Viewer allows you to use the beta version of PDF.js from the settings page. You may also want to see our guide on Should You Install Plugins Not Tested With Your WordPress Version?
管理者
Rita
I use Wordpress.com, not .org. Can I embed pdfs and other documents using a plug-in? I have found varying references, and want to be certain, before experimenting and possibly damaging m existing blog.
Wordpress.com edit page does have a location labeled plugins. That also leads me to believe that I can use them, yet, references say “no”. I’ll appreciate an explanation.
Thanks
WPBeginner Support
Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
管理者
Md Riyaz Alam
Hey Syed,
I think this is the first of its kind pots on wordpress. I did not see a post on PDF for WordPpress, but many of SEO and bloggers are looking for this pluging. So thanks to introduce this to the WP industry. This could be very helpful for tutorials as well.
Rita
I am using Wordpress.com (not .org). I want viewers to see my pdf documents on the same page as the rest of my blog post. Can I install the pdf viewer that is described here, in my Wordpress.com blog?
Prince
Thanks for this article. For SEO purpose, is it better to add the pdf content in text and add a button to download the link, or to display the pdf only using this viewer plugin ?
WPBeginner Support
Like we said, a download link forces users to view the PDF separately. This decreases the time they spend on your page and their chances of coming back to resume browsing your website. You will get the same SEO benefit as adding a download link. Since it is written in JavaScript and compatible with HTML5 search engines can still index your PDF contents if the PDF file has text in it and not just images.
管理者