【OnePress】WordPress標準の内部リンクカードで大きいカードで表示されないようにする方法

段落ブロックへサイト内URLを入力するだけで、自動でカード表示になる「リンクカード」機能をご存じですか？ご存じなくても、ブロックエディタで何気にサイト内のURLを入れたらいきなりカードになってびっくりした方もいるかもしれません。

そして、カード表示されて便利！と思う反面、URLによってはなぜかカード表示の方法が違うんです。種類は以下の２通り。

• 大きなアイキャッチ画像が表示され、その下にタイトルなどが表示される「大カード」
• 左側にアイキャッチ画像が表示され、右側に情報が表示される「小カード」

自動で切り替わるのはいいのですが、サイト内のリンクなのでそんなに大きくなくてもいいのでは？と感じませんか？

そこで今回は、【OnePress】テーマでサイト内リンクのカードを「小カード」のみにする方法を紹介します。

【OnePress】テーマのデモサイトですので、それ用に書いておりますが、基本どのテーマでも使える方法です。

カードが自動で「大カード」になってしまう原因

原因と書くとなんだか不具合みたいですね（笑）。カードが「大」と「小」のいずれかになるのかは時の運・・ではなくきちんと定義があります。それは「表示するリンク元投稿のアイキャッチ画像の縦横比（アスペクト比）が1;1.75を超えるかどうか」という条件です。具体的には以下のようにして切り替わっています。

• アイキャッチ画像の縦横比が1:1.75を超えたら「大カードを表示」
• アイキャッチ画像の縦横比が1;1.75以下だったら「小カード表示」

これを条件なくどんな比率でも小カードで表示するという判断に変更すれば、必ず小カードで表示されるのです。

内部リンクカードを必ず「小さいカード」で表示させる方法

このカスタマイズは、テーマのfunctions.phpへのコード追記が必要となります。今まで行ったことのない方や慣れていない方にはおすすめしません。

判断をなくし、小カードで必ず表示させるためには、テーマのfunctions.phpへ以下のコードを追記します。

/***** 内部リンクカードを小サイズに強制 *****/
if ( !function_exists( 'ha_set_embed_thumbnail_image_shape' ) ):
function ha_set_embed_thumbnail_image_shape() {
  return 'square';
}
add_filter( 'embed_thumbnail_image_shape', 'ha_set_embed_thumbnail_image_shape' );
endif;

if ( !function_exists( 'ha_set_embed_thumbnail_image_size' ) ):	
function ha_set_embed_thumbnail_image_size() {
  return 'medium';
}
add_filter( 'embed_thumbnail_image_size', 'ha_set_embed_thumbnail_image_size' );
endif;

上半分が「画像の縦横比に関わらず必ず小カード用の画像にしなさい」というコードです。

下半分はリンクカードに表示されるアイキャッチのサイズ指定を行うコードです。通常では「medium」という部分が「thumbnail」になっているのですが、サイト内で作られる一番小さい画像なので、時には画像がボケてしまうというのを解消するために「medium(中サイズの画像)」を入れるよう指定しています。

以上で終わりです（簡単すぎ？）

これで一応必ず小カード表示されるようになりますが、そもそも小カードの表示が小さい（本文の半分位しかない）という場合には次項を参考に調整します。

【OnePress】用　カードを本文幅いっぱいに表示させる方法

このデモサイトは、以下のリンク先ページの内容を行って、本文幅を広げていますので、この不都合が出ました。そうでない場合には普通にきれいに表示されるかも知れません。

もしも幅の狭いリンクカードしか表示されない場合は、以下のコードをテーマカスタマイザーの「追加CSS」へ追記します（子テーマのCSSでも大丈夫です）。

iframe{
    width: 100%;
    height: auto;
	min-height:300px;
}

上記コードはiframeというタグのあるコンテンツすべてにこのデザインを適用するように指示しているコードですので、内部リンクカードと同様にiframeを使っているもの（動画の埋め込みなど）でもきちんと表示されるかチェックするようにしてください。

また、【OnePress】以外で使用する場合は、テーマの設定などに合わせて自身で調整する必要がありますのでご注意ください。