【WordPress入門】ブロックエディタで投稿記事にPDFファイルを添付・埋め込む方法

この記事では、WordPressで投稿する記事にPDFファイルを添付・埋め込む方法を解説します。

添付にはではリンクを追加し新しいタブで表示する方法を、埋め込みにはプラグインを使用して画像のように表示する方法を紹介します。

目次

プラグインなしでPDFファイルを添付する方法

管理画面「メディア」にPDFファイルをアップロード

WordPressの管理画面にアクセスし、メディアまたはメディア下のライブラリをクリックします。

メディアライブラリが開かれるので、左上の「新規追加」をクリックしてください。

クリックすると下記画像のように、ファイルをドロップしてアップロードまたはファイルを選択するという2パターンの方法でPDFファイルをアップロードできるので、お好みの方法でアップロードしましょう。

アップロードすると、ライブラリ内に下記のようにPDFファイルが追加されます。

今回はpdfSample001.pdfというファイルをアップロードしました。

これで、PDFファイルのWordPressへのアップロードは完了です。

次に投稿にPDFファイルを添付する方法を解説していきます。

投稿にPDFファイルを添付

前述のメディアライブラリからアップロードしたPDFファイルを選択すると、下記のように添付ファイルの詳細が表示されるので、右中央のファイルURLをクリップボードにコピーします。

コピーしたら、PDFファイルを添付するための投稿を作成していきましょう。

管理画面メニューの投稿から「新規追加」をクリックし、添付用の投稿を作成します。

タイトルを入力し、PDFファイルの添付用のテキストを入力します。

今回は、「ここをクリックするとPDFを見ることができます。」とします。

テキストを選択し、先ほどメディアライブラリからコピーしたPDFファイルのリンクをペーストします。

下記画像のように、PDFファイルなので、「新しいタブで開く」をオンにして送信を選択します。

リンク追加後、プレビューで確認すると、下記のようにテキストに添付ファイルのリンクが挿入され、クリックすると新しいタブでPDFが表示されています。

これで、投稿にPDFファイルを添付することができました。

プラグインでPDFファイルを画像のように埋め込む

PDFファイルを画像のように埋め込みたい場合はプラグイン『PDF Embedder』を使用する必要があります。

プラグイン『PDF Embedder』のインストール

管理画面メニュー「プラグイン」から「新規追加」を選択し、「PDF Embedder」を検索してください。

すると下記画面のように「PDF Embedder」が表示されるので「今すぐインストール」をクリックしインストールされた「有効化」しましょう。

管理画面メニュー「設定」から、プラグインの設定を変更することができますが、基本的に変更する必要はなくデフォルト設定のままで良いです。

それでは投稿に埋め込んでいきましょう。

プラグイン『PDF Embedder』 でPDFファイルを投稿に埋め込む

管理画面メニューの投稿から「新規追加」をクリックし、添付用の投稿を作成します。

タイトルを入力し、投稿画面左上の青い「+」からブロックを追加します。

すると、下記のようにテキストブロック欄に『PDF Embedder』が追加されるので、選択しましょう。

選択すると下記画像のように表示されます。

「Click here to Open Media Library to select PDF」と表示されるので、クリックしてください。

ボタンをクリックすると下記のようにメディアライブラリが開かれます。

追加したPDFファイルをクリックし、右下の「選択」をクリックしてください。

すると、下記画像のようにメディアライブラリで選択したPDFファイルがリンクのように埋め込まれます。

編集画面ではこのような表示となりますが、プレビューまたは公開すると、下記のように埋め込まれるので確認してみましょう。

複数ページあるPDFファイルも閲覧することができます。

有料プランでは、PDFのダウンロードやページ間をスクロールできるなど便利な機能がありますが、とりあえずPDFを投稿に埋め込むだけであれば、無料プランで十分なのでこの記事では割愛します。

終わりに

企業サイトや官公庁のサイトでは、PDFをサイトから閲覧したい、サイトに埋め込みたいという要望があるため、今回記事にさせていただきました。

比較的簡単にできるので、PDFをホームページ上で扱う際には、参考にしていただければ幸いです。

以上、WordPressのブロックエディタを使用して投稿記事にPDFファイルを添付・埋め込む方法でした。

この記事が気に入ったら
フォローしてね!

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

Coment

コメントする

スパム対策のためコメントは日本語で入力してください。

CAPTCHA

目次