WordPressのカスタムロゴ機能は、WordPressテーマでカスタマイズ可能なサイトのロゴを表示するための機能です。カスタムロゴは、管理画面の「外観」→「カスタマイズ」→「サイトの識別」セクションで設定できます。この機能により、サイトのロゴを簡単にアップロードして表示できます。
目次
カスタムロゴの設定と使用方法
STEP
テーマのサポートを追加
まず、テーマがカスタムロゴ機能をサポートするように設定する必要があります。これを行うために、テーマのfunctions.phpファイルに以下のコードを追加します。
function mytheme_setup() {
add_theme_support('custom-logo', array(
'height' => 100,
'width' => 400,
'flex-height' => true,
'flex-width' => true,
));
}
add_action('after_setup_theme', 'mytheme_setup');
このコードは、カスタムロゴの高さと幅を指定し、柔軟な高さと幅のサポートを追加しています。
STEP
カスタムロゴを表示
次に、テーマのテンプレートファイル（通常はheader.php）にthe_custom_logo()関数を追加して、カスタムロゴを表示します。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
if (function_exists('the_custom_logo')) {
the_custom_logo();
}
?>
<h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
<p class="site-description"><?php bloginfo('description'); ?></p>
</div><!-- .site-branding -->
</header><!-- #masthead -->
<?php wp_footer(); ?>
</body>
</html>
カスタムロゴの設定方法
STEP
WordPress管理画面から設定
- WordPressダッシュボードにログインします。
- 「外観」→「カスタマイズ」をクリックします。
- 「サイトの識別」を選択します。
- 「ロゴを選択」ボタンをクリックしてロゴをアップロードします。
STEP
既存のロゴを変更または削除
- カスタマイザーでロゴを変更する場合は、現在のロゴをクリックして新しいロゴをアップロードします。
- ロゴを削除したい場合は、カスタマイザーの「削除」ボタンをクリックします。
the_custom_logo()関数の詳細
<a href="http://example.com" class="custom-logo-link" rel="home">
<img src="http://example.com/wp-content/uploads/2023/05/logo.png" class="custom-logo" alt="Site Title">
</a>the_custom_logo()関数は、上記のようなHTMLを出力します。なお、カスタムロゴが設定されていない場合、この関数は何も出力しません。そのため、サイトタイトルやサイト説明を代わりに表示するコードを追加するのが一般的です。以下のようなコードでそれを実現します。
<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="<?php bloginfo('charset'); ?>">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="profile" href="https://gmpg.org/xfn/11">
<?php wp_head(); ?>
</head>
<body <?php body_class(); ?>>
<header id="masthead" class="site-header">
<div class="site-branding">
<?php
if (function_exists('the_custom_logo') && has_custom_logo()) {
the_custom_logo();
} else {
?>
<h1 class="site-title"><a href="<?php echo esc_url(home_url('/')); ?>" rel="home"><?php bloginfo('name'); ?></a></h1>
<p class="site-description"><?php bloginfo('description'); ?></p>
<?php
}
?>
</div><!-- .site-branding -->
</header><!-- #masthead -->
<?php wp_footer(); ?>
</body>
</html>
WordPressのカスタムロゴ機能を利用することで、サイトに簡単にロゴを追加することができます。テーマのfunctions.phpファイルでカスタムロゴ機能を有効にし、テンプレートファイルでthe_custom_logo()関数を適切に配置することで、サイトのブランドイメージを向上させることができます。カスタムロゴが設定されていない場合は、サイトタイトルとサイト説明を代わりに表示するようにすることで、ユーザーに対して一貫した情報を提供できます。
