WordPressの記事リンクを小さくする
前回、WordPressのプラグインである、Child Theme Configuratorを導入して、子テーマを作成しました。
WordPressでは記事の中にURLを入力したとき、そのURL先がoEnbedに対応していれば上のように埋め込みコンテンツが表示されるのですが、初期の状態ではものすごく大きく表示されてしまい、とても恥ずかしいのでどうにかせねばと思い立ったのがきっかけです。
今回、せめて不自然な大きさにならないように小さくしたいと思います。
初期の状態
初期の状態は下の画像のようにとても大きい物でした。
ほぼ実物大です。（ただしPCで見た場合ですけど。）
すでに冒頭に貼った前回のリンクはそれなりの大きさになっていると思いますが、どのようなファイルが関連しているのか、どのように設定したのかなど記録しておきます。
また、改善方法としては関連するPHPを新しく作ってしまうということも可能なのですが、今回は必要最小限の変更（functions.phpへの追記）にとどめております。
（せっかく子テーマを作ったのですけどね。。。）
埋め込みの画像関連の調査
いろいろと調べたところ、この埋め込みのコンテンツは、wp-includes/theme-compact/embed-content.php というファイルが作成しているとのことなので、早速ソースを覗いてみました。
関連しそうな部分を抜粋します。
//37行目
$image_size = 'full'; // Fallback.
//50行目
$image_size = apply_filters( 'embed_thumbnail_image_size', $image_size, $thumbnail_id );
まず7行目で$image_sizeの初期値は 'full' とあります。
50行目で$image_sizeのフィルターフックが見つかりました。
この後もソースを見たところ、$shape という物を見つけました。
//61行目から抜粋
$shape = $measurements[0] / $measurements[1] >= 1.75 ? 'rectangular' : 'square'
/**
* Filters the thumbnail shape for use in the embed template.
*
* Rectangular images are shown above the title while square images
* are shown next to the content.
*
* @since 4.4.0
* @since 4.5.0 Added `$thumbnail_id` parameter.
*
* @param string $shape Thumbnail image shape. Either 'rectangular' or 'square'.
* @param int $thumbnail_id Attachment ID.
*/
$shape = apply_filters( 'embed_thumbnail_image_shape', $shape, $thumbnail_id );まず、61行目で画像の縦横比で'rectangular'か'square'を判断しています。これが初期値になりますね。
次にフィルターのコメントを直訳。
Filters the thumbnail shape for use in the embed template.
（埋め込みテンプレートで使用するサムネイル形状をフィルターします。）
Rectangular images are shown above the title while square images are shown next to the content.
（タイトルの上に長方形の画像が表示され、コンテンツの横に正方形の画像が表示されます。）
どうやら、'rectangular'か'square'で画像の位置が変わるようです。
で、フィルターについてですが、以下のリンクを確認したところ、
（お、これも埋め込まれた。）
サンプルとして以下のソースがありました。
// Our filter callback function
function example_callback( $string, $arg1, $arg2 ) {
// (maybe) modify $string
return $string;
}
add_filter( 'example_filter', 'example_callback', 10, 3 );
/*
* Apply the filters by calling the 'example_callback' function we
* "hooked" to 'example_filter' using the add_filter() function above.
* - 'example_filter' is the filter hook $tag
* - 'filter me' is the value being filtered
* - $arg1 and $arg2 are the additional arguments passed to the callback.
$value = apply_filters( 'example_filter', 'filter me', $arg1, $arg2 );add_filterで指定してあげればいけそうです。
ところで、画像サイズは何を指定してあげれば良いのか、おおよそ予想は出来るのですが少し調べてみました。
ここに、‘thumb’, ‘thumbnail’, ‘medium’, ‘large’, ‘post-thumbnail’ とありますので、この中から選べば大丈夫でしょう。多分。
あと、embed-content.phpの37行目に書かれていた、'full' も使えそうですね。
これで材料が揃ったので実装します。
functions.phpの修正
修正は簡単です。前回子テーマを作成して、いまは子テーマを使って表示されているので、気兼ねなくfunctions.phpに追記しましょう。
functions.phpを編集するには、外観→テーマエディターで編集します。
まずは画像の位置（$shape）に関するコード。画像を横に置きたいので、'square' を指定しています。
function set_embed_thumbnail_image_shape() {
return 'square';
}
add_filter( 'embed_thumbnail_image_shape', 'set_embed_thumbnail_image_shape' );次に画像サイズ（$image_size）に関するコード。今は 'thumbnail' を指定しています。
function set_embed_thumbnail_image_size() {
return 'thumbnail';
}
add_filter( 'embed_thumbnail_image_size', 'set_embed_thumbnail_image_size' );更新を保存したら早速記事を表示してみましょう。サイズを変更する可能性がありますので、画像で結果を残しておきます。
一応それなりになりました。
ちなみに 'medium' で指定すると、下の画像のようになります。
試してみてわかったのですが、$shape が squareだからといって正方形になるわけではなく、単に画像の表示位置がコンテンツの横になる、という理解が正しいと思います。
画像サイズもWordPressのmediaとして登録されている画像ファイルから選択するだけなので、thumbnailでは正方形、mediumでは長方形に表示されてます。無駄な高さがない分、mediumの方が良いかもな、やっぱり表示速度などを考えるとthumbnailだよね、と迷っております。
蛇足ですが、画像サイズ ‘thumbnail’ を 'rectangular' で設定しても小さい画像が表示されるわけでは無く、横幅が記事の横幅一杯に伸ばされ、縦横比は維持されるので、初期の状態よりもおかしな表示となってしまいます。
興味があったらお試しくださいませ。
