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

2022/06/07WordPress

当ブログでは、オンライン学習サービス「CodeCamp」をおすすめしています。
CodeCampは、株式会社コードキャンプが提供しているオンライン学習サービスです。
利用するメリットとして、マンツーマン指導や転職支援があることが挙げられます。
また、今なら無料でカウンセリングが受講でき、受講料1万円割引クーポンが貰えます。
独学に限界を感じている方や、就職・転職やキャリアに悩んでいる方は相談してみてはいかがでしょうか？
ぜひ一度カウンセリングを受講してみてください。この機会をお見逃しなく！

CodeCamp

実行環境

OS	macOS Catalina 10.15.7
WordPress	5.7.2

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

XAMPPのローカル環境にWordPressをインストールする方法

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

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

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

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

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() ?>は、サイトにリンクされたカスタムロゴを表示するテンプレートタグです。

カスタムロゴを設定する

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

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

お疲れさまでした

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

どんな記事が読みたいですか？

現在、ミルラクでは記事に関するアンケートを実施しています。
ご回答いただいた内容は今後の記事の役立てていきますので、ぜひご回答ください！

目次