wordpress（ワードプレス）の中にEmbed PDFプラグインでpdfを簡単埋め込みする方法
こんにちは！Webma!（ウェブマ）制作担当の渡邉清子です。
前回私よりpdfの圧縮方法についてお話しさせていただきましたね。
今回はそのpdfを実際にWordPressのページ内に埋め込んでみましょう！
順番としてはWordPressプラグイン（スマートフォンでいうアプリのようなもの）をダウンロードし、そこからページ作成画面で設定をしていきます。
目次
使用するプラグイン、Embed PDF
管理画面からのインストール方法
- ①管理画面よりプラグインを左クリックします。
- ②新規追加を左クリックします。
- ③Embed PDFと入力してください。
- ④左上に茶色に丸が描かれている画像が出てきますので、これの「いますぐインストール」をクリックします。
- ⑤「プラグインを有効化」をクリックします。
上記作業により、これから先の作業が反映される準備が整いました！
WordPressの固定ページ（編集画面）での設定方法
1.メディアへ画像を追加する
まず、ページ編集画面でpdfを埋め込みできるように、ローカル（ご自身のパソコンのマイピクチャなど）にある画像を、ワードプレス内にアップロードします。
- ①ワードプレスの管理画面からメディアを開き、「新規追加」をクリックします。
- ②pdfが入っているフォルダをクリックし、ワードプレス画面の前面に表示されるようにします。
- ③挿入したいpdfファイルを左クリックしたまま、ワードプレスの画面まで移動し、左クリックを離します。
- ④ワードプレス内にメディアが追加されたら、ファイル名が正しいか確認をします。
※pdfはメディアライブラリで中の画像を確認する事ができません。ページに挿入して初めて確認できます。
2.固定ページでpdfを埋め込みする方法
先ほどの作業では各ページにpdfが使えるようにする作業を行いました。
では実際にページにpdfを追加していきましょう！
- ①pdfを埋め込みしたい固定ページを開きます。
※このブログなら、管理画面＞投稿＞ブログ一覧の中から「ワードプレスの中にEmbed PDFプラグインでpdfを簡単埋め込みする方法」のタイトルをクリックします。
- ②pdfを埋め込みたい部分が決まったら、「ビジュアルモード」の状態でテキストエリアを左クリックをします。
- ③メディアを追加ボタンをクリックし、埋め込みたいpdfを選択します。
※ちなみにこの時画像のURLをコピーしてテキストモードに貼り付けると、⑥までが省略できます。 - ④挿入された時に<a href=”pdf名.pdf”>pdfタイトル</a>と表示されます。
※この時公開画面で表示されるのはpdタイトルという文字にリンクが付いていて、そこをクリックするとpdfが開く状態です。公開画面でpdfを表示させるにはあとひと手間でできます！ - ⑤「ビジュアルモード」から「テキストモード」へ切り替えます。
- ⑥以下のpdf名以外の部分を削除します。
- ⑦pdf名の前と後に、以下のタグを入力します。
- ※デフォルトの設定
↓
※最初のembedの後に以下のものを設定するとサイズが変更できます。
- ①半角スペース
- ②width=”任意の数値”（%やpx）
※上記pdfはwidth=”100%” - ③半角スペース
- ④height=”任意の数値”（%やpx）
※上記pdfはheight=”360″
サイズはお好みの数値で設定してください。
heightの数値に”px”と入力してしまうと、pdfが表示されている下にある「Unable to display PDF Click here to download」の部分に360px余白が取られてしまうのでご注意！
パソコンからみる場合とスマートフォンから見る場合の事を考えて高さも設定しました。
1つ目のpdfは携帯から見たときとても見づらかったですね、すみません。
pdfを埋め込みすることにより便利になる事
- ・会社のカタログ（1枚ずつでも、連結した複数枚のpdfでも！）
- ・キャンペーンのチラシ
用途に合わせてjpgやpngなどの画像と、pdfのファイルを使い分けてみてくださいね！
