Skip to content

Instantly share code, notes, and snippets.

@gatespace
Last active February 10, 2017 03:10
Show Gist options
  • Select an option

  • Save gatespace/ef7003e206c40f877066f8637ae28398 to your computer and use it in GitHub Desktop.

Select an option

Save gatespace/ef7003e206c40f877066f8637ae28398 to your computer and use it in GitHub Desktop.
WordPress テーマ _s にFoundation6 を組み込んでみる ref: http://qiita.com/gatespace/items/873887d4d8ba7ac36537
<?php
comment_form( array( 'class_submit' => 'button' ) );
<?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' );
<?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' );
<?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
} );
<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
/**
* 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 );
/*--------------------------------------------------------------
# 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;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment