【Lightning】無料版でヘッダー上部機能を追加する方法
皆さんは「Lightning」というWordPressのデザインテーマをご存じでしょうか？
2015年のリリース以来、「Lightning」は、有効インストール数は100,000を超えています。このサイトもLightningで作られています。
Lightningの無料版でもビジネスサイトを作成するための基本機能は充実していますが、有料版の機能拡張プラグイン「Lightning G3 Pro Unit」を使用することで、ヘッダーに電話番号を表示させたり、見出しデザインやフォントを変更したりと、さらに便利な機能を利用できるようになります。
無料版のヘッダーエリアには、左側に「サイト名またはロゴ」、右側にメニューが表示されるだけですが、有料プラグインを使うとヘッダー上部にテキスト、電話番号、お問い合わせリンクなどを追加できます。
特に、ヘッダー上部に表示されるテキストはSEO対策において非常に有効です。例えば、「相模原駅より徒歩2分のプリン専門店」といった具体的な情報を含むテキストは、検索エンジンにサイト内容を的確に伝える役割を果たします。
今回は無料版のLightningでもこのヘッダー上部のエリアを追加する方法を紹介します。
目次
事前準備
今回のカスタマイズは、Lightningの子テーマで行います。
まずは、親テーマとしてLightningをインストールしましょう。
親テーマのインストール
管理画面の外観→ テーマ → 新しいテーマを追加から、「Lightning」と検索してください。表示されたLightningテーマにマウスを合わせ、インストールボタンをクリックします。
もし表示されない場合はこちらからダウンロード可能です。
子テーマのインストール
子テーマは、こちらのサイトからダウンロードできます。ダウンロードボタンをクリックして子テーマを入手しましょう。
続いてダウンロードした「lightning-child-sample.zip」を
管理画面の外観 → テーマのアップデートからアップロードします。
ファイル名が表示された後、今すぐインストールボタンをクリックしてインストールを完了させ、子テーマを有効化します。
ヘッダー上部エリアを作成～固定の文言を表示～
function.phpにコードを追加する
まずは管理画面の外観→テーマファイルエディターからLightningのテーマを選択、
右サイトバーの中からfunction.phpを選択します。
選択したファイルの内容のエディター内に以下のコードを追加します。
テキストの内容やリンク先はサンプルの為、任意で変更してください。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
// ヘッダー上部エリアを追加する関数 function add_custom_header_top_area() { // 親テーマが「Lightning」またはその子テーマが有効か確認 if ( 'lightning' === wp_get_theme()->get_template() || 'lightning' === wp_get_theme()->get_stylesheet() ) { ?> <div class="header-top"> <div class="header-top__inner"> <p class="header-top__description">神奈川県相模原市のホームページ制作屋</p> <nav class="header-top__menu"> <ul class="header-top__items"> <li class="header-top__item"><a href="#" class="header-top__item-link">サイトマップ</a></li> <li class="header-top__item"><a href="tel:000-0000-0000" class="header-top__item-link header-top__item-link--tel"><i class="fa-solid fa-phone"></i>000-0000-0000</a></li> </ul> </nav> <div class="header-top__contact"> <a href="#" class="header-top__contact-link btn btn-primary"> <i class="fa-solid fa-envelope"></i>お問い合わせ </a> </div> </div> </div> <?php } } // ヘッダー上部エリアを表示するアクションフック add_action( 'wp_head', 'add_custom_header_top_area' ); |
アクションフック機能を使用して、ヘッダー上部エリアのコードを表示した時に追加するようにしました。
4行目の判定文で「Lightning」または「Lightning」の子テーマの場合のみコードが実行されるようにしたのは、Lightningでないテーマに変更した場合でもヘッダー上部エリアが追加されてしまうのを防ぐためです。
Lightning以外のテーマで追加したい場合は、判定文を削除してくださいませ。
CSSでスタイリングを調整する
次に、このエリアがきちんと表示されるようにCSSでスタイルを調整します。
右サイドバーからstyle.cssを選択し、以下のコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 |
.header-top { background-color: #f9f9f9; padding:4px 0; font-size:12px; } .header-top__inner { max-width:1200px; width:100%; margin:0 auto; padding:0 10px; display: flex; align-items: center; } .header-top__items{ display:flex; column-gap:12px; justify-content:end; align-items:center; margin:0; padding:0; } .header-top__description{ display: flex; align-items: center; margin-right: auto; line-height: normal; margin-block-start: auto; margin-block-end: auto; } .header-top__menu{ display: flex; align-items: center; } .header-top__item::not(:first-child){ margin-left:10px; } .header-top__item-link{ display:block; } .header-top__contact{ margin-left:12px; } .header-top__contact-link{ font-size:12px; } @media (max-width: 991px) { .header-top { display: none; } } |
ここまで終わったら、実際の表示を確認してみましょう！
有料版と同じようにデバイスのサイズが991px以下になると
ヘッダー上部エリアは非表示にするようにしていますが、
スマフォでも表示したいなどの場合は
以下のコード部分は削除してください。
|
1 2 3 4 5 |
@media (max-width: 991px) { .header-top { display: none; } } |
カスタマイズ画面から内容を変更可能にする方法
先ほどまでは固定の文言やリンク先を設定しましたが、WordPressのカスタマイズ画面から自由にテキストの内容やリンク先、電話番号の表示、お問い合わせボタンの表示を設定できるようにします。
function.phpにコードを追加・修正する
まずはWordPressの外観 → カスタマイズ の画面に
今回のヘッダー上部をカスタマイズするセクションを追加、そのセクション内に入力内容、色などの編集項目を追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 |
// カスタマイズ画面にヘッダー上部の情報を編集する機能を追加 function mytheme_customize_register( $wp_customize ) { // 親テーマが「Lightning」またはその子テーマが有効か確認 if ( 'lightning' === wp_get_theme()->get_template() || 'lightning' === wp_get_theme()->get_stylesheet() ) { // セクションを追加 $wp_customize->add_section( 'header_top_section' , array( 'title' => __( 'ヘッダー上部カスタマイズ', 'mytheme' ), 'priority' => 30, )); // ヘッダー上部 の背景色 $wp_customize->add_setting( 'header_top_background_color' , array( 'default' => '#f9f9f9', 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_top_background_color_control', array( 'label' => __( 'ヘッダー上部の背景色', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_background_color', ))); // ヘッダー上部 の文字色 $wp_customize->add_setting( 'header_top_text_color' , array( 'default' => '#333333', 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Color_Control( $wp_customize, 'header_top_text_color_control', array( 'label' => __( 'ヘッダー上部の文字色', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_text_color', ))); // header-top__description 文言 $wp_customize->add_setting( 'header_top_description' , array( 'default' => __( 'ここに表示したい文言を入力', 'mytheme' ), 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_top_description_control', array( 'label' => __( 'ヘッダー上部の文言', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_description', 'type' => 'text', ))); // リンク1 文言 $wp_customize->add_setting( 'header_top_link1_text' , array( 'default' => __( 'リンク1', 'mytheme' ), 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_top_link1_text_control', array( 'label' => __( 'リンク1の文言', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_link1_text', 'type' => 'text', ))); // リンク1 URL $wp_customize->add_setting( 'header_top_link1_url' , array( 'default' => '#', 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_top_link1_url_control', array( 'label' => __( 'リンク1のURL', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_link1_url', 'type' => 'url', ))); // 電話番号の表示/非表示 $wp_customize->add_setting( 'header_top_show_tel' , array( 'default' => true, 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_top_show_tel_control', array( 'label' => __( '電話番号を表示', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_show_tel', 'type' => 'checkbox', ))); // 電話番号 $wp_customize->add_setting( 'header_top_tel' , array( 'default' => __( '090-0000-0000', 'mytheme' ), 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_top_tel_control', array( 'label' => __( '電話番号', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_tel', 'type' => 'text', ))); // お問い合わせリンクの表示/非表示 $wp_customize->add_setting( 'header_top_show_contact' , array( 'default' => true, 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_top_show_contact_control', array( 'label' => __( 'お問い合わせリンクを表示', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_show_contact', 'type' => 'checkbox', ))); // お問い合わせリンク $wp_customize->add_setting( 'header_top_contact_url' , array( 'default' => '#', 'transport' => 'refresh', )); $wp_customize->add_control( new WP_Customize_Control( $wp_customize, 'header_top_contact_url_control', array( 'label' => __( 'お問い合わせリンク', 'mytheme' ), 'section' => 'header_top_section', 'settings' => 'header_top_contact_url', 'type' => 'url', ))); } } add_action( 'customize_register', 'mytheme_customize_register' ); |
次にカスタマイズ画面で設定した項目の値を、CSSに反映させるためのコードを追加します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
// カスタマイズ画面で設定したヘッダー上部の背景色、文字色を反映 function mytheme_custom_header_top_styles() { // 親テーマが「Lightning」またはその子テーマが有効か確認 if ( 'lightning' === wp_get_theme()->get_template() || 'lightning' === wp_get_theme()->get_stylesheet() ) { ?> <style type="text/css"> .header-top { background-color: <?php echo esc_html( get_theme_mod( 'header_top_background_color', '#f9f9f9' ) ); ?>; } .header-top__description, .header-top__menu a { color: <?php echo esc_html( get_theme_mod( 'header_top_text_color', '#333333' ) ); ?>; } </style> <?php } } add_action( 'wp_head', 'mytheme_custom_header_top_styles' ); |
最後に、元々作成していた固定の文言とリンク先を表示するヘッダー上部エリアを、カスタマイズ画面で設定した値を表示させるように修正します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 |
// ヘッダー上部エリアを追加する関数 function add_custom_header_top_area() { // 親テーマが「Lightning」またはその子テーマが有効か確認 if ( 'lightning' === wp_get_theme()->get_template() || 'lightning' === wp_get_theme()->get_stylesheet() ) { ?> <div class="header-top"> <div class="header-top__inner"> <p class="header-top__description"><?php echo esc_html( get_theme_mod( 'header_top_description', 'ここに表示したい文言を入力' ) ); ?></p> <nav class="header-top__menu"> <ul class="header-top__items"> <li class="header-top__item"><a href="<?php echo esc_url( get_theme_mod( 'header_top_link1_url', '#' ) ); ?>" class="header-top__item-link"><?php echo esc_html( get_theme_mod( 'header_top_link1_text', 'リンク1' ) ); ?></a></li> <?php if ( get_theme_mod( 'header_top_show_tel', true ) ) : ?> <li class="header-top__item"><a href="tel:<?php echo esc_html( get_theme_mod( 'header_top_tel', '090-0000-0000' ) ); ?>" class="header-top__item-link header-top__item-link--tel"><i class="fa-solid fa-phone"></i><?php echo esc_html( get_theme_mod( 'header_top_tel', '000-0000-0000' ) ); ?></a></li> <?php endif; ?> </ul> </nav> <?php if ( get_theme_mod( 'header_top_show_contact', true ) ) : ?> <div class="header-top__contact"> <a href="<?php echo esc_url( get_theme_mod( 'header_top_contact_url', '#' ) ); ?>" class="header-top__contact-link btn btn-primary"> <i class="fa-solid fa-envelope"></i>お問い合わせ </a> </div> <?php endif; ?> </div> </div> <?php } } // ヘッダー上部エリアを表示するアクションフック add_action( 'wp_head', 'add_custom_header_top_area' ); |
上記までのコードが実装できたら、外観 → カスタマイズ の画面を確認しましょう！
カスタマイズ画面を開くと、追加したセクションの名前（今回はヘッダー上限カスタマイズ）が表示されていると思いますので、そのセクションをクリックします。
ヘッダー上限カスタマイズ内で以下の項目が変更可能にしました。
カスタマイズ画面から変更できる内容
- ヘッダー上部エリアの背景色
- ヘッダー上部エリアの文字色（お問い合わせボタン以外の項目）
- ヘッダー上部の文言
左部にあるテキスト - リンク１の文言
サイトマップなどリンクを追加できるようにしました。 - リンク１のURL
- 電話番号の表示非表示
電話番号が不要な場合はチェックを外してください。 - 電話番号
- お問い合わせリンクの表示非表示
お問い合わせリンクが不要な場合はチェックを外してください。 - お問い合わせボタンのURL
まとめ
今回は、Lightningの無料版でもヘッダー上部エリアを追加する方法を紹介しました。アクションフックでコードを追加し、CSSでスタイリングを調整するだけで、ヘッダー上部エリアを作成できます。
ただし、有料版の機能拡張プラグイン「Lightning G3 Pro Unit」では、ヘッダー上部エリア以外にも見出しデザインの変更など便利な機能が多数あります。ヘッダー上部エリアのみを追加したい場合は、今回の方法で十分ですが、他の機能も充実させたい場合は、有料版の購入を検討してみてください。
この記事を書いた人
- フリーエンジニア / Webデザイナー / LPコーディング講師 / シンガーソングライター
-
歌うプログラマーとして
IT業界、プログラミングの"あるある"を歌にしている。プログラミングもデザインも音楽も色々とやるパラレルキャリアな人。
最新の投稿
WordPress2024.08.23【Lightning】無料版でヘッダー上部機能を追加する方法- LPコーディング2024.08.11【LPコーディング】HTML共通パーツで同じセクションを再利用
- 新着情報2024.07.17【制作実績】あざみ野 勝俣接骨院 様 Webサイトリニューアル
- LPコーディング2022.09.27【LPコーディング】Q＆A 質問をクリックすると回答を表示する方法
フリーランスエンジニア歴10年のセールスデザインができるWeb制作者 石井よしまさのメルマガ
常駐型のフリーランスエンジニアとして10年。
10年で関わった現場は13社。
その中で4社から正社員オファーを頂くことができた私が
主にフリーランス初心者向けに、
以下のような内容を配信していきます。
「常駐型のフリーランスで評価される為に大切な5つのマインド」
「10年で13社の案件に関わり、なぜ4社から正社員オファーがあったのか？」
「セールスデザイナーが依頼すべき良いコーダーとは？」..
などについて学べます。
是非、フリーランスとしてやっていきたい！
という方は、ご登録ください(^^)
10年で関わった現場は13社。
その中で4社から正社員オファーを頂くことができた私が
主にフリーランス初心者向けに、
以下のような内容を配信していきます。
「常駐型のフリーランスで評価される為に大切な5つのマインド」
「10年で13社の案件に関わり、なぜ4社から正社員オファーがあったのか？」
「セールスデザイナーが依頼すべき良いコーダーとは？」..
などについて学べます。
是非、フリーランスとしてやっていきたい！
という方は、ご登録ください(^^)
