【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 ファイルを添付・埋め込む方法でした。