WordPressにダウンロード機能を追加するプラグイン「Download Monitor」を使って、表示を自分好みにカスタマイズしたショートコードを作ったので紹介します。
はじめに
作成に至った背景
ダウンロードページを作成するためにプラグインの導入を考えたのですが、Cocoonは「Download Manager」との相性が悪いという先達の記事を拝見したので、「Download Monitor」プラグインを使ってみることにしました。
しかし、Download Monitorにデフォルトで用意されているdownloadショートコードでは簡素な表示しかできず、所望の表示ができなかったので、なんとかできないか画策してみました。
なお、自分の所望の表示は以下の通り。
- サムネイル（小さめの画像）を表示したい。
- 表示する情報（ファイル名など）、配置、スタイルなどをある程度アレンジしたい。
- ダウンロード対象の複数のファイルをリストっぽく表示したい。
以降の検証での前提
- あらかじめ、Download Monitorの機能を使って、ダウンロード対象のファイルをアップロードし、タイトルやアイキャッチ画像などの設定をしておく。
- 以下の検証において、「ショートコードのidで指定している数字」は、あらかじめアップロードしておいた（いずれかの）ダウンロードファイルのID。
Download Monitorのショートコードの仕様
downloadショートコードの限界を感じた時（後述）にはじめて調べたのですが、Download Monitor 4.5.5（本記事の最初の執筆時点の最新版）では、他に以下の5つのショートコードが存在します（下記公式サイトより）。
なお、4.9.14（2024/6/6最新版）でも5つのままのようです。
- download
- downloads
- download_data
- total_downloads
- total_files
【検証1】downloadショートコードを利用
【検証1-1】まずは使ってみる（「ボックス」を使用）
まずは、最も多くの利用者が最初に使ってみるであろうdownloadショートコードでどんなことができるのかということを検証してみます。
自身の要件である画像が表示されるテンプレートは、デフォルトで用意されているテンプレートのうち「ボックス」しかないようです。
ということで、
- 「ボックス」を指定
- Download Monitorの「設定＞デフォルトテンプレート」で設定
- WordPressのエディタにて次のように記述
[download id="3014"]すると、以下のようになります。
自分の感覚としては、画像やボックスのサイズが大きすぎるため、複数のファイルのダウンロードリンクを連続して配置したい場合にとても見づらくなってしまう。
なお、実際には、このページでは、
[download id="3014" template="box"]というようにテンプレートを指定して表示しています（筆者が本Webサイトにおいてテンプレートの設定を変えてしまうと本記事の内容の辻褄が合わなくなるため）。
言い換えれば、設定でテンプレートを指定しなくても（設定とは違うテンプレートを指定したい場合には）、ショートコードにtemplate引数を追加するとショートコードごとにテンプレートを指定できます。
【検証1-2】カスタムテンプレートを使ってみる
次に、標準機能に備わっている「カスタムテンプレート」の機能を使ってみます。
あらかじめ、WordPressの
というファイルを作成しておき（同フォルダに標準で用意されているテンプレートが格納されています）、所望のコードを書いておきます。
そして、
- Download Monitorの「設定＞デフォルトテンプレート」で「カスタムテンプレート」を指定
- カスタムテンプレートに名称（この場合「hoge」）を指定
を行うと、所望の記述を出力するdownloadショートコードが利用できるようになります。
【考察】気付きと実装方針の決定
以上のことを検証し、ある程度の仕組みが理解できたので、PHPを勉強しながらカスタムテンプレートをコーディングしはじめました。そこで、以下のことに気付きました。
- 自分の所望の出力を得るには自作でショートコードを生成したほうがよさそう。
- Download MonitorやWordPress？で定義されている関数をコールすると、今後これらのアップデートで動かなくなる危険性があるかも。
この気付きを踏まえ、以下の方針に落ち着きました。
- Code Snippetsプラグインを利用して新規にショートコードを実装
- 実装操作やコード管理が簡潔。テーマのアップデートに非依存。
- functions.phpなどに記述しても可。
- 落ち着いたら自分もfunctions.php？などに移動したいかも。
- PHP上でDownload Monitorで定義されているショートコードを呼び出し、PHPの基本機能のみを組み合わせて実装（詳細は後述）
- Download MonitorやWordPressの関数をコールするようなコードは書かない。
【余談】ペアで使うタイプの記述
カスタムテンプレートの作成にトライしている際に、Download Monitor既存のPHPコードを読んでいると、どうやら以下のような開始タグ？と終了タグ？をペアで使うタイプも利用できそうだと気付いたので、（PHPをあんまり理解せずに）
[download id="3014"]ほげ［/download］のような記述をしてみるとうまくいきました。
しかし、このペアの記述を1つの使い（単一のペアのみを使い）、かつ、他にdownloadショートコードを使用しない場合はうまく表示できるのですが、例えば、
[download id="1"]
[download id="2"]ほげ［/download］のような順序で、単独のタイプとペアのタイプのdownloadショートコードを使用していると、自身の環境の問題なのか、この場合では[download id="1"]と［/download］がカップリングされてしまい、記事全体の表示がおかしくなってしまいました（最初の執筆時の課題であり、その後解析できていません）。
この問題を解決できなかったので、便宜上、この記事内の［/download］の箇所には全角（2バイトコード）の”［］”を使用しています。
WordPressやPHPをもうちょっと深く勉強する必要がありそうです。
【検証2】download_dataショートコードを利用
downloadショートコードの限界を感じたので、上述の通り、所望の表示をするために、他のショートコードを調べました。すると、download_dataというショートコードが、画像のURLやファイル名のテキストなどを要素ごとに出力できる仕様であることがわかったので、このショートコードを組み合わせて実装してみることを考えました。
あくまで推測ですが、Download Monitorプラグインの作者は、表示を自由にカスタマイズしたい人のために、このdownload_dataショートコードを用意してくださったのではと思いました。
【検証2-1】まずは使ってみる
以下、download_dataショートコードを使用し、引数dataに各要素（一部です、全要素は公式サイト参照）を指定した場合の、WordPressのエディタへの記述内容と表示結果です。
[download_data id="3014" data="thumbnail"]
[download_data id="3014" data="title"]
[download_data id="3014" data="filename"]
[download_data id="3014" data="filesize"]
[download_data id="3014" data="download_link"]
WordPressにURLと判断させるため、ここではブログカードとして表示されているかと思いますが、実際にはこのショートコードは単にダウンロード用リンクのURLを出力（URLに変換）しています。
[download_data id="3014" data="thumbnail" data="download_link"]これは、dataにthumbnailとdownload_linkを続けて指定した場合です。後者のみが有効になりました。
【検証2-2】サムネイルのサイズ変更してみる（成功）
例えば、カスタムCSSなどで
#foo {
width: 50px;
}
.bar {
width: 50px;
}
.baz img {
width: 50px;
}と記述して、WordPressのエディタにて次のようにdownload_dataショートコードを書くと、いずれもサムネイルのサイズ変更ができています。
<div id="foo">
[download_data id="3014" data="thumbnail"]
</div>
<div class="bar">
[download_data id="3014" data="thumbnail"]
</div>
<div class="baz">
[download_data id="3014" data="thumbnail"]
</div>
【検証2-3】サムネイルにハイパーリンクを張ってみる（失敗）
WordPressのエディタにて以下みたいな記述してサムネイルにダウンロード用URLでハイパーリンクを張りたかったけどできませんでした。
aタグのhrefのダブルクォーテーションのスコープ中に別のダブルクォーテーションを入れることができないせいだと思います。
<a href="[download_data id="3014" data="download_link"]">[download_data id="3014" data="thumbnail"]</a>執筆当初はできた気がしてたのですが、うまくいってなかったみたいです。
うまくいかんのは、後で考えるとHTMLの文法的にはとても初歩的で当然な気がします。ショートコードの仕組みがC言語のプリプロセッサみたいに最初に展開したりしてくれるとかなってないかなと楽観視をしていましたが、そんなことはなかったです。インタプリタで処理するからそらそうかみたいなもんでしょうか。このへんの仕組みをいずれちゃんと勉強したいです。
【検証2-4】表形式で表示してみる（失敗）
WordPressのエディタにて以下みたいな記述して、
<table>
<tr>
<th>thumbnail</th>
<th>title</th>
<th>filename</th>
<th>filesize</th>
<th>short_description</th>
</tr>
<tr>
<td><a href="[download_data id="3014" data="download_link"]">[download_data id="3014" data="thumbnail"]</a></td>
<td>[download_data id="3014" data="title"]</td>
<td><a href="[download_data id="3014" data="download_link"]">[download_data id="3014" data="filename"]</a></td>
<td>[download_data id="3014" data="filesize"]</td>
<td>[download_data id="3014" data="short_description"]</td>
</tr>
</table>↓みたいな感じの表形式にしたかったけど、【検証2-3】で紹介した通りサムネイルにハイパーリンクを張れないので同様に実現できませんでした。
| thumbnail | title | filename | filesize | short_description |
|---|---|---|---|---|
|
Oregano | oregano_sample.png | 412.29 KB | オレガノ |
これも執筆当初はできた気がしてたのですが、同じくうまくいってませんでした。
【検証2-5】ショートコード化してみる（成功）
【検証2-3】でやりたかったことをPHPにてショートコード化してみました。
今回はCode Snippetsプラグインにて、sample_dl_thumbnailというショートコードを作成しました。
<?php
function func_sample_dl_thumbnail($atts)
{
extract(shortcode_atts(array(
'id' => '',
), $atts));
$sc = '[download_data id="' . $id . '" data="download_link"]';
$download_link = do_shortcode($sc);
$sc = '[download_data id="' . $id . '" data="thumbnail"]';
$thumbnail = do_shortcode($sc);
$ret = '<a href="' . $download_link . '">' . $thumbnail . '</a>';
return $ret;
}
add_shortcode('sample_dl_thumbnail', 'func_sample_dl_thumbnail');WordPressのエディタにて以下を記述すると、サムネイルにダウンロード用URLでハイパーリンクが張れました。
[sample_dl_thumbnail id="3014"]
↑ハイパーリンク付きになっている。
【結論】複数id対応のショートコードを作成
自身の所望に近く簡単にできる表示はこんなところかなと思うショートコード「sample_dl_table」を考えてみました。
Code Snippetsプラグインにて、ショートコードを実現するPHPコード（後述）を実装しました。
WordPressのエディタへの記述内容と表示結果
WordPressのエディタに以下のように記述し、
[sample_dl_table ids="3014,3028,3030"]プレビューなどでWebブラウズすると、
| thumbnail | title | filename | filesize | short_description |
|---|---|---|---|---|
| Oregano | oregano_sample.png | 412.29 KB | オレガノ |
 | Lemon marmalade | marmalade_sample.png | 425.17 KB | レモンマーマレード |
 | Microboard | microboard_sample.png | 387.95 KB | 小型のマイコンボード |
のような感じに表示されます。
なお、今回作成のものは、
引数「tblwrapid=”xxx”」で<table>を <div id="xxx">と</div> で囲むのと、
引数「tblclass=”yyy”」で<table>タグに class="yyy" を追加する機能も付けているので、CSSで、#xxxと.yyyを定義して表のスタイルをカスタマイズすることができます（詳細は後述のコード参照）。
作成したPHPコード
上述のsample_dl_tableショートコードに関するPHPコードです。PHPの理解がまだあやしいので、記述が冗長かもしれません。
ここまでやってみた結果、いずれはdo_shortcode()を使わずに実装してみたいなと思いました。
<?php
function func_sample_dl_table($atts)
{
extract(shortcode_atts(array(
'ids' => '',
'tblwrapid' => '',
'tblclass' => ''
), $atts));
// Check ids and extract id
if(empty($ids)){
return '';
}
$ids_array = explode(",", $ids);
// Initialize download data specifications
// disp: Enable/Disable to display download data for key.
// href: Enable/Disable to add hiperlink.
$spec_array['thumbnail'] = array('disp' => true, 'href' => true);
$spec_array['title'] = array('disp' => true, 'href' => false);
$spec_array['filename'] = array('disp' => true, 'href' => true);
$spec_array['filetype'] = array('disp' => false, 'href' => false);
$spec_array['filesize'] = array('disp' => true, 'href' => false);
$spec_array['download_link'] = array('disp' => false, 'href' => false);
$spec_array['download_count'] = array('disp' => false, 'href' => false);
$spec_array['short_description'] = array('disp' => true, 'href' => false);
$spec_array['post_content'] = array('disp' => false, 'href' => false);
// Create thead
$tr_out = '';
foreach($spec_array as $key => $spec){
if(true === $spec['disp']){
$tr_out .= '<th>' . $key . '</th>';
}
}
if('' === $tr_out){
return '';
}
$tr_out = '<tr>' . $tr_out . '</tr>';
$thead_out = '<thead>' . $tr_out . '</thead>';
// Create tbody
$tbody_out = '';
foreach($ids_array as $id){
$tr_out = '';
foreach($spec_array as $key => $spec){
if(true === $spec['disp']){
$td_out = '';
$sc = '[download_data id="' . $id . '" data="' . $key . '"]';
$str_key = do_shortcode($sc);
if(true === $spec['href']){
$sc = '[download_data id="' . $id . '" data="download_link"]';
$str_download_link = do_shortcode($sc);
$td_out .= '<a href="' . $str_download_link . '">' . $str_key .
'</a>';
}
else{
$td_out .= $str_key;
}
$tr_out .= '<td>' . $td_out . '</td>';
}
}
$tbody_out .= '<tr>' . $tr_out . '</tr>';
}
$tbody_out = '<tbody>' . $tbody_out . '</tbody>';
// Create output string
$out = '';
$out .= $thead_out . $tbody_out;
if($tblclass){
$class_out = ' class="' . $tblclass . '"';
}
else{
$class_out = '';
}
$out = '<table' . $class_out . '>' . $out . '</table>';
if($tblwrapid){
$out = '<div id="' . $tblwrapid . '">' . $out . '</div>';
}
return $out;
}
add_shortcode('sample_dl_table', 'func_sample_dl_table');
