ブログリンクは、URL を入れるだけでリンク先のタイトル・説明文・画像（OGP）を取得し、リンクカードにするブロックです。「合わせて読みたい」「関連記事」のような内部リンクにも、外部サイトの紹介にも使えます。自サイト内のページは投稿データをそのまま使うため、通信は発生しません。
実際の表示
このマニュアルは shitate pro blocks が動いているサイト上にあるので、以下は画像ではなく本物のブロックです。実際にクリックしたり開閉したりして動きを確かめてください。
合わせて読みたい shitate pro blocks shitateはもちろん、今お使いのWordPressテーマに追加していただくことで14個の新しいブロックが使えるように…
shitate
外部サイトの例
ブログから大規模サイトまで作れる CMS – WordPress.org 日本語
基本的な使い方
- 「shitate unique blocks」からブログリンクを追加します。
- 表示された入力欄に URL を貼り付けて「カードを作成」を押します（サイドバーの URL 欄でも同じです。Enter か入力欄から離れると確定します）。
- エディター上にカードのプレビューが表示されます。必要ならサイドバーでラベルや表示項目を調整します。
エディターでの設定画面
設定項目（サイドバー）
- URL — リンク先。http / https のみ。
- ラベルを表示（初期値オン）とラベル — タイトルの上の小さなバッジ。空欄なら初期値「合わせて読みたい」が表示されます。
- 画像を表示／説明文を表示（どちらも初期値オン）
- 新しいタブで開く（初期値オフ）
- 再取得ボタン — キャッシュを捨ててリンク先を取り直します。リンク先のタイトルや画像を変えた直後に使います。
何を取得するか
- 自サイトの URL — 投稿のタイトル、抜粋（無ければ本文から 60 語）、アイキャッチ（medium サイズ）、サイト名、サイトアイコンを直接使います。公開済みの投稿だけが対象で、下書きや非公開は外部サイトと同じ扱いになります。
- 外部サイトの URL — ページの
<head>からog:title（無ければ<title>）、og:description（無ければdescription）、og:image、og:site_name（無ければホスト名）、favicon を読み取ります。取得は 6 秒・600KB までで、文字コードは自動変換します。 - 取得できない場合は、タイトルに URL、サイト名にホスト名を入れたカードになります。リンク自体は壊れません。
キャッシュの仕組み
取得した内容は 30 日間キャッシュされます。1 週間より古くなると、表示はキャッシュのまま返しつつ、バックグラウンドで取り直します（stale-while-revalidate）。そのためページの表示が外部サイトの応答を待つことはありません。取得に失敗した URL は 1 時間だけ「失敗」として記録され、その間はフォールバックのカードになります。
「古い」とみなす期間とラベルの初期値はフィルターで変えられます。
add_filter( 'sb_blog_link_fresh_ttl', fn() => DAY_IN_SECONDS ); // 初期値は WEEK_IN_SECONDS
add_filter( 'sb_blog_link_default_label', fn() => '関連記事' ); // ラベルの初期値出力される HTML と CSS
カード全体が 1 つの <a class="sb-blog-link"> です。画像はすべて装飾扱い（alt 空）なので、スクリーンリーダーにはラベル・タイトル・説明・サイト名をつなげたリンクとして読まれます。JavaScript は使いません。
<a class="sb-blog-link has-thumb" href="…">
<span class="-text">
<span class="-label">合わせて読みたい</span>
<span class="-title">…</span>
<span class="-desc">…</span>
<span class="-site"><img alt="">サイト名</span>
</span>
<span class="-thumb"><img alt=""></span>
</a>サムネイルは幅 clamp(6rem, 28%, 11rem)・比率 4:3、タイトルと説明は 2 行で省略されます。メディアクエリは使っていません。角丸は --sb-radius（カード）と --sb-radius-s（ラベル・サムネイル・favicon）で、ラベルの背景とホバー時の枠線は --st-color-brand です。
/* サムネイルを正方形に、ラベルの色を変える */
.sb-blog-link > .-thumb { aspect-ratio: 1 / 1; }
.sb-blog-link > .-text > .-label { background: #c80000; }注意点
- 自サイトの投稿のデータも同じキャッシュに入ります。投稿を編集しても、1 週間経つか「再取得」を押すまでカードには反映されません。
- キャッシュが無い URL は、フロントの初回表示時にその場で取得します（最大 6 秒）。通常はエディターでプレビューした時点でキャッシュができるので、公開後に待たされることはほぼありません。
- OGP を正しく出していないサイトや、ボットのアクセスを拒否するサイトでは、URL だけのカードになります。
- 1.0.0 で廃止された link-area ブロックの後継です。保存済みの link-area は「不明なブロック」になるので、ブログリンクかレイアウトの box に置き換えてください。