【楽勝】WordPressテーマにbootstrapとslickを対応させる方法【各３ステップ解説】

こんにちはナンブです。今回はWordPressテーマのbootstrapとslickの対応方法についてはなしていきたいとおもいます。WordPressで自作テーマ作成や既存テーマでサイトをつくっているとき、bootstrapとSlickを対応させる方法がわからない方などWordPressテーマ、もしくは自作テーマをつくっているときにこういった悩みをもっているひとは必見です

怠け者エンジニア「WordPress自作テーマをつくっているけど、bootstrapやslick(スライドバー)を対応させる方法をおしえて～WordPressに対応させるついでにslickの使い方についてもしりたい！」

こういった疑問をもったかたむけに話していきたいと思います

※一応ですが、今回のwpに対応させるbootstrapの種類として、ボクの自作テーマ制作で使用したnavbarとカールセルを中心に説明していきたいとおもうんでそこらへんご了承ください。

本記事の内容

bootstrapをWPに対応させるためには【各種３ステップです】
slick(スライドバー)をWPに対応させるには【基本、そのままでOK】

bootstrapに対応させる方法は案外カンタンです。

bootstrapをWPに対応させるためには【各種３ステップです】

navbarの対応

ステップ１

まずは、bootstrap4 のページからnavbarのコードをひっぱってきます。ナビバーの欄にあるやつならどんなnavbarの種類でもOK（ここは、お好みの）
ファイルにかきおえたら、ナビバーのbuttonタグのあとに以下のコードをぶちこんでください。


<?php
wp_nav_menu( array(
'theme_location'=> 'gloval-navigation',
'depth' => 2,
'container'=> 'div',
'container_class'=> 'collapse navbar-collapse',
'container_id' => 'bs-example-navbar-collapse-1',
 'menu_class'=> 'nav navbar-nav',
            'fallback_cb'       => 'WP_Bootstrap_Navwalker::fallback',
            'walker'            => new WP_Bootstrap_Navwalker(),
        ) );
        ?>

codeのカンタンな説明として

gloval-navigation'に関しては個人で指定したメニュー機能のなまえですね。
ここは、register_nav_menusの設定の際に自分がきめた名称をいれるかんじです。わかりにくい説明ですみませんが、簡単にいうと、ナビバーの機能を認識させるためのおまじないです。
ふわっとの理解でOK（そんなに重要ではないんで）

そして、style.cssやscssなどをつかって、お好みのナビバーのデザインにしましょう

ステップ２

ナビバーをWPに対応させる方法ですが、これはclass-wp-bootstrap-navwalker.phpというファイルをダウンロードすることによって対応が可能です

以下のリンクにファイルがあるのでダウンロードしちゃいましょう。
navbar(boot4 WordPress対応)ダウンロードページ
※ここで注意ですが、bootstrap4.3のバージョンを使うようにしてください(bootstrap4）
bootstrap5のバージョンに対応したものは、現状でていない感じなので、今後出される可能性はあるかもですが、それまでは4.3バージョンを使用してください。そうしないと、機能しないので・・・
下記のカールセルやほかのbootstrapの機能も同様です。

そして、テーマファイルの中にいれてください。

ステップ３

そして、忘れてはいけないのfunction.phpファイルをつくっているとおもうので、そんなかに以下のCodeをぶちこみましょう
これをいれないと、ドロップダウンメニューなどnavのbootstrap機能がWPに反映されないんで。

/*navbar*/
function register_navwalker(){
	require_once get_template_directory() . '/class-wp-bootstrap-navwalker.php';
}
add_action( 'after_setup_theme', 'register_navwalker' );

これで一通り完了です。わかんない点があれば以下のページに詳細がのっているのでのぞいてください。

カールセルの対応

ステップ１

ナビバー同様にbootstrap4からテンプレートコードをもってきます。そして、同様に自分なりにstyle.cssをいじりながらデザインを整えたりしましょう（ここは自由にどうぞ）

ステップ２

ナビバーとちょこっと違ってくるのですが、カールセルのcodeをWordPressに対応させたものに変更します。参考にしたサイトをみたりしてCodeをかいたのですが、それでもボクはここ、かなりたいへんでした。

<?php
$○○○○ = new WP_Query( 'tag=タグ名' );
if ( $○○○○->have_posts() ) : 
//$○○○○の部分は(同じ名前です)自分で名前を設定する感じです 
$counter = 0;  
  $size  = 'img-fluid'; //イメージサイズ
  $carousel_id = 'carouselExampleFade'; //カルーセル（の最も外側の div 要素）の ID
  ?>
<div id="<?php echo $carousel_id; ?>" class="carousel slide" data-ride="carousel">
<div class="carousel-inner">
 < ?php 
    while ( $○○○○->have_posts() ) : $○○○○->the_post(); 
    //サイズは $size でイメージサイズ（'full' 'medium' など）を指定可能
    $src = esc_url(wp_get_attachment_image_src( $○○○○->ID, $size )[0]) ;  
    ($counter === 0) ? $active = ' active' : $active = ''; 
  ?>
<  div class="carousel-item<?php echo $active; ?>">
    
<a class="title-a" href="<?php the_permalink(); ?>">
           < ?php if(has_post_thumbnail()): ?>
           < ?php the_post_thumbnail("", array(
              'class' => 'main'
              )); ?>
            <?php else :?>
            <img class="main"itemprop='url' src="画像” alt="<?php the_title_attribute(); ?>"></span>
            <?php endif ;?>
            </a>
              <div class="carousel-caption d-md-block">
             
</div>
  </div>
  <?php $counter++;  ?>
  <?php endwhile; ?>
  </div>
  <a class="carousel-control-prev" href="#carouselExampleFade" role="button" data-slide="prev">
            <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        </a>
        <a class="carousel-control-next" href="#carouselExampleFade" role="button" data-slide="next">
            <span class="carousel-control-next-icon" aria-hidden="true"></span>
       </a>
</div>
<?php endif; ?>

<?php wp_reset_postdata(); ?>

どこを変更するかに関しては、もとのカールセルのcodeと下記のcodeを照らし合わせて、みていけば、わかるはずです。むちゃかもしれませんが、codeをみるという目を養い、自分で理解するのも重要なので

ぶっちゃけ、自分のテーマに対応するのにcodeをかきこんだりとまあ時間がかかりました。その一部の上記のcodeを公開します。
詳しいことは以下の記事にのっているので、息詰まった場合やどういう意味なのかはこの記事が参考になります。

このサイトのcodeを参考にカールセルの調整を行いました。
（WP_queryを使って表示という部分を参考にしました）

いろんなパターンのがあってみるのにちょっとたいへんでした

Codeをいじってけばだいたいは意味が理解できると思うので。意味の理解については、申し訳ないですが、地道に参考サイトみながら作業ですね。
作業をとおしてなんとなくわかってくるので、時間をかけるくらいしか言葉はでてこないです。すんません。ここは、他人に説明してもらうよりかは自己理解あるのみです。

こんな感じでうごくはずです。

ステップ３【茶番です】

navbarの部分で説明するのをわすれてたので、ほそくで説明します。

これを忘れずにぶちこんどきましょう。すでに、bootstrapをつかっているのなら、かかれているとおもいますが、一応、念のために。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

書き忘れてしまうパターンもなくはないので（　＾ω＾）

以上がカールセルをWPに対応させる方法についてでしたー
ほかにも,対応させたいBootstrapの機能があれば、カールセルのステップ２で紹介したサイトをみるとよいです。カールセルのほかにもWPに対応させるためのcodeの紹介がされているので、チェックしとくとよいです

slick(スライドバー)をWPに対応させるには【基本、そのままでOK】

WEBデザイン１
次にSlick(スライドバー)についてですが、結論、bootstrapのような細かい設定やWP専用のファイルのダウンロードはぶっちゃけ、必要なく、そのまま、slickのファイルをいれて、スライドバーつくっても動きます。

これで、説明はおわりでもいいのですが、でもslickをさわるひとがはじめての方むけに細かく手順を説明します

slickのカンタンな紹介

Slickはスライドバー専用のbootstrapといったかんじです。スミマセン、うまい説明がうかばなかったのでそんなものだという認識でＯＫ。

ステップ１

まずは、slickのサイトのほうにとび、自分がつかいたいスライドバーを選んでください
いろんな種類のものがあるので、ぶっちゃけ、どれも大差ないです。

デザインはboot同様style.cssでいじってかえるなりもしても可です。ここは個人の自由ですね。

ステップ２

ここで、slick.cssとslick-theme.css、slick.jsをダウンロードして、制作中のテーマのcssとjsファイルにいれましょう。

リンク張っときます↓このページからダウンロードできます
slickファイルダウンロードページ
これで、slickのデザインとアニメーションが起動します。

※忘れずにindexファイルにstyle.cssを認識させたように上記のファイル用のlinkタグやscriptタグをいれるのお忘れなく。
jsを反映させるために下記のcodeもお忘れなく追加を

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>

ステップ3【アニメーションスピードとスライド数の調整】

ここで、オリジナルのjsをつくります。ここは、仮にslick-omake.jsとしときましょう。
下記のcodeを追加です。

$('.slider').slick({
    autoplay:true,
    autoplaySpeed:4000,
    // dots:true,
    slidesToShow:3,//スライドの数
    responsive:[
        {
            breakpoint: 1024,//ページ幅
            settings:{
                slidesToShow:3,//スライド数
            }
        },
        {
            breakpoint: 768,
            settings:{
                slidesToShow:2,
            }
        },
        {
            breakpoint: 567,
            settings:{
                slidesToShow:1,
            }
        },
    ]
});
//ここまで　スライド

　
レスポンシブした際のスライドの数とスライドアニメーションの早さの調整ですね。
忘れずにいれときましょうね(｡･ω･｡)ﾉ

※.sliderの部分のスライド名は自分で考えた名前で設定してください

これが、slickの設定についてのだいたいの手順です。Slickについて知らない＆べつにbootだけの情報をみたかったひとでもついでにチェックしとくのもアリです

以上がWordpressテーマにbootstrapとslickを対応させる方法とその手順の紹介でしたー
slickの説明はWP対応化の説明ではなかったですが、slickを設定については知れたとおもうので、よしとしましょう。
ぶっちゃけ、駆けあしの説明だったので、途中、なんでこうなる？と思ったかもですが、そこらへんはなんか自己学習ということで・・・マジでスミマセン。

ということで以上となります。

【楽勝】WordPressテーマにbootstrapとslickを対応させる方法【各３ステップ解説】

bootstrapをWPに対応させるためには【各種３ステップです】

navbarの対応

カールセルの対応

slick(スライドバー)をWPに対応させるには【基本、そのままでOK】

slickのカンタンな紹介

nanbu_buu

nanbu_buu

ぶうぶうブログ