WordPressでカスタムヘッダー機能を付ける

WordPressでカスタムヘッダー機能を付ける

テーマにカスタムヘッダー機能を付ける方法です。

function.phpに下記を記入して、カスタムヘッダー機能を有効にします。

add_custom_image_header('header_style','');

カスタムヘッダー機能を有効にすると、ダッシュボードの外観の項目に”ヘッダー”が追加されます。
ダッシュボードの外観の項目に”ヘッダー”が追加

続けてfunction.phpに下記を記入します。

define('HEADER_TEXTCOLOR', 'ffffff');
define('HEADER_IMAGE', '%s/images/default_header.jpg'); // %s is the template dir uri
define('HEADER_IMAGE_WIDTH','950'); //横サイズ指定
define('HEADER_IMAGE_HEIGHT','200'); //縦サイズ指定

• ‘HEADER_TEXTCOLOR’, ‘ffffff’
テキストの色の設定です。
※ヘッダーのテキストの色を変更できないようにするには下のように記入。
define(‘NO_HEADER_TEXT’, true );

• ‘HEADER_IMAGE’, ‘%s/images/default_header.jpg’
デフォルトのヘッダー画像の設定です。”%s”はテンプレートファイルまでのパスです。

• ‘HEADER_IMAGE_WIDTH’,’950’ ’HEADER_IMAGE_HEIGHT’,’200′
指定した大きさでアップロードする設定です。
指定した大きさでアップロードする設定

次に下記をfunction.phpに記入します。”header_image();”でカスタムヘッダーで指定した画像を呼び出します。下記のスタイルが実際のコードに追加されます。

function header_style() {
    ?><style type="text/css">
        #header {
            background: url(<?php header_image(); ?>);
        }
    </style><?php
}
&#91;/php&#93;

もしくはheader.phpの<head>部分に下記のように記入します。
&#91;php&#93;
<style type="text/css">
#header {
	background-image: url(<?php header_image(); ?>);  
}
</style>

Related Article

No Comments & Tracbacks

Leave a Comment

Emailは公開されません。*は必須項目です。


*


Categorys

Tags

CSS3 ダッシュボード ヘッダー トラブル コードサンプル スライドショー コンテンツ 素材 jQueryプラグイン Facebook php 引っ越し お知らせ JavaScript CSS カテゴリー Shareボタン IE 投稿タイプ seo Photoshop HTML5 レスポンシブ サイドバー ナビゲーション タクソノミー WPセキュリティ Git カスタムメニュー Macアプリ PHPリファレンス SVG query_posts API WP使い方 iTunes データベース コメント function RSS 条件分岐 get_posts() スマートフォン Sass/Compass マルチサイト機能