気が付いたら「業務的にWordpressを使うには？」という投稿が多くなってきているような当ブログです。

自分の備忘録的に書いているところもあるので、お付き合い頂ければと思います。

前回の記事では、クエリで指定した投稿に保存されたカスタムフィールドの値をループで呼び出して、集計する。ということを書きました。

文章にした途端に難しく感じますが笑

なんでそんな事をしたかというと、その先に「印刷」という手順があったので。

ページ上で表を作る必要があったのです。今はPDF化できる方が良いですね。

表の内容自体は前回の記事の内容を活かせば自動で作成できるので、HTML/CSSで見た目を整えれば、そのまま何かしらの帳票として使うことができます。

ここら辺のモノとして有名なのは、TCPDFとFPDIを組み合わせた方法のようですね。

ですが、帳票の内容が投稿数によって変動するので、決め打ちはやりにくいです。

と言うよりも、機能的には簡易的なものを想定していたので、ちょっと重たいというのもあります(作業内容的に)。

よくよく考えてみると、ブラウザから印刷でPDF保存できたなと。

簡易的なものであれば、それを利用すれば十分だと思います。

ブラウザで表示されているものに対して、印刷というアクションを起こすので。

javascriptを利用します。

ざっくりと、HTMLでボタンを用意して押されたら印刷ダイアログが開く、という動作です。

WordPressには標準でJQueryが搭載されているので、そちらを利用します。

画面の印刷と考えた場合、WEBページでは必要だけど印刷するのには不要な要素がいくつかあります。

たとえば、ヘッダーやフッター、パンくずリストなどもそうでしょうか。

まずは非表示する要素を指定します。

そして、ボタンを押された時に、指定した要素を非表示にした状態で、window.print()で印刷ダイアログを開く。

という内容となっています。

PDF化する画面のデザインを調整するのにCSSを利用します。

印刷するサイズに合わせてフォントサイズを変更したい場合もあるので、別のCSSを用意しておきます。

ちなみに、こちらでもdisplay:noneを使って非表示の設定は可能です。

非表示についてはJSに任せてしまっているので、後で調整するために用意だけしました。

@media printで内容を定義していきます。

作成したJSファイルとCSSファイルをワードプレスで読み込めるようにすれば、ブラウザの印刷ダイアログを使用したPDF化ができるようになります。

テンプレートファイルに<link>で直接読み込んでも良いですが、推奨されているfunctions.phpでの読み込みを行います。

子テーマの作成時にも行った方法です。

ただ、その時と違って入力しているパラメータが増えてます。

まずは、CSSファイルを読み込むwp_enqueue_style()の第5引数でprintを指定しています。これでHTML上に呼び出された場合、メディアクエリがprintと指定されます。

CSSファイル内で指定しているので、不要といえば不要なんですが。

JSファイルの読み込みを行うwp_enqueue_script()では、JQueryを使用するので第3引数で指定します。

これにより、このJSファイルの読み込み順がJQueryが読み込まれた後となるので、JQueryの機能を使うことができます。

印刷すること自体はだいぶ減ってきましたが。

PDF化の需要はあるかなと思います。

サービスによっては導入を考えてみるのも良いかもですね。