【WordPress】【PHP】サイトタイトル画像（カスタムロゴ）を外部画像にする方法

WordPress4.5あたりから追加された機能で、最近のテーマなら使われてると思います。この画像ですが、外部URLを指定したりはできないようで、ちょっと不便なんですね。FlickrとかGoogle Photoとかの外部画像を使ってるとかそういう場合です。

the_custom_logo()のサンプル

<div class="h1 site-logo">
<?php if ( function_exists( 'the_custom_logo' ) && has_custom_logo() ) : ?>
    <?php the_custom_logo(); ?>
<?php else : ?> 
    <span><?php bloginfo( 'name' ); ?></span>
<?php endif; ?>
</div>

has_custom_logo()：画像が登録されてるかどうか
the_custom_logo()：画像付きのHTMLコードを出力する

参考：
・the_custom_logo() | Function | WordPress Developer Resources
・has_custom_logo() | Function | WordPress Developer Resources

the_custom_logo()を使用しているテーマとかをみればこんな感じになっているかと思います。

サンプルは、画像が登録されてるとその画像をサイトタイトル画像に、ない場合は、サイト名（テキスト）を表示するというロジックになってます。

外部URLに変更する方法

//---------------------
// ロゴ
//----------------------
//custom_logo_id関係
add_filter( 'theme_mod_custom_logo', 'my_theme_mod_custom_logo' );
function my_theme_mod_custom_logo() {
  $custom_logo_id =999999999;
  return $custom_logo_id;
}
//画像のURL関係
add_filter( 'wp_get_attachment_image_src', 'my_wp_get_attachment_image_src',10,2);
function my_wp_get_attachment_image_src($image, $attachment_id) {
  $custom_logo_id =999999999;
  if($attachment_id == 999999999){
    $image[0]="https://lh3.googleusercontent.com/-QfiisRaozvo/W6-YZ_7KXAI/AAAAAAAACxs/VV5HmPsj4i4i5oPfTpAYEwiCkwsfn135QCKgBGAs/s1600/sample-320x90.png";
    $image[1]=320;
    $image[2]=90;
    $image[3]=0;
  }
  return $image;
}

上記をテーマのfunctions.phpに追加してください。

外部画像はhttps://lh3.googleusercontent.com/-QfiisRaozvo/W6-YZ_7KXAI/AAAAAAAACxs/VV5HmPsj4i4i5oPfTpAYEwiCkwsfn135QCKgBGAs/s1600/sample-320x90.pngなのでこの部分を置き換えてください。

$image[0]：画像URL
$image[1]：画像の横サイズ
$image[2]：画像の縦サイス
$image[3]：リサイズされてるかどうか？？

WordPressの内部仕様で上記のように設定するようになってるのでそれに合わせてます。

$custom_logo_id =999999999;は未使用なものならなんでもOKだと思います。正の整数でないとNGなようなようです。Wordpressでは画像が登録されると、 $attachment_id（数字）がつけられて内部管理するようで、その数字を$custom_logo_idとして利用してるようです。

失敗した方法

add_filter( 'get_custom_logo', 'my_custom_logo' );
function my_custom_logo() {
    $custom_logo_id = get_theme_mod( 'custom_logo' );
    $html = sprintf( '<a href="%1$s" class="custom-logo-link" rel="home" itemprop="url"><img src="%2$s" alt=""></a>',
            esc_url( home_url( '/' ) ),
            "https://lh3.googleusercontent.com/-QfiisRaozvo/W6-YZ_7KXAI/AAAAAAAACxs/VV5HmPsj4i4i5oPfTpAYEwiCkwsfn135QCKgBGAs/s1600/sample-320x90.png"
        );
    return $html;   
}

get_custom_logoをフックする方法では、うまくいかなかったです。理由は簡単で、$custom_logo_idが未登録なために、has_custom_logo()で画像が登録されていないことになるからです。

the_custom_logo()で出力されるHTMLも上記のところで置き換えることができるという例になるので、一応載せておきます。