【ワードプレス】簡単なCSSでヘッダーにウィジェットを設置する方法

2021年6月21日

ワードプレスを使っていて、ヘッダーの中にウィジェットが置けたらな、と思ったことはありませんか？

例えば、このウェブチルサイトのヘッダーにも、サイトロゴ・キャッチフレーズ以外に、テキストやCTAなどを設置しています（ページによって異なります）。

これらは、実はウィジェットを使っています。その方法について紹介しましょう。

ヘッダー内に表示するコンテンツ例

下記のようにヘッダー内に電話番号を表示させていきます。

ちなみに、サイトデザインとしてはテーマLuxeritasをインストールして記事を少し投稿した、ほとんど生に近い状態です。

ヘッダー内左にはサイト名”practice”とデフォルトキャッチフレーズJust another WordPress siteの表示があるだけです。

具体的な手順

①ウィジェットでコンテンツを作成する

テキストウィジェットをヘッダー下に設置して、コンテンツ（電話番号）を入力していきます。

１．テキストウィジェットをヘッダー下ウィジェットに配置

ダッシュボードメニュー　外観＞ウィジェット　と進めて操作します。

２．設置したテキストウィジェットにコンテンツを入力する

すると、サイト表示は以下の通りとなります。

②CSSでウィジェットの位置をヘッダー内に配置する

カスタムCSSを使っていきます。カスタムCSSについては次の記事を参照ください。

１．ウィジェットのidを確認する（CSSのセレクターとする）

Google Chromeの開発者ツールを開いて、今回設置したウィジェットのidを確認します。

すでに使用したウィジェットの状況等により、idは異なりますので必ず個別に確認しましょう。

上の例では、id=text-2ですので、このウィジェットを指定するCSSのセレクターはdiv#text-2となります（または#text-2だけでもよい）。

２．CSSでウィジェットをヘッダー内に配置する

position:absoluteでウィジェットを元の場所（ヘッダー下）から浮かし、topとrightプロパティでヘッダー内の右上に配置します。

子テーマのstyle.cssに記述するのが推奨です。

div#text-2 {
    position: absolute;
    top: 36px;
    right: calc((100vw - 1280px)/2);
}

すると、ウィジェットは指定位置に移動してヘッダー内に配置されます。

top:36pxでブラウザの上から36pxの位置を指定。
right:calc(100vw – 1280px)/2　で、コンテンツのcontainerの右端と同じ位置に揃える。

ただし、コンテンツの幅はLuxeritasの場合、レシポンシブ対応によりブラウザ幅によって以下のように変化します。

ブラウザ幅	container幅
1310px以上	1280px
1200px以上	1140px
992px以上	960px
720px以上	720px
720px未満	100％

container幅は、当然使用テーマによって異なります。

③レシポンシブ対応に調整する

上記のcontainer幅を参考に、レシポンシブ対応するようにCSSを追記して完成させます。

div#text-2 {
    position: absolute;
    top: 36px;
    right: calc((100vw - 1280px)/2);
}

@media screen and (max-width:1309px){
	dic#text-2 {
		right: calc((100vw - 1140px)/2)
	}
}


@media screen and (max-width:1199px){
    div#text-2 {
        right: calc((100vw - 960px)/2);
    }
}

@media screen and (max-width:991px){
    div#text-2 {
        right: calc((100vw - 720px)/2);
    }
}

@media screen and (max-width:719px){
    div#text-2 {
        right: 0;
    }
}

@media screen and (max-width:479px){
    div#text-2 {
        display: none;
    }
}

ブラウザ幅が479px以下（すなわちスマホ表示）では、サイト名やキャッチフレーズと干渉するため表示させない仕様としました。

結果としてサイト表示は以下の通りとなります。

※今回479px以下のスマホ表示では非表示としましたが、ヘッダー画像を縦長に変更してヘッダー内下部に表示するなど、好みによってはいろいろと選択肢はあります。実際、このウェブチルサイトではそうしています。

position:absoluteでウィジェット位置を変更する注意点

今回は、元々のウィジェットの位置をヘッダー下に置いたものを使いましたが、それには理由があります。

Luxeritasのヘッダー下ウィジェットは、その親要素にはpositionプロパティが適用されていないため、position:absoluteをかけるとブラウザの一番上が基準位置となるからです。

例えば、フッター内に設置したウィジェットにposition:absoluteをかけても、フッター内からウィジェットが出ていきません。フッター内ウィジェットの親要素となるフッターエリアにはposition:relativeがかかっているからです。

position:absoluteとposition:relativeの使い方については次の記事を参照ください。

したがって今回の手順は、テーマで準備されているウィジェットの配置位置の中で、親要素にpositionプロパティがかかっていないものを使う、のが条件となります。

とはいえ、仮に親要素にposition:relativeがかかっていたとしても、その親要素が基準位置になるだけですので、topやrightの指定方法を変えればヘッダー内に配置することはできますよね。

まとめ

position:absoluteで簡単にウィジェットをヘッダー内に配置する方法について紹介してきました。

ウィジェットをヘッダー内に設置するには本来、functions.phpとheader.phpの中にウィジェットを設置する記述をする、というのが正論だと思います。しかしこの場合、テンプレートファイルを変更する必要があるので、テーマのアップデートの際のメンテナンスが必要、など面倒なこともあるのですね。

でもカスタムCSSを使えば、テンプレートファイルを書き換える必要がないのでおすすめの方法だと思います。

また、次の記事で今回使用したテーマLuxeritasのおすすめ機能をまとめていますので参考にしてくださいね。