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

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

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

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

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

関連記事

Jetpackのパブリサイズ共有

ブログ投稿するだけじゃなく、ツイッターやフェイスブックにも共有したいですよね はじめに ワードプ

記事を読む

お名前.comのドメインをさくらサーバーで使用する方法

サーバーの最安値とドメインの最安値を一緒に利用出来ます はじめに サーバーとドメインってどうして

記事を読む

amazonアフィリエイトの登録方法

もし、自分のお勧めしたい何かがあった時に非常にうれしいツールの一つがこのamazonアフィリエイトで

記事を読む

ワードプレスで記事の投稿数を表示させる方法

ワードプレスで全○記事とブログ記事の投稿数を表示させる事が出来る方法をご紹介いたします。 はじ

記事を読む

カスタムフィールドを全ページに表示させる方法

カスタムフィールドって特定のページにしか表示出来ない物だと思っていましたが、全ページに反映する方法を

記事を読む

ワードプレスのカテゴリ名やURLの取得方法

ワードプレスのカスタマイズでカテゴリ関係の情報を調べたがあまり出てこなかったので、メモして は

記事を読む

サブドメインの設定【サクラサーバー】

今回はサブドメインの設定方法です。サブドメインを設定する事で様々なメリットがございます。副業で使う際

記事を読む

EC-CUBE(2.11.5)のダウンロード方法

EC-CUBEは無料で使えるネットショップのシステムの事です。副業で何かを販売するなら必ず使いたい一

記事を読む

画像を特定のサイズで表示させる方法WordPress

カスタムフィールドで登録した画像を指定のサイズで表示させる方法をご紹介いたします。 はじめに

記事を読む

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

その1が終わったら次のこの2を見て下さいね。 はじめに とりあえず、デフォルトで表示して

記事を読む

Message

現在の総記事数: 310件

SEO対策はコンテンツだけで勝負してみた結果

SEO対策にもう被リンクは本当に必要がないのか実際にテストしてみました

Huluのここがクソ!色々改悪されすぎ

Huluを契約して2年経過しましたが、使いにくくなりすぎてもう解約しま

SBIの貸株を解除する方法

SBI証券で貸株をしている人で解除方法がわからない人に

Gooogleの著作権侵害による削除依頼をしてみた

ある日うちが取り扱いをしている商品が詐欺サイトに掲載されていたので早速

WordPressが書き換えられた時の対処方

アクセス先のサイトで「不正なソフトウェアを検出しました」と表示されると

→もっと見る

PAGE TOP ↑