WordPress でページの印刷時に出力内容やデザインを変更して印刷できるようにするには？

ブラウザで表示しているページを印刷するときに、ページをそのまま印刷すると余計な空白があったり不要な情報が入っていたりすることがあります。必要な情報だけがコンパクトにまとまっている方がユーザーエクスペリエンス的には好ましいと考えられます。

例えば不動産サイト内で物件の詳細ページを思い浮かべてください。最近のサイトでは外観や内部の写真が多数閲覧できたり、LIFULL HOME’S の場合には THETA 360.biz を利用したパノラマ画像を閲覧できたりします。パノラマ画像なんかはブラウザ上で閲覧する際にはとても有用な情報ですが、紙媒体に印刷する際には不要な情報となります。

ここでは WordPress でサイト制作する際に、ページ内に印刷ボタンを用意してそれをクリックすると印刷用のページを表示する方法を紹介します。

考え方としては、GET パラメータで閲覧用のページを表示するか印刷用のページを表示するかを切り分ける、ということをします。まずは印刷ボタンを用意します。投稿を表示するためのテンプレート（ここでは single.php とします）のループ内で次のようなボタンを用意します。

<a href="<?php the_permalink(); ?>?format=print">印刷する

href は投稿のページ自体を指していますが、format という GET パラメータが付与されており、print という値が与えられています。このままでは、このリンクをクリックしても投稿ページが表示されるだけです。次は single.php （投稿を表示するためのテンプレート）で次のような条件分岐を用意します。

<?php

if ( 'print' === ( $_GET['format'] ?? '' ) ) {
    get_header();

    /**
     * ここに印刷用の HTML を記述する.
     */

    get_footer();
    return;
}

/**
 * ここから下は通常の表示用の HTML が続く.
 */
get_header();

URLに ?format=print を含む場合、つまり上記の「印刷する」ボタンをクリックした場合のみ if 文の内部が実行され、if 文の最後で return することで、通常の表示用の HTML が出力されることはありません。

get_header 関数や get_footer 関数は引数をとることができ、例えば get_header( 'print' ) とすると header-print.php を読み込むようになります。つまり header.php や footer.php についても印刷用のものを別途用意して読み込ませることが可能です。