Lightningのカスタマイズ

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にコードを入力する方法でウィジェット数を増やしたり、フッターの上下に好きなコンテンツを表示できるようになっています。いろいろと試行錯誤してみてください。

WordPressでお困りのときはご相談を
細かい質問からCSSやPHPのカスタマイズ、トラブル対応まで、この記事を書いた西沢直木が直接、WordPress個別サポートで対応します。
WordPress個別サポートの特徴
  • 最短で本日中に問題解決できます
  • 見積もり無料・料金は終了後の後払いです
  • 銀座教室・スカイプ・出張またはメールで対応します
カスタマイズがうまくいかないときは
お急ぎのときはWordPressメールサポートで対応します。ご活用ください。
こんなときはご相談ください(相談・見積もり無料)
  • サイトのデザインをカスタマイズしたい
  • CSS・PHPのカスタマイズがうまくいかない
  • 引っ越し(サーバー移転)したい
  • サイトをSSL対応(https://)したい
WordPress講座の問い合わせ先
WordPress講座申し込み
メールで問い合わせ

関連記事

スポンサーリンク