0

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

我希望推荐书有引言、作者和作者的照片。在使用插件之前设法获得随机推荐，但我喜欢用图片将面孔链接到报价的想法。

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

<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 脚本？

提前致谢。

4

3 回答 3

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

我希望这会有所帮助！

干杯

于 2012-09-27T16:01:56.863 回答
1

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

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/

于 2012-09-27T16:05:14.023 回答
0

我完全支持 jQuery。您可以使用以下随机化插件来随机化推荐。在此处阅读有关 jQuery的更多信息 

(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);
于 2012-09-27T16:09:19.870 回答