この記事では、ナビゲーションのカスタマイズについて書きます。
Twentyeleven の Showcase Template を使うとスライドショーの様な表示形態を作る事ができます。
このスライドショーのナビゲーションは、cssで丸印に見えるように指定されているが、IEでは角が取れず四角のままです。(IE9では丸に見えます)
今回、このナビゲーションを図形ではなく数字にしてみます。
まず、twentyeleven の style.css での設定は以下の通りです。
#content .feature-slider {
top: 5px;
right: 8.9%;
overflow: visible;
position: absolute;
}
.feature-slider ul {
list-style-type: none;
margin: 0;
}
.feature-slider li {
float: left;
margin: 0 6px;
}
.feature-slider a {
background: #3c3c3c;
background: rgba(60,60,60,0.9);
-moz-border-radius: 12px;
border-radius: 12px;
-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);
display: block;
width: 14px;
height: 14px;
}
.feature-slider a.active {
background: #1982d1;
-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);
cursor: default;
opacity: 0.5;
}
このcssは、showcase.php 内の nav class=”feature-slider” に対するcss の設定です。nav の部分を赤字にしています。
<?php
/**
* Template Name: Showcase Template
* Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
*
* The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,
* another recent posts area (with the latest post shown in full and the rest as a list)
* and a left sidebar holding aside posts.
*
* We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
// Enqueue showcase script for the slider
wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
get_header(); ?>
<div id="primary" class="showcase">
<div id="content" role="main">
<?php the_post(); ?>
<?php
/**
* We are using a heading by rendering the_content
* If we have content for this page, let's display it.
*/
if ( '' != get_the_content() )
get_template_part( 'content', 'intro' );
?>
<?php
/**
* Begin the featured posts section.
*
* See if we have any sticky posts and use them to create our featured posts.
* We limit the featured posts at ten.
*/
$sticky = get_option( 'sticky_posts' );
// Proceed only if sticky posts exist.
if ( ! empty( $sticky ) ) :
$featured_args = array(
'post__in' => $sticky,
'post_status' => 'publish',
'posts_per_page' => 10,
'no_found_rows' => true,
);
// The Featured Posts query.
$featured = new WP_Query( $featured_args );
// Proceed only if published posts exist
if ( $featured->have_posts() ) :
/**
* We will need to count featured posts starting from zero
* to create the slider navigation.
*/
$counter_slider = 0;
?>
<div class="featured-posts">
<h1 class="showcase-heading"><?php _e( 'Featured Post', 'twentyeleven' ); ?></h1>
<?php
// Let's roll.
while ( $featured->have_posts() ) : $featured->the_post();
// Increase the counter.
$counter_slider++;
/**
* We're going to add a class to our featured post for featured images
* by default it'll have the feature-text class.
*/
$feature_class = 'feature-text';
if ( has_post_thumbnail() ) {
// ... but if it has a featured image let's add some class
$feature_class = 'feature-image small';
// Hang on. Let's check this here image out.
$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) );
// Is it bigger than or equal to our header?
if ( $image[1] >= HEADER_IMAGE_WIDTH ) {
// If bigger, let's add a BIGGER class. It's EXTRA classy now.
$feature_class = 'feature-image large';
}
}
?>
<section class="featured-post <?php echo $feature_class; ?>" id="featured-post-<?php echo $counter_slider; ?>">
<?php
/**
* If the thumbnail is as big as the header image
* make it a large featured post, otherwise render it small
*/
if ( has_post_thumbnail() ) {
if ( $image[1] >= HEADER_IMAGE_WIDTH )
$thumbnail_size = 'large-feature';
else
$thumbnail_size = 'small-feature';
?>
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_post_thumbnail( $thumbnail_size ); ?></a>
<?php
}
?>
<?php get_template_part( 'content', 'featured' ); ?>
</section>
<?php endwhile; ?>
<?php
// Show slider only if we have more than one featured post.
if ( $featured->post_count > 1 ) :
?>
<nav class="feature-slider">
<ul>
<?php
// Reset the counter so that we end up with matching elements
$counter_slider = 0;
// Begin from zero
rewind_posts();
// Let's roll again.
while ( $featured->have_posts() ) : $featured->the_post();
$counter_slider++;
if ( 1 == $counter_slider )
$class = 'class="active"';
else
$class = '';
?>
<li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" <?php echo $class; ?>></a></li>
<?php endwhile; ?>
</ul>
</nav>
<?php endif; // End check for more than one sticky post. ?>
</div><!-- .featured-posts -->
<?php endif; // End check for published posts. ?>
<?php endif; // End check for sticky posts. ?>
<section class="recent-posts">
<h1 class="showcase-heading"><?php _e( 'Recent Posts', 'twentyeleven' ); ?></h1>
<?php
// Display our recent posts, showing full content for the very latest, ignoring Aside posts.
$recent_args = array(
'order' => 'DESC',
'post__not_in' => get_option( 'sticky_posts' ),
'tax_query' => array(
array(
'taxonomy' => 'post_format',
'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ),
'field' => 'slug',
'operator' => 'NOT IN',
),
),
'no_found_rows' => true,
);
// Our new query for the Recent Posts section.
$recent = new WP_Query( $recent_args );
// The first Recent post is displayed normally
if ( $recent->have_posts() ) : $recent->the_post();
// Set $more to 0 in order to only get the first part of the post.
global $more;
$more = 0;
get_template_part( 'content', get_post_format() );
echo '<ol class="other-recent-posts">';
endif;
// For all other recent posts, just display the title and comment status.
while ( $recent->have_posts() ) : $recent->the_post(); ?>
<li class="entry-title">
<a href="<?php the_permalink(); ?>" title="<?php printf( esc_attr__( 'Permalink to %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" rel="bookmark"><?php the_title(); ?></a>
<span class="comments-link">
<?php comments_popup_link( '<span class="leave-reply">' . __( 'Leave a reply', 'twentyeleven' ) . '</span>', __( '<b>1</b> Reply', 'twentyeleven' ), __( '<b>%</b> Replies', 'twentyeleven' ) ); ?>
</span>
</li>
<?php
endwhile;
// If we had some posts, close the <ol>
if ( $recent->post_count > 0 )
echo '</ol>';
?>
</section><!-- .recent-posts -->
<div class="widget-area" role="complementary">
<?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>
<?php
the_widget( 'Twenty_Eleven_Ephemera_Widget', '', array( 'before_title' => '<h3 class="widget-title">', 'after_title' => '</h3>' ) );
?>
<?php endif; // end sidebar widget area ?>
</div><!-- .widget-area -->
</div><!-- #content -->
</div><!-- #primary -->
<?php get_footer(); ?>
まず、このtwentyeleven の showcase.php をコピーして子テーマフォルダに設置します。
そして、子テーマフォルダ内にある showcase.php をテキストエディタで開き、
<nav class="feature-slider">
<ul>
<?php
// Reset the counter so that we end up with matching elements
$counter_slider = 0;
// Begin from zero
rewind_posts();
// Let's roll again.
while ( $featured->have_posts() ) : $featured->the_post();
$counter_slider++;
if ( 1 == $counter_slider )
$class = 'class="active"';
else
$class = '';
?>
<li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" <?php echo $class; ?>><?php echo $counter_slider; ?></a></li>
<?php endwhile; ?>
</ul>
</nav>
<?php echo $counter_slider; ?> をリスト表示されるリンク対象として<a></a>の間に記入します。
すると、ナビゲーション部分の表示は以下のように変わる。丸印の上に数字が見えるようになります。
次に、この丸印を消すための記述を子テーマフォルダ内の style.css に行います。
background: rgba などの設定を子テーマの style.css でちまちま打ち消していくと、最終的に背景色の設定がうまくいかない現象にはまりました。
ダッシュボードから、「外観」→「テーマ設定」→リンク色 が設定できるようになっていて、このリンク色がアクティブ記事のリンク背景色になりました。
これは、style.cssの設定のほかに、ここでの設定が、自動的に全ての記事の<head></head>部分に書き込まれるようになっているからです。
書き込みは以下の通り。
色々試行錯誤した結果、子テーマのスタイルシートで透過効果などの打ち消しをするのも美しくないので、showcase.php で指定されている ナビゲーションに対するクラス名を変更し、新規にそのクラスに対するスタイルを設定する事にした。
赤字が変更箇所。class 名を feature-slider-lettlemoo にしました。
class=”active-littlemoo” の箇所は、ナビゲーション部分でアクティブ(現在見えている抜粋記事)状態の記事に対する設定をするためのクラスです。
<nav class="feature-slider-littlemoo"> <ul> <?php // Reset the counter so that we end up with matching elements $counter_slider = 0; // Begin from zero rewind_posts(); // Let's roll again. while ( $featured->have_posts() ) : $featured->the_post(); $counter_slider++; if ( 1 == $counter_slider ) $class = 'class="active-littlemoo"'; else $class = ''; ?> <li><a href="#featured-post-<?php echo $counter_slider; ?>" title="<?php printf( esc_attr__( 'Featuring: %s', 'twentyeleven' ), the_title_attribute( 'echo=0' ) ); ?>" <?php echo $class; ?>><?php echo $counter_slider; ?></a></li> <?php endwhile; ?> </ul> </nav>
子テーマのstyle.css にfeature-slider-littlemoo に対する設定を記述します。
/* feature-slider に関する変更
*******************************************************/
#content .feature-slider-littlemoo {
top: 0;
right: 8.9%;
overflow: visible;
position: absolute;
font-size: 10px;
}
/*リスト表示のスタイルとマージを無しにしています*/
.feature-slider-littlemoo ul {
list-style: none;
margin: 0;
}
/*各リストが横一列に並ぶようにの設定です*/
.feature-slider-littlemoo li {
float: left;
margin: 0 6px;
}
/*リンクの付いている各リストに対する設定です。四角の中に数字が見えるようにしています*/
.feature-slider-littlemoo a {
background-color: #fdfdfd;
display: block;
width: 2.1em;
height: 2.1em;
border: 1px solid #cacaca;
text-align: center;
font-weight: 400;
color: #666;
}
/*マウスポインタがリンクのあるリスト上にきたときの動作の設定です。四角の中が黒くなります*/
.feature-slider-littlemoo a:hover {
background-color: #990;
text-decoration: none;
border: 1px solid #dfdfdf;
}
/*現在表示されている記事のリストリンクに対する設定です*/
.feature-slider-littlemoo a.active-littlemoo {
background-color: #e5e5e5;
color: #666;
}
以上の変更を加えた状態での表示は下図のとおりです。
見た目はそれらしくなりましたが、実はこのままではリンクがまともに動作しません。
親テンプレートであるtwentyeleven フォルダ内→ js フォルダ → showcase.js でもこのスライドショー(feature-slider) の動作に関与しています。
この js フォルダをコピーして子テーマフォルダに設置します。
showcase.js をテキストエディタで開きます。ここで feature-slider に関するクラス名が設定されています。
(function($) {
$(document).ready( function() {
$('.feature-slider a').click(function(e) {
$('.featured-posts section.featured-post').css({
opacity: 0,
visibility: 'hidden'
});
$(this.hash).css({
opacity: 1,
visibility: 'visible'
});
$('.feature-slider a').removeClass('active');
$(this).addClass('active');
e.preventDefault();
});
});
})(jQuery);
変更は下の赤字の部分です。
(function($) {
$(document).ready( function() {
$('.feature-slider-littlemoo a').click(function(e) {
$('.featured-posts section.featured-post').css({
opacity: 0,
visibility: 'hidden'
});
$(this.hash).css({
opacity: 1,
visibility: 'visible'
});
$('.feature-slider-lettlemoo a').removeClass('active-littlemoo');
$(this).addClass('active-littlemoo');
e.preventDefault();
});
});
})(jQuery);
子テーマの中に作成した showcase.js に上記のように変更を加えました。それなので、親テーマのshowcase.js ではなく、子テーマ内の showcase.js を見に行くように、子テーマ内のshowcase.php に再度変更を加えます。
showcase.php をテキストエディタで開きます。
<?php
/**
* Template Name: Showcase Template
* Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
*
* The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,
* another recent posts area (with the latest post shown in full and the rest as a list)
* and a left sidebar holding aside posts.
*
* We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
// Enqueue showcase script for the slider
wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );← この一行で見に行くshowcase.js の場所を指定しています。
get_header(); ?>
get_template_directory_uri() で、親テーマフォルダを指定しています。
‘/js/showcase.js’ 親テーマフォルダ内の js フォルダ内の showcase.js を呼び出しています。
これを、子テーマフォルダ内のjsフォルダ、showcase.js を見に行くようにします。
子テーマフォルダを指定するためのコードは、
get_template_directory_uri()
です。
実際の記述は以下の通りです。赤字が変更箇所です。
<?php
/**
* Template Name: Showcase Template
* Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts
*
* The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,
* another recent posts area (with the latest post shown in full and the rest as a list)
* and a left sidebar holding aside posts.
*
* We are creating two queries to fetch the proper posts and a custom widget for the sidebar.
*
* @package WordPress
* @subpackage Twenty_Eleven
* @since Twenty Eleven 1.0
*/
// Enqueue showcase script for the slider
wp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '/js/showcase.js', array( 'jquery' ), '2011-04-28' );
get_header(); ?>
<div id="primary" class="showcase">
以上の変更でナビゲーションの変更は完了です。
まとめると、
- showcase.php を子テーマ内に設置。
- 記事数を表示するために <?php echo $counter_slider; ?> を記入。
- nav要素に対するクラス名を変更。
- active記事に対するクラス名を変更。
$class = 'class="任意の名前"'; - get_template_directory_uri() を get_stylesheet_directory_uri() に変更。
- 子テーマのstyle.css で nav 要素に対する指定、active 記事の場合の指定など書き加える。
- js フォルダ内のshowcase.js ファイルを子テーマの中にjs フォルダごとコピーして設置。
- showcase.php の中で新にした要素に対するクラス名を、ここでも更新。計４箇所あります。
以上です。
大変に参考になる記事をありがとうございます。
>これを、子テーマフォルダ内のjsフォルダ、showcase.js を見に行くようにします。
>
>子テーマフォルダを指定するためのコードは、
>get_template_directory_uri()
>です。
ここの、
get_template_directory_uri()
は、
get_stylesheet_directory_uri()
ですね。
その下のソースにある赤字部分も。