WordPress講座(個別相談)

Lightningのフッターをカスタマイズする例を紹介します。たとえば、フッターの上下に好きな画像を画面幅いっぱいに表示する方法や、フッターウィジェットの数(初期設定では3列)を変更する方法などです。

フッターウィジェットを4列に変更(初期設定では3列)

スポンサーリンク

フッターに画面幅いっぱいの画像を表示する

Lightningでは「フッター上部」ウィジェットを使ってフッターの上に画像などを表示できますが、幅は画面幅いっぱいではありません(940px、1140pxなど)。

フッター上部ウィジェットは画面幅いっぱいではない

画面幅いっぱいに広がる画像を表示したい場合は、次のコードを使う方法があります。子テーマのfunctions.phpなどに入力します。

/* フッター上部に画像を表示する */
function my_lightning_footer_before() {
    $temp = '<div class="footer-before">';
    $temp .= '<img src="http://★.jpg">';
    $temp .= '</div>';

    echo $temp;
}
add_action('lightning_footer_before', 'my_lightning_footer_before');

4行目の「http://★.jpg」を任意の画像のURLに変更してください。

functions.phpを編集するときは画面が真っ白になることを想定して必ずFTPツールを使うようにしてください。「外観」-「テーマの編集」メニューで編集するのは危険です。不安な方はWordPress個別サポートにご相談ください。作業をサポートします。

さらに、次のようなCSSを子テーマのstyle.cssまたは「VK ExUnit」‐「CSSカスタマイズ」メニューなどに入力します。

/* フッター上部の画像を画面幅いっぱいに */
.footer-before {
    width: 100%;
    margin-bottom: 10px;
}

.footer-before img {
    width: 100%;
}

これにより、フッター上部に画面幅いっぱいの画像を表示することができます。

フッター上部に画面幅いっぱいの画像を表示する

フッターの下に表示する場合

フッターの上ではなく下(つまり画面の一番下)に表示したい場合は、上記のPHPおよびCSSのコードにある「before」を「after」に置き換えれば大丈夫です。次のようにフッターの下に画像が表示されるようになります。

フッターの下(画面最下部)に画像を表示する

フッターウィジェットの数を設定する

フッターウィジェットは3つまで使用可能(フッターウィジェットエリア1~フッターウィジェットエリア3)になっています。

初期設定のフッターウィジェットは3列

次のコードを子テーマのfunctions.phpなどに入力することで、フッターウィジェットの数を変更できます。次の例では4つに設定しています。

/* フッターウィジェットの数を設定 */
function my_lightning_footer_widget_area_count() {
    return 4;
}
add_filter('lightning_footer_widget_area_count', 'my_lightning_footer_widget_area_count');

これによりフッターウィジェットの数が変更されます。3行目の「4」がフッターウィジェットの個数になります。適当な数に変更してください。1から4までが実用的な範囲だと思います。

フッターウィジェットの数が4つになる

Lightningのフッターウィジェットを4列にしたイメージは次のようになります。

4列にしたフッターウィジェット

あとはアイデア次第です。

まとめ

以上、Lightningのフッターをカスタマイズする例を紹介しました。Lightningではフッターにフックが設定されているおかげで、footer.phpを修正せずにfunctions.phpにコードを入力する方法でウィジェット数を増やしたり、フッターの上下に好きなコンテンツを表示できるようになっています。いろいろと試行錯誤してみてください。

この記事をSNSで共有する
WordPressでお困りのときはご相談を
この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
こんなときはご相談を
  • WordPressの使い方(ページやメニューの作り方を教えてほしい)
  • カスタマイズ(機能の追加やデザイン調整をお願いしたい)
  • トラブル対応(画面真っ白・「ログインできない」を解決したい)
マンツーマンなので相談内容は自由です。いただいた課題をその場で解決、CSSやPHPも目の前で修正します。気軽にご相談ください。
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
wordpress講座受講予約
WordPress講座の問い合わせ先
こちらもどうぞ(Lightning拡張プラグイン)
エレガントで柔らかな印象のサイトに仕上がる「Lightning Charm」

関連記事

スポンサーリンク