0

ホームページに表示する証言のセレクションを紹介したいと考えています。一度に 1 つの紹介文のみを表示したい。これは、ページの更新時にランダム化される予定です。

推薦状には、引用、著者、および著者の写真が必要です。プラグインを使用する前にランダムな証言を得ることができましたが、顔を引用にリンクする写真を用意するというアイデアが気に入っています.

私がやりたいことの静的バージョンを作成しました。

<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' }
];

1 つをランダムに選択します。

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 に答える