【WordPress】ブログカードのサイトアイコンを変更する方法
更新日：2023/03/14
WordPressのブログカードは左隅に小さくサイトのロゴが表示されています。
初期状態のサイトアイコンはWordPressのアイコンが使用されています。
サイトの特色を出すためにも、これは早急に変更したいですね。
また、大きさなどを変更したいケースがあります。
今回は、これらの方法をお伝えします。
サイトアイコンの変更方法
WordPressのロゴから独自のサイトロゴへの変更は、WordPressのカスタマイズ機能でおこなえます。
管理メニューの外観からカスタマイズを選択します。
次に、サイト基本情報を選択します。
サイトアイコンを選択をクリックすると、画像をアップロードする画面が表示されます。
アップロードする画像のサイズは縦横共に512ピクセルが望ましいですが、他サイズでも登録できます。
その場合は、画像選択後に切り抜き作業をおこなう画面が表示されます。
サイトアイコンを変更すると、ブログカードに反映されます。
なおサイトアイコンは、ブラウザのタブにも表示されます。
異なる画像を使用する
カスタマイズ機能で登録したサイトアイコンと異なる画像を使用するときは、get_site_icon_urlフィルターを使用します。
add_filter( 'get_site_icon_url' , function($url, $size){
if( !is_embed() ) return $url;
switch($size){
case 32: return content_url().'/uploads/testsite32.jpg';
case 64: return content_url().'/uploads/testsite64.jpg';
}
return $url;
},10,99);
get_site_icon_urlフィルターは、サイトアイコンのタグ出力でも使用されます。
そのためブログカードで使用するときだけ、画像urlを差し替えます。
ブログカード生成中はis_embed()がtrueになるので、この関数で判断しています。
■【WordPress】サイズごとにサイトアイコンの画像URLを指定する方法
コードでは32と64ピクセルの画像URLを返していますが、これは生成されるタグが次のように構成されるからです。
<img src="https://ドメイン名/wp-content/uploads/testsite32.jpg"
srcset="https://ドメイン名/wp-content/uploads/testsite64.png 2x"
alt="" class="wp-embed-site-icon" width="32" height="32">
環境によってはsrcsetの画像が使用されるので、64ピクセルも指定しておく必要があります。
コードを適用すると、次のように異なる画像を表示できます。
サイトアイコンが、少し見にくいですね。
ブログカードのサイトアイコンは25ピクセルで表示されます。
少し大きくすれば、見やすくなるかもしれません。
サイトアイコンの表示サイズを変更する
ブログカードのサイトアイコンを、25ピクセルから50ピクセルに変更してみます。
方法は、embed_footerフィルターでスタイル(css)を出力します。
add_action( 'embed_footer' ,function(){
?>
<style>
.wp-embed-site-title a{
padding-left:0;
}
.wp-embed-site-icon{
width:50px;
height:50px;
position:relative;
vertical-align:middle;
transform: none;
margin-right:2px;
}
</style>
<?php
},999);
ブログカードを埋め込んだページと埋め込まれたページが共にWordPressの場合、iframeの高さを内容の高さに変更してくれるスクリプトが実行されます。
この機能のおかげで、iframeよりも中身の方が大きい時にスクロールバーが表示されることを防いでくれます。
しかしサイトアイコンはpositionがabsolute指定されているため、内容の高さに含まれません。
つまり、サイズを大きくした結果はみ出てしまうと、スクロールバーが表示されます。
これを防ぐために、positionをrelative指定してabsoluteを解除しています。
その他は、位置の微調整です。
とても見やすくなりました。
サイトロゴを使用する
WordPressのカスタマイズ機能はWebページの上部に表示されるサイトロゴ画像を登録できます。
今回は、このサイトロゴ画像をブログカードに表示してみます。
embed_site_title_htmlフィルターで、ロゴ画像を含めたaタグを構成します。
add_filter( 'embed_site_title_html' , function($site_title_tag){
$logo = get_theme_mod( 'custom_logo' );
$logo_url = wp_get_attachment_url($logo);
if( $logo_url===false ) return $site_title_tag;
return '<a href="'. esc_url(home_url()).'" target="_top">'
.'<img class="wp-embed-site-icon" src="'.esc_url($logo_url).'">'
.'</a>';
});
コールバック関数の最初の２行で、サイトロゴ画像のURLを取得できます。
後は、aタグを生成して返します。
忘れずにembed_footerフィルターで、画像サイズ等をセットします。
add_action( 'embed_footer' ,function(){
?>
<style>
.wp-embed-site-title a{
padding-left:0;
}
.wp-embed-site-icon{
width:150px;
height:62px;
position:relative;
transform: none;
}
</style>
<?php
},999);
適用すると次のようになります。
今回はサイトロゴ以外の画像を使用しましたが、URLを変更すれば他の画像を表示できます。
サイトロゴを表示させない
サイトロゴ画像を表示させたくないときは、embed_site_title_htmlフィルターで、タイトルだけのaタグを構成するのが手っ取り早いです。
add_filter( 'embed_site_title_html' , function($site_title_tag){
return '<a href="'. esc_url(home_url()).'" target="_top">'
.'<span>'.esc_html(get_bloginfo( 'name' )).'</span>'
.'</a>';
});
タイトルもいらない、というときは空文字を返します。
add_filter( 'embed_site_title_html' , function($site_title_tag){
return '';
});
WordPressはHTMやCSSの知識も必要。総合的な知識を身につけよう。
更新日：2023/03/14
関連記事
スポンサーリンク
記事の内容について
こんにちはけーちゃんです。
説明するのって難しいですね。
「なんか言ってることおかしくない？」
たぶん、こんなご意見あると思います。
裏付けを取りながら記事を作成していますが、僕の勘違いだったり、そもそも情報源の内容が間違えていたりで、正確でないことが多いと思います。
そんなときは、ご意見もらえたら嬉しいです。
掲載コードについては事前に動作確認をしていますが、貼り付け後に体裁を整えるなどをした結果動作しないものになっていることがあります。
生暖かい視線でスルーするか、ご指摘ください。
ご意見、ご指摘はこちら。
https://note.affi-sapo-sv.com/info.php
このサイトは、リンクフリーです。大歓迎です。
