_s & Bootstrap でテーマを作るメモ

（とあるWordCamp向けのサンプルを作った時の覚書、そのままスライドになっちゃったりして）

１：_sのセットアップ

略

２：Bootstrapのインポート

1:functions.phpにコード書く

functions.php

    function theme_name_scripts() {
        wp_enqueue_style(  'theme-name', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
    }
    add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

これが

こうなる。
リンクカラーとか行間が微妙に変わったのはbootstrapのデフォルトCSSが効いたから。

2:Gridを使う

HTMLタグにrowとcolクラスを足すだけ。
*ここから面倒になったのでgit diffをそのまま貼り付ける。

    diff --git a/header.php b/header.php
    index 32dcda0..bdc6bda 100644
    --- a/header.php
    +++ b/header.php
    @@ -40,4 +40,4 @@
                </nav><!-- #site-navigation -->
        </header><!-- #masthead -->

    -       <div id="content" class="site-content">
    +       <div id="content" class="site-content row">

        diff --git a/index.php b/index.php
    index 9a20d60..c870c8c 100644
    --- a/index.php
    +++ b/index.php
    @@ -14,7 +14,7 @@

     get_header(); ?>

    -       <div id="primary" class="content-area">
    +       <div id="primary" class="content-area col-md-8">
                <main id="main" class="site-main" role="main">

                <?php if ( have_posts() ) : ?>

    diff --git a/sidebar.php b/sidebar.php
    index a6eeb60..7955861 100644
    --- a/sidebar.php
    +++ b/sidebar.php
    @@ -12,6 +12,6 @@ if ( ! is_active_sidebar( 'sidebar-1' ) ) {
     }
     ?>

    -<div id="secondary" class="widget-area" role="complementary">
    +<div id="secondary" class="widget-area col-md-4" role="complementary">
        <?php dynamic_sidebar( 'sidebar-1' ); ?>
     </div><!-- #secondary -->

ちなレスポンシブ（画像はめんどいから省略）

3:Navigationを足す

*管理画面からメニューの設定しておかないとここの変更が反映されないらしい。ちょっとムカつく。

        diff --git a/header.php b/header.php
        index bdc6bda..95a4612 100644
        --- a/header.php
        +++ b/header.php
        @@ -36,7 +36,7 @@

                        <nav id="site-navigation" class="main-navigation" role="navigation">
                                <button class="menu-toggle" aria-controls="primary-menu" aria-expanded="false"><?php esc_html_e( 'Primary Menu', 'zuiho' ); ?></button>
        -                       <?php wp_nav_menu( array( 'theme_location' => 'primary', 'menu_id' => 'primary-menu' ) ); ?>
        +                       <?php wp_nav_menu( array( 'theme_location'  => 'primary', 'menu_id' => 'primary-menu' ,'menu_class' => 'nav navbar-nav',) ); ?>
                        </nav><!-- #site-navigation -->
                </header><!-- #masthead -->

ちゃんとBootstrapベースのナビゲーションになってる。

4:がんばれ

多分みんなでやるのはここまでが精一杯。
基本BootstrapベースでHTMLタグをいじるだけだからBootstrapのサイトみながらがんばれっていってもくもく会にする。
（どうせ事故る）

おまけ案件

＊ここは紹介するかもだけど、誰か絶対事故るネタ

BootstrapのJS使いてー

    function theme_name_scripts() {
        wp_enqueue_style(  'theme-name', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
        wp_enqueue_script( 'theme-name', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array(), '3.3.5', true ); //この行を追加する
    }
    add_action( 'wp_enqueue_scripts', 'theme_name_scripts' );

多分この書き方したほうがいいだろうってやつ(CSS/JSインポート）

    /**
       * Enqueue scripts and styles.
       */
    function theme_scripts() {

          wp_enqueue_style(  'theme-name', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css' );
          wp_enqueue_script( 'theme-name', 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js', array(), '3.3.5', true );
          wp_enqueue_style( 'theme-style', get_stylesheet_uri() );

          wp_enqueue_script( 'theme-navigation', get_template_directory_uri() . '/js/navigation.js', array(), '20120206', true );

          wp_enqueue_script( 'theme-skip-link-focus-fix', get_template_directory_uri() . '/js/skip-link-focus-fix.js', array(), '20130115', true );

          if ( is_singular() && comments_open() && get_option( 'thread_comments' ) ) {
                  wp_enqueue_script( 'comment-reply' );
          }
  }
  add_action( 'wp_enqueue_scripts', 'theme_scripts' );

こうするとCSS/JSの管理を一箇所でやれて便利。