WordPressにBootstrap4を使ってメニューを作ってみた。
コンパネのメニューから、スマホPCとも共通で管理する過渡ができていい。
（以前は恥ずかしながら今まではスマホ用とPC用2つ用意してました。）
BootStrap3ではnavwalkerというPHPを使うことで実現していたが、4に関しての情報が見当たらない。きっとあるはずなんだけど3の情報に埋もれてしまっているのだと思う。
BootStrap4関係はやはり海外の方が情報が早い。おれ4版のnavwalker作ったぜ！って言う人がちらほら。
スポンサードリンク
navwalkerをダウンロード
GitHub – wp-bootstrap/wp-bootstrap-navwalker at v4 –
functionに
|
1 2 3 4 5 |
function theme_name_scripts() { require_once( get_template_directory() . '/include/bs4navwalker.php’); } add_action( 'wp_enqueue_scripts', 'theme_name_scripts' ); |
などと書いてnavwalkerを読み込ませる。
BS4をインストール
Bootstrap · The most popular HTML, CSS, and JS framework in the world. –
面倒ならcdnでいいんじゃないか。
でもcdnってサジェスト機能なくなるよね。
メニューを表示したい部分のphpに以下を追加
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<?php wp_nav_menu([ 'menu' => 'top',//メニュー名 適時変更 'theme_location' => 'top',//テーマの中で使われる位置 環境に合わせ変更 'container' => 'ul',//div、navを選択してラップ 'container_id' => 'bs4navbar',//コンテナに適用されるID 'container_class' => 'collapse navbar-collapse',//コンテナに適用されるクラス名 'menu_id' => false,//メニューを構成する ul 要素に適用するID。 'menu_class' => 'navbar-nav mr-auto',//メニューを構成する ul 要素に適用するCSS クラス名。 'depth' => 5,//最大深度 'fallback_cb' => 'bs4navwalker::fallback',//メニューが存在しない場合にコールバック関数を呼び出す 'walker' => new bs4navwalker()// 使用するカスタムウォーカーオブジェクト]) ; ?> |
自分の場合はトップページにスライダーを入れたかったので、
|
1 2 3 4 5 |
<?php if (is_home() || is_front_page()) : ?> トップページ用 <?php else: ?> トップページ以外 <?php endif; ?> |
の関数を利用して以下のように貼り付けた。
|
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 |
<?php if (is_home() || is_front_page()) : ?> <div class="hidden-sm-down" id="container_slider"> <div class="hidden-sm-down" id="theTarget"> <div style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/top/main_top01.jpg);"></div> <div style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/top/main_top02.jpg);"></div> <div style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/top/main_top03.jpg);"></div> <div style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/top/main_top04.jpg);"></div> </div> </div> <div class="hidden-md-up" id="container_slider_sp"> <div class="hidden-md-up" id="theTarget_sp"> <div style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/top/main_top01@2x.jpg);"></div> <div style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/top/main_top02@2x.jpg);"></div> <div style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/top/main_top03@2x.jpg);"></div> <div style="background-image: url(<?php echo get_template_directory_uri(); ?>/img/top/main_top04@2x.jpg);"></div> </div> </div> <!-- Bootstrap 4.0.0-alpha2 navbar with dropdown menus ================================================= Add this to your `header.php` --> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <?php wp_nav_menu([ 'menu' => 'top', 'theme_location' => 'top', 'container' => 'div', 'container_id' => 'bs4navbar', 'container_class' => 'collapse navbar-collapse', 'menu_id' => false, 'menu_class' => 'navbar-nav mr-auto', 'depth' => 2, 'fallback_cb' => 'bs4navwalker::fallback', 'walker' => new bs4navwalker() ]); ?> </nav> <?php else: ?> <nav class="navbar navbar-toggleable-md navbar-light bg-faded"> <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#bs4navbar" aria-controls="bs4navbar" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <?php wp_nav_menu([ 'menu' => 'top', 'theme_location' => 'top', 'container' => 'div', 'container_id' => 'bs4navbar', 'container_class' => 'collapse navbar-collapse', 'menu_id' => false, 'menu_class' => 'navbar-nav mr-auto', 'depth' => 2, 'fallback_cb' => 'bs4navwalker::fallback', 'walker' => new bs4navwalker() ]); ?> </nav> <div class="breadcrumbs"> <?php if(function_exists('bcn_display')) { bcn_display(); }?> </div> <?php endif; ?> |
breadcrumbs部分はこちらのパンくずリスト自動生成プラグイン