[英]Applying Wookmark tile plugin to a wordpress Theme using a posts-loop
我正在尝试将Wookmark jQuery插件应用于我的wordpress主题。 实现是通过循环进行的,因为主题的重点是创建视觉上令人愉悦的作品集。 对于该主题,我注册了一种新型的类型为“ portfolio”的帖子,并进行了循环,以区分带有图片的帖子和没有图片的帖子。
问题当然是,它不起作用。 没有返回错误,所有脚本都到位了[或者在我看来]-但帖子没有得到WookMark应该采用的任何处理[jQuery Voodoo]。 所有我得到的所有帖子,依次调用。
我通过functions.php文件将脚本排入主题,因此:
if ( !function_exists('core_mods') ) {
function core_mods() {
wp_enqueue_script('jquery-custom', get_template_directory_uri().'/assets/wookmark/libs/jquery.min.js' );
wp_enqueue_script('wookmark', get_template_directory_uri().'/assets/wookmark/jquery.wookmark.js', array('jquery-custom'), false, false);
}
}
add_action( 'wp_enqueue_scripts', 'core_mods' );
page-portfolio.php的实际HTML如下:
<?php get_header(); ?>
<?php query_posts('post_type=portfolio') ?>
<?php if (have_posts()) : ?>
<script type="text/javascript">
(function($) {
$('.masonry-object').wookmark({
align: 'center',
autoResize: false,
comparator: null,
container: $('#masonry-container'),
direction: undefined,
ignoreInactiveItems: true,
itemWidth: 0,
fillEmptySpace: false,
flexibleWidth: 0,
offset: 2,
onLayoutChanged: undefined,
outerOffset: 0,
possibleFilters: [],
resizeDelay: 50,
verticalOffset: undefined
});
})(jQuery);
</script>
<div id="masonry-container">
<?php /* The loop */ ?>
<?php while ( have_posts() ) : the_post(); ?>
<div class="masonry-object" id="post-<?php the_ID(); ?>" <?php post_class(); ?>>
<?php if ( has_post_thumbnail() ) : ?>
<div class="masonry-thumbnail">
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<?php the_post_thumbnail('masonry-thumb'); ?>
</a>
<div class="masonry-title">
<?php echo the_title(); ?>
</div>
</div><!--.masonry-thumbnail-->
<?php elseif ( !has_post_thumbnail() ): ?>
<div class="masonry-details">
<h5>
<a href="<?php the_permalink(' ') ?>" title="<?php the_title(); ?>">
<span class="masonry-post-title">
<?php the_title(); ?>
</span>
</a>
</h5>
<div class="masonry-post-excerpt">
<?php the_excerpt(); ?>
</div><!--.masonry-post-excerpt-->
</div><!--/.masonry-entry-details -->
<?php endif; ?>
</div>
<?php endwhile;?>
</div> <!-- End .masonry-container -->
<?php endif; ?>
<?php get_footer(); ?>
该主题附带的CSS是这样的:
#masonry-container {
}
.post-area {
background: #ffffff ;
padding: 10px ;
}
.masonry-thumbnail {
}
.masonry-thumbnail img {
max-width: 100%;
height:auto;
}
.masonry-title {
position: absolute;
width: auto;
background-color: #ef9430;
color: #ffffff;
padding: 5px;
bottom: 0px ;
right: 0px;
}
.masonry-details {
padding: 10px;
background-color: #ffffff;
}
.masonry-object {
width: 25% ;
transition: all 1s ease;
}
.masonry-object:hover {
z-index: 2;
box-shadow: 0 0 20px #ffffff;
transition: all 1s ease;
}
(function($) {...})(jQuery);
与$(function() {...});
第一个将在遇到后立即执行,第二个是$( document ).ready()
jQuery简写,它将在DOM准备好使用JavaScript时运行。 解决方案是将脚本移至#masonry-container
div下方,或使用ready事件。 WordPress中存在一个小问题,因为默认jQuery使用jQuery.noConflict()
因此$不会引用到jQuery对象。 我最喜欢的解决方案是:
jQuery(function ($) {
});
它将在准备好的文档上运行,并以$作为jQuery别名。
旁注:-使用position: relative
#masonry-container
div上的position: relative
,如文档所述。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.