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


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

##１：_sのセットアップ
略

##２：Bootstrapのインポート
###1:functions.phpにコード書く

```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' );
```

![This_is_the_long_blog_name_for_the_theme_review___This_is_a_very_very_long_tagline_to_reviewed_in_theme_review_proccess__Yeah_.png](https://qiita-image-store.s3.amazonaws.com/0/23936/1f3a39b5-3d61-5de6-0999-53483c2ba7c0.png "This_is_the_long_blog_name_for_the_theme_review___This_is_a_very_very_long_tagline_to_reviewed_in_theme_review_proccess__Yeah_.png")
これが
![This_is_the_long_blog_name_for_the_theme_review___This_is_a_very_very_long_tagline_to_reviewed_in_theme_review_proccess__Yeah_.png](https://qiita-image-store.s3.amazonaws.com/0/23936/e7be0bb4-4061-1fd5-7203-d4da23780c9b.png "This_is_the_long_blog_name_for_the_theme_review___This_is_a_very_very_long_tagline_to_reviewed_in_theme_review_proccess__Yeah_.png")

こうなる。
リンクカラーとか行間が微妙に変わったのはbootstrapのデフォルトCSSが効いたから。
###2:Gridを使う
HTMLタグにrowとcolクラスを足すだけ。
*ここから面倒になったのでgit diffをそのまま貼り付ける。

```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 -->
```
	 
ちなレスポンシブ（画像はめんどいから省略）
![This_is_the_long_blog_name_for_the_theme_review___This_is_a_very_very_long_tagline_to_reviewed_in_theme_review_proccess__Yeah_.png](https://qiita-image-store.s3.amazonaws.com/0/23936/56467ce2-fe9c-cd91-8348-1dbf2d260cb9.png "This_is_the_long_blog_name_for_the_theme_review___This_is_a_very_very_long_tagline_to_reviewed_in_theme_review_proccess__Yeah_.png")


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

```diff
        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 -->
```
         
![This_is_the_long_blog_name_for_the_theme_review___This_is_a_very_very_long_tagline_to_reviewed_in_theme_review_proccess__Yeah_.png](https://qiita-image-store.s3.amazonaws.com/0/23936/f3582553-80ea-f488-f3e3-54cb083bbace.png "This_is_the_long_blog_name_for_the_theme_review___This_is_a_very_very_long_tagline_to_reviewed_in_theme_review_proccess__Yeah_.png")

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


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

##おまけ案件
＊ここは紹介するかもだけど、誰か絶対事故るネタ
###BootstrapのJS使いてー
 
```php
	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インポート）

```php
  	/**
	   * 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の管理を一箇所でやれて便利。