WordPressで投稿ごとの印刷用ページを生成する手順(印刷ページテンプレートの作成例)

WordPressで商品紹介サイトを構築して、1つの投稿(カスタム投稿でも可)が1つの商品紹介ページになる、というような設計になることってよくありますよね?
で、「お客さんや営業マン用に、各商品ごとに印刷用ページを生成したい」っていわれることもあったりしますよね?

WordPressで印刷用ページを生成するためのプラグインってあるんですが、どうしても簡易的なものなので、クライアントさんの思うような印刷用ページになるとは限りません。
そこで今回は、プラグインではなく自力で各投稿ごとの印刷用ページを自動生成する機能をできるだけ簡単な方法で実装してみたいと思います。

前提

  • 記事執筆時のWordPressのバージョンは4.5.3
  • 製品紹介用のカスタム投稿タイプ products を作成していると想定
  • 製品紹介サイトとかなので、細かいスペックをカスタムフィールドで登録・出力しているかもしれないがそのケースもOK

手順1. 印刷用ビューのベースをHTMLとCSSでコーディングする

これは各自がんばってください。みなさんのセンスが問われます。
多分ですが、できるだけA4サイズ1枚に収めてほしいとか要望あると思います。
pxではなくmm単位で調整するとかいろいろコツはあると思うんですが、そこは今回本題じゃないので各自のポテンシャルを発揮してがんばってください。

参考

手順2. 投稿詳細ページに印刷用画面へのリンクボタンを設置する

カスタム投稿タイプの投稿詳細テンプレートであるsingle-products.phpの任意の場所に、「印刷用画面を開く」というような文言のボタンを設置します。(通常の投稿ならsingle.phpに)
ここでのポイントは、リンク先を

<a href="<?php echo esc_url( home_url( '/print/' ) ); ?>?post_id=<?php the_ID(); ?>" target="_blank">印刷用画面を開く</a>

こんな感じに設定すること。
この次の手順で/print/ という印刷用の固定ページを作るんですが、そのあとにURLパラメータで投稿IDを渡してあげるのがミソです。

手順3. 印刷画面用の固定ページを作成

印刷用画面のベースとなる固定ページを作成します。
スラッグは何でもよいですが、ここでは’print’にします。コンテンツは空で構いません。

手順4. 印刷画面用の固定ページテンプレートを作成

WordPressテーマ内にpage-print.phpというPHPファイルを新たに作成します。
このファイル名にすることで、固定ページ’print’には、自動的にpage-print.phpが適用されます。

PHPファイルの中身ですが、まず 手順1で作成したベースのHTMLの中身をそのままコピーしてください。

私の場合は、header.phpやfooter.phpもインクルードせず、印刷ページ上で動かしたいプラグインも特になかったのでwp_head関数やwp_footer関数も省略しました。
CSSやJSもenqueueせずに普通にhead内に書きました。
あと、印刷用画面に直接流入いらないのでnoindexも付けてます。

現時点でのpage-print.phpはこんな感じです。

手順5. URLパラメータ内の投稿IDから印刷したいコンテンツを取得

page-print.phpの<body>の下に以下の記述を入れます。

<?php
    parse_str( $_SERVER['QUERY_STRING'] );
    if ( isset($post_id) ):
    $data = get_posts( array (
            'post_type'     =>  'products',
            'post_per_page' =>  1,
            'p'             =>  $post_id
        ));
    foreach($data as $post):
    setup_postdata($post);
?>

で、</body>の前には

  <?php endforeach; wp_reset_postdata(); ?>
<?php else: ?>
  <p>このページにはなにもないよ!</p>
<?php endif; ?>

こんな感じです。
最大のポイントは

parse_str( $_SERVER['QUERY_STRING'] );

の部分です。
parse_strというのはPHPの関数で、URLパラメータの部分を自動的に変数にセットしてくれます。

参考

また、$_SERVER['QUERY_STRING'] は、アクセスしているページのURLパラメータの部分を取得できるスーパーグローバル変数です。

今回の例であれば、手順2で設置したリンクボタンのリンク先URLはこんな感じになると思います。
http://example.com/print/?post_id=12

このページで
parse_str( $_SERVER['QUERY_STRING'] );
を使うと、URLパラメータ部分「?post_id=12」の部分をもとに

$post_id = 12;

という変数への値代入を勝手にやってくれます。
そして、指定した条件に合う投稿を取得できるget_posts関数で、投稿IDから投稿を取得できるパラメータ’p’に、印刷させたい投稿のIDを渡しています。

そのあとは、いつものget_postsの使い方と一緒です。

<?php
    foreach($data as $post):
    setup_postdata($post);
?>

<?php
  endforeach;
  wp_reset_postdata();
?>

の間を、表示させたいコンテンツを取得するためのテンプレートタグに置き換えていけばOKです。

page-print.php作成イメージ

パラメータなしのhttp://example.com/print/に直接アクセスされたときなどには「このページにはなにもないよ!」って一文がでるようにしてありますが、もっと厳密にやるなら、該当する投稿がないときは404ステータスを返すようにしてもよいと思います。

parse_strを使えば、URLパラメータで投稿IDとかいろんな値を渡してあげることでいろんな処理ができますね。
他にも工夫次第で便利に使えると思います。思いついたら実際に作ってブログで紹介してください!

コメントをどうぞ

メールアドレス (必須・公開されません)
コメント本文

  • スパム・迷惑コメント投稿防止のため、メールアドレスの入力が必須ですが、公開はされません。何卒ご協力のほどお願いいたします。
  • 投稿いただいたコメントは管理者のチェック後掲載しておりますので、即時には反映されません。
  • 記載内容に関する批判や間違いの指摘などはそのまま掲載する方針ですが、投稿内容と無関係な誹謗中傷、一方的な罵詈雑言の場合は削除させていただく可能性があります。
  • 通常業務の合間にコメントチェックをしておりますので、すべてのコメントへのお返事が出来ない場合もございます。あらかじめご了承ください。
  • 管理人個人への連絡等は、コメント欄ではなくコンタクトフォームをご利用ください。

書籍を執筆しました

WordPress 標準デザイン講座【Version 4.x対応】


翔泳社さんより、2015/02/27発売しました。2年経ちますのでもう賞味期限切れだとは思いますが、一応実績として...

寄付歓迎(・ω<)☆

当ブログの記事があなたの役に立ったら、気が向いたらでいいのでドネーションいただけると更新の励みになります!
気が向いた方はこちらから

ブログ内検索