Question

我希望在我的主页上展示一系列推荐书。我只希望一次显示一个推荐书。该计划是在刷新页面时随机化的。

我希望推荐书有引文，作者和作者的照片。在使用插件之前管理得到随机的推荐，但我喜欢用图片将面部链接到引用的想法。

我已经创建了我希望做的静态版本。

<div id="right_sidebar">
<div class="testimonials">
<div class="ref-picture"></div>
<blockquote>
<cite><p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce eget vestibulum elit. Cras pretium, dui sed egestas elementum, augue eros mattis erat, quis porta diam urna vitae lacus.</p>
</cite>
<div class="author">Paul Scholes - Manchester United</div>
</blockquote>
</div>
</div>

CSS：

.testimonials {
width: 218px;
padding: 0px;
margin: 0px;
font-family: "adelle",serif;
margin-top: 13px;
padding-top: 10px;
position: relative;
}

.ref-picture {
width: 100px;
height: 100px;
border-radius: 75px;
background: url('images/testimonial1.jpg') no-repeat;
position: absolute;
top: 0px;
left: 59px;
margin: 0 auto;
padding: 0;
z-index: 2;
}

.testimonials .author {
padding: 10px;
padding-top: 0px;
font-family: "adelle",serif;
color: #dedede!important;
font-size: 11px;
border: 0px;
}

.testimonials blockquote {
font-size: 18px;
line-height: 24px;
font-family: Lato;
font-style: normal;
font-weight: lighter;
color: #333;
padding: 0px;
margin-top: 5px;
background: black;
position: relative;
top: 50px;
}

.testimonials blockquote cite {
font-size: 11px;
}

.testimonials blockquote cite p {
line-height: 16px!important;
padding: 70px 10px 20px 10px;
color: white;
}

首先，这是可行的吗？如果是这样，任何人都对我如何做到这一点有任何建议？也许是某种JQuery脚本？

提前致谢。

Answer 1

PJ，

结帐：http://www.wpbeginner.com/wp-tutorials/how-to-display-random-posts-in-wordpress/

您可以使用Wordpress Codex中的这些内容添加其他信息，如摘录和作者。

作者：http://codex.wordpress.org/Author_Templates

摘录：http://codex.wordpress.org/Function_Reference/the_excerpt

我希望有所帮助！

干杯

Answer 2

将推荐书放在一个数组中：

var testimonials = [
  { picture: 'images/testimonial1.jpg', cite: 'Lorem ipsum dolor sit amet', author: 'Paul Scholes - Manchester United' },
  { picture: 'images/testimonial2.jpg', cite: 'consectetur adipiscing elit.', author: 'Paul Scholes - Manchester United' },
  { picture: 'images/testimonial3.jpg', cite: 'Lorem ipsum dolor sit amet', author: 'Paul Scholes - Manchester United' },
  { picture: 'images/testimonial4.jpg', cite: 'consectetur adipiscing elit.', author: 'Paul Scholes - Manchester United' },
  { picture: 'images/testimonial5.jpg', cite: 'Lorem ipsum dolor sit amet', author: 'Paul Scholes - Manchester United' },
  { picture: 'images/testimonial6.jpg', cite: 'consectetur adipiscing elit.', author: 'Paul Scholes - Manchester United' }
];

随机选择一个：

var testimonial = testimonials[Math.floor(Math.random() * testimonials.length)];

将细节放在元素中。在这里，您可以使用jQuery轻松查找和更新元素：

$('.testimonials .ref-picture').css('backgroundImage', 'url('+testimonial.picture+')');
$('.testimonials cite p').text(testimonial.cite);
$('.testimonials .author').text(testimonial.author);

演示：http://jsfiddle.net/Guffa/wme4V/

Answer 3

我全都是jQuery。您可以使用以下randomize插件随机化推荐。阅读有关jQuery here

的更多信息

(function($) {

$.fn.randomize = function(childElem) {
  return this.each(function() {
      var $this = $(this);
      var elems = $this.children(childElem);

      elems.sort(function() { return (Math.round(Math.random())-0.5); });  

      $this.remove(childElem);  

      for(var i=0; i < elems.length; i++)
        $this.append(elems[i]);      

  });    
}
})(jQuery);

带有图像的随机推荐

3 个答案: