【WordPress】Download Monitorの表示を好みのスタイルに！

WordPress
Source: Download Monitor – WordPress plugin - WordPress.org
2022.03.09

WordPressにダウンロード機能を追加するプラグイン「Download Monitor」プラグインを使って、表示を自分好みにカスタマイズしたショートコードを作ったので紹介します。

「結論だけ知りたい」という人は、ここにジャンプしてください！

 

はじめに

作成に至った背景

ダウンロードページを作成するためにプラグインの導入を考えたのですが、Cocoonは「Download Manager」との相性が悪いという先達の記事を拝見したので、「Download Monitor」プラグインを使ってみることにしました。

しかし、Download Monitorにデフォルトで用意されているショートコードでは簡素な表示しかできず、所望の表示ができなかったので、なんとかできないか画策してみました。

なお、自分の所望の表示は以下の通り。

  • サムネイル（小さめの画像）を表示したい。
  • 表示する情報（ファイル名など）、配置、スタイルなどをある程度アレンジしたい。
  • ダウンロード対象の複数のファイルをリストっぽく表示したい。

 

【WordPress】Download Monitor　記事内にダウンロードリンクを作成するプラグイン
こんにちは。 今回は記事内にダウンロードリンクを作成するプラグインDownload Monitorを紹介したいと思います...
opty-life.com
Download Monitor
Download Monitor is a plugin for uploading and managing down...
ja.wordpress.org

 

以降の検証での前提

  • あらかじめ、Download Monitorの機能を使って、ダウンロード対象のファイルをアップロードし、タイトルやアイキャッチ画像などの設定をしておく。
  • 以下の検証において、「ショートコードのidで指定している数字」は、あらかじめアップロードしておいた（いずれかの）ダウンロードファイルのID。

 

Download Monitorのショートコードの仕様

恥ずかしながら、downloadショートコードの限界を感じた時（後述）にはじめて調べたのですが、本記事の執筆時点の最新版Download Monitor 4.5.5では、以下の5つのショートコードが存在します（下記公式サイトより）。

  • download
  • downloads
  • download_data
  • total_downloads
  • total_files

 

Shortcodes Archives
download-monitor.com

 

【検証1】downloadショートコード

【検証1-1】まずは使ってみる（「ボックス」を使用）

まずは、最も多くの利用者が利用しているであろうdownloadショートコードでどんなことができるのかということを検証。

自身の要件である画像が表示されるテンプレートは、デフォルトで用意されているテンプレートのうち「ボックス」しかないようです。ということで、「ボックス」を指定（Download Monitorの「設定＞デフォルトテンプレート」で設定）し、WordPressのエディタにて、

[download id="3014"]

を記述すると、以下のようになります。自分の感覚としては、画像やボックスのサイズが大きすぎるため、複数のファイルのダウンロードリンクを連続して配置したい場合にとても見づらくなってしまう。

なお、実際には、このページでは、

[download id="3014" template="box"]

というようにテンプレートを指定して表示しています（筆者がテンプレートの設定を変えてしまうと本記事の内容の辻褄が合わなくなるため）。言い換えれば、設定でテンプレートを指定しなくても（設定とは違うテンプレートを指定したい場合には）、ショートコードにtemplate引数を追加すると都度テンプレートを指定できます。

 

【検証1-2】カスタムテンプレートを使ってみる

次に、標準機能に備わっている「カスタムテンプレート」の機能を使ってみます。

あらかじめ、WordPressの

wp-content/plugins/download-monitor/templates/content-download-hoge.php

というファイルを作成しておき（同フォルダに標準で用意されているテンプレートが格納されています）、所望のコードを書いておきます。
そして、上述の「設定＞デフォルトテンプレート」で「カスタムテンプレート」を指定＆カスタムテンプレートに名称（この場合「hoge」）を指定すると、所望の記述を出力するdownloadショートコードが利用できるようになります。

ということが理解できたので、PHPを勉強しながら、カスタムテンプレートをコーディングしはじめたのですが、以下に気付きました。

  • 自分の所望の出力を得るにはもやは新規でショートコードを生成したほうが早い。
  • Download MonitorやWordPress？で定義されている関数をコールするので、これらのアップデートで動かなくなる危険性があるかも。

 

【考察】実装方針の決定

上述の気付きを踏まえ、以下の方針に落ち着きました。

  • Code Snippetsプラグインを利用して新規にショートコードを実装
    • 実装操作やコード管理が簡潔。テーマのアップデートに非依存。
    • 落ち着いたらfunctions.php？などに移動したい。
  • PHP上でDownload Monitorで定義されているショートコードを呼び出し、PHPの基本機能のみを組み合わせて実装（詳細は後述）
    • Download MonitorやWordPressの関数をコールするようなコードは書かない。

 

Code Snippets
An easy, clean and simple way to enhance your site with code...
ja.wordpress.org

 

【余談】ペアで使うタイプの記述

カスタムテンプレートの作成にトライしている際に、Download Monitor既存のPHPコードを読んでいると、どうやら以下のようなペアで使うタイプも利用できそうだと気付いたので、（PHPをあんまり理解せずに）

[download id="3014"]ほげ［/download］

のような記述をしてみるとうまくいきました。

しかし、この記述以外downloadショートコードを使用しない場合はうまく表示できるのですが、例えば、

[download id="1"]
[download id="2"]ほげ［/download］

のような順序で、単独のタイプとペアのタイプのdownloadショートコードを使用していると、自身の環境の問題なのか、この場合では[download id="1"]と［/download］がカップリングされてしまい、記事全体の表示がおかしくなってしまいました。

この問題を解決できなかったので、便宜上、この記事内の［/download］の箇所には全角の”［］”を使用しています。
WordPressやPHPをもうちょっと深く勉強する必要がありそうです。

 

【検証2】download_dataショートコードを利用

downloadショートコードの限界を感じたので、上述の通り、所望の表示をするために、他のショートコードを調べました。すると、download_dataというショートコードが、画像のURLやファイル名のテキストなどを要素ごとに出力できる仕様であることがわかったので、このショートコードを組み合わせて実装してみることを考えました。

あくまで推測ですが、Download Monitorプラグインの作者は、表示を自由にカスタマイズしたい人のために、このdownload_dataショートコードを用意してくださったのではと思いました。

 

Shortcode: download_data
With the download_data shortcode you can display specific do...
download-monitor.com

 

【検証2-1】まずは使ってみる

以下、download_dataショートコードを使用し、引数dataに各要素（一部です、全要素は公式サイト参照）を指定した場合の、WordPressのエディタへの記述内容と表示結果です。

[download_data id="3014" data="thumbnail"]

 

[download_data id="3014" data="title"]
Oregano

 

[download_data id="3014" data="filename"]
oregano_sample.png

 

[download_data id="3014" data="filesize"]
412.29 KB

 

[download_data id="3014" data="download_link"]
https://lovagelab.com/archives/3014/?tmstv=1714661596
lovagelab.com

WordPressにURLと判断させるため、ここではブログカードとして表示されているかと思いますが、実際には単にダウンロード用リンクのURLが出力（URLに変換）されています。

 

[download_data id="3014" data="thumbnail" data="download_link"]
https://lovagelab.com/archives/3014/?tmstv=1714661596
lovagelab.com

これは、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="[download_data id="3014" data="download_link"]">[download_data id="3014" data="thumbnail"]</a>


↑ハイパーリンク付きになっている。

 

【検証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>
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対応のショートコードを作成

自身の所望に近く簡単にできる表示はこんなところかなと思うコードを考えてみました。

Code Snippetsプラグインにて、sample_dl_tableというショートコードを作成（コードは後述）。WordPressのエディタにて以下のように記述するとこんな感じに表示されます。

[sample_dl_table ids="3014,3028,3030"]
thumbnailtitlefilenamefilesizeshort_description
Oreganooregano_sample.png412.29 KB

オレガノ

Lemon marmalademarmalade_sample.png425.17 KB

レモンマーマレード

Microboardmicroboard_sample.png387.95 KB

小型のマイコンボード

なお、今回作成のものは、
引数「tblwrapid=”xxx”」で<table>を <div id="xxx">と</div> で囲むのと、
引数「tblclass=”yyy”」で<table>タグに class="yyy" を追加する機能も付けているので、CSSで、#xxxと.yyyを定義して表のスタイルをカスタマイズすることができます。

 

作成したsample_dl_tableショートコード

上述のdownload_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
    $sc = '[download_data id="' . $id . '" data="download_link"]';
    $download_link = do_shortcode($sc);

    $tbody_out = '';
    foreach($ids_array as $id){
        $tr_out = '';
        foreach($spec_array as $key => $spec){
            if(true === $spec['disp']){
                $sc = '[download_data id="' . $id . '" data="' . $key . '"]';
                $td_out = do_shortcode($sc);
                if(true === $spec['href']){
                    $td_out = '<a href="' . $download_link . '">' . $td_out .
                            '</a>';
                }
                $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');

 

タイトルとURLをコピーしました