Advanced Custom Fields（カスタムフィールド）を使ってPDFを表示する方法
WordPressサイトのカスタマイズで、クライアントが自らの手で毎月スケジュールをPDFで更新をしたいという案件があったので、その際に実装した方法をご紹介。
カスタムフィールドのプラグインを使用すれば、サイト運営者がプログラミング言語を全く理解していなくても、WordPress管理画面の操作さえできれば容易に運営できるようになります。
カスタムフィールドの設定
プラグインの「Advanced Custom Fields」をインストールして有効化する。
カスタムフィールド → 新規追加でフィールドグループを新規追加する。
- フィールドラベル → 運営者がわかりやすい文言
- フィールド名 → 実装者や保守する人がわかりやすい文言
- フィールドタイプ → PDFを選択できるように「ファイル」
- 返り値 → ファイルURL
他の箇所は特にいじらなくてOK。
ルールは作成したフィールドグループを表示する条件を設定する。
PHP
<section id="pdf">
<div class="inner">
<iframe src="<?php the_field('pdf'); ?>" width="100%" height="100%"></iframe>
</div>
</section>PDFを表示させたいページに使用するPHPファイルに、上記のコードを記述。
<iframe src="<?php the_field('pdf'); ?>" width="100%" height="100%"></iframe>上記のコード以外は適宜コードを記述。
srcの部分にカスタムフィールドを出力するphpコードを記述する。
「the_field(‘pdf’)」の「’pdf’」は、カスタムフィールドのフィールドグループを作成したときに設定したフィールド名の部分にあたる。
返り値を「ファイルURL」と設定しているので、src=’PDFファイルのURL’と出力され、PDFファイルが表示されるようになる。
CSS
/* PDF */
#pdf .inner {
max-width: 1050px;
margin: 0 auto;
}
.inner iframe[src$=".pdf"] {
width: 100%;
height: 50vh;
}あとは適当にCSSをあてるのだが、注意しないといけないのはheight。
パーセント表記で数値を指定するとうまく動作しないので、vhやpxなどでサイズ指定する方が良いでしょう。