WordPressにPDF文書をレスポンシブとして挿入する方法

PDF文書をHTMLとして挿入する方法はいくつかあります。この記事では、iframeでPDFファイルを WordPressに挿入する方法を見てみましょう。レスポンシブとして機能するようにPDF文書を挿入し、パターン化してリサイクルする方法について簡単に説明します。

簡単な方法としてPDFビューアプラグインを使用できます。

• WordPress PDFビューアプラグイン

ページや投稿にPDF文書を表示するのではなく、ダウンロードボタンを作成してユーザーがダウンロードできるようにしたい場合は、次の記事を参照してください。

• WordPressからPDFファイルをダウンロードする方法

WordPressにPDF文書をレスポンシブとして挿入する方法

PDFファイル WordPressにアップロードする

PDFファイルはメディアライブラリにアップロードできます。

WordPress 管理者ページ » メディア » 新しいメディアファイルを追加するに移動します。 PDFファイルをドラッグアンドドロップするか、ファイル選択ボタンをクリックしてアップロードします。アップロードすると、以下のようにサムネイルが表示されます。

アップロードしたアイテムをクリックすると、添付詳細画面が表示されます。 クリップボードにURLをコピーする ボタンをクリックしてPDFファイルのパスをコピーできます。

PDFファイルをiframeとして挿入する

横長と縦長を指定してPDF文書を挿入する

次の形式でPDFファイルをiframeとして挿入できます。

<iframe class="pdf" src="https://cdsassets.apple.com/live/6GJYWVAV/information/ipad-air-11inch-m2-info.pdf" width="400" height="500"></iframe>

以下のコードを使用すると、次のように挿入されます。水平と垂直の長さが固定されています。

幅を100％で表示する

幅を100％に指定することも可能です。

<iframe class="pdf" src="PDF 파일 경로" width="100%" height="500"></iframe>

これにより、次のように幅は100％、縦は固定高さでPDF文書が表示されます。

レスポンシブでPDF文書を挿入する

水平、垂直の長さに関係なく、以下のCSSコードを使用すると、水平/垂直比が一定に設定されます。たとえば、次のコードを使用すると、A4用紙サイズの割合でPDFが表示されます。上記のコード デザイン » カスタマイズ » 追加のCSSに追加します。

.pdf-responsive {
overflow:hidden;
padding-bottom: 141.4%; /* A4 용지 비율 */
position:relative;
height:0;
}

.pdf-responsive iframe {
left:0;
top:0;
height:100%;
width:100%;
position:absolute;
}

水平/垂直比を調整するには、padding-bottom値を適切に変更します。例：

• 56.25％ - 16：9の比率でYouTubeの画像を表示するときの適切な割合です。
• 100% - 1:1の比率。横/縦の長さを同じにする場合
• 150％ - 2：3比

たとえば、次の形式でHTMLコードを追加できます。

<div class="pdf-responsive"><iframe class="pdf" src="https://cdsassets.apple.com/live/6GJYWVAV/information/ipad-air-11inch-m2-info.pdf" width="800" height="600"></iframe></div>

これにより、以下のようにA4サイズの割合でPDF文書が表示されます。端末の解像度を変更しても、縦横比は変わりません。

WordPressにPDF文書をiframeとして挿入する

ブロックエディタを使用している場合は、カスタムHTMLブロックを選択してください。 /htmlと入力してカスタムHTMLブロックを選択できます。 （キーボードショートカットを使用すると、簡単にブロックを追加できます。）

カスタムHTMLにiframeコードを追加します。上記の形式の中から希望の形式で入力してください。たとえば、水平は100％で表示し、高さを500で表示したい場合は上記の「幅を100％で表示する「セクションに記載されているコードを入力してください。

PDFファイルのパスは上記の「PDFファイル WordPressにアップロードする」のセクションの説明に従って、メディアライブラリにPDFファイルをアップロードしたら、PDFファイルパスをコピーして上記のsrc = "..."の部分に入力します。

例では、pdfファイルパスに便宜上、Apple iPadのマニュアルPDFパスを入力しました。

エレメンを使用している場合は、HTMLウィジェットにカスタムHTMLコードを入力できます。 」エレメントページビルダーにHTMLコードを追加する（Elementor)「を参考にしてください。

変更を保存してそのページや記事にアクセスすると、PDF文書が表示されます。

パターン化して再利用する

PDF文書を頻繁に挿入する必要がある場合は、パターンを作成して使用すると便利です。パターンの作成と使用方法の詳細については、次の記事を参照してください。

PDFファイルを挿入したカスタムHTMLブロックで、縦3点をクリックし、 パターン生成をクリックして新しいパターンを作成できます。

新しいパターンを追加 ポップアップが表示されたら、名前を適切に入力して 同期 オプションをオフにします。

추가 ボタンをクリックするとパターンが生成されます。

今ブロックエディタで /パターン_名前（例えば、 /pdf)を入力してパターンを呼び出すことができます。

パターンを読み込み、pdfパスなどを適切に修正します。

他の方法：ショートコードを使用する

WordPressを利用する場合、上記の方法の代わりにショートコードでPDF埋め込みコードを追加することも可能です。

次のようなコードを チャイルドテーマの関数ファイルに追加します。

// functions.php 파일에 추가
function pdf_function($attr, $content = null) {
    // 숏코드 인수 설정
    $args = shortcode_atts(array(
        'width' => '640px',
        'height' => '480px'
    ), $attr);

    // 입력된 URL 검증 및 기본 값 설정
    $url = esc_url($content);
    if (empty($url)) {
        return 'PDF URL이 제공되지 않았습니다.';
    }

    // width와 height 인수 검증
    $width = esc_attr($args['width']);
    $height = esc_attr($args['height']);

    // PDF 뷰어 iframe 생성
    return '<iframe src="' . $url . '" style="width:' . $width . '; height:' . $height . ';" frameborder="0" allowfullscreen></iframe>';
}
add_shortcode('pdf', 'pdf_function');

次に、pdfを表示する場所に次のショートコードを入力します。

[pdf width="520px" height="700px"]http://static.fsf.org/common/what-is-fs-new.pdf[/pdf]

幅と高さは適切に指定し、PDFパスもそのPDFファイルのパスに変更してください。同様に、パターンにして再利用できます。

上記のコードは十分にテストされていませんが、うまく動作します。

参照

• Diviスターターサイト：事前に作成されたサイトテンプレートを読み込む
• WordPress Googleマップレスポンシブに入れる方法
• WordPress：モバイルデバイスでYouTubeの動画をトリミングせずにレスポンシブとして表示する