Lightningのメニューの変更

11

記事の方法でカスタムを100%保障するものではございません。

悪しからずご了承下さいませ。

バージョン: 2.7.7でのカスタム内容となります

※カスタマイズは必ずバックアップの上、自己責任にて行って下さい。

 

WordPress・テーマLightningの改造

今回は、ヘッダーにバナーなどを掲載できるスペースをつくります。

[スポンサーリンク]

 

Lightningのメニュー改造で悩んでるなら、WordPress・公式テーマHabakiriをオススメします。Lightningを改造するならHabakiriでいいじゃん

 

完成イメージ

Lightningのメニューの変更

 

変更ファイル

wp-content/themes/lightning/header.php

header.php

※テーマ・フォルダ名はLightning-masterに変更されている?

※下記をheader.php に全てコピペで使用できます 

(46行目〜51行目)は、ご自身のGoogle AdSenseやバナーに変更してください

<!DOCTYPE html>
<html <?php language_attributes(); ?>>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<?php global $lightning_theme_options; $lightning_theme_options = get_option('lightning_theme_options'); ?>
<?php wp_head();?>

</head>
<body <?php body_class(); ?>>
<?php do_action('lightning_header_before'); ?>

<header class="navbar siteHeader">
    <?php do_action('lightning_header_prepend'); ?>

<div class="container siteHeadContainer">

<div class="navbar-header">

<h1 class="navbar-brand siteHeader_logo">
            <a href="<?php echo esc_url(home_url('/')); ?>"><span>
            <?php lightning_print_headlogo(); ?>
            </span></a>
            </h1>

            <?php do_action('lightning_header_logo_after'); ?>
            <?php $args = array( 'theme_location' => 'Header',
                'container'      => 'nav',
                'items_wrap'     => '
<ul id="%1$s" class="%2$s nav gMenu">%3$s</ul>

',
                'fallback_cb'    => '',
                'echo'           => false,
                'walker'         => new description_walker()
            );
            $gMenu = wp_nav_menu( $args ) ;
            // メニューがセットされていたら実行
            if ( $gMenu ) {
                $menu_btn_position = 'left';
                $menu_btn_position = apply_filters( 'lightning_menu_btn_position', $menu_btn_position );
                ?>
              <a href="#" class="btn btn-default menuBtn menuClose menuBtn_<?php echo esc_attr( $menu_btn_position ); ?>" id="menuBtn"><i class="fa fa-bars" aria-hidden="true"></i></a>
			<?php } ?>
<!-- AdSense ※変更してください -->	
	<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%20async%20src%3D%22%2F%2Fpagead2.googlesyndication.com%2Fpagead%2Fjs%2Fadsbygoogle.js%22%3E%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<!-- サンプル -->
<ins class="adsbygoogle" style="display:inline-block;width:728px;height:90px" data-ad-client="ca-pub-6997658068045287" data-ad-slot="8144778378"></ins>
<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-wp-preserve="%3Cscript%3E%0A(adsbygoogle%20%3D%20window.adsbygoogle%20%7C%7C%20%5B%5D).push(%7B%7D)%3B%0A%3C%2Fscript%3E" data-mce-resize="false" data-mce-placeholder="1" class="mce-object" width="20" height="20" alt="&lt;script&gt;" title="&lt;script&gt;" />
<!--AdSense ※変更してください END -->
        </div>


        <?php
        if ( $gMenu ) {
            echo '
<div id="gMenu_outer" class="gMenu_outer">';
            echo $gMenu;
            echo '</div>

';
        } ?>
    </div>

    <?php do_action('lightning_header_append'); ?>
</header>

<?php do_action('lightning_header_after'); ?>

 

CSSでメニューの表示を変更

横並びリストを使う時を、table-cell【css】を使って自動的に均等になるようにしようと試したのだが上手くいかなかったので幅を指定して変更しました。

iPadを横にした時に表示が崩れないようにMedia Queries(メディアクエリ)で調整してます。

width: 190px; は、メニューの数により変更してください。

@media screen and (min-width: 1025px) {
.siteHeader_logo img {margin: 0 50px 30px 0px; }
.menu li {
           border-left: 1px solid #ccc;
           border-right: 1px solid #ccc;
           width: 190px;
       }
   }

	

 

完成

細かい調整は、面倒なので省略しますが、ヘッダーにGoogle AdSenseをはったりできます。

ヘッダーにスペースができたので、ビジネス系サイトに使用しやすくなりました。

 

 

Lightningの改造

 

この投稿へのコメント

  1. 武蔵 桂 said on 2016-11-14 at 4:24 PM

    残念ながら、文章が何処を指しているのか?バージョンも変わっているのでわかりにくく、変更を諦めざるを得ませんでした。

    もう少し、読み手の気持ちに沿ってくださると有り難いと思いました。

    • mario said on 2016-11-15 at 9:16 AM

      分かり難くて申し訳ございません。

コメントを残す