テーマ開発者がうれしい!WordPress 4.5のCustom Logo APIってどう使う?

2016/05/20

Jérémy Heleine

3

Articles in this issue reproduced from SitePoint
Copyright © 2016, All rights reserved. SitePoint Pty Ltd. www.sitepoint.com. Translation copyright © 2016, KADOKAWA ASCII Research Laboratories, Inc. Japanese syndication rights arranged with SitePoint Pty Ltd, Collingwood, Victoria,Australia through Tuttle-Mori Agency, Inc., Tokyo

WordPress 4.5の注目機能として紹介した「ロゴの変更」機能。テーマを利用するユーザーに喜ばれる新機能ということは、テーマ開発者も対応したほうがいいですよね?

開発者を含むWordPressユーザーは、自分のサイトをいつでも好きなようにカスタマイズできるとは限りません。数多くのテーマ(無料および有料)を選べますが、ロゴの変更が簡単にできないと不満を持っている人は多くいるでしょう。テーマの中には、オプションとしてロゴ変更できる場合もありますが、オプションが必ずあるわけではありません。

Webサイトのロゴを簡単に変更できるように、WordPressチームはWordPress 4.5に新機能「Custom Logo」を追加しました。Custom Logoによって、WordPressユーザーはカスタマイザーを使ってロゴ変更ができるようになりました。

開発者は、Custom Logoをどのようにテーマに利用するのか知りたいことでしょう。嬉しいことにCustom Logoはシンプルにできているので、ロゴのカスタマイズができないということはないはずです! 記事では、Custom Logoを利用したロゴ変更の方法を紹介し、開発者がCustom Logo APIを使ってCustom Logoを有効化する方法について紹介します。

ロゴのカスタマイズ

Custom Logoが有効ならば、Webサイトのロゴをとても簡単に変更できます。これががCustom Logoの目的だからです。

最初にカスタマイザーを開きます。WordPressダッシュボードの「Appearance」メニューの中の「Customize」エントリーを使います。「Customize」エントリーが見つからない場合は、カスタマイズをしたいテーマを使っているWebサイトの管理者権限がないということです(または、使用しているWordPressのバージョンが大変古いため、なるべく早くアップデートする必要があります!)。または、各ページ上部にある管理バーの「Customize」から、カスタマイザーにアクセスすることもできます。

01

カスタマイザーの「Site Identity」パネルを選択すると「Logo」セクションが表示されます。初めてロゴを変更する場合は、サイトに表示したいロゴを選択できる「Select logo」ボタンが表示されます。

「Select logo」ボタンをクリックするとメディアウィンドウが開きます。既存の画像から選択するか新規画像をアップロードして、右下の「Choose logo」ボタンをクリックして選択画像を決定します。

ロゴの選択が終了すると、「Logo」セクションの、カスタムロゴ削除用と変更用の2つのボタンの上に選択したロゴが表示されます。

02

カスタマイザーを使用するメリットは、変更を直接確認できることです。実際、ロゴ変更後は、同じ結果をWebサイトで見られます。カスタマイザー上部にある「Save & Publish」ボタンをクリックしない限り、変更は自分以外の誰も見られません。

Custom Logo APIの利用

WordPressのデフォルトのテーマは、Custom Logoが利用できるので試してみましょう。別のテーマを使用する場合も、Custom Logoの有効化が必要です。これからその方法を紹介します。

Custom Logoの有効化

Custom Logoを有効化するには、設定が必要です。Custom Logoがデフォルトで有効ではないのはそれなりの理由があるからです。後で説明をしますが、Custom Logoを使うには特定の機能を使用しなければ有効にならないので、ロゴを変更しても無駄になります。

Custom Logoをサポートする設定は、add_theme_support()関数を使います。コールバック関数とafter_setup_themeアクションを利用するのが最も良い方法です。次のコードをテーマのfunctions.phpファイルに加えて、Custom Logoの設定をしましょう。

function mytheme_setup() {
    add_theme_support('custom-logo');
}

add_action('after_setup_theme', 'mytheme_setup');

これでユーザーがカスタマイズしたロゴを使用できるようになりましたが、問題は表示されないことです。変更したロゴをどのようにして表示するかを紹介する前に、便利なパラメーターについて触れておきます。

ロゴサイズの選択

ロゴはWebサイトの個性の一部ですが、テーマ開発者のようにサイズが選択ができない訳ではありません。たとえば大きすぎるロゴはテーマデザイン全体を損ねてしまい好ましくないので、ロゴサイズの選択はかなり重要です。

Custom Logoでサイズ調整をする場合、サイズ名、幅、高さという3つのパラメーターを持つadd_image_size()関数でサイズを指定します。Custom Logo設定のパラメーターの1つとして、サイズを表記します。

add_image_size('mytheme-logo', 160, 90);
add_theme_support('custom-logo', array(
    'size' => 'mytheme-logo'
));

ユーザーが小さめのロゴを選択してしまうと、あとでそれ以上の大きさへのサイズ変更ができなくなります。逆に画像サイズが指定より大きければ、高さでも幅でもサイズ変更ができます。WordPressでは画像サイズを変更する際、元の比率が維持されます。Custom Logoは許容範囲を超える高さや幅に拡大できませんが、縮小はできます。

カスタマイズしたロゴの表示

Custom Logoのサポートを設定したら、カスタマイズしたロゴを表示する必要があります。ロゴを表示したい場所でthe_custom_logo()関数を使います。正しいHTMLコードを自動的にエコーし、ホームページへリダイレクトするリンクに、カプセル化された正しいサイズのロゴ画像を表示します。

もし何らかの理由で、単にコードをエコーするのではなく元に戻したい場合は、get_custom_logo()関数も使えます。また、the_custom_logo()関数はロゴを表示するのに、見えないところでget_custom_logo()関数を呼び出すことに注意してください。

最後に、3つめとなるhas_custom_logo()関数がテーマ作成に便利です。その名のとおり、Custom Logoが設定されている場合はtrueを、そうでない場合はfalseを返します。

次のコードでは、カスタマイズしたロゴがあれば表示します。has_custom_logo()関数を使ってカスタマイズしたロゴの有無を調べ、表示するロゴがない場合にはサイト名のみを表示します。

<?php
// Display the Custom Logo
the_custom_logo();

// No Custom Logo, just display the site's name
if (!has_custom_logo()) {
    ?>
    <h1><?php bloginfo('name'); ?></h1>
    <?php
}
?>

the_custom_logo()関数の前にhas_custom_logo()関数を使用していないことに注意してください。実際、表示すべきロゴがない場合にはthe_custom_logo()関数は空の文字列を表示するので、ロゴの有無をチェックする必要はありません。

同様のことを別の方法でやってみましょう。カスタマイズしたロゴまたはサイト名のみを表示するような関数を(たとえばfunctions.phpファイル中に)定義します。今回は、テーマがWordPressの旧バージョンに対応できるようにfunction_exists()関数を使います。

function mytheme_custom_logo() {
    // Try to retrieve the Custom Logo
    $output = '';
    if (function_exists('get_custom_logo'))
        $output = get_custom_logo();

    // Nothing in the output: Custom Logo is not supported, or there is no selected logo
    // In both cases we display the site's name
    if (empty($output))
        $output = '<h1><a href="' . esc_url(home_url('/')) . '">' . get_bloginfo('name') . '</a></h1>';

    echo $output;
}

これで、ヘッダーなど、どのような場所からでもこの関数を呼び出せるようになりました。

最後に

WordPressの新バージョンで搭載されたカスタマイザーは、テーマを変更せずに自分好みのWebサイトが作れる便利なものです。

Custom Logo APIと前の記事で紹介したSite Icon API のおかげで、開発を外注せずに、Webサイトを簡単に調整できるようになりました。

(原文:How to Use the WordPress Custom Logo API

[翻訳:Noriko O. Romano]
[編集:Livit

Copyright © 2016, Jérémy Heleine All Rights Reserved.

Jérémy Heleine

Jérémy Heleine

好奇心あふれる数学科の学生です。ブログで毎日ハイテク関連のニュースを発信しているほか、自由な時間はWeb開発に没頭しています。新しいことを学ぶのが大好きで、自分の知識を他の人とシェアすることを生き甲斐としています。

Loading...