WordPressのカスタムロゴ

カスタムロゴ

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管理画面から設定
  1. WordPressダッシュボードにログインします。
  2. 「外観」→「カスタマイズ」をクリックします。
  3. 「サイトの識別」を選択します。
  4. 「ロゴを選択」ボタンをクリックしてロゴをアップロードします。
STEP
既存のロゴを変更または削除
  1. カスタマイザーでロゴを変更する場合は、現在のロゴをクリックして新しいロゴをアップロードします。
  2. ロゴを削除したい場合は、カスタマイザーの「削除」ボタンをクリックします。

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()関数を適切に配置することで、サイトのブランドイメージを向上させることができます。カスタムロゴが設定されていない場合は、サイトタイトルとサイト説明を代わりに表示するようにすることで、ユーザーに対して一貫した情報を提供できます。

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

初めてホームページを作成したのは1996年。
2000年よりフリーランスで主に中小企業、学校、各種公的団体、個人事業主のWordPressを活用したホームページ制作を行っています。WordPressテーマはそれぞれのクライアントに合わせて作成しています。
WordPressを活用したサイト運営のための情報発信をしていきます。

目次