WordPressでヘッダー画像をカスタマイズをする方法[カスタムヘッダー]
(2020/10/19更新)
みなさんこんにちは！ワトスンです。
今回は、、
といった疑問に答えます。
WordPressでテーマを自作していると、様々な試練が立ちはだかります。
今回はヘッダーに画像を追加できるようにカスタマイズをする方法をご紹介します！
下↓の画像のようにWordPressのカスタマイズ画面から簡単にヘッダー画像を設置する方法をご紹介
WordPressのカスタムヘッダー機能を使用する
WordPressの管理画面からヘッダー画像を自由に変更できるようにカスタマイズするには、WordPressに元から備わっている「カスタムヘッダー」を使用することで簡単にカスタマイズできます。
WordPressはとても便利なCMSで、開発者のためにたくさんの機能を用意してくれています。
これからご紹介していきますが、「カスタムヘッダー」に限らず、ここはこんな感じでカスタマイズしてみたいな”と思った時は、「WordPress カスタマイズ」などで検索していくと簡単にカスタマイズできるものが見つかると思います。
カスタムヘッダー作成に必要なPHPファイル
さて、それでは「カスタムヘッダー」の作成をしていきます。
今回、ご用意していただくPHPファイルは２つあります。
・function.php
・header.php
の2つです。
この２つのファイルにそれぞれ記述していくだけで「カスタムヘッダー」の完成です。
function.php
まず、function.phpにはカスタムヘッダーを呼び出すためのコードを書いていきます。
WordPressには様々な機能が追加できる、「add_theme_support()」というコードが存在します。
このコードを使用することで、WordPressをより便利に使いこなすことができます。
今回はそのうちの１つ、「カスタムヘッダー」を作成していきます。
他にもたくさん機能が追加できるので、「WordPressのカスタマイズの使い方」からぜひ確認してみて下さい。
カスタムヘッダーを作成する場合は、function.phpに以下のコードを書いていきます。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
//カスタムヘッダー呼び出し add_theme_support( 'custom-header' ); $custom_header = array( 'random-default' => false, 'width' => $headerwidthpx, 'height' => $heightpx, 'flex-height' => true, 'flex-width' => false, 'default-text-color' => '', 'header-text' => false, 'uploads' => true, 'default-image' => get_stylesheet_directory_uri() . '/images/af.png', ); add_theme_support( 'custom-header', $custom_header ); //カスタムヘッダー呼び出し |
カスタムヘッダーの詳細は「カスタムヘッダーの使い方」からご覧ください。
「$headerwidthpx」と「$heightpx」のためのプログラムも記述します。↓
|
1 2 3 4 5 6 7 8 9 10 |
if(trim($GLOBALS['stdata62']) !== ''){ $heightpx = $GLOBALS['stdata62']; }else{ $heightpx = 500; } if(trim($GLOBALS['stdata70']) !== ''){ $headerwidthpx = $GLOBALS['stdata70']; }else{ $headerwidthpx = 2200; } |
以上の記述をfunction.phpに記述することで、とりあえず「カスタムヘッダー」の使用が可能になります。
ですが、これだけだと画像を表示させることができないので、header.phpに画像を表示させるためのコードを挿入していきます。
header.php
header.phpにはカスタムヘッダーで設定した画像を表示させるためのコードを記述していきます。
以下のコードをヘッダー画像を設置したい場所に記述して下さい。
|
1 2 3 4 5 6 |
<!--ヘッダー画像読み込み--> <?php if ( get_header_image() ) : ?> <img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt=""> <?php endif; ?> <!- -ヘッダー画像読み込み--> |
以上をheader.phpに記述できれば完成です。
WordPressの管理画面の「外観→カスタマイズ→ヘッダー画像」から画像を自由に変更できるようになりました！
コードの意味がわからない場合は、コピペでも上手く表示されるのでお試しください。
なにか疑問点がありましたらコメントまたはTwitterのDMでご連絡ください！
以上です。
