MENU

ブログのblog

WordPressにPDFファイルを埋め込む簡単な方法(プラグイン数種例とプラグイン無し)

2023年12月2日

Wordpressカスタマイズの覚え書き-プラグイン

ワードプレスの記事内にPDFを埋め込みたいというご相談は割とよく受ける案件です。実際にはWordpressにPDFを表示するためのプラグインは不要です。

しかし表示のデザインによってはプラグインを使用した方が良い場合もあります。

ここではWordpressにPDFファイルを埋め込む方法を実際に埋め込んだ画像と共にお伝えします。

目次

WordPressのPDFファイルを埋め込み方法・プラグイン有り無し

まずは、どのテーマでもプラグインなしでPDFファイルを表示できる「ファイル」ブロックの使い方からご説明します。

PDFをプラグイン無しで埋め込む方法

「ファイル」ブロックは、どのテーマでも存在します。

まずはブロックエディターで、PDFを取り込みたいところに「+」を探し、

ブロックを選択
すべて表示を選択
左に出て来るブロックメニューから「ファイル」を選択
メディアに取り込んだPDFファイルを選択

WordpressにPDFファイルを埋め込む簡単な方法

後はファイルブロックをクリックしてメディアから表示させたいPDFファイル補選択するだけです。

実際に以下に「ファイル」ブロックで取り込んだPDFを表示させてみました。

ただ、PCだと綺麗にファイルが表示されるのですが、スマホ(Android)からだとダウンロードボタンしか表示されないんですよね。

スマホ(Android)から閲覧する場合はファイル名を1度タップしてもらうというひと手間が生じます。

テストPDF ダウンロード

この表示方法が理想だという方は、プラグインなしでOKだと思います。

簡単なカスタマイズは右に表示されるブロックのメニュー「PDF設定」から編集可能です。

WordpressにPDFファイルを埋め込む簡単な方法・プラグインなし

A 「インライン埋め込みを表示」をオフにするとダウンロードボタンだけが表示されます。
B 「ピクセル値での高さ」で表示サイズ(高さ)を調整できます
C 「ダウンロードボタンを表示」をオフにするとダウンロードボタンを消すことができます。

先ほども書いたように Android スマホからアクセスしたユーザーにはこんな風に表示されちゃってるはず。

WordpressにPDFファイルを埋め込む簡単な方法

どのサイトもスマホからアクセスするユーザーがほとんどでしょうから、これじゃ困るって方は多そう。

PDF埋め込みプラグイン各種(スマホ表示可)

プラグインなしでPDFを埋め込む方法は「ファイルブロック」の使用のみです。(テーマによっては別のオリジナルブロックが用意されている物もあるかも知れません)

上記の表示フェイスが気に入らない方はプラグインを使用することになります。

無料で使用できるプラグインはいくつかありますのでご紹介していきます。

ここからは「取り込み方」はご説明いたしません。全てのプラグインは、インストールして有効化すれば左メニューにプラグインのブロックが現れます。

「ファイル」ブロックと同じく、「ブロックを選択」して「ブロックをクリックしてメディアからPDFファイルを取り込み」、「右メニューで簡単に編集する」…この流れです。

PDF Viewer プラグイン

「PDF Viewer」は有名なプラグインです。これを使用すると、以下のような表示になります。

WordpressにPDFファイルを埋め込む簡単な方法・プラグインあり

大きなツールバーが消えて黒い背景が無くなる形ですね。スッキリします。ダウンロードボタンはありませんが、ダウンロードアイコンの枠は表示されています。

PDF プラグイン

そのものずばりですが「PDF」という名前のプラグインです。これを使用すると、以下のような表示になります。

WordpressにPDFファイルを埋め込む簡単な方法・プラグインあり

ツールバーもアイコンも完全になくなって、画像が表示されるだけのような形になります。しかしスマホ表示の場合は黒い枠が付きます。

PDF Poster プラグイン

表示は「PDF Viewer」とほぼ同じです。が、このプラグインはあらかじめプラグインの設定でPDFを取り込み、ショートコードで記事に設置する形です。(Contact Form7 のような方式です)。これを使用すると、以下のような表示になります。

WordpressにPDFファイルを埋め込む簡単な方法・プラグインあり

PDF Embedder

非常にシンプルに画像のみ埋め込んだような形になります。これを使用すると、以下のような表示になります。

STEP

ただの画像のみ表示に近いフェイス

WordpressにPDFファイルを埋め込む簡単な方法・プラグインあり

STEP

ブロックの右設定でツールバーの表示が可能
(本当に画像のみ表示したい場合は”None”を選択)

WordpressにPDFファイルを埋め込む簡単な方法・プラグインあり

用途によって使い分けを

基本は訪問者にダウンロードしてもらうことを目的とするのだと思いますが、使い方はオーナーそれぞれ。

使いやすく、希望に合ったPDF埋め込み方法の参考になれば幸いです。

作業を承ります

面倒くさい……と感じたら、ご依頼はこちらから

WEBサイト制作の一木堂

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！

主にWordpress中心のサイト・ブログ制作＆コーダー、カスタマイザー。

2000年からHP制作を始めました。

ハウツーサイトやキュレーションサイトのライター、ブログ作成・運営のお手伝いなどをしております。

お仕事で関わった無料ブログ＆Wordpressカスタマイズ案件実績500件以上。

携わったワードプレステーマ30以上。

アナリティクスを観察するのは生活の一部。

Google Analytics個人認定資格取得(GA4)。 SEOマーケティングアドバイザー資格取得。

SEOに特化したページ作りをめざしています。

カスタマイズのご依頼は「一木堂」へ

　　

サポートよろしくお願いします

いつもありがとうございます。

この記事を気に入って下さった方、「寄付してあげてもいいよ」という方がいらっしゃったらサポートしていただけると嬉しいです。

Amazonギフト券- Eメールタイプ - Amazonベーシック
金額は空白欄に適当に(15円から)書きこんで下さい。(あらかじめ入っている金額はAmazonの設定なので気になさらないでください)。

メールのあて先は「ageru15@gmail.com」です。
※上記のアドレスは投げ銭受け取り専用です。他のメールは受け取れない設定にしてあるのでご注意ください。

よろしくお願いいたします。

なお、この投げ銭システムに関する記事はこちら→『ブログに「投げ銭」システムをつける方法を考えてみたまとめ』

コメント

コメントするコメントをキャンセル