ホーム>技術

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

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

目次

おすすめ

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

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

CodeCamp

実行環境

OSmacOS Catalina 10.15.7
WordPress5.7.2

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

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

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のテーマでカスタムロゴを使用する方法をご紹介しました。
少しでも参考になれば幸いです。

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

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