Old

WordPressでサイト上部（ヘッダー）にロゴ画像を設置する方法

ども、ゆうせいです。Web屋たるもの、WordPressについて詳しくなければいけません。先日、社内でちょっとしたイントラサイトを作ろうと思いまして、色々とテーマを設定したのですが、サイト上部にロゴを設置するのに苦労しました。

そこで今回は、全国津々浦々、WordPressでロゴ設置に苦しむみなさまのお役に立てればと思いまして、記事を書いてみたいと思います。

ロゴ設置のタグは「header.php」に記入する

まず、サイト上部にロゴを設置するにあたり、

「header.php」内に、<header>タグと<h1>タグがあると思われます。そこに以下のように記述します。

<header id="masthead" class="site-header" role="banner"><div class="inner">
        <div class="site-branding">
            <h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><img src="ここにロゴ画像のURLを入れます" alt="サイトタイトルを入れます"></a></h1>

※テーマによって、<header>タグの「id=」以降の部分が異なりことがあります。

ちょっと解説します。

header.phpの解説

<h1 class="site-title">リンクタグと画像タグ</h1>

ここでは、classが指定されています。これは、CSSでロゴ画像の大きさを制御するためです。

画像挿入タグでロゴ画像の大きさを指定することも可能なのですが、CSSで制御する方が、画像を変更しても大きさが維持されるなど、メンテナンスが簡単になります。

デメリットとしては、キャッシュされないなどが上げられますが、ここではメンテナンス性とソースの綺麗さを優先しています。

<a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home">画像タグ</a>

ロゴ画像をクリックした際に、サイトトップへ移動するためのリンク設定です。サイトトップURLを直接入力しても同じ結果になりますが、WordPressで共通されたタグを入れています。

ロゴ画像の大きさを「style.css」で制御する

次に、前述した通りロゴ画像の大きさをCSSで制御します。

.site-title a img{
    width: 95%;
}

classを設定し、今回は95%としています。これは設置するサイトによって適宜変更してください。もちろんpx単位で設定できるので、横幅がきっちり決まっている場合にはその方がいいですね。

さいごに

普段あまり、いやほとんどコードを書くことのない私です。今回はちょっとチーム内でサイト制作を完結させようと動いてみました。

結果、「餅は餅屋」という結論に至り、コーダーチームの「じゃずー」（じゃずーがこれまで書いた記事はこちら）に力を貸してもらいました。悔しいです。

今回の記事の補足を、いつか「じゃずー」が書いてくれると思いますので、もっと詳しく知りたいという方はぜひご連絡ください。

それではまた。
ご存知、ゆうせいでした。

Share

RECOMMENDこちらの記事も人気です。