【WordPress】カスタムロゴ(custom logo)を使ってサイトロゴを設置

こんにちは！日々Wordpressと格闘している Millmiです^^

WordPressのカスタムロゴ機能を有効にする方法と、カスタムロゴ(custom logo) の使い方をご紹介。

この機能は、

1. テーマカスタマイザーでロゴ画像を登録
     ▼
2. <?php the_custom_logo(); ?> で呼び出す
     ▼
3. リンク付きサイトロゴ を書き出してくれる

という、と～っても便利でありがたい機能^^

ただ、「リンク無しで書き出し」というタグは無いので、画像だけを表示したい時は少々手間がかかりますが、、、
その辺も含め、ほぼコピペでOKなコードを載せています。

カスタムロゴ機能を有効にする

WordPressで、サイトロゴ（カスタムロゴ）がサポートされるようになってだいぶ経つので、最近のテーマには、ほぼほぼ設置されていると思いますが、、、

 

add_theme_support( 'custom-logo' ); 

これだけでOK^^
規定のサイズやら用意されているパラメーターを使いたい場合は、WordPress.ORG(英語) でご確認下さいm(__)m

※カスタムロゴはWordPress4.5以降しか使えません。
※古いバージョンをお使いの場合は、セキュリティの為にもWPのバージョンアップをお勧めします。

カスタムロゴの呼び出し方法

カスタムロゴ機能はとても便利ですが、、、

トップページではリンク無しにしたい、
画像のurlだけ取り出したい
となるとちょっとひと手間かかっちゃいます _ _;;

そこで、いくつかのパターンに分け、コードと併せてご紹介します(コピペOK^^)

• テンプレートに直書き(シンプルタイプ)
  • カスタムロゴを書き出すだけ(リンク有)
  • ロゴ登録が無ければサイト名を表示
  • 画像url を取得
• コピペで使える完パケ (functionsに設置)
  トップページ(h1=リンク無)・それ以外(p=リンク有)
  ロゴ画像の有無にも対応!!

テンプレートに直書きするシンプルタイプ

header.phpなど、サイトロゴを表示したいテンプレートに直に記載します。

ロゴを書き出すだけ

 <?php the_custom_logo(); ?>

これだけで
<a href=”トップページurl” class=”custom-logo-link” rel=”home”>
<img width=”○○” height=”○○” src=”画像URL” class=”custom-logo” alt=”サイトタイトル” />
</a>

と書き出してくれます。

更に、ロゴが登録されていない時は、何も書き出ないので
エラーにはなりません。素晴らし～＼(^o^)／

ロゴ登録が無ければサイト名を表示

ロゴが無ければ空白、っていうのも困りますよね^^;;
そこでカスタムロゴを登録していなければ、サイト名を書き出すようにしましょう。

<?php 
    the_custom_logo(); 
    if( ! has_custom_logo() ){ 
         echo '<a href="'. home_url() .'" rel="home">'. get_bloginfo( 'name' ) .'</a>'; 
     } 
?> 

the_custom_logo()は、無ければ何も書き出さないのでそのまま。
登録されていない時の為だけに ! has_custom_logo() で分岐させています。

これを全ページ表示するようにして
トップページは css でリンク停止( pointer-events: none; ) にしちゃうって手もありかな^^

<h1>などページごとのタグ変更は、分岐させるなりして下さいませm(__)m

画像のurl を取得 (データ取得のみ)

リンク無しで表示したい時など必要になるのが ロゴ画像のurl

<?php 
    if( has_custom_logo() ){ 
	$custom_logo_id = get_theme_mod( 'custom_logo' ); 
	$image = wp_get_attachment_image_src( $custom_logo_id , 'full' ); 
	$mylogo = $image[0]; 
    } 
?> 

「 theme_mod 」では、カスタムロゴの [ 画像ID ]だけを保存していますので、get_theme_mod( ‘custom_logo’ ) でIDを取り出します。

3行目 ⇒ ‘custom_logo’ のIDを取得
4行目 ⇒ IDを使って、ロゴ画像のurl取得
5行目 ⇒ $mylogoにurlを格納

という流れ。あとは $mylogo を煮るなり焼くなり、です^^;

コピペで使える完パケタイプ

ここのコードは

• トップページ<h1>でリンク無し
• それ以外は <p>でトップページへのリンク付き
     &&
• ロゴ画像を登録していたらロゴ画像表示
• 登録が無ければサイト名を表示

になります。

 function mycustom_logo(){ 
 if( has_custom_logo() ){ 
	$custom_logo_id = get_theme_mod( 'custom_logo' ); 
	$image = wp_get_attachment_image_src( $custom_logo_id , 'full' ); 
  	$mylogo = $image[0]; 
	$mylogo = '<img src="'. $mylogo .'" class="custom-logo" alt="'. get_bloginfo( 'name' ) .'" />'; 
 } else { 
	 $mylogo = get_bloginfo( 'name' ); 
 } 
 if( is_front_page() && is_home()){
	echo '<h1 class="site-logo">'. $mylogo .'</h1>'; 
 } else { 
	echo '<p class="site-logo"><a href="'. home_url() .'" rel="home">'. $mylogo .'</a></p>'; 
 } } 

使い方

上のコードを functions.php にコピペしたら、表示したい場所に

<?php mycustom_logo(); ?>

と書くだけです!!