kur.jp

バイオリンと自転車をこよなく愛するkurのチラシの裏。たまには技術的なことを書いたりするかも知れません。

Snap Shots導入

Snap Shotsというものを導入してみた.  

リンクの上にカーソルを当てると,ポップアップでリンク先のスクリーンショットが表示されるというもの.

例1:Yahoo

例2:Google

これだけなんだけど非常に面白いと思う.面白いだけなんだけど.

リンクにマウスカーソルを当てた時に,そのリンクに付随する情報を表示する機能を総称してツールチップと言うらしく,調べてみるといろんな種類があって,様々なサイトで公開されている.(参考:24種類のツールチップのまとめ

で,本サイトではその中でも,リンク先サイトのサムネイルを表示してくれるSnap Shotsを導入してみた.

導入自体は非常に簡単で,普通のサイトに導入する場合には,

  1. Snap Shotsのサイトの登録フォームに必要事項を入力する.
  2. 表示されるJavaScriptをHTMLの中に挿入する.

だけです.テンプレートとかを使ってるサイトならば,フッターに入れてしまえばサイト全体に適用できる.このサイトの場合は,サイト自体がWordPressというシステムで構築されているので,Snap Shots導入用プラグインを使って,導入した.プラグインを使えば設定をWordPress上で行えるので,この方が便利かもしれません.この場合の手順としては

  1. Snap Shotsのサイトの登録フォームに必要事項を入力する.
  2. keyを取得する.
  3. WordPressでプラグインを有効にする.
  4. テンプレートwp_footer()の後に<?php do_action('echo_spa'); ?>を挿入する.

最初,ちゃんと動作してくれなかったんだけど,よく見たらテンプレート内にwp_footer()が存在しなかったのが原因だったみたい.wp_footer()を入れることで,無事,正常に動作するようになりました.