如何让我的缩略图显示在随机位置（在存档页面 wordpress 中）

Question

我在我的 functions.php wordpress 文件中注册了自定义 post 类型的主题（无插件），如下所示：

add_action( 'init', 'create_post_type' );
function create_post_type() {
register_post_type( 'Works',
array(
  'labels' => array(
    'name' => __( 'Works' ),
    'singular_name' => __( 'Work' )
  ),
'public' => true,
'description' => ('Work'),
'has_archive' => true,
'taxonomies' => array('category'),
'supports' => array( 'title', 'editor', 'thumbnail')
)
);
}

然后我创建了一个 "archive-works.php"，我只在其中显示此自定义 post-type。当你悬停时，我只显示缩略图和标题。这些缩略图是链接（"img" 周围有一个 "a" 标记）。他们的风格是这样的：

#content img {
width: 70%;
height: auto;
}

与此同时，我在所有链接周围包裹了一个“.js-container”class。

<div class="js-container">
<a href="http://dev.visualvisual.com/works/work-3/" title="Work 3">
    <img width="960" height="630" src="http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o.jpg" 
class="attachment-post-thumbnail size-post-thumbnail wp-post-image" 
alt="10476558_10152767209223872_3064425635001081899_o" 
srcset="http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o.jpg 960w, http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o-300x197.jpg 300w, http://dev.visualvisual.com/wp-content/uploads/2016/10/10476558_10152767209223872_3064425635001081899_o-768x504.jpg 768w" 
sizes="(max-width: 960px) 100vw, 960px">
</a>
</div>

我希望图像稍微偏离它们的自然位置。我的意思是，我需要将它们随机放置 position-wise（更多的是在左侧或右侧，如果可能的话，稍微高于或低于它们应该放置的位置。我做了一些研究，发现了这个例子：Positioning images in random places

我知道它是 javascript 和 css 的组合，如上例所示。这是我目前的阶段：http://dev.visualvisual.com/works/ 我已尝试在 header.php 文件中输入此内容，但没有结果：

<script type="text/javascript">
$('.js-container a img').each(function() { 
var top = Math.floor(Math.random() * 400), left = Math.floor(Math.random() * 400);
$(this).css({
"top": top, 
"left": left, 
"position":"absolute", 
"display":"inline-block"
}); 
});
</script>

有人可以帮我吗？非常感谢。

Answer 1

对于您的情况，这应该是正确的 JavaScript。您不再需要那个 .js-container，它直接绑定到 post div:

    jQuery(window).load(function() {
        $('div.hentry.works').each(function () {
            // get the size and position
            var width = $(this).find('img').width(),
                height = $(this).find('img').height(),
                top = Math.floor(Math.max((Math.random() * $(window).height() - height), 0)),
                left = Math.floor(Math.max((Math.random() * $(window).width() - width), 0));

            // place the element
            $(this).css({
                "display": "block",
                "position": "absolute",
                "top": top,
                "left": left,
                "width": width,
                "height": height
            });
        });
    });

Answer 2

好的。我想到了。问题是我在 header.php 上 posting <script>。如果我 post "archive-$post_type.php".
中的脚本，一切正常像这样：

<?php if ( has_post_thumbnail() ) : ?><div class="js-container">
<script type="text/javascript">
$('.js-container a').each(function() { 
var top = Math.floor(Math.random() * 400); 
    var left = Math.floor(Math.random() * 400);
$(this).css({
"top": top, 
"left": left, 
"position":"absolute", 
"display":"inline-block"
}); 
});
</script>
 <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
    <?php the_post_thumbnail(); ?></div>
</a>
<?php endif; ?>

如何让我的缩略图显示在随机位置（在存档页面 wordpress 中）

How to get my thumbnails to display in random positions (in archive page wordpress)

javascript

css

random

wordpress

position