_s&Bootstrap으로 테마 노트 만들기

(어떤 WordCamp를 위한 샘플을 만들 때의 비망록은 이렇게 슬라이드가 되었다)

１：_설정 s

줄임말

2: 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를 한 곳에서 관리할 수 있어 편리합니다.