FileMaker以外にWordPress、node.jsなど興味あることを発信するページ!

FileMakerマニアが語るプログラミング雑学

WordPress

オリジナルテーマの作成から深掘りするWordPress その5 〜カスタムヘッダー 〜

投稿日:2021年2月3日 更新日:

今回はヘッダー画像を変更する場合について、クライアント目線で考えてみました。いろいろ調べてみたことを整理するため記事にします。

miku-nosuke

この記事を読むことでカスタムヘッダーについて理解することが出来ます。

ヘッダー画像を変更するにはコードを書かないとダメなの?

いいえ。WordPressの機能を使うことで簡単に変更できます!

htmlを使える人なら画像を変更するのは簡単ですよね。imgタグのsrcを変更すれば良いのですから。しかし、クライアント目線で考えると不親切な話です。また、制作者側としてもせっかくWordPressを使っているのですからわざわざエディタを開くのも煩わしいと思いませんか?

functions.phpを使ってカスタマイズ

様々な機能をカスタマイズするにはfunctions.phpファイルを用意します。ここにコードを書くことでWordPressの機能が拡張できます。

エディタソフトからfunctions.phpを作成

fig1 functions.php

まずは、functions.phpファイルを作ってしまいましょう。名前はfunctions.phpです。スペルをfunction.phpとsを付けるのを忘れたため変更がきかず少し悩みました。

add_theme_support( ‘custom-header’ );

先ほど作ったfunctions.phpに次のようにコードを書きます。

<?php
// カスタムヘッダー
add_theme_support( 'custom-header' );
?>

add_theme_support
 これは、テーマ機能を設定する関数。引数にcustom-headerを指定することでWordPressに備えられているヘッダー機能を追加する。

つづいて、header.phpに次のコードを追加します。

    <?php $header_image = get_header_image();
    if (!empty($header_image)) : ?>
      <div id="header_img">
        <a href="<?php echo home_url(); ?>"><img src="<?php header_image(); ?>" alt="<?php bloginfo('name'); ?>" /></a>
      </div>

get_header_image
 これは、ヘッダー用イメージのurlを取得する。設定されていない場合はfalseを返す。

 何が書いてあるかというと、ヘッダーイメージが設定されている場合は、そのurlをimg srcのところに表示してちょんまげ。ということです。上記のコードをどこに追加するかというと下図を見て下さい。

fig2 追加したコードの場所

もともとヘッダーイメージが書いてあった場所の直下に追加しました。まあ、上でも良いのですが。その理由はヘッダーイメージは一つでよいので、もともとあったイメージは消してしまうからです。どういうことか見てみましょう。

カスタム後の確認

functions.phpとheader.phpにそれぞれコードを書き足したので、それがどのように影響したのか見てみます。

fig3 カスタム前
fig4 カスタム後

このように管理画面にヘッダーが表示されるようになりました。さらに、追加されたヘッダーをクリックしてみます。

カスタムヘッダーを説明するイメージ写真その1
fig5 ヘッダーのカスタマイズ画面

どうでしょう。このようにカスタム画面が表示されました。さらには、カスタマイズ前にはなかった“ヘッダー画像”と“色”の2項目が増えています。

つづいて、ヘッダー画像をクリックしてみましょう。
下図のようにヘッダー画像を選択できる画面に変わります。

カスタムヘッダーのカスタマイズ中の画像で新規画像追加を表示
fig6 ヘッダー画像追加画面

新たにチョコレートケーキの画像を追加してこれを選択しました。
ちょっぴり大人感が出てきましたね。

カスタムヘッダーから新規画像を追加したところの画像
fig7 新規に追加した

で、プレビューしてみるとなんとヘッダーイメージが2つ並んでしまいました。
それもそのはず、もともとあったイメージの部分が表示されていたからです。

カスタムヘッダー設定でヘッダー画像が2枚表示されているところ

それでは、修正しましょう。
修正とはいっても、もともとあったイメージ部分を消すだけです。

カスタムヘッダーのもともとのヘッダーイメージコードを削除したところ
fig8 もともとあったイメージ部分のコードを削除

まとめ

最終的にはこのようになりました。

まとめ

  • カスタムヘッダーを使うにはfunctions.phpファイルが必要
  • functions.phpにadd_theme_support( ‘custom-header’ );を記述
  • header.phpにもともとあったイメージコードは削除
  • header.phpにヘッダーイメージ用のコードを追加する

次回はもう少しadd_theme_support( ‘custom-header’ );を深掘りします。

Follow me!

-WordPress

執筆者:


comment

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

関連記事

WordPressカスタマイズ その2 初心者でもわかる、子テーマをつくる方法

前回は子テーマの必要性について記事にしました。今回は実際に子テーマを作ってみます。必要なスキルとしては以下になります。 htmlの基礎知識(コードを書いたことがある)cssの基礎知識VS codeなど …

オリジナルテーマ作成から深掘りするWordPress その3

今回は、テンプレートファイルについてです。htmlでwebサイトを構築する際に「面倒だな〜」と思うことがあります。それを解決すべくWordPressには便利な機能が備えられています。その一つがテンプレ …

オリジナルテーマ作成から深掘りするWordPress その2

前回、index.htmlからindex.phpへ変更した時にstyle.cssやimgのパスを変更しました。パスをエディタソフトで書き換えましたが、WordPressには便利な関数があります。今回は …

オリジナルテーマ作成から深掘りするWordPress その1

今回はオリジナルテーマの作成を取り上げます。cocoonなどのテーマをカスタマイズする方法について調べる一方、オリジナルテーマを作るってどうやるんだろうと思いを巡らせていたところ意外にも簡単だったので …

WordPress カスタマイズ その1

2020年現在、ホームページの25%はWordPressで作られていると言われているほど勢いのあるWordPress(以下WP)。そんなWPについて、いま、まさに学習しています。学習してみるといろいろ …

プロフィール

miku-nosuke

職業:web制作者
生息地:東京都
趣味:ジョギング、コーディング、ガーデニング

もの作り大好き!FileMakerは25年の経験で多くの業務システムを作成。html、cssなどフロントも大好き!
まったくの別業界から好きなことに没頭したい、好きなことを仕事にしたいと思いプログラミングを学習する。それまではノンコードデータベースソフトFileMakerに没頭する。はまりすぎてFileMaker選手権で受賞しFileMakerを中心に活動する。
どの言語を学ぶにもhtml、css を知らないと話にならないと気づく。html、css、WordPress、サーバー構築などを語ります。

50歳を過ぎてふと思ったんだ、自分のやりたい事って今の仕事だったのか?
そんな時にたまたま見た日本人3Dグラフィックデザイナーの成田さんを題材にした番組。彼は45歳でグラフィックデザイナーを志、ついにはStarWarsの制作を手がける。そんな彼の言葉「人生に失敗していたんだ。この年になってはじめて自分のやりたいことに気付き、やり直したい」に感銘を受ける。

PAGE TOP