「ヘッダーの一番上に営業時間やキャンペーンのお知らせを出したい」「SNSアイコンをサイトの目立つ位置に置きたい」と思ったことはありませんか？
Apuraテーマには、ヘッダーよりさらに上に表示されるトップバー機能が標準で備わっています。
コードを書かずに、お知らせテキスト・SNSリンク・連絡先を表示でき、色やレイアウトもカスタマイザーから細かく調整できます。
この記事では、トップバーの基本設定から、SNS連携、レスポンシブ表示の切り替え、そして開発者向けのフック活用までを順番に解説します。
トップバーとは？できること
トップバーは、サイトのヘッダーの上に表示される細い帯状のエリアです。多くのビジネスサイトやブログで、お知らせ・連絡先・SNSアイコンを表示するために使われている定番のパーツです。Apuraではこのトップバーを、カスタマイザーの「Top Bar」セクションからコードなしで設定できます。
主にできることは次の通りです。
| 設定項目 | 内容 |
|---|---|
| Contents（コンテンツ） | お知らせや営業時間などのテキスト。HTMLやショートコードも利用可能 |
| Social Media Links | X（Twitter）・Instagram・Facebook・YouTube・LINE・連絡先などのアイコン表示 |
| Layout Style | コンテンツとSNSの左右の並び順を切り替え |
| 色設定 | 背景色・文字色・リンク色・SNSアイコンの色とサイズを調整 |
| 表示の切り替え | デスクトップ／タブレット・モバイルそれぞれで表示・非表示を選択 |
トップバーを表示する手順
まずはトップバーを有効化し、お知らせテキストを表示するまでの流れを見ていきましょう。Apuraではデフォルトでトップバーが有効になっていますが、ここでは設定箇所を確認しながら進めます。
- Top Barセクションを開く
WordPress管理画面の「外観 → カスタマイズ」を開き、「Top Bar」セクションをクリックします。
- 表示するデバイスを選ぶ
「Enable: Desktop」と「Enable: Tablet / Mobile」のトグルで、どの画面幅で表示するかを切り替えます。スマホでは非表示にしたい場合は、後者をオフにします。
- お知らせテキストを入力する
「Contents」欄に表示したいテキストを入力します。「営業時間 10:00〜18:00（土日祝休み）」のような短い案内がおすすめです。
- 公開して反映する
プレビューで表示を確認し、問題なければ「公開」ボタンをクリックします。これでヘッダー上部にトップバーが表示されます。
SNSアイコンを表示・カスタマイズする
トップバーにはSNSアイコンを並べて表示できます。アイコンに表示されるリンク先（各SNSのURL）は、トップバーではなく「General Options（一般設定）→ Social Media / Contact Links」でまとめて登録します。Top Barセクション内の「Go to Social Settings」ボタンから、その設定画面へ直接移動できます。
登録できる主なリンクは、X（Twitter）、Instagram、Facebook、YouTube、LINE、そしてメールアドレスなどの連絡先です。URLを入力した項目だけがアイコンとして表示されるため、使うものだけを設定すればOKです。
SNSの見た目に関する設定は、Top Barセクションの中で調整します。
| 設定 | 説明 |
|---|---|
| Enable | トップバーにSNSアイコンを表示するかどうか |
| Open in new tab | リンクを別タブで開くか（外部SNSは別タブ推奨） |
| Icon Size | アイコンの大きさ（10〜40px） |
| Icon Color | 通常時・ホバー時のアイコン色 |
レイアウトと配色を整える
「Layout Style」では、コンテンツ（テキスト）とSNSアイコンの左右の並び順を切り替えられます。「Default」ではコンテンツが左・SNSが右、「SNS / Contents」を選ぶと左右が入れ替わります。サイトのデザインに合わせて選びましょう。
配色は「Background Color（背景色）」「Text Color（文字色）」「Link Color（リンク色：通常／ホバー）」で調整します。背景色はデフォルトでサイトのプライマリカラー（var(--ap-color-primary)）が使われるため、グローバルカラーを変更すると自動的にトップバーにも反映されます。グローバルカラーについては、別記事「グローバルカラー設定」もあわせて参照してください。
開発者向け：フックでトップバーを拡張する
Apuraは子テーマやプラグインからの拡張を前提に設計されており、トップバー周りにもいくつかのフックが用意されています。コア機能を直接編集せずにカスタマイズできるため、テーマ更新時にも安心です。
トップバーにクラスを追加する
apura_topbar_classes フィルターを使うと、トップバーのラッパー要素（.topbar）に独自のCSSクラスを追加できます。条件によって見た目を切り替えたいときに便利です。
<?php
/**
* トップバーにカスタムクラスを追加する。
*
* @param array $classes 既存のクラス配列。
* @return array
*/
function mytheme_add_topbar_class( $classes ) {
// フロントページのときだけクラスを追加する例。
if ( is_front_page() ) {
$classes[] = 'topbar--campaign';
}
return $classes;
}
add_filter( 'apura_topbar_classes', 'mytheme_add_topbar_class' );追加したクラスは sanitize_html_class() によってサニタイズされてから出力されるため、安全に利用できます。あとは子テーマの style.css で .topbar--campaign にスタイルを当てれば、特定ページだけ配色を変える、といった演出が可能です。
トップバーの位置を理解する
トップバーは apura_before_header アクションにフックして出力されています。同じフックに自前の関数を追加すれば、トップバーの前後に独自の要素を差し込むこともできます。優先度（priority）を調整して、トップバーより前か後ろかをコントロールしましょう。
<?php
/**
* トップバーの直後に告知バーを追加する。
*/
function mytheme_after_topbar_notice() {
// トップバー（標準の優先度10）より後に出力されるよう優先度を20に設定。
echo '<div class="custom-notice">';
echo esc_html__( '期間限定キャンペーン実施中！', 'mytheme' );
echo '</div>';
}
add_action( 'apura_before_header', 'mytheme_after_topbar_notice', 20 );このほか、カスタマイザーのトップバー設定項目そのものを apura_customizer_topbar_fields フィルターで追加・変更したり、SNSリストの <ul> 要素に apura_topbar_sns_list_classes フィルターでクラスを付与したりすることも可能です。プラグインからトップバーへ独自の設定を追加したい場合に活用できます。
まとめ：トップバーで第一印象を高める
トップバーは、訪問者が最初に目にするヘッダー最上部のエリアです。
Apuraなら、お知らせテキスト・SNSアイコン・連絡先を、コードなしでスッキリ表示できます。
デバイスごとの表示切り替えや配色調整にも対応しているため、PCではしっかり見せつつスマホでは省略する、といった柔軟な運用が可能です。
開発者向けにはフックも用意されているので、子テーマやプラグインから自由に拡張できます。まずはカスタマイザーの「Top Bar」セクションを開いて、あなたのサイトに合ったトップバーを作ってみてください。