Visualforceのコンポーネントでヘッダとフッターを表示する

Visualforceでサイト共通の部品を使う事ってよくありますよ。
特にヘッダーやフッターはよくある例なのですが、コンポーネント化する方法は実はあまり知られていなかったりするので書いておきます。

前提

• API Version: 35
• 環境: 開発者向け環境

手順

1.コンポーネントを作成

まずは以下の様にヘッダーとフッターコンポーネントを作成します。

test_component_header.vfc

<apex:component >
    <h1>ヘッダーを表示します</h1>
</apex:component>

test_component_footer.vfc

<apex:component >
    <hr/>
    <center><div>
        @wolfeatsapple all rights reserved.
        </div></center>
</apex:component>

2.コンポーネントを読み込む

それらを各コンテンツページで<c>タグで読み込むだけです。

test_component_home.vfp

<apex:page showHeader="false" sidebar="false" standardStylesheets="false">
    <!-- <c>タグでコンポーネントを呼び出します -->
    <c:test_component_header />

    <!-- ここからメインコンテンツ -->
    <div>
        <p>ホームです。</p>
    </div>
    <!-- ここまでメインコンテンツ -->

    <!-- ヘッダー同様にフッターもコンポーネントで呼び出します -->
    <c:test_component_footer />
</apex:page>