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

公開日: : 最終更新日: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などで画像+タイトル+リンク先などセットで掲載している事が多く、当たり前になってきましたよね。

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

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

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

関連記事

アフィリエイトの審査に落ちた方へ

リンクシェアって審査が厳しいですよね はじめに 副業でアフィリエイトサービスを利用しようと思

記事を読む

no image

ワードプレスのテーマを直接いじらない小テーマ

ワードプレスで直接テーマをいじってしまうとアップデートの際今までのデータが全て消えてしまいます。そこ

記事を読む

タグ機能を使ったPHPの分岐WordPress

ワードプレスでタグを使った分岐に関するやり方をご紹介させて頂きます。 はじめに PHPを使ったカ

記事を読む

アフィリエイト用リンクをクリックされやすくするテクニック

アフィリエイターって他人のアフィリエイトリンクってクリックしたがらないですよね。そこでクリックさせる

記事を読む

Googleマップを正しく表示させる方法

このページではGoogleマップが正しく読み込まれませんでした って出てしまう人続出ですね

記事を読む

ワードプレスに目次を簡単に入れるTable of Contents Plus

今までタグを手打ちしていたのですが、やっとこさおさらば出来そうです。 はじめに Tabl

記事を読む

no image

PDFファイルの作り方

情報商材でよくみるPDFファイル、これってどうやって作るのか・・・そんな悩みを解決致します。

記事を読む

no image

WEBフォントはcss3で簡単に使えた

WEBフォントを使って好きなフォントをWEB上に公開しよう はじめに 最近クライアン

記事を読む

ワードプレスのカスタム投稿タイプにページ送りを導入する方法

表示件数が多くなりすぎるとページ送りを導入した方がデザイン的にも見やすくなります。 はじめに ス

記事を読む

FC2ショッピングカートの販売する為の設定

FC2ショッピングカートに登録し、ネットショッピング開設するまでの流れをご紹介いたします。 は

記事を読む

Message

現在の総記事数: 317件

ECCUBEのポイント関連のバグ

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

ECCUBEの検索に商品IDを追加させる方法

ECCUBEはデフォルトだと検索機能は非常に弱いです。 はじめに

EC-CUBEで各カテゴリーページに情報を表示させる方法

EC-CUBEでカテゴリーページごとに情報を入れる方法をご紹介

windows10のおすすめを非表示にする方法

windows10に変わってからめっちゃうっとおしくなってきましたね

PHPの中にPHPを入れたい人の為のヒント

PHP初心者によくある疑問点PHPの中にPHPを入れる事が出来れば

→もっと見る

PAGE TOP ↑