{"id":180,"date":"2011-08-25T09:21:12","date_gmt":"2011-08-25T00:21:12","guid":{"rendered":"http:\/\/www.little-moo.com\/wp\/?p=180"},"modified":"2021-03-15T17:23:25","modified_gmt":"2021-03-15T08:23:25","slug":"wordpress-3-2-1-twentyeleven%e3%81%ae%e5%ad%90%e3%83%86%e3%83%bc%e3%83%9e%e3%82%92%e4%bd%9c%e3%81%a3%e3%81%a6%e3%82%ab%e3%82%b9%e3%82%bf%e3%83%9e%e3%82%a4%e3%82%bafeature-slider","status":"publish","type":"post","link":"http:\/\/www.little-moo.com\/wp\/?p=180","title":{"rendered":"WordPress 3.2.1 twentyeleven\u306e\u5b50\u30c6\u30fc\u30de\u3092\u4f5c\u3063\u3066\u30ab\u30b9\u30bf\u30de\u30a4\u30ba:feature-slider"},"content":{"rendered":"

\u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u3064\u3044\u3066\u66f8\u304d\u307e\u3059\u3002<\/p>\n

\"\"<\/a><\/p>\n

Twentyeleven \u306e Showcase Template \u3092\u4f7f\u3046\u3068\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u69d8\u306a\u8868\u793a\u5f62\u614b\u3092\u4f5c\u308b\u4e8b\u304c\u3067\u304d\u307e\u3059\u3002
\n\u3053\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306f\u3001css\u3067\u4e38\u5370\u306b\u898b\u3048\u308b\u3088\u3046\u306b\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b\u304c\u3001IE\u3067\u306f\u89d2\u304c\u53d6\u308c\u305a\u56db\u89d2\u306e\u307e\u307e\u3067\u3059\u3002(IE9\u3067\u306f\u4e38\u306b\u898b\u3048\u307e\u3059)<\/p>\n

\u4eca\u56de\u3001\u3053\u306e\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u3092\u56f3\u5f62\u3067\u306f\u306a\u304f\u6570\u5b57\u306b\u3057\u3066\u307f\u307e\u3059\u3002<\/p>\n

\u307e\u305a\u3001twentyeleven \u306e style.css \u3067\u306e\u8a2d\u5b9a\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002<\/p>\n

#content .feature-slider {\n\ttop: 5px;\n\tright: 8.9%;\n\toverflow: visible;\n\tposition: absolute;\n}\n.feature-slider ul {\n\tlist-style-type: none;\n\tmargin: 0;\n}\n.feature-slider li {\n\tfloat: left;\n\tmargin: 0 6px;\n}\n.feature-slider a {\n\tbackground: #3c3c3c;\n\tbackground: rgba(60,60,60,0.9);\n\t-moz-border-radius: 12px;\n\tborder-radius: 12px;\n\t-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);\n\t-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);\n\tbox-shadow: inset 1px 1px 5px rgba(0,0,0,0.5), inset 0 0 2px rgba(255,255,255,0.5);\n\tdisplay: block;\n\twidth: 14px;\n\theight: 14px;\n}\n.feature-slider a.active {\n\tbackground: #1982d1;\n\t-webkit-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);\n\t-moz-box-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);\n\tbox-shadow: inset 1px 1px 5px rgba(0,0,0,0.4), inset 0 0 2px rgba(255,255,255,0.8);\n\tcursor: default;\n\topacity: 0.5;\n}<\/pre>\n
\u3053\u306ecss\u306f\u3001showcase.php \u5185\u306e nav class=”feature-slider” \u306b\u5bfe\u3059\u308bcss \u306e\u8a2d\u5b9a\u3067\u3059\u3002nav \u306e\u90e8\u5206\u3092\u8d64\u5b57\u306b\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
<?php\n\/**\n * Template Name: Showcase Template\n * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts\n *\n * The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,\n * another recent posts area (with the latest post shown in full and the rest as a list)\n * and a left sidebar holding aside posts.\n *\n * We are creating two queries to fetch the proper posts and a custom widget for the sidebar.\n *\n * @package WordPress\n * @subpackage Twenty_Eleven\n * @since Twenty Eleven 1.0\n *\/\n\n\/\/ Enqueue showcase script for the slider\nwp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri() . '\/js\/showcase.js', array( 'jquery' ), '2011-04-28' );\n\nget_header(); ?>\n\n\t\t<div id=\"primary\" class=\"showcase\">\n\t\t\t<div id=\"content\" role=\"main\">\n\n\t\t\t\t<?php the_post(); ?>\n\n\t\t\t\t<?php\n\t\t\t\t\t\/**\n\t\t\t\t\t * We are using a heading by rendering the_content\n\t\t\t\t\t * If we have content for this page, let's display it.\n\t\t\t\t\t *\/\n\t\t\t\t\tif ( '' != get_the_content() )\n\t\t\t\t\t\tget_template_part( 'content', 'intro' );\n\t\t\t\t?>\n\n\t\t\t\t<?php\n\t\t\t\t\t\/**\n\t\t\t\t\t * Begin the featured posts section.\n\t\t\t\t\t *\n\t\t\t\t\t * See if we have any sticky posts and use them to create our featured posts.\n\t\t\t\t\t * We limit the featured posts at ten.\n\t\t\t\t\t *\/\n\t\t\t\t\t$sticky = get_option( 'sticky_posts' );\n\n\t\t\t\t\t\/\/ Proceed only if sticky posts exist.\n\t\t\t\t\tif ( ! empty( $sticky ) ) :\n\n\t\t\t\t\t$featured_args = array(\n\t\t\t\t\t\t'post__in' => $sticky,\n\t\t\t\t\t\t'post_status' => 'publish',\n\t\t\t\t\t\t'posts_per_page' => 10,\n\t\t\t\t\t\t'no_found_rows' => true,\n\t\t\t\t\t);\n\n\t\t\t\t\t\/\/ The Featured Posts query.\n\t\t\t\t\t$featured = new WP_Query( $featured_args );\n\n\t\t\t\t\t\/\/ Proceed only if published posts exist\n\t\t\t\t\tif ( $featured->have_posts() ) :\n\n\t\t\t\t\t\/**\n\t\t\t\t\t * We will need to count featured posts starting from zero\n\t\t\t\t\t * to create the slider navigation.\n\t\t\t\t\t *\/\n\t\t\t\t\t$counter_slider = 0;\n\n\t\t\t\t\t?>\n\n\t\t\t\t<div class=\"featured-posts\">\n\t\t\t\t\t<h1 class=\"showcase-heading\"><?php _e( 'Featured Post', 'twentyeleven' ); ?><\/h1>\n\n\t\t\t\t<?php\n\t\t\t\t\t\/\/ Let's roll.\n\t\t\t\t\twhile ( $featured->have_posts() ) : $featured->the_post();\n\n\t\t\t\t\t\/\/ Increase the counter.\n\t\t\t\t\t$counter_slider++;\n\n\t\t\t\t\t\/**\n\t\t\t\t\t * We're going to add a class to our featured post for featured images\n\t\t\t\t\t * by default it'll have the feature-text class.\n\t\t\t\t\t *\/\n\t\t\t\t\t$feature_class = 'feature-text';\n\n\t\t\t\t\tif ( has_post_thumbnail() ) {\n\t\t\t\t\t\t\/\/ ... but if it has a featured image let's add some class\n\t\t\t\t\t\t$feature_class = 'feature-image small';\n\n\t\t\t\t\t\t\/\/ Hang on. Let's check this here image out.\n\t\t\t\t\t\t$image = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), array( HEADER_IMAGE_WIDTH, HEADER_IMAGE_WIDTH ) );\n\n\t\t\t\t\t\t\/\/ Is it bigger than or equal to our header?\n\t\t\t\t\t\tif ( $image[1] >= HEADER_IMAGE_WIDTH ) {\n\t\t\t\t\t\t\t\/\/ If bigger, let's add a BIGGER class. It's EXTRA classy now.\n\t\t\t\t\t\t\t$feature_class = 'feature-image large';\n\t\t\t\t\t\t}\n\t\t\t\t\t}\n\t\t\t\t\t?>\n\n\t\t\t\t\t<section class=\"featured-post <?php echo $feature_class; ?>\" id=\"featured-post-<?php echo $counter_slider; ?>\">\n\n\t\t\t\t\t\t<?php\n\t\t\t\t\t\t\t\/**\n\t\t\t\t\t\t\t * If the thumbnail is as big as the header image\n\t\t\t\t\t\t\t * make it a large featured post, otherwise render it small\n\t\t\t\t\t\t\t *\/\n\t\t\t\t\t\t\tif ( has_post_thumbnail() ) {\n\t\t\t\t\t\t\t\tif ( $image[1] >= HEADER_IMAGE_WIDTH )\n\t\t\t\t\t\t\t\t\t$thumbnail_size = 'large-feature';\n\t\t\t\t\t\t\t\telse\n\t\t\t\t\t\t\t\t\t$thumbnail_size = 'small-feature';\n\t\t\t\t\t\t\t\t?>\n\t\t\t\t\t\t\t\t<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>\n\t\t\t\t\t\t\t\t<?php\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t?>\n\t\t\t\t\t\t<?php get_template_part( 'content', 'featured' ); ?>\n\t\t\t\t\t<\/section>\n\t\t\t\t<?php endwhile;\t?>\n\n\t\t\t\t<?php\n\t\t\t\t\t\/\/ Show slider only if we have more than one featured post.\n\t\t\t\t\tif ( $featured->post_count > 1 ) :\n\t\t\t\t?>\n\t\t<nav class=\"feature-slider\"><\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 <ul><\/span>\n \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000<?php<\/span>\n\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 \/\/ Reset the counter so that we end up with matching elements<\/span>\n \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000$counter_slider = 0;<\/span>\n\n \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\/\/ Begin from zero<\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 rewind_posts();<\/span>\n\n \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\/\/ Let's roll again.<\/span>\n \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000while ( $featured->have_posts() ) : $featured->the_post();<\/span>\n \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000$counter_slider++;<\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 if ( 1 == $counter_slider )<\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 $class = 'class=\"active\"';<\/span>\n \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000else<\/span>\n \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000$class = '';<\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 ?><\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 <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><\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 <?php endwhile; ?><\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 <\/ul><\/span>\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000 <\/nav><\/span>\n\t\t\t\t<?php endif; \/\/ End check for more than one sticky post. ?>\n\t\t\t\t<\/div><!-- .featured-posts -->\n\t\t\t\t<?php endif; \/\/ End check for published posts. ?>\n\t\t\t\t<?php endif; \/\/ End check for sticky posts. ?>\n\n\t\t\t\t<section class=\"recent-posts\">\n\t\t\t\t\t<h1 class=\"showcase-heading\"><?php _e( 'Recent Posts', 'twentyeleven' ); ?><\/h1>\n\n\t\t\t\t\t<?php\n\n\t\t\t\t\t\/\/ Display our recent posts, showing full content for the very latest, ignoring Aside posts.\n\t\t\t\t\t$recent_args = array(\n\t\t\t\t\t\t'order' => 'DESC',\n\t\t\t\t\t\t'post__not_in' => get_option( 'sticky_posts' ),\n\t\t\t\t\t\t'tax_query' => array(\n\t\t\t\t\t\t\tarray(\n\t\t\t\t\t\t\t\t'taxonomy' => 'post_format',\n\t\t\t\t\t\t\t\t'terms' => array( 'post-format-aside', 'post-format-link', 'post-format-quote', 'post-format-status' ),\n\t\t\t\t\t\t\t\t'field' => 'slug',\n\t\t\t\t\t\t\t\t'operator' => 'NOT IN',\n\t\t\t\t\t\t\t),\n\t\t\t\t\t\t),\n\t\t\t\t\t\t'no_found_rows' => true,\n\t\t\t\t\t);\n\n\t\t\t\t\t\/\/ Our new query for the Recent Posts section.\n\t\t\t\t\t$recent = new WP_Query( $recent_args );\n\n\t\t\t\t\t\/\/ The first Recent post is displayed normally\n\t\t\t\t\tif ( $recent->have_posts() ) : $recent->the_post();\n\n\t\t\t\t\t\t\/\/ Set $more to 0 in order to only get the first part of the post.\n\t\t\t\t\t\tglobal $more;\n\t\t\t\t\t\t$more = 0;\n\n\t\t\t\t\t\tget_template_part( 'content', get_post_format() );\n\n\t\t\t\t\t\techo '<ol class=\"other-recent-posts\">';\n\n\t\t\t\t\tendif;\n\n\t\t\t\t\t\/\/ For all other recent posts, just display the title and comment status.\n\t\t\t\t\twhile ( $recent->have_posts() ) : $recent->the_post(); ?>\n\n\t\t\t\t\t\t<li class=\"entry-title\">\n\t\t\t\t\t\t\t<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>\n\t\t\t\t\t\t\t<span class=\"comments-link\">\n\t\t\t\t\t\t\t\t<?php comments_popup_link( '<span class=\"leave-reply\">' . __( 'Leave a reply', 'twentyeleven' ) . '<\/span>', __( '<b>1<\/b> Reply', 'twentyeleven' ), __( '<b>%<\/b> Replies', 'twentyeleven' ) ); ?>\n\t\t\t\t\t\t\t<\/span>\n\t\t\t\t\t\t<\/li>\n\n\t\t\t\t\t<?php\n\t\t\t\t\tendwhile;\n\n\t\t\t\t\t\/\/ If we had some posts, close the <ol>\n\t\t\t\t\tif ( $recent->post_count > 0 )\n\t\t\t\t\t\techo '<\/ol>';\n\t\t\t\t\t?>\n\t\t\t\t<\/section><!-- .recent-posts -->\n\n\t\t\t\t<div class=\"widget-area\" role=\"complementary\">\n\t\t\t\t\t<?php if ( ! dynamic_sidebar( 'sidebar-2' ) ) : ?>\n\n\t\t\t\t\t\t<?php\n\t\t\t\t\t\tthe_widget( 'Twenty_Eleven_Ephemera_Widget', '', array( 'before_title' => '<h3 class=\"widget-title\">', 'after_title' => '<\/h3>' ) );\n\t\t\t\t\t\t?>\n\n\t\t\t\t\t<?php endif; \/\/ end sidebar widget area ?>\n\t\t\t\t<\/div><!-- .widget-area -->\n\n\t\t\t<\/div><!-- #content -->\n\t\t<\/div><!-- #primary -->\n\n<?php get_footer(); ?><\/pre>\n
\u307e\u305a\u3001\u3053\u306etwentyeleven \u306e showcase.php \u3092\u30b3\u30d4\u30fc\u3057\u3066\u5b50\u30c6\u30fc\u30de\u30d5\u30a9\u30eb\u30c0\u306b\u8a2d\u7f6e\u3057\u307e\u3059\u3002
\n\u305d\u3057\u3066\u3001\u5b50\u30c6\u30fc\u30de\u30d5\u30a9\u30eb\u30c0\u5185\u306b\u3042\u308b showcase.php \u3092\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u958b\u304d\u3001<\/p>\n
<nav class=\"feature-slider\">\n\u3000<ul>\n\u3000\u3000\u3000<?php\n\u3000\u3000\u3000\/\/ Reset the counter so that we end up with matching elements\n\u3000\u3000\u3000\u3000\u3000\u3000$counter_slider = 0;\n\u3000\u3000\u3000\u3000\u3000\u3000\/\/ Begin from zero\n\t    \trewind_posts();\n\t\u3000\u3000\u3000\u3000\/\/ Let's roll again.\n    \u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000while ( $featured->have_posts() ) : $featured->the_post();\n  \t\t\u3000\u3000$counter_slider++;\n\t\u3000\u3000\u3000\u3000\u3000\u3000if ( 1 == $counter_slider )\n\t\u3000\u3000\u3000\u3000\u3000\u3000$class = 'class=\"active\"';\n\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000\u3000else\n\t\u3000\u3000\u3000\u3000\u3000\u3000$class = '';\n  \t?>\n\n<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; ?><\/span><\/a><\/li>\n<?php endwhile;\t?>\n<\/ul>\n<\/nav><\/pre>\n
<?php echo $counter_slider; ?> \u3092\u30ea\u30b9\u30c8\u8868\u793a\u3055\u308c\u308b\u30ea\u30f3\u30af\u5bfe\u8c61\u3068\u3057\u3066<a><\/a>\u306e\u9593\u306b\u8a18\u5165\u3057\u307e\u3059\u3002<\/p>\n
\u3059\u308b\u3068\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u90e8\u5206\u306e\u8868\u793a\u306f\u4ee5\u4e0b\u306e\u3088\u3046\u306b\u5909\u308f\u308b\u3002\u4e38\u5370\u306e\u4e0a\u306b\u6570\u5b57\u304c\u898b\u3048\u308b\u3088\u3046\u306b\u306a\u308a\u307e\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u6b21\u306b\u3001\u3053\u306e\u4e38\u5370\u3092\u6d88\u3059\u305f\u3081\u306e\u8a18\u8ff0\u3092\u5b50\u30c6\u30fc\u30de\u30d5\u30a9\u30eb\u30c0\u5185\u306e style.css \u306b\u884c\u3044\u307e\u3059\u3002
\nbackground: rgba\u3000\u306a\u3069\u306e\u8a2d\u5b9a\u3092\u5b50\u30c6\u30fc\u30de\u306e style.css \u3067\u3061\u307e\u3061\u307e\u6253\u3061\u6d88\u3057\u3066\u3044\u304f\u3068\u3001\u6700\u7d42\u7684\u306b\u80cc\u666f\u8272\u306e\u8a2d\u5b9a\u304c\u3046\u307e\u304f\u3044\u304b\u306a\u3044\u73fe\u8c61\u306b\u306f\u307e\u308a\u307e\u3057\u305f\u3002
\n\u30c0\u30c3\u30b7\u30e5\u30dc\u30fc\u30c9\u304b\u3089\u3001\u300c\u5916\u89b3\u300d\u2192\u300c\u30c6\u30fc\u30de\u8a2d\u5b9a\u300d\u2192\u30ea\u30f3\u30af\u8272\u3000\u304c\u8a2d\u5b9a\u3067\u304d\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u3066\u3001\u3053\u306e\u30ea\u30f3\u30af\u8272\u304c\u30a2\u30af\u30c6\u30a3\u30d6\u8a18\u4e8b\u306e\u30ea\u30f3\u30af\u80cc\u666f\u8272\u306b\u306a\u308a\u307e\u3057\u305f\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u3053\u308c\u306f\u3001style.css\u306e\u8a2d\u5b9a\u306e\u307b\u304b\u306b\u3001\u3053\u3053\u3067\u306e\u8a2d\u5b9a\u304c\u3001\u81ea\u52d5\u7684\u306b\u5168\u3066\u306e\u8a18\u4e8b\u306e<head><\/head>\u90e8\u5206\u306b\u66f8\u304d\u8fbc\u307e\u308c\u308b\u3088\u3046\u306b\u306a\u3063\u3066\u3044\u308b\u304b\u3089\u3067\u3059\u3002<\/p>\n
\u66f8\u304d\u8fbc\u307f\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u8272\u3005\u8a66\u884c\u932f\u8aa4\u3057\u305f\u7d50\u679c\u3001\u5b50\u30c6\u30fc\u30de\u306e\u30b9\u30bf\u30a4\u30eb\u30b7\u30fc\u30c8\u3067\u900f\u904e\u52b9\u679c\u306a\u3069\u306e\u6253\u3061\u6d88\u3057\u3092\u3059\u308b\u306e\u3082\u7f8e\u3057\u304f\u306a\u3044\u306e\u3067\u3001showcase.php \u3067\u6307\u5b9a\u3055\u308c\u3066\u3044\u308b \u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306b\u5bfe\u3059\u308b\u30af\u30e9\u30b9\u540d\u3092\u5909\u66f4\u3057\u3001\u65b0\u898f\u306b\u305d\u306e\u30af\u30e9\u30b9\u306b\u5bfe\u3059\u308b\u30b9\u30bf\u30a4\u30eb\u3092\u8a2d\u5b9a\u3059\u308b\u4e8b\u306b\u3057\u305f\u3002
\n\u8d64\u5b57\u304c\u5909\u66f4\u7b87\u6240\u3002class \u540d\u3092 feature-slider-lettlemoo \u306b\u3057\u307e\u3057\u305f\u3002
\nclass=”active-littlemoo” \u306e\u7b87\u6240\u306f\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u90e8\u5206\u3067\u30a2\u30af\u30c6\u30a3\u30d6(\u73fe\u5728\u898b\u3048\u3066\u3044\u308b\u629c\u7c8b\u8a18\u4e8b)\u72b6\u614b\u306e\u8a18\u4e8b\u306b\u5bfe\u3059\u308b\u8a2d\u5b9a\u3092\u3059\u308b\u305f\u3081\u306e\u30af\u30e9\u30b9\u3067\u3059\u3002<\/p>\n
<nav class=\"feature-slider-littlemoo<\/span>\">\n\t<ul>\n\t<?php\n\n\t\t\/\/ Reset the counter so that we end up with matching elements\n\t$counter_slider = 0;\n\n\t\t\/\/ Begin from zero\n\trewind_posts();\n\n\t\t\/\/ Let's roll again.\n\twhile ( $featured->have_posts() ) : $featured->the_post();\n\t\t$counter_slider++;\n\t\t\tif ( 1 == $counter_slider )\n\t\t\t\t$class = 'class=\"active-littlemoo<\/span>\"';\n\t\t\telse\n\t\t\t\t$class = '';\n\t?>\n\t\t<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>\n\t<?php endwhile;\t?>\n\t<\/ul>\n<\/nav><\/pre>\n
\u5b50\u30c6\u30fc\u30de\u306estyle.css \u306bfeature-slider-littlemoo \u306b\u5bfe\u3059\u308b\u8a2d\u5b9a\u3092\u8a18\u8ff0\u3057\u307e\u3059\u3002<\/p>\n
\/* feature-slider \u306b\u95a2\u3059\u308b\u5909\u66f4\n*******************************************************\/\n\n#content .feature-slider-littlemoo {\n\ttop: 0;\n\tright: 8.9%;\n\toverflow: visible;\n\tposition: absolute;\n\tfont-size: 10px;\n}\n\n\/*\u30ea\u30b9\u30c8\u8868\u793a\u306e\u30b9\u30bf\u30a4\u30eb\u3068\u30de\u30fc\u30b8\u3092\u7121\u3057\u306b\u3057\u3066\u3044\u307e\u3059*\/\n.feature-slider-littlemoo ul {\n\tlist-style: none;\n\tmargin: 0;\n}\n\n\/*\u5404\u30ea\u30b9\u30c8\u304c\u6a2a\u4e00\u5217\u306b\u4e26\u3076\u3088\u3046\u306b\u306e\u8a2d\u5b9a\u3067\u3059*\/\n.feature-slider-littlemoo li {\n\tfloat: left;\n\tmargin: 0 6px;\n}\n\n\/*\u30ea\u30f3\u30af\u306e\u4ed8\u3044\u3066\u3044\u308b\u5404\u30ea\u30b9\u30c8\u306b\u5bfe\u3059\u308b\u8a2d\u5b9a\u3067\u3059\u3002\u56db\u89d2\u306e\u4e2d\u306b\u6570\u5b57\u304c\u898b\u3048\u308b\u3088\u3046\u306b\u3057\u3066\u3044\u307e\u3059*\/\n.feature-slider-littlemoo a {\n\tbackground-color: #fdfdfd;\n\tdisplay: block;\n\twidth: 2.1em;\n\theight: 2.1em;\n\tborder: 1px solid  #cacaca;\n\ttext-align: center;\n\tfont-weight: 400;\n\tcolor: #666;\n}\n\n\/*\u30de\u30a6\u30b9\u30dd\u30a4\u30f3\u30bf\u304c\u30ea\u30f3\u30af\u306e\u3042\u308b\u30ea\u30b9\u30c8\u4e0a\u306b\u304d\u305f\u3068\u304d\u306e\u52d5\u4f5c\u306e\u8a2d\u5b9a\u3067\u3059\u3002\u56db\u89d2\u306e\u4e2d\u304c\u9ed2\u304f\u306a\u308a\u307e\u3059*\/\n.feature-slider-littlemoo a:hover {\n\tbackground-color: #990;\n\ttext-decoration: none;\n\tborder: 1px solid  #dfdfdf;\n}\n\n\/*\u73fe\u5728\u8868\u793a\u3055\u308c\u3066\u3044\u308b\u8a18\u4e8b\u306e\u30ea\u30b9\u30c8\u30ea\u30f3\u30af\u306b\u5bfe\u3059\u308b\u8a2d\u5b9a\u3067\u3059*\/\n.feature-slider-littlemoo a.active-littlemoo {\n\tbackground-color: #e5e5e5;\n\tcolor: #666;\n}<\/pre>\n
\u4ee5\u4e0a\u306e\u5909\u66f4\u3092\u52a0\u3048\u305f\u72b6\u614b\u3067\u306e\u8868\u793a\u306f\u4e0b\u56f3\u306e\u3068\u304a\u308a\u3067\u3059\u3002<\/p>\n
\"\"<\/a><\/p>\n
\u898b\u305f\u76ee\u306f\u305d\u308c\u3089\u3057\u304f\u306a\u308a\u307e\u3057\u305f\u304c\u3001\u5b9f\u306f\u3053\u306e\u307e\u307e\u3067\u306f\u30ea\u30f3\u30af\u304c\u307e\u3068\u3082\u306b\u52d5\u4f5c\u3057\u307e\u305b\u3093\u3002
\n\u89aa\u30c6\u30f3\u30d7\u30ec\u30fc\u30c8\u3067\u3042\u308btwentyeleven \u30d5\u30a9\u30eb\u30c0\u5185\u2192 js \u30d5\u30a9\u30eb\u30c0 \u2192 showcase.js \u3067\u3082\u3053\u306e\u30b9\u30e9\u30a4\u30c9\u30b7\u30e7\u30fc(feature-slider) \u306e\u52d5\u4f5c\u306b\u95a2\u4e0e\u3057\u3066\u3044\u307e\u3059\u3002
\n\"\"<\/a><\/p>\n
\u3053\u306e js \u30d5\u30a9\u30eb\u30c0\u3092\u30b3\u30d4\u30fc\u3057\u3066\u5b50\u30c6\u30fc\u30de\u30d5\u30a9\u30eb\u30c0\u306b\u8a2d\u7f6e\u3057\u307e\u3059\u3002
\n\"\"<\/a><\/p>\n
showcase.js \u3092\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u958b\u304d\u307e\u3059\u3002\u3053\u3053\u3067 feature-slider \u306b\u95a2\u3059\u308b\u30af\u30e9\u30b9\u540d\u304c\u8a2d\u5b9a\u3055\u308c\u3066\u3044\u307e\u3059\u3002<\/p>\n
(function($) {\n\t$(document).ready( function() {\n\t    $('.feature-slider a').click(function(e) {\n\t        $('.featured-posts section.featured-post').css({\n\t            opacity: 0,\n\t            visibility: 'hidden'\n\t        });\n\t        $(this.hash).css({\n\t            opacity: 1,\n\t            visibility: 'visible'\n\t        });\n\t        $('.feature-slider a').removeClass('active');\n\t        $(this).addClass('active');\n\t        e.preventDefault();\n\t    });\n\t});\n})(jQuery);<\/pre>\n
\u5909\u66f4\u306f\u4e0b\u306e\u8d64\u5b57\u306e\u90e8\u5206\u3067\u3059\u3002<\/p>\n
(function($) {\n\t$(document).ready( function() {\n\t    $('.feature-slider-littlemoo<\/span> a').click(function(e) {\n\t        $('.featured-posts section.featured-post').css({\n\t            opacity: 0,\n\t            visibility: 'hidden'\n\t        });\n\t        $(this.hash).css({\n\t            opacity: 1,\n\t            visibility: 'visible'\n\t        });\n\t        $('.feature-slider-lettlemoo<\/span> a').removeClass('active-littlemoo<\/span>');\n\t        $(this).addClass('active-littlemoo<\/span>');\n\t        e.preventDefault();\n\t    });\n\t});\n})(jQuery);<\/pre>\n
\u5b50\u30c6\u30fc\u30de\u306e\u4e2d\u306b\u4f5c\u6210\u3057\u305f showcase.js \u306b\u4e0a\u8a18\u306e\u3088\u3046\u306b\u5909\u66f4\u3092\u52a0\u3048\u307e\u3057\u305f\u3002\u305d\u308c\u306a\u306e\u3067\u3001\u89aa\u30c6\u30fc\u30de\u306eshowcase.js \u3067\u306f\u306a\u304f\u3001\u5b50\u30c6\u30fc\u30de\u5185\u306e showcase.js \u3092\u898b\u306b\u884c\u304f\u3088\u3046\u306b\u3001\u5b50\u30c6\u30fc\u30de\u5185\u306eshowcase.php \u306b\u518d\u5ea6\u5909\u66f4\u3092\u52a0\u3048\u307e\u3059\u3002\"\"<\/a><\/p>\n
showcase.php \u3092\u30c6\u30ad\u30b9\u30c8\u30a8\u30c7\u30a3\u30bf\u3067\u958b\u304d\u307e\u3059\u3002<\/p>\n
<?php\n\/**\n * Template Name: Showcase Template\n * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts\n *\n * The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,\n * another recent posts area (with the latest post shown in full and the rest as a list)\n * and a left sidebar holding aside posts.\n *\n * We are creating two queries to fetch the proper posts and a custom widget for the sidebar.\n *\n * @package WordPress\n * @subpackage Twenty_Eleven\n * @since Twenty Eleven 1.0\n *\/\n\n\/\/ Enqueue showcase script for the slider\nwp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri()<\/strong> . '\/js\/showcase.js'<\/strong>, array( 'jquery' ), '2011-04-28' );\u2190 \u3053\u306e\u4e00\u884c\u3067\u898b\u306b\u884c\u304fshowcase.js \u306e\u5834\u6240\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002<\/span>\n\nget_header(); ?><\/pre>\n
get_template_directory_uri() \u3067\u3001\u89aa\u30c6\u30fc\u30de\u30d5\u30a9\u30eb\u30c0\u3092\u6307\u5b9a\u3057\u3066\u3044\u307e\u3059\u3002
\n‘\/js\/showcase.js’\u3000\u89aa\u30c6\u30fc\u30de\u30d5\u30a9\u30eb\u30c0\u5185\u306e js \u30d5\u30a9\u30eb\u30c0\u5185\u306e showcase.js \u3092\u547c\u3073\u51fa\u3057\u3066\u3044\u307e\u3059\u3002<\/p>\n
\u3053\u308c\u3092\u3001\u5b50\u30c6\u30fc\u30de\u30d5\u30a9\u30eb\u30c0\u5185\u306ejs\u30d5\u30a9\u30eb\u30c0\u3001showcase.js \u3092\u898b\u306b\u884c\u304f\u3088\u3046\u306b\u3057\u307e\u3059\u3002<\/p>\n
\u5b50\u30c6\u30fc\u30de\u30d5\u30a9\u30eb\u30c0\u3092\u6307\u5b9a\u3059\u308b\u305f\u3081\u306e\u30b3\u30fc\u30c9\u306f\u3001
\nget_template_directory_uri()
\n\u3067\u3059\u3002<\/p>\n
\u5b9f\u969b\u306e\u8a18\u8ff0\u306f\u4ee5\u4e0b\u306e\u901a\u308a\u3067\u3059\u3002\u8d64\u5b57\u304c\u5909\u66f4\u7b87\u6240\u3067\u3059\u3002<\/p>\n
<?php\n\/**\n * Template Name: Showcase Template\n * Description: A Page Template that showcases Sticky Posts, Asides, and Blog Posts\n *\n * The showcase template in Twenty Eleven consists of a featured posts section using sticky posts,\n * another recent posts area (with the latest post shown in full and the rest as a list)\n * and a left sidebar holding aside posts.\n *\n * We are creating two queries to fetch the proper posts and a custom widget for the sidebar.\n *\n * @package WordPress\n * @subpackage Twenty_Eleven\n * @since Twenty Eleven 1.0\n *\/\n\n\/\/ Enqueue showcase script for the slider\nwp_enqueue_script( 'twentyeleven-showcase', get_template_directory_uri()<\/span> . '\/js\/showcase.js', array( 'jquery' ), '2011-04-28' );\n\nget_header(); ?>\n\n\t\t<div id=\"primary\" class=\"showcase\"><\/pre>\n
\u4ee5\u4e0a\u306e\u5909\u66f4\u3067\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u5909\u66f4\u306f\u5b8c\u4e86\u3067\u3059\u3002<\/p>\n
\u307e\u3068\u3081\u308b\u3068\u3001<\/p>\n
    \n
  1. showcase.php \u3092\u5b50\u30c6\u30fc\u30de\u5185\u306b\u8a2d\u7f6e\u3002<\/li>\n
      \n
    • \u8a18\u4e8b\u6570\u3092\u8868\u793a\u3059\u308b\u305f\u3081\u306b <?php echo $counter_slider; ?>  \u3092\u8a18\u5165\u3002<\/li>\n
    • nav\u8981\u7d20\u306b\u5bfe\u3059\u308b\u30af\u30e9\u30b9\u540d\u3092\u5909\u66f4\u3002<\/li>\n
    • active\u8a18\u4e8b\u306b\u5bfe\u3059\u308b\u30af\u30e9\u30b9\u540d\u3092\u5909\u66f4\u3002\n
      $class = 'class=\"\u4efb\u610f\u306e\u540d\u524d<\/span>\"';<\/pre>\n<\/li>\n
    • get_template_directory_uri() \u3092 get_stylesheet_directory_uri() \u306b\u5909\u66f4\u3002<\/li>\n<\/ul>\n
    • \u5b50\u30c6\u30fc\u30de\u306estyle.css \u3067 nav \u8981\u7d20\u306b\u5bfe\u3059\u308b\u6307\u5b9a\u3001active \u8a18\u4e8b\u306e\u5834\u5408\u306e\u6307\u5b9a\u306a\u3069\u66f8\u304d\u52a0\u3048\u308b\u3002<\/li>\n
    • js \u30d5\u30a9\u30eb\u30c0\u5185\u306eshowcase.js \u30d5\u30a1\u30a4\u30eb\u3092\u5b50\u30c6\u30fc\u30de\u306e\u4e2d\u306bjs \u30d5\u30a9\u30eb\u30c0\u3054\u3068\u30b3\u30d4\u30fc\u3057\u3066\u8a2d\u7f6e\u3002<\/li>\n
        \n
      • showcase.php \u306e\u4e2d\u3067\u65b0\u306b\u3057\u305f\u8981\u7d20\u306b\u5bfe\u3059\u308b\u30af\u30e9\u30b9\u540d\u3092\u3001\u3053\u3053\u3067\u3082\u66f4\u65b0\u3002\u8a08\uff14\u7b87\u6240\u3042\u308a\u307e\u3059\u3002<\/li>\n<\/ul>\n<\/ol>\n
        \u4ee5\u4e0a\u3067\u3059\u3002<\/p>\n","protected":false},"excerpt":{"rendered":"
        \u3053\u306e\u8a18\u4e8b\u3067\u306f\u3001\u30ca\u30d3\u30b2\u30fc\u30b7\u30e7\u30f3\u306e\u30ab\u30b9\u30bf\u30de\u30a4\u30ba\u306b\u3064\u3044\u3066\u66f8\u304d\u307e\u3059\u3002<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,6,5],"tags":[],"class_list":["post-180","post","type-post","status-publish","format-standard","hentry","category-wordpress","category-design","category-wordpress_install"],"_links":{"self":[{"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/180","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=180"}],"version-history":[{"count":7,"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions"}],"predecessor-version":[{"id":2011,"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=\/wp\/v2\/posts\/180\/revisions\/2011"}],"wp:attachment":[{"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=180"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=180"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/www.little-moo.com\/wp\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=180"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}