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

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


WordpressのSEO対策ならRoot-013 Root-013ではWordPress・SEO対策・アフィリエイトなどサイト運営に関するご質問に無料でお答えしております。
WordPress 無料相談 アフィリエイト SEO 無料相談 無料!WPインストール代行・集客サポート

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

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

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

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


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

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

プラグインを使う方法

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

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

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

Sell Media プラグイン

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

このプラグインは名前の通り画像などのメディアを販売できる機能を備えており、投稿とは別に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の方がかなり色々できそうです。

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

おすすめコンテンツ

コメントをどうぞ

  1. Root-013さん
    早速の回答、大変参考になりました。ありがとうございます。
    メディアダウンロード系のプラグインは一通り試したのですが、既存の素材とこれからのアップロードのことを考えると全画像全サイズに一つずつダウンロードボタンを設けるのは少し辛いと思いやめてしまいました。いっその事、全ての画像を投稿ページに貼り付けて右クリックさせようかとも考えたのですが流石にセキュリティー上よろしくないのと、バラバラだと綺麗にグリッド表示させるのが困難でこちらもどうかなと思っております。理想は『画像一枚(例としてメインの中サイズ画像)に対してサイズ変更の選択肢、サイズ決定した後にダウンロードボタンをクリックでダウンロード完了』これが出来れば文句ないのですが、なかなか知識が追いつかなくて困っています。(簡単に言えばpixabayのようものを作りたいです。といま気づきました😅)

    販売ベースのプラグインだと例え¥0に設定したとして、写真を選ぶ→個人情報を入力・支払い方法およびカード情報などの入力→やっとダウンロードできる(もしくはメールにて希望の画像が送られてくる)と、ステップが多すぎてユーザー視点で見ても簡単とは言えません。

    PHPをいじって構築していくのは正直知識が少なく自分の希望のものを作り上げるのは難しいです。

    アイキャッチを全表示させるのは盲点でとてもいいなと思いました。ただそちらも選択肢を設ける部分の代わりにはなりますが、当然サイズが違うと表示される画像のサイズもバラバラですので見た目が綺麗ではないと思いました。おそらくダウンロードボタンひとつで複数サイズに対応させることも難しいかなと思っております。

    長文で申し訳ないです。『画像一枚(例としてメインの中サイズ画像)に対してサイズ変更(大、中、小)の選択肢、サイズ決定した後にダウンロードボタンをクリックでダウンロード完了』
             ↑↑↑
    長々とすみませんがこの部分をどうしても実現したいです。いかがでしょう?

    添付画像はwoocommerceですが、この部分のcolorかsizeの部分を大・中・小に変えてadd to cartの部分を直ダウンロードボタンに変えることはRoot-013さんからみて可能そうでしょうか?

    1. >RATさま
      コメントありがとうございます!
      そうですね、素材のサイズ毎にダウンロードプラグインにアップするのは正直しんどいと思います(笑)
      Sell Mediaは価格が0なら、サイズ選択 > ダウンロード のシンプルな流れになったので余分な情報入力は必要ありませんでしたよ。一度使ってみても良いかもしれません。

      アイキャッチや添付ファイルの拡張は意外と良さそうです。
      >当然サイズが違うと表示される画像のサイズもバラバラ
      ということですが、要は1枚見本画像を表示して他はテキストリンクでも良いので、全サイズ画像を表示させなければすっきりは見せられるでしょう。

      『画像一枚(例としてメインの中サイズ画像)に対してサイズ変更(大、中、小)の選択肢、サイズ決定した後にダウンロードボタンをクリックでダウンロード完了』
      という機能について、キモはサイズごとの画像URLが取得できるかどうかですね。

      これが可能なことは分かったのであとは
      1.サイズ選択する
      2.サイズによってダウンロードリンク先画像URLが切り替わる
      3.ダウンロードボタンで選択したリンク先の画像をダウンロード
      ということになります。

      「フォームの選択状態によってボタンの中の画像URLが切り替わる」
      これならJavaScriptやjQueryで充分可能そうかなと思いました。

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

コメントを残す

メールアドレスが公開されることはありません。

コメントの前にご確認ください。

  • コメントは承認制のため、反映・表示までお時間を頂きます。
  • メールアドレス等の入力も必須ではありませんので入力の必要はありません。お気軽にどうぞ。(冷やかしは止めてね!)
  • コメントや返信があっても通知は届きませんのでご注意下さい。
  • 忙しい時はレスが遅れることもあります。
  • 当ページによる一切の不利益および損害に関し、責任を取ることはできません。