私は JavaScript の専門家ではありません。あなたの助けが必要です。写真付きのウェブサイトhttp://strategenundgestalter.deにアイソトープを使用していますが、レイアウトが壊れています。
次のようになります。
しかし、それは次のようになります:
私が使用しているコードは次のとおりです。
if( jQuery().isotope ) {
jQuery(function() {
var container = jQuery('.isotope'),
optionFilter = jQuery('#sort-by'),
optionFilterLinks = optionFilter.find('a');
optionFilterLinks.attr('href','#');
optionFilterLinks.click(function(){
var selector = jQuery(this).attr('data-filter');
container.isotope({
filter : '.' + selector,
itemSelector : '.isotope-item',
animationEngine : 'best-available',
layoutMode : 'masonry',
columnWidth: '220'
});
// Highlight the correct filter
optionFilterLinks.removeClass('active');
jQuery(this).addClass('active');
return false;
});
});
}
ページを読み込むと、デフォルトのフィルターは「すべて」で、レイアウトは次のようになります。すべてのレイアウトのフィルター ボタンをクリックすると、OK です。ただし、ページロード後ではありません。常に「すべてのボタン」をクリックする必要があります。
問題がありますか？
あ、ごめんなさい。HTML:
<?php
/*
Template Name: Portfolio Template
*/
?>
<?php get_header(); ?>
<!--BEGIN .page-header -->
<div class="page-header">
<h1 class="page-title"><?php the_title(); ?></h1>
<ul id="sort-by">
<li><a href="#all" data-filter="type-portfolio" class="active"><?php _e('alle', 'framework'); ?></a></li>
<?php wp_list_categories( array('title_li' => '', 'taxonomy' => 'portfolio-type', 'walker' => new Portfolio_Walker() ) ); ?>
</ul>
<!--END .page-header -->
</div>
<!--BEGIN #primary .hfeed-->
<div id="primary" class="hfeed isotope">
<?php
$args = array(
'post_type' => 'portfolio',
'orderby' => 'menu_order',
'order' => 'ASC',
'posts_per_page' => -1
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post(); ?>
<?php
$terms = get_the_terms( $post->ID, 'portfolio-type' );
$term_list = '';
if( is_array($terms) ) {
foreach( $terms as $term ) {
$term_list .= urldecode($term->slug);
$term_list .= ' ';
}
}
?>
<!--BEGIN .hentry -->
<div <?php post_class("$term_list isotope-item"); ?> id="post-<?php the_ID(); ?>">
<?php if ( (function_exists('has_post_thumbnail')) && (has_post_thumbnail()) ) { ?>
<div class="post-thumb">
<a title="<?php printf(__('Permanent Link to %s', 'framework'), get_the_title()); ?>" href="<?php the_permalink(); ?>">
<?php the_post_thumbnail('portfolio-thumb'); ?>
</a>
</div>
<?php } ?>
<h2 class="entry-title"></h2>
<!--BEGIN .entry-meta -->
<div class="entry-meta"><?php the_title(); ?><br/>
<span class="entry-portfolio-type"></span>
<!--END .entry-meta -->
</div>
<!--END .hentry-->
</div>
<?php endwhile; ?>
<?php wp_reset_postdata(); ?>
<!--END #primary .hfeed-->
</div>
<?php get_footer(); ?>
そしてCSS：
.page-template-template-portfolio-php #primary,
.tax-portfolio-type #primary {
width: 100%;
}
.page-template-template-portfolio-php .page-header,
.tax-portfolio-type .page-header { margin-right: 20px;}
.page-template-template-portfolio-php .hentry,
.tax-portfolio-type .hentry,
.tz-recent-portfolios-widget li {
background: #fff;
border-bottom: none;
float: left;
margin: 0px 20px 0px 0px;
padding: 0px;
width: 220px;
}
.page-template-template-portfolio-php .last,
.tax-portfolio-type .last { margin-right: 0; }
.page-template-template-portfolio-php .post-thumb,
.tax-portfolio-type .post-thumb,
.recent-work .post-thumb,
.portfolio-related .post-thumb,
.tz-recent-portfolios-widget .post-thumb {
margin: 0;
position: relative;
}
.page-template-template-portfolio-php .post-thumb a,
.tax-portfolio-type .post-thumb a,
.recent-work .post-thumb a,
.portfolio-related .post-thumb a,
.tz-recent-portfolios-widget .post-thumb a {
border-bottom: none;
display: block;
margin: 0px;
padding: 0;
position: relative;
width: 220px;
}
.page-template-template-portfolio-php .post-thumb-overlay,
.tax-portfolio-type .post-thumb-overlay,
.recent-work .post-thumb-overlay,
.portfolio-related .post-thumb-overlay,
.tz-recent-portfolios-widget .post-thumb-overlay,
{
background-color: #333;
color: #fff;
display: none;
padding: 2px 6px;
position: absolute;
top: 43%;
left: 32%;
}
.page-template-template-portfolio-php a:hover .post-thumb-overlay,
.tax-portfolio-type a:hover .post-thumb-overlay,
.recent-work a:hover .post-thumb-overlay,
.portfolio-related a:hover .post-thumb-overlay,
.tz-recent-portfolios-widget a:hover .post-thumb-overlay,
.page-template-template-portfolio-php .hentry .entry-meta {
display: block;
z-index: 99;
}
.page-template-template-portfolio-php .hentry .entry-title,
.page-template-template-portfolio-php .hentry .entry-title a,
.tax-portfolio-type .hentry .entry-title,
.tax-portfolio-type .hentry .entry-title a,
.recent-work .entry-title,
.recent-work .entry-title a,
.portfolio-related .entry-title,
.portfolio-related .entry-title a,
.tz-recent-portfolios-widget .entry-title,
.tz-recent-portfolios-widget .entry-title a {
font-size: 13px;
line-height: 10px;
margin: 15px 0 2px;
text-align: left;
}
.page-template-template-portfolio-php .hentry .entry-meta,
.tax-portfolio-type .hentry .entry-meta,
.tz-recent-portfolios-widget .entry-meta{
font-size: 12px;
line-height: 12px;
font-weight: bold;
margin: 5%;
text-transform: uppercase;
left: auto;
color: #fff;
text-align: center;
width: 90%;
opacity: 0.6;
}
.page-template-template-portfolio-php .post-thumb a:hover img,
.tax-portfolio-type .post-thumb a:hover img,
.recent-work .post-thumb a:hover img,
.portfolio-related .post-thumb a:hover img,
.tz-recent-portfolios-widget .post-thumb a:hover img
{ opacity: 0.1; }
.page-template-template-portfolio-php .page-title,
.tax-portfolio-type .page-title { display: inline-block; }
#sort-by { float: right; }
.ie7 #sort-by {
position: relative;
top: -20px;
right: -18px;
}
#sort-by li {
float: left;
padding-left: 0px;
margin-left: 7px;
}
#sort-by li:first-child { background: none; }
#sort-by a {
border-bottom: none;
color: #555;
padding: 2px 5px;
margin: 0;
}
#sort-by a.active { background-color: #ffd62c; }
ありがとう！！！