wordpress(ワードプレス)の中にEmbed PDFプラグインでpdfを簡単埋め込みする方法


こんにちは!Webma!(ウェブマ)制作担当の渡邉清子です。

前回私よりpdfの圧縮方法についてお話しさせていただきましたね。
今回はそのpdfを実際にWordPressのページ内に埋め込んでみましょう!
順番としてはWordPressプラグイン(スマートフォンでいうアプリのようなもの)をダウンロードし、そこからページ作成画面で設定をしていきます。

目次

使用するプラグイン、Embed PDF

Embed PDFダウンロードサイト

管理画面からのインストール方法

  1. ①管理画面よりプラグインを左クリックします。
  2. ②新規追加を左クリックします。
  3. Embed PDFと入力してください。プラグインダウンロード1
  4. ④左上に茶色に丸が描かれている画像が出てきますので、これの「いますぐインストール」をクリックします。プラグインダウンロード2
  5. ⑤「プラグインを有効化」をクリックします。

上記作業により、これから先の作業が反映される準備が整いました!

WordPressの固定ページ(編集画面)での設定方法

1.メディアへ画像を追加する

まず、ページ編集画面でpdfを埋め込みできるように、ローカル(ご自身のパソコンのマイピクチャなど)にある画像を、ワードプレス内にアップロードします。

  1. ①ワードプレスの管理画面からメディアを開き、「新規追加」をクリックします。
  2. ②pdfが入っているフォルダをクリックし、ワードプレス画面の前面に表示されるようにします。
  3. ③挿入したいpdfファイルを左クリックしたまま、ワードプレスの画面まで移動し、左クリックを離します。
  4. ④ワードプレス内にメディアが追加されたら、ファイル名が正しいか確認をします。

※pdfはメディアライブラリで中の画像を確認する事ができません。ページに挿入して初めて確認できます。

2.固定ページでpdfを埋め込みする方法

先ほどの作業では各ページにpdfが使えるようにする作業を行いました。
では実際にページにpdfを追加していきましょう!

      1. ①pdfを埋め込みしたい固定ページを開きます。

        ※このブログなら、管理画面>投稿>ブログ一覧の中から「ワードプレスの中にEmbed PDFプラグインでpdfを簡単埋め込みする方法」のタイトルをクリックします。

      2. ②pdfを埋め込みたい部分が決まったら、「ビジュアルモード」の状態でテキストエリアを左クリックをします。
        ビジュアルモード
      3. ③メディアを追加ボタンをクリックし、埋め込みたいpdfを選択します。
        メディアを追加
        ※ちなみにこの時画像のURLをコピーしてテキストモードに貼り付けると、⑥までが省略できます。
      4. ④挿入された時に<a href=”pdf名.pdf”>pdfタイトル</a>と表示されます。
        ※この時公開画面で表示されるのはpdタイトルという文字にリンクが付いていて、そこをクリックするとpdfが開く状態です。公開画面でpdfを表示させるにはあとひと手間でできます!
      5. ⑤「ビジュアルモード」から「テキストモード」へ切り替えます。
        テキストモード
      6. ⑥以下のpdf名以外の部分を削除します。
        メディア挿入後消すとこ

 

      1. ⑦pdf名の前と後に、以下のタグを入力します。

 

      ※デフォルトの設定
タグ


※最初のembedの後に以下のものを設定するとサイズが変更できます。

  1. ①半角スペース
  2. ②width=”任意の数値”(%やpx)
    ※上記pdfはwidth=”100%”
  3. ③半角スペース
  4. ④height=”任意の数値”(%やpx)
    ※上記pdfはheight=”360″
    サイズはお好みの数値で設定してください。

heightの数値に”px”と入力してしまうと、pdfが表示されている下にある「Unable to display PDF Click here to download」の部分に360px余白が取られてしまうのでご注意!

embed高さ指定

パソコンからみる場合とスマートフォンから見る場合の事を考えて高さも設定しました。
1つ目のpdfは携帯から見たときとても見づらかったですね、すみません。

pdfを埋め込みすることにより便利になる事

      1. ・会社のカタログ(1枚ずつでも、連結した複数枚のpdfでも!)
      2. ・キャンペーンのチラシ

用途に合わせてjpgやpngなどの画像と、pdfのファイルを使い分けてみてくださいね!

併せて読んでほしい、pdfに関するブログ


カテゴリ:
タグ:,,,,,,