カスタムフィールドを使ってリンク先のスクリーンショット画像を掲載させる方法

公開日: : 最終更新日:2016/08/09 副業で稼ぐ仕組みの作り方

ワードプレスにはスクリーンショットをキャプチャして画像にするプラグインは出ていますが・・・。

はじめに

ワードプレスではBrowser Shotsと言うプラグインを使えばリンク先のサイトのスクリーンショットを画像にして表示させる事が出来ますが、ショートコードでしか掲載出来ないので、知識のない人に触ってもらう場合はかなり使いにくいプラグインだなと感じました。

そこで私がスクリーンショットのキャプチャ画像を掲載させた方法をご紹介させて頂きます。

注意事項

  • heartrails.com自体が古いサイトなので、将来的に使えなくなる可能性がございます。
  • 一度画像を取得してしまうとリニューアルしても前のデザインが残ってしまいます。

今回やりたい事

今回私がやりたかったのは

  1. クライアントがURLを入力する
  2. そのURLのリンク先のスクリーンショット画像が表示される

たったこの2つの内容です。ただ、知識のない人でも簡単に出来ると言う点を考えるとショートコードを入力させるのは、ハードルが上がったり、上手く表示されない恐れがあったので、URLのみを入力する形になりました。

スクリーンショットを表示させる方法

私はワードプレスのAPIやプラグインなどは使わずに「HeartRails Capture」と言うサイトを利用させて頂きました。

http://capture.heartrails.com/

使い方は簡単です。

http://capture.heartrails.com/free?任意のURL

この形で画像を取得するだけで簡単にスクリーンショットを表示させる事が出来ます。試しに「yahoo」で試してみましょう。

http://capture.heartrails.com/free?http://www.yahoo.co.jp/

上記URLはyahooのキャプチャを取得している状態です。クリックするとどういった物が表示されるか一度確認してみましょう。

free

このようにyahooが取得できました。

ただ、よく見てみると現在のyahooと少しデザインが違っていませんか?

そうなんです。欠点としては一度キャプチャを取得してしまうとそのURL=この画像と言う形になってしまうのでデザイン変更やリニューアルには対応していないのです。

もし画像として表示させたい場合は

<img src="http://capture.heartrails.com/free?http://www.yahoo.co.jp/" />

このように入力すると表示させる事が出来ます。

サイズを指定しよう

「HeartRails Capture」で画像を取得する場合、取得する画像サイズを指定する事が出来ます。

<img src=" http://capture.heartrails.com/123x123?http://www.yahoo.co.jp/">

先程freeと表示されていた部分に画像サイズを入力しています。

123×123
123x123
200×300
200x300

こんな感じで最大400×300の画像サイズまで取得が出来ます。

カスタムフィールドに組み込もう

ここまで説明すると、もうわかるかと思いますがカスタムフィールドに組み込む場合は

<img src="http://capture.heartrails.com/300x300?<?php echo $cfs->get('url'); ?>" >

こんな感じです。
私が使っているカスタムフィールドは「Custom Field Suite」でurlの値を取得しています。

どうでしょうか?これなら簡単にキャプチャしたスクリーンショット画像をホームページ上に組み込む事が出来ましたよね。

以上でワードプレスでカスタムフィールドを使ってリンク先のスクリーンショット画像を掲載させる方法の説明を終了いたします。

さいごに

印象が違ってきます

今まではURLだけを掲載していたのですが、最近facebookなどで画像+タイトル+リンク先などセットで掲載している事が多く、当たり前になってきましたよね。

今回の方法は新しく稼げる副業用で考えているホームページで利用している内容なので、実際の動作なども確認済みです。

やっぱりキャプチャしている画像があるのと、ないのとではパッと見た時の印象に差がつきますね。リンク先だけだと味気ないですし。

最近は直感的に触れるサイトと言うのが非常に多くなってきているので、やっぱり画像関係は必須条件でしょう。

関連記事

ECキューブで販売する為の最低限の設定その1

ECキューブをインストール後に最低限しておかないといけない設定です。長くなりそうなので今回はその1と

記事を読む

WordPressで記事の盗用をさせないWP-Copyright-Protection

5時間かけて書いた記事が色々なところで盗用されているなんて悲しい事ありますよね はじめに まず、

記事を読む

カスタムフィールドのループで出力数を決める

ループに登録されている情報を一部表示させたい場合に使えます。 はじめに カスタムフィール

記事を読む

Biz Calendarを使いやすくカスタマイズ

営業日カレンダーを導入したけれど、こんな機能が欲しい!って要望があったのでカスタマイズしてみました。

記事を読む

youtubeの動画をダウンロードする方法

この動画が削除される前にダウンロードしておきたいって動画や、編集したいと言う動画がyoutubeにあ

記事を読む

ボタンのクリック率を上げる簡単なcss

マウスオーバー時に少し変化がある事でクリック率を高める事が出来ます。 はじめに 画像などのボタン

記事を読む

ワードプレスのシンプルな営業日カレンダーBiz Calendar

店舗経営しているなら見ている人の為に一目でわかる営業日カレンダーって欲しいですよね。 はじめに

記事を読む

ふわっと表示したらごっつカッコええやん

スクロールしたらふわっと表示されるやつ作ってみたよ はじめに 縦長系のサイトで下

記事を読む

ワードプレスのメンテナンスモード

ワードプレスではプラグインだけでメンテナンスモードにする事が出来ます。 はじめに ワードプレスで

記事を読む

phpとワードプレスのランダム表示

副業で広告やバナーを掲載する時にランダム表示をしたいなぁって時に役立つ内容を紹介します。 はじめに

記事を読む

Message

現在の総記事数: 321件

【EC-CUBE】管理画面に色々な箇所のファイルを呼び出す方法

ブロックで作成した情報以外からも情報を取得したい場合はこちらの情報が参

【画像あり】XAMPPを使ってPHPの動作確認方法

PHPの動作確認をするのにXAMPPは絶対に必要です。 はじめに

【画像あり】XAMPPの誰でもわかるインストール方法

これからPHPを勉強しようと考えている人の強い味方XAMPPのインスト

PHPのランダムを任意の数だけ表示させる方法

PHPのランダムを使い方をもう少し調べたらこんな使い方ができました

ECCUBEのポイント関連のバグ

最終保持ポイントがマイナス表示にならないように調整して下さい。って出て

→もっと見る

PAGE TOP ↑