ミルラク

WordPressのテーマでカスタムロゴを使用する方法

更新日: 2022-06-07

当サイトはアフィリエイト広告を利用しています。

おすすめ

WordPressでテーマを作成してみたい!という方にぴったりな本です。
テーマの概要や構成はもちろん、プラグインやセキュリティ等の運用面まで幅広く紹介されています。
中でも、充実した学習用のサンプルファイルと付録にあるPHPの基礎解説は初心者必見です!
ぜひ一度手に取ってみてください。

実行環境

OSmacOS Catalina 10.15.7
WordPress5.7.2

実行環境がない方は、次の記事を参考に構築してください。

[post_link_internal 1368]

WordPressのテーマでカスタムロゴを使用する

今回は、WordPressのテーマでカスタムロゴを使用する方法をご紹介します。

WordPressのテーマでカスタムロゴを使用する手順は次のとおりです。

  1. functions.phpにコードを追加する
  2. テンプレートにコードを追加する
  3. カスタムロゴを設定する

functions.phpにコードを追加する

デフォルトでカスタムロゴ機能は無効になっています。
有効にする為には、テーマの「functions.php」に次のコードを追加します。

<?php
/* カスタムロゴの機能を追加します */
function add_custom_logo_support() {
  add_theme_support( 'custom-logo', array(
    'height'               => 100, // 推奨されるロゴの高さ 100px
    'width'                => 400, // 推奨されるロゴの幅 400px
    'flex-height'          => true, // 動的な高さを許可する
    'flex-width'           => true, // 動的な幅を許可する
    'header-text'          => array( 'site-title' ), // 'site-title'というクラスの要素を非表示にする
    'unlink-homepage-logo' => true, // 訪問者がページにいるときにはホームページにリンクしない
  ) );
}
add_action( 'after_setup_theme', 'add_custom_logo_support' );
?>

テンプレートにコードを追加する

カスタムロゴ機能を有効にしたら、ロゴを表示したい場所に次のコードを追加します。

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

<?php function_exists() ?>は、引数に指定された関数が定義済みかを判定するテンプレートタグです。
<?php the_custom_logo() ?>は、サイトにリンクされたカスタムロゴを表示するテンプレートタグです。

カスタムロゴを設定する

最後に、テーマのカスタマイズ画面からカスタムロゴを設定します。

  1. ブラウザでWordPressの管理画面にアクセス
  2. メニュー > 外観 > カスタマイズ を押下
  3. サイト基本情報 を押下
  4. ロゴ > ロゴを選択 を押下
  5. 設定したいロゴを選択

お疲れさまでした

WordPressのテーマでカスタムロゴを使用する方法をご紹介しました。
少しでも参考になれば幸いです。