LoginSignup
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

@gatespace(Kazue IGARASHI)in株式会社デジタルキューブ (DigitalCube Co. Ltd. )

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

Last updated at Posted at 2016-07-06

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

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

手順はほぼ同じ

_s のダウンロード

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

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

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

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
} );

レイアウト

上記を参考によしなに

style.css の書き換え

https://codex.wordpress.org/CSS
上記を参考にWordPressが付与する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 の回避

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

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://qiita.com/gatespace/items/800d78886258f1a8b00f と同じ理由

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

フォーム要素

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

comment_form.php
<?php
comment_form( array( 'class_submit' => 'button' ) );
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' );

ここまでやったけど

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

5
4
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
5
4

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?