ShareHtml Archives - でーじてとこん

ShareHtmlという便利なブックマークレットがあります。ブログなんかで何かしらのリンクを紹介したい場合、画像付きでいい感じにリンクを作ってくれるっていうものですね。 ShareHtmlとFocusHtmlもリニューアルしました♪ | 普通のサラリーマンのiPhone日記 作成者の@hiro45jpさんありがとうございます。いつもお世話になっております。 この時、サムネイルに出る画像を、ブログのアイキャッチ画像になるように改造しました。ちなみにWordPressでのやり方です。 なぜ改造しようと思ったか この前、2013年にアクセスが多かった記事を、ShareHtmlを使ってまとめました。 自分の過去記事のリンクをShareHtmlを使って作るパターン。あると思います。 この記事をまとめた時は、手動でリンクの画像を差し替えたのですが、「自動でアイキャッチ画像がサムネイルになったら楽だなぁ」と思って、そういう風にできないかなぁとやってみたらできちゃいました。 やってみるものです。 実際どんな風になるのか？ 実際どんな感じで表示されるのか見てみます。 普通のShareHtmlはこちら↓ 【市ヶ谷】肉の世界遺産！大木屋で衝撃のエアーズロック肉を食べてきた！でかいだけじゃなくて美味い！ 改造してサムネイルがアイキャッチ画像になるようにしたのがこちら↓ 【市ヶ谷】肉の世界遺産！大木屋で衝撃のエアーズロック肉を食べてきた！でかいだけじゃなくて美味い！ この記事の場合、特になのですが、アイキャッチ画像がドでかい肉の画像なので、デフォルトのShareHtmlより目を引くと思います。まさにアイキャッチ。 作り方 まずはショートコードを書く 最近ショートコードというのを覚えました。ショートコードにできそうな箇所を見つけては、お前もショートコードにしてやろうか！とショートコード化しています。 ショートコードをご存じない方はこちらを御覧ください↓ WordPressのショートコードを自作してみる | webOpixel 今回もショートコードを使っています。ショートコード？何それおいしいの？な方も安心して下さい。コピペでいけます。 という訳でfunctions.phpにこんなのを記述します。 何をやっているか簡単に説明します。 この関数にアイキャッチ画像を取ってきたい記事のURLを渡すと（$post_urlの所にURLが入ります）、 まずurltopostidがURLから投稿記事のIDを取得します。 次にgetpostthumbnailidがurltopostidが取ってきた投稿記事のIDから、アイキャッチ画像のIDを取得します。 そのアイキャッチ画像のIDをwpgetattachmenturlに渡してアイキャッチ画像のURLを取得します。 なんのこっちゃわからない人は、この話は聞かなかったことにしてください。別にわからなくても何の問題もありません。 とりあえずこのコードをfunctions.phpに追加出来ればいいのです。 PCとモバイルでテーマを分けたりしている場合、どちらのfunctions.phpにも追加してくださいね。 ShareHtmlを改造する 先程の関数をfunctions.phpに追加できたら今度はShareHtmlのブックマークレットを改造します。改造にはShareHtmlメーカーを使います。 ShareHtmlメーカー デフォルトの設定でShareHtmlを作るとこんな感じになります。 ShareHtmlはサムネイルのサイズとか色々変更できるので、どのパターンで作るかで多少の違いはありますが、今回は出力方法を「プレビュー表示」、書式テンプレートを「左サムネイル大」にしています。コレは例なので実際どれを選んでいただいても構いません。今回大事なのは、最初に出てくるimgタグのsrc=という部分。 ここを変更します。 どう変更するかというとこんな感じ↓ ▲画像の様に${posturl}をmythumbnailと/mythumbnailで挟みます(※[]でくくるのもお忘れなく)。${posturl}というのが記事のパーマリンクになるので、これをmythumbnailというタグで挟んだら、先程functions.phpに追加したコードの$posturlというところに渡されて、アイキャッチ画像のURLが返ってきます。 するとimgタグのsrcの部分がアイキャッチ画像のURLになるので、自動でアイキャッチ画像がサムネイルになるという仕組みです。 なんのこっちゃよくわかない場合、とりあえずやってみてください。手順自体はそんなに難しく無いと思います。ここまでできたらあとはブックマークレットを生成してブラウザに登録するだけなので。 ブックマークレットの生成までできたら、試しにご自分の過去記事をこのブックマークレットを使ってリンクを作ってみてください。下書きの状態でプレビューしてみて、ちゃんとサムネイルにアイキャッチ画像が表示されたら成功です。 今回はShareHTMLに限って話をしていますが、やっていることは個別記事のURLを渡すと勝手にアイキャッチ画像のリンクを返してくれる関数を作ったという話なので、汎用性ありまくりなんじゃないかと思っています。内部リンクのサムネイルをアイキャッチ画像にしたいっていう需要、結構あると思うんですよね。色々使えそう。 2014/02/21追記 注意点 ちょっと追加で注意点を。 これはWordPressの仕組みであるショートコードを使ってアイキャッチ画像のURLを取得する方法です。 なので、例えばMacでブログを書く時の定番エディタ、MarsEditや、iPhoneでブログを書く定番アプリ、するぷろのプレビューで見た場合はまだアイキャッチ画像のURLが取れていないので、画像が表示されません。 ShareHtmlのプレビュー版でリンクを作成した時も、同じ理由から画像は表示されません。 画像が表示されるのは、WordPressで表示した時です。WordPress上でショートコードが動いた時に、初めてURLが取れます。 なので動作を確認する時は、WordPressで下書き保存して、プレビューしてください。 --追記終わり お約束的な色々 WordPress3.8で動作確認しました。3.☓系なら動くと思いますが、お試しになる場合は自己責任でお願いいたします。特にfunctions.phpをいじる場合は下手すると、画面が真っ白になって顔面も真っ白になるという事例が過去に多々報告されておりますので、絶対にバックアップはとってからいじるようにしましょう。 ちなみにアイキャッチ画像が設定されていない場合は、画像のURLがひっぱってこれないので、画像が表示されません。アイキャッチを設定している記事に対してリンクを作ってくださいね。 更に更に、当たり前ですけど、人のブログのアイキャッチ画像は引っ張ってこれません。今回作ったブックマークレットを、自分の過去記事紹介用、今までのShareHtmlを、他のブログのリンクを作る様と使い分けるのが良いと思います。 --追記-- 外部リンクのサムネイルも好きなように設定できるものも作ってみました。こっちも御覧ください。 簡単にサムネイル付きの画像リンクを作れるAutomatorをAppleScriptで作ってみた 他のWordPressな記事はこんなものもございます WordPressでパーマリンクを設定してもページが404not foundになる時の対処法 ［Wordpress］iPadからのアクセスを判定してiPad用のコンテンツを表示する方法 新しいWPtouch(3.1)でシェアボタンを消す方法。クリック数回で済むので超簡単です！

ShareHtml

簡単にサムネイル付きの画像リンクを作れるAutomatorをAppleScriptで作ってみた

ShareHTMLのサムネイル生成に”HeartRails Capture”を使う事のデメリットについて考えた

ShareHtmlのサムネイル画像が自動でアイキャッチ画像になる様に改造しました。簡単！ほぼコピペでできます！[WordPress]

最近の投稿

カテゴリー