[英]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.