WordPress テーマ _s にFoundation6 を組み込んでみる

- [Foundation](http://foundation.zurb.com/)

_s に CSSフレームワーク Foundation を組み込む。

Bootstrap3はこちらを参考に
http://qiita.com/gatespace/items/800d78886258f1a8b00f

手順はほぼ同じ

# _s のダウンロード

- http://underscores.me/

# Foundation の CSS と JS をテーマに埋め込む

- http://foundation.zurb.com/sites/docs/installation.html

本来なら Sass版を組み込んだほうが後々楽です。

https://github.com/Automattic/_s/blob/master/functions.php#L105-L113
`functions.php` 104〜114行目の部分を以下に書き換えしつつ `wp_footer`にフックして `foundation()` を実行。

```php:functions.php
<?php
function _s_scripts() {

    // Foundation
    wp_enqueue_style( 'foundation', 'https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.css', array(), '6.2.1' );
    wp_enqueue_script( 'foundation', 'https://cdn.jsdelivr.net/foundation/6.2.1/foundation.min.js', array('jquery'), '6.2.1', false );

    wp_enqueue_style( '_s-style', get_stylesheet_uri(), array('foundation') );

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

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

add_action( 'wp_footer', function() {
?>
<script>
(function($) {
	$(document).foundation();
})(jQuery);
</script>
<?php
} );
```

# レイアウト

- http://foundation.zurb.com/sites/docs/grid.html
- http://foundation.zurb.com/templates.html

上記を参考によしなに

# style.css の書き換え

https://codex.wordpress.org/CSS
上記を参考にWordPressが付与するCSSクラスのみにしておく
具体的には以下のとおり

```css:style.css
/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/
/* Text meant only for screen readers. */
.screen-reader-text {
    clip: rect(1px, 1px, 1px, 1px);
    position: absolute !important;
    height: 1px;
    width: 1px;
    overflow: hidden;
}

.screen-reader-text:focus {
    background-color: #f1f1f1;
    border-radius: 3px;
    box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
    clip: auto !important;
    color: #21759b;
    display: block;
    font-size: 14px;
    font-size: 0.875rem;
    font-weight: bold;
    height: auto;
    left: 5px;
    line-height: normal;
    padding: 15px 23px 14px;
    text-decoration: none;
    top: 5px;
    width: auto;
    z-index: 100000; /* Above WP toolbar. */
}

/* Do not show the outline on the skip link target. */
#content[tabindex="-1"]:focus {
    outline: 0;
}
/*--------------------------------------------------------------
# Alignments
--------------------------------------------------------------*/
.alignleft {
    display: inline;
    float: left;
    margin-right: 1.5em;
}

.alignright {
    display: inline;
    float: right;
    margin-left: 1.5em;
}

.aligncenter {
    clear: both;
    display: block;
    margin-left: auto;
    margin-right: auto;
}
/*--------------------------------------------------------------
# Media
--------------------------------------------------------------*/
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
    border: none;
    margin-bottom: 0;
    margin-top: 0;
    padding: 0;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
    max-width: 100%;
}

/*--------------------------------------------------------------
## Captions
--------------------------------------------------------------*/
.wp-caption {
    margin-bottom: 1.5em;
    max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.wp-caption .wp-caption-text {
    margin: 0.8075em 0;
}

.wp-caption-text {
    text-align: center;
}

/*--------------------------------------------------------------
## Galleries
--------------------------------------------------------------*/
.gallery {
    margin-bottom: 1.5em;
}

.gallery-item {
    display: inline-block;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

.gallery-columns-2 .gallery-item {
    max-width: 50%;
}

.gallery-columns-3 .gallery-item {
    max-width: 33.33%;
}

.gallery-columns-4 .gallery-item {
    max-width: 25%;
}

.gallery-columns-5 .gallery-item {
    max-width: 20%;
}

.gallery-columns-6 .gallery-item {
    max-width: 16.66%;
}

.gallery-columns-7 .gallery-item {
    max-width: 14.28%;
}

.gallery-columns-8 .gallery-item {
    max-width: 12.5%;
}

.gallery-columns-9 .gallery-item {
    max-width: 11.11%;
}

.gallery-caption {
    display: block;
}
```

# Sticky の回避

- http://foundation.zurb.com/sites/docs/sticky.html

WordPressの「先頭に固定表示」投稿で付与される `.sticky` クラスが Foundation の Sticky とバッティングするので、`post_class` にフックして別のクラス名にする

```php:foundation_post_class.php
<?php
function foundation_post_class( $classes ) {
	if ( in_array( 'sticky', $classes, true ) ) {
		$classes = array_diff($classes, array( 'sticky' ) );
		$classes[] = 'wp-sticky';
	}
	return $classes;
}
add_filter( 'post_class', 'foundation_post_class' );
```

# ヘッダー＋メインナビゲージション部分を Top Bar に置き換え

- http://foundation.zurb.com/sites/docs/top-bar.html
- http://foundation.zurb.com/sites/docs/responsive-navigation.html

見た目はよしなに。
フィルターなどは http://qiita.com/gatespace/items/800d78886258f1a8b00f と同じ理由

```php:header.php
<header id="masthead" class="site-header top-bar" role="banner">
	<div class="site-branding top-bar-title">
		<span data-responsive-toggle="site-navigation" data-hide-for="medium">
			<button class="menu-icon dark" type="button" data-toggle></button>
		</span>
		<?php
		if ( is_front_page() && is_home() ) : ?>
			<h1 class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></h1>
		<?php else : ?>
			<p class="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></p>
		<?php endif; ?>
	</div><!-- .site-branding -->

	<nav id="site-navigation" class="main-navigation" role="navigation">
		<?php
			wp_nav_menu( array(
				'theme_location'  => 'primary',
				'container_class' => 'top-bar-left',
				'menu_class'      => 'vertical medium-horizontal menu',
				'items_wrap'      => '<ul id="%1$s" class="%2$s" data-responsive-menu="drilldown medium-dropdown">%3$s</ul>',
				'fallback_cb'     => false,
				'walker'          => new Foundation_Walker_Nav_Menu()
			) );
		?>
	</nav><!-- #site-navigation -->
</header><!-- #masthead -->
```

```php:navbar.php
<?php
/**
 * Custom walker class.
 */
class Foundation_Walker_Nav_Menu extends Walker_Nav_Menu {
    /**
     * 2階層目以降のulのクラス
     */
    public function start_lvl( &$output, $depth = 0, $args = array() ) {
        $indent = str_repeat("\t", $depth);
        $output .= "\n$indent<ul class=\"vertical menu\">\n";
    }
}
/**
 * 表示中のページに active クラスを付与
 * サブメニューがある場合 dropdown クラスを付与
 */
function foundation_special_nav_class( $classes, $item ) {
	if (in_array( 'current-menu-item', $classes)) {
		$classes[] = 'active';
	}
	return $classes;
}
add_filter( 'nav_menu_css_class' , 'foundation_special_nav_class' , 10, 2 );
```

# フォーム要素

そのままでも綺麗なので特に手を加える必要はない。
あえてやるならコメント投稿ボタンと検索フォーム。

```php:comment_form.php
<?php
comment_form( array( 'class_submit' => 'button' ) );
```

```php:foundation_search_form.php
<?php
function foundation_search_form( $form ) {
	$form = '<form role="search" method="get" class="search-form form-inline" action="' . esc_url( home_url( '/' ) ) . '">
		<div class="input-group">
			<label class="screen-reader-text" for="search-field">' . _x( 'Search for:', 'label' ) . '</label>
			<input type="search" class="search-field input-group-field" placeholder="' . esc_attr_x( 'Search &hellip;', 'placeholder' ) . '" value="' . get_search_query() . '" name="s" id="search-field" />
			<div class="input-group-button"><input type="submit" class="search-submit button" value="'. esc_attr_x( 'Search', 'submit button' ) .'" /></div>
		</div>
	</form>';
	return $form;
}
add_filter( 'get_search_form' , 'foundation_search_form' );
```

# ここまでやったけど

- https://github.com/olefredrik/FoundationPress

既に WordPress テーマがあるって落ちです。
自分でゴリゴリやる + Sass + gulp が実行可能なら、Manual Setup の項を見て  _s とガッチャンコしたほうが後々楽です。