MENTAやTimeTicketでZoomオンライン指導・メンタリングを行っています。
WordPressやHTMLサイトのトラブル、SEO対策のご相談、HTML・CSS・WordPressなどのレクチャーなどが可能です。

TimesTicketでZoomオンライン指導！(HTML/CSS/WordPress/SEO対策)

【RAT 様】WordPressで画像配布（ストックフォト画像ダウンロード）サイト作成について

投稿日2018-12-282018-12-28投稿者root-0132件のコメント

WordPressでストックフォトサイト（画像配布・画像ダウンロードが可能なサイト）制作についてご相談を頂きました。

画像配布サイト作成について

サイト拝見させていただいております。
タイトルの通り、画像（素材）配布サイトを作ろうと思っているものです。
そこで質問なのですが、デフォルトですと「投稿」ー「メディア追加」ー「サイズ」から添付画像のような選択肢が出ると思います。

この選択肢を訪問者に表示させ、訪問者が任意のサイズを選べるような方法はご存知ではないでしょうか？※お解りかと思いますが投稿画面で単に複数サイズをアップするのではなく、あくまで訪問者がこの選択肢を見れて、選べるという意味です。

プラグインもしくはテーマに備え付けの機能などがあればベストなのですが。
デフォルトのままメディアをアップすると画像の場合複数のサイズが自動生成されます。『サーバー負荷対策として生成されないようにする。』なるものはいくらでも出てくるのですが、逆にその複数サイズを訪問者が選べるようにする方法がどうしてもわからなく困っております。
ご指導いただければ幸いです。
宜しくおねがいします。

>RAT さま
ご相談ありがとうございます！

ちょっと僕も興味があり、プラグインなどを探してみて遅くなってしまいました。申し訳ありません。
サイトも見て頂いているということで嬉しいです！

プラグインを使う方法

さて、まずはプラグインを使う方法についてです。

現在どのような探し方をしているかは分かりませんが、メディアの機能を起点に探しても要望の機能は探しづらいかもしれませんね。

「WordPress 画像ダウンロード」
「WordPress ストックフォト」
「WordPress ポートフォリオサイト」
+プラグインのような形で探すとかなり近いものが出てくると思います。

Sell Media プラグイン

中でも「Sell Media プラグイン」はかなり希望の機能に近かったです。
Sell Media
https://ja.wordpress.org/plugins/sell-media/

このプラグインは名前の通り画像などのメディアを販売できる機能を備えており、投稿とは別にSell Mediaメニューから画像をアップし、設定していきます。

難点としては、販売前提なので価格を0にしても0$のように表示されてしまう点でしょうか。
これらが設定でどうにかできるかは未検証なのでわかりません。また、小中大メディアと連携できるかどうかも試してみないと分からないかもしれません（それぞれアップする必要もある？？）

こういったフル機能プラグインは機能が豊富な分カスタマイズが大変なのと、余分な機能をカットしたいときに逆に手間が大きいといったデメリットもあります。

もし販売も視野に入れているのであれば一考の価値がありそうです。

このプラグインについては photo-forum.jp 内作家直販サイトの構築・顛末記でかなり詳しく解説されていたので見てみてください。
作家直販サイトの構築・顛末記（1）

ダウンロード系プラグイン

WordPressにはダウンロード系のプラグインが豊富にあります。

当サイトでも以前紹介しましたが、DownloadManagerは機能更新が多すぎて追い切れていません汗
Download Manager
※メディアのサイズを選ぶことはできません。（URL入力ならいけそう）

以下のようなプラグインもあります。

Download Monitor
https://ja.wordpress.org/plugins/download-monitor/
メディアのサイズ選択も可能でしたが、1投稿1ファイルのようです

それぞれのダウンロードボタンを作る事はできますが、セレクトボックスで切り替えとなるとまた難しいかもしれませんね。

他、プラグインのメリットとしてはダウンロード数などのカウントを自動で備えている点があります。

PHP 自力で作る場合

こちらは細かく検証したわけではありませんので参考までに。

・アイキャッチ画像はサイズ指定して表示できるのでそこをうまく使えないか
・「添付ファイルのページ」を拡張してうまく使えないか
をちょっとだけリサーチしてみました。

アイキャッチ画像を全サイズ表示

WordPressにはアイキャッチ画像を取得して表示する関数があり、しかもサイズを指定できます。

1.投稿にアイキャッチを設定する
2.その投稿のアイキャッチ画像の全サイズへのリンクを作成する
3.それらのリンクを選択できるようにする
という流れで投稿内にサムネイス・中・大・フルサイズのリンクを自動で表示するようにできるかもしれません。
さらに詳しくリサーチしていけばセレクトボックスに絡めることもできる？？

とてもみせられたソースではありませんが、
アイキャッチ画像を表示する「get_the_post_thumbnail」
アイキャッチ画像のURLを取得する「the_post_thumbnail_url」
を使えば投稿記事内に全サイズ・全ファイルリンク付きで表示できました。（投稿ページの中で確認）
WordPress コーデックス get_the_post_thumbnail

<?php if ( has_post_thumbnail( $thumbnail->ID ) ) { ?>
  <a href="<?php the_post_thumbnail_url( 'thumbnail' ); ?>">
    <?php echo get_the_post_thumbnail( $thumbnail->ID, 'thumbnail' ); ?>
  </a><br>

  <a href="<?php the_post_thumbnail_url( 'medium' ); ?>">
    <?php echo get_the_post_thumbnail( $thumbnail->ID, 'medium' ); ?>
  </a><br>

  <a href="<?php the_post_thumbnail_url( 'large' ); ?>">
    <?php echo get_the_post_thumbnail( $thumbnail->ID, 'large' ); ?>
  </a><br>

  <a href="<?php the_post_thumbnail_url( 'full' ); ?>">
    <?php echo get_the_post_thumbnail( $thumbnail->ID, 'full' ); ?>
  </a><br>
<?php } ?>

全ファイルサイズのアイキャッチ画像（画像へのリンク付き）

get_the_post_thumbnailの部分はテキストに置き換えても良いでしょう。

<?php if ( has_post_thumbnail( $thumbnail->ID ) ) { ?>
  <a href="<?php the_post_thumbnail_url( 'thumbnail' ); ?>">
    小画像DL
  </a><br>
  <a href="<?php the_post_thumbnail_url( 'medium' ); ?>">
    中画像DL
  </a><br>
  <a href="<?php the_post_thumbnail_url( 'large' ); ?>">
    大画像DL
  </a><br>
  <a href="<?php the_post_thumbnail_url( 'full' ); ?>">
    フル画像DL
  </a><br>
<?php } ?>

コンパクトに各サイズへの画像リンクを作る事ができます。

あとはHTML5ならdownload=”【ファイル名】”でリンクをクリックした時の動きをダウンロードにすることもできるのですが、各サイズのファイル名を取得するのは骨が折れそうです。「HTML5 ダウンロード属性」で検索すると色々出てきます。

jQueryを使う方法もあるようです。
【コピペでできる】jQueryだけで画像ダウンロードボタンを作る

添付ファイルのページを拡張する方法

管理画面＞メディアでアップロードされた画像には、個別のページが存在します。
「添付ファイルのページを表示」より確認できます。

（image.phpやattachment.phpのテンプレートで表示されます）

Twenty Nineteenのimage.phpでは以下のコードが動き、画像とサイズ（リンク付き）が表示されています。

/* image.php 添付画像表示部分 */
$image_size = apply_filters( 'twentynineteen_attachment_size', 'full' );
echo wp_get_attachment_image( get_the_ID(), $image_size );

これもfull を large medium thumbnail 等に変更可能でした。

ちなみにメディアにアップした画像の一覧表示はそのままではできませんが、方法もあるようです。（ちょっと情報が古そうですが･･･）
WordPressフォーラムメディアライブラリに格納されている全ての画像を取得して表示させたい

これらを利用すれば、メディアに画像をアップしただけでその画像の一覧と詳細ページ＆ダウンロードリンクを作っていくこともできそうかなと思いました。

まとめ

僕も興味が湧いたので色々リサーチしてみましたが、どれも実装に至るまで検証したわけではありませんので悪しからず。

リサーチして思ったのは、
プラグイン系はサイズ別画像を全部管理・アップする必要があるかも
PHP系は制作は大変そうだけどメディアにアップするだけである程度自動で完結できる可能性がある
ということでしょうか。PHPのスキル次第では後者2の方がかなり色々できそうです。

少しでも参考にして頂ければ幸いです。