Simplicity2.1.9から、Simplicity独自の外部リンクブログカード機能を追加しました。
以下のような外部リンクのブログカードを手軽に作成できるようになりました。
以下では、外部ブログカード機能設定の説明をしたいと思います。
ブログカードの使い方については、以下を参照してください。
外部ブログカード機能の設定
外部ブログカード機能は、Wordpress管理画面の「外観→カスタマイズ→ブログカード(外部リンク)」から行えます。
以下では、それぞれの機能について説明します。
ブログカード有効
まずは、「プログカード有効」がオンになっていないと外部ブログカード機能は利用できません。
外部ブログカードタイプ
今回追加した独自のブログカード機能は「外部ブログカードタイプ」が「ブログカード(独自キャッシュ)」にしないと利用できません。
「はてなカード」は、はてなのブログカードサービスを利用した機能です。
「Embedlyカード」は、Embedlyを利用したカード表示機能です。
サムネイルを右側にする
「サムネイルを右側にする」を有効にすると、サムネイル位置が右側になります。
数字はこのように左側に入っているサムネイルが
以下のように右側に表示されます。
今回機能追加するときに、内部ブログカードと、外部ブログカードの機能はあえて分けました。内部と外部のブログカードの表示を差別化したいときなどに利用すると良いかもしれません。
新しいタブを開く
「新しいタブを開く」機能が有効になっていると、ブログカード内のリンクがすべて新しいタブで開かれます(※target=”_blank”で開く)。
内部ブログカードと、外部ブログカードの機能は分けてあるので、内部と外部のブログカードの開き方を分けたい場合は便利です。
サイトロゴを表示
「サイトロゴを表示」を有効にすると、ブログカード右下のファビコンや、ドメイン名が表示されます。
以下の部分を表示させたくない場合はオフにしてください。
サイトロゴリンク有効
「サイトロゴリンク有効」にチェックを入れると、トップドメインに対するリンクが貼られます。
「ページへのリンクで外部ブログカードは使いたいけど、トップページまではリンクを貼りたくない」なんて時に利用します。
はてブ数を表示
「はてブ数を表示」を有効にすると、ブログカード右下にはてブ数が表示されます。
はてなブックマーク数に限ることではありますが、リンク先のある程度の注目度はわかるようになります。
カード幅を広げる
「カード幅を広げる」を有効にすると、ブログカードがワイド表示になります。
ブログ内の文字が少し窮屈だなと思うときは、使うと良いかもしれません。
外部ブログカードキャシュ保存日数
「外部ブログカードキャシュ保存日数」には、OGP情報のキャッシュの保存日数を指定します。
あまりに短かすぎると、サイト上のページ表示が遅くなり、負荷もかかる可能性があるのである程度長めに設定しておくことをお勧めします。
キャッシュの初回取得時より、保存日数以上が経過すると再度リンク先からOGP情報を取得します。これにより、一定期間ごとに外部リンク情報を更新します。
リンク先の、タイトルやディスクリプション、サムネイルが変更されたとしても、一定期間ごとに再取得するので自動的に更新されることになります。
キャッシュ更新モード
「キャッシュ更新モード」は、すぐさま外部リンクOGP情報を更新したい時に利用します。
OGPキャッシュ情報を更新するには、まずはテーマカスタマイザーで「キャッシュ更新モード」を有効にします。
あとは「キャッシュ更新モード」が有効になっている状態で、「目当ての更新したい外部ブログカード」が表示されているページをブラウザで表示させます。
すると、新たにリンク先からOGP情報が取得できるので、OGP情報を更新することができます。
OGP情報更新したら、「キャッシュ更新モード」は無効にしておくことをおすすめします。
詳しい方法は、以下を参照してください。
キャッシュを全て削除する方法
外部ブログカードのキャッシュを全て削除するには、テーマ(子テーマ)を一旦別のテーマに選択し、元に戻すことで全キャッシュをクリアすることができます。
独自外部ブログカードの利点
一応今回追加した機能の利点は以下になります。
- Aタグを用いて参考にしたページなどにリンクソースを送ることができる(iframeとかではない)
- リンク先の相手のアクセス解析に、参照元(リンク元のURL)情報が表示され何処からのリンクか分る
- 一定期間(キャッシュ保存期間)ごとに情報が更新されるのでリンク先の変更に対応できる
- キャッシュさえ取得してあればそれなりには表示は早い(はてなののiframeとかEmbedlyよりは)
- スタイルシートで見た目を変更できる
今回の機能を使うと、iframeを使わず自前のコンテンツになるので、CSSでデザインを変更することもできます。
内部ブログカードと、外部ブログカードそれぞれ見た目を変更しても良いかもしれません。
独自外部ブログカードの難点
反面、以下のような難点もあります。
- キャッシュ保存期間を短くしすぎるとサイトの規模によっては相手サイトにも負荷が多少かかる
- 最初に外部ブログカードを表示させるときは、リンク先から情報を取得するので多少ページ表示が重くなる
- リダイレクトURLのリンク先は正しく表示されないこともある
- og:imageの画像URLが相対パスだった場合は画像を取得できない
- og:imageが取得できないページではページキャプチャ画像を表示する(HeartRails Capture利用)
- 取得したog:imageはテキスト化してデータベースに保存しているので、バックアップの時などにデータベースサイズが増える
とりあえず、キャッシュ保存期間は、デフォルトで90日となっているので、リンク先相手に短期間に何度も何度も負荷がかかることはありません(仕様により7日より短いキャッシュ保存期間には出来ないようになっています)。
そして外部リンクを使用した記事を作成したら、まず最初に投稿者がページ確認をすると思うので、そのときに外部ブログキャッシュが作成されます。なので、訪問者のページ表示が遅くなるということは、そうそう起こらないのではないかと思います。
ただ、1ページ内に大量の外部リンクを貼った場合は、初回表示はかなり重くなると思うので、そこら辺はご了承ください。
まとめ
今回独自外部ブログカード機能を実装したことにより、「はてなカード」や「Embedlyカード」のような外部プラットフォームに依存する必要が無くなりました。
これで、例えば今後「はてなカード」の仕様変更により、「はてなカードが、急にはてなサービス以外で利用できなくなった」なんてことがあっても、大丈夫になりました(あくまでも仮定の話です)。
「はてなカード」をこれまで通り使いたい場合は、そのまま利用することもできます。
とりあえず、他のサービスを利用しないとが外部ブログカード機能が使えない状態を解消することができたのは、個人的に満足しています。
前々から、この機能をつけたかったので、ようやく機能追加することができました。
コメント
こんばんは
Blogカードについて教えてください。
以前は、はてなブログのような表示になっていたのですが、最近、Blogカードの表示がかなり大きくなっています。
例えば、上にタイトルが出てきて、アイキャッチ画像だけの表示になっています。
http://cyapu.com/2016/10/01/ilepo/
以前のように、アイキャッチ画像が小さいくて、記事が少し出ている感じがよいのですが
何か間違ったところをクリックしたかもしれません。
以下の設定は試してみられましたでしょうか。
WordPress4.5.3から投稿にURLを挿入すると大きなブログカードが表示されてしまうのを無効にする方法
上記の不具合は、Simplicity最新版でも対応されています。
これは、子テーマに書き込めばいいのでしょうか
書き込んでも表示は変わりませんでした。
子テーマのfunctions.phpに書けばOKです。
ただ、それでもうまくいかない場合は、解説ページ内にある、「その他の対処方法(URLリンク)」の方法を利用するしかないかもしれません。
こんばんは、先日の質問の続きです。
子テーマに書いた日は何も変化なかったのですが
先程確認すると、いつの間にか直っていました。
お手数おかけしました。
サイトのサーバーのポストを見てみたところ、cloud5.wpx.ne.jpとなっています。
wpxには、キャッシュ機能があります。
https://www.wpx.ne.jp/server/manual/wordpress_setting_cache.php
https://www.wpx.ne.jp/server/manual/server_about_cache.php
こういった設定次第では、設定がすぐに反映されないということはあるかもしれません(実際にWPXは使ったことがないので詳しいことはわからないですが)。
もしWPXのキャッシュ機能が豊富だったとしても、時間差で反映されるのは、何かしらのキャッシュが影響している可能性が高いです。
はてなブックマーク数に限ることではありますが、リンク先のある程度の注目度はわかるように鳴ります。
→「な」or「成」ですね!
•Aタグを用いて参考にしたページなど「にに」リンクソースを送ることができる
→「に」ですね!
修正なさったら、コメント削除してください。
よろしくお願いいたします(他の私の誤字指摘コメも)。
ご報告ありがとうございます!
修正させていただきました。
コメント部分は、今後の戒めとして残しておこうと思います。
※もちろんどうしても削除をご希望であれば削除させていただきます。