【WordPress】カスタムロゴ機能をフル使用。画像サイズをCSSで指定し、 テキスト表示には別タグのCSSを指定するWordPressの管理画面から、自由にタイトル用のロゴ画像をアップできる、カスタムロゴの機能。
カスタムロゴを使えるようにして、カスタムロゴの画像サイズなどを外部CSSで指定したり、画像がない時のみ、別なCSSを指定する。
そのような設定をする機会があったので、内容をメモしておきます。

もくじ

  1. とりあえず表示する書き方
  2. カスタムロゴ画像の高さや幅を、外部CSSで指定する書き方
  3. 【完成】カスタムロゴ画の高さをCSSで指定し、テキスト表示時には別タグのCSSを指定する
  4. 表示されたHTMLを見てみる
  5. カスタムロゴの使い所？

１．とりあえず表示する書き方


とりあえす、表示してみる。
WordPresのカスタムロゴを表示するのに、ウェブで見つけた記述方法は以下の通り。
参考サイト：カスタムロゴの使い方 - WPQW

function.php 内

<?php

// カスタムロゴ
$custom_logo_support = array(
 'height' => 100, // 推奨されるロゴの高さ 100px
 'width' => 400, // 推奨されるロゴの幅 400px
 'flex-height' => true, // 動的な高さを許可する
 'flex-width' => true, // 動的な幅を許可する
 'header-text' => array( 'site-title' ), // 'site-title'というクラスの要素を非表示にする
);
add_theme_support( 'custom-logo', $custom_logo_support );

?>

add_theme_support( 'custom-logo' );　使い、カスタムロゴを使用できるようにする。
$custom_logo_support = array　の下には各種パラメータを書いておく。

テーマファイル（私の場合はヘッダー用テーマファイル）に、表示できるように記述を追加する。

header.php

<?php if ( function_exists( 'the_custom_logo' ) ) : ?>
 <?php the_custom_logo(); ?>
<?php endif; ?>

WordPresの管理画面からカスタムロゴ用のロゴ画像をアップしてみる。
すると以下のようにHTMLで出力されていた。

表示されていたHTMLソース

<a href="http://www.mydomain.com/" class="custom-logo-link" rel="home" aria-current="page">
 <img width="515" height="328" src="http://www.mydomain.com/imagefile/logo.png" class="custom-logo" alt="サイト名" srcset="http://www.mydomain.com/imagefile/logo.png 515w, http://www.mydomain.com/imagefile/logo-480x306.png 480w" sizes="(max-width: 515px) 100vw, 515px" />
</a>

カスタムロゴはちゃんと表示されていた！

カスタムロゴを使えるようにしたうえに、カスタムロゴ画像サイズなどを外部CSSで指定したり、画像がない時のみ、別なCSSを指定する

２．カスタムロゴ画像の高さや幅を、外部CSSで指定する書き方


でも、これだと、アップした画像のサイズ（width="515" height="328"）がそのまま入っている。
高さは幅はCSSで設定したいのだけど、他に方法がないかな…、と探したら、以下のページを見つけました。

参考サイト：最初にやっておきたいfunctions.phpの基本設定 #PHP - Qiita

function.php

<?php

add_theme_support('custom-logo');
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 '<span class="site-logo"><a href="'. home_url() .'" rel="home">'. $mylogo   .'</a></span>';
  }
}

?>

普通に呼び出す形でなく、　$custom_logo_idを使わないといけなかったらしい。
これだと、CSSで高さを指定できる。
しかも、front_pageとis_homeだけ、h1タグをつけてくれている親切なcodeです。

header.php

<?php if ( function_exists( 'the_custom_logo' ) ) : ?>
  <?php mycustom_logo(); ?>
<?php endif; ?>

function.phpに合わせ、mycustom_logo()と書いています。

そして、WordPresで出力されたHTMLは以下の通り。

<span class="site-logo">
 <a href="http://www.mydomain.com" rel="home">
　<img src="http://www.mydomain.com/imagefile/logo.png" class="custom-logo" alt="サイト名" />
 </a>
</span>

style.css 内

.custom-logo {
  heigh:150px; /* どんな大きさの画像でも高さは150px */
  width:auto; /* auto 無くてもいいかな */
}

CSSが設定できるようになった！

これで全然よいなとおもったけど、カスタムロゴの画像がなく、テキストで表示される時は、<span class="title-text">のタグもつけられないかな…と思ったので

・カスタムロゴがある時（h1タグあり・なし）
・カスタムロゴがない時（h1タグあり・なし）

という簡単な形で記述を追加してみた。

３．【完成】カスタムロゴ画像の高さをCSSで指定し、テキスト表示には別タグのCSSを指定する

function.php

<?php

add_theme_support('custom-logo');
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( has_custom_logo() ){ //カスタムロゴがある時
   if( is_front_page() && is_home()){
     echo '<h1 class="site-logo"><a href="'. home_url() .'" rel="home">'. $mylogo .'</a></h1>';//fromt home
   } else {
     echo '<div class="site-logo"><a href="'. home_url() .'" rel="home">'. $mylogo .'</a></div>';
   }
 } else {
   if( is_front_page() && is_home()){ //カスタムロゴがない時
     echo '<h1 class="site-logo-text"><span class="title-text">'. $mylogo .'</span></h1>';//fromt home
   } else {
     echo '<div class="site-logo-text"><a href="'. home_url() .'" rel="home"><span class="title-text">'. $mylogo .'</span></a></div>';
   }
 }
}

?>

４．表示されたHTMLを見てみる

出力されたHTMLが以下の通り

・カスタムロゴ画像あり　カスタムロゴ表示（frontpageはh1でタグ表示）
カスタムロゴを使えるようにしたうえに、カスタムロゴ画像のCSSを指定したり、画像がない時のみ、別なCSSを指定する

<h1 class="site-logo">
 <a href="http://www.mydomain.com" rel="home">
　<img src="http://www.mydomain.com/imagefile/logo.png" class="custom-logo" alt="サイト名" />
 </a>
</h1>

・カスタムロゴ画像なし　テキストタイトル表示（frontpageはh1でタグ表示）

カスタムロゴを使えるようにしたうえに、カスタムロゴ画像のCSSを指定したり、画像がない時のみ、別なCSSを指定する

<h1 class="site-logo-text">
 <span class="title-text">サイト名</span>
</h1>

５．カスタムロゴの使い所？


今回はWordPressのカスタムロゴを色々調べてみた。したい事を入れて、フル機能。

とはいえ、カスタムロゴってなかなか使わない。
依頼などで作る場合、ロゴ部分が変わる事はめったになかったりする。
でも、一度設定の仕方がわかれば、何かと役立ちそうな機能だと思う。

ハロウィンの時だけちょっと変えるとか…。使い方次第では面白そうな機能かも。