WordPressのテーマで自由にヘッダー画像を変えたり、ローテーションさせるための カスタムヘッダー

WordPressテーマ
このエントリーをはてなブックマークに追加
PR

WordPressにはカスタムヘッダーというものがあります
テーマに組み込むことで、WordPressの管理画面からヘッダー画像を変更したり
複数の画像を準備してローテーション表示にしたりも出来ます

テーマ直接編集する方法でも可能ですが、マルチサイトにしたWordPressだと全てのサイトに同じ画像が適用されるようになってしまうので不便です

 

WordPressのテーマにカスタムヘッダーを導入する

functions.php側に設定をする

まずは、テーマのfunctions.phpにカスタムヘッダーを有効にするコードを記入します

add_theme_support( 'custom-header', $custom_header_params );

必ず <?php  ?>の中に入れてください、また<?php  ?>の前と後ろには改行を入れないでださい
不具合を起こします

 

次に同じくfunctions.phpに

$custom_header_params = array(
 'width'                  => 960,
 'height'                 => 300,
 'header-text'            => false,
);

と記入します、widthは画像の横幅の、heightには画像の縦をそれぞれ指定します
設置する箇所に合わせます

header-textではヘッダーに文字の入力を許可するかというものです
falseでしないです

これでfunctions.phpの方の設定は終わりです

 

テーマ側に設定をする

ヘッダー画像を挿入する箇所にコードを入れます

コードの例

<a href="<?php bloginfo('url'); ?>">
<img src="<?php header_image(); ?>" height="<?php echo get_custom_header()->height; ?>" width="<?php echo get_custom_header()->width; ?>" alt="" />
</a>

imgのタグの箇所がヘッダー画像のものになります
header_image(); でヘッダー画像のURL

高さ、幅もカスタムヘッダーから取得していますが
決まったサイズならば直接指定するだけでもOKです

<img src="<?php header_image(); ?>" height="300" width="900" alt="" />

と出来ます

 

あとはWordPressの管理画面から外観>ヘッダーで
画像をアップロードして設定すれば完了です

PR

COMMENT

コメントを残す

PR

9ineBBの管理人が運営するサイト

WDG WEB DESIGN GALLERY ウェブデザインギャラリー CC0 PHOTO 無料で使える高画質な写真をダウンロード、クレジット表記、リンク不要

9ineBBの最新情報をチェック・購読

Twitter Facebook Google+ Feedly RSS

どこをクリックしてもこの表示を消せます
(3日後以降に再度表示されます)