何度もすみません。
引用しただけでは<li>が消えてしまうんですね。
<div class="item_box">を<li></li>でくくっています。
PHPだけでも同じようなことができますよ。ランダムに3つの画像を表示。
<?php
// 画像リストを配列に
$item = array(
'<li><div class="item_box"><h4>titleA</h4><img src="a.jpg" alt="" width="100" height="100" /></div></li>',
'<li><div class="item_box"><h4>titleB</h4><img src="b.jpg" alt="" width="100" height="100" /></div></li>',
'<li><div class="item_box"><h4>titleC</h4><img src="c.jpg" alt="" width="100" height="100" /></div></li>',
'<li><div class="item_box"><h4>titleD</h4><img src="d.jpg" alt="" width="100" height="100" /></div></li>',
'<li><div class="item_box"><h4>titleE</h4><img src="e.jpg" alt="" width="100" height="100" /></div></li>',
'<li><div class="item_box"><h4>titleF</h4><img src="f.jpg" alt="" width="100" height="100" /></div></li>'
);
// 配列の中から3つの要素をランダムに取り出す
// 第2引数で取り出す要素数を変更できます
$rand_key = array_rand($item, 3);
?>
<div class="top_box">
<ul class="itembox" randomdisplay="3">
<?php
// 取り出した要素（3つ）を表示
echo $item[$rand_key[0]] . "\n" . $item[$rand_key[1]] . "\n" . $item[$rand_key[2]] . "\n";
?>
</ul>
</div>
jQuery を使う必要があるのでしたら、余計なお節介ですので無視してください…。
引用しただけでは li が消えてしまう
code で括ると大丈夫ですよ。
投稿する場所が適切でないですね。「使い方全般」にするべきかと。
アドバイスありがとうございます。
phpでも出来るんですね。
今後のためにも、できればjQueryで意図通りに表示させて何が問題だったのかを知りたいです。
しかし、思いっきり投稿する場所間違えてましたね。。(^^;
初投稿で間違えまくっていてお恥ずかしい限りです。
管理人さん申し訳ありませんが移動していただけないでしょうか。
お手数かけて申し訳ありませんが宜しくお願いします。m(_ _)m
まず、回答うんぬんよりも、MAMP内で動いたけどWPで動かないというのはどういう状態を言っているのか？
MAMPにインストしたWPで動いたけど、レンタルサーバにインストしたWPではダメだったのですか？
それと、ブラウザに表示されたソースは意図したとおりだけど動かない、のか、ソースも意図したとおりになっていないのか。
そういった部分もはっきりさせてから質問されたほうがよいかと思います。
説明が不明確で失礼いたしました。
MAMPで動いたのは普通のHTMLの状態でjQueryファイルを置換したりいじる前の状態という意味でした。
レンタルサーバー内のWPで動かそうとしてみたところうまく動きませんでした。
その後、自分でいじっていて現在のヘッダー内記述が
`<?php wp_enqueue_script(‘jquery’); ?>
<?php wp_enqueue_script(‘easing’, get_bloginfo(‘template_url’) . ‘/js/jquery.randomdisplay.js’, array(‘jquery’));
?>
</blockquote>
ソース内が
<blockquote>
<script type=”text/javascript” src=”http://hogehoge.com/wordpress/wp-content/themes/example/js/jquery.randomdisplay.js?ver=3.0.1″></script>
`
となっています。
いろいろ試していて自分でもよくわからなくなってきました。
何かアドバイスありますでしょうか。
宜しくお願いいたします。
今、ためしにやってみたら、うまく動いているようですよ。
<li>～～</li>
が何行かあるうちの３つをランダムに表示できればいいんですよね？
読み込むたびにランダムな３つが拾えてるので、できていると思います。
記述する場所の問題じゃないかと。
function.php の末尾に
wp_enqueue_script('jquery.randomdisplay', '/wp-content/themes/twentyten/jquery.randomdisplay.js', array('jquery'));
jquery.randomdisplay.js
jQuery(function(jQuery) {
jQuery.fn.extend({
randomdisplay : function(num) {
return this.each(function() {
var chn = jQuery(this).children().hide().length;
for(var i = 0; i < num && i < chn; i++) {
var r = parseInt(Math.random() * (chn - i)) + i;
jQuery(this).children().eq(r).show().prependTo(jQuery(this));
}
});
}
});
jQuery(function(){
jQuery("[randomdisplay]").each(function() {
jQuery(this).randomdisplay(jQuery(this).attr("randomdisplay"));
});
});
});
サンプルとして、投稿に書いてみたリスト
<div class="top_box">
<ul class="itembox" randomdisplay="3">
<li><div class="item_box"><h4>titleA</h4></div></li>
<li><div class="item_box"><h4>titleB</h4></div></li>
<li><div class="item_box"><h4>titleC</h4></div></li>
<li><div class="item_box"><h4>titleD</h4></div></li>
<li><div class="item_box"><h4>titleE</h4></div></li>
<li><div class="item_box"><h4>titleF</h4></div></li>
</ul>
</div>
kvexさん、返信ありがとうございます。
言われたとおりにやってみたのですが上手く出来ません。
基本的な知識が足りないのかもしれません。。
function.php の末尾に
wp_enqueue_script('jquery.randomdisplay', '/wp-content/themes/twentyten/jquery.randomdisplay.js', array('jquery'));
これは末尾でないとまずいのでしょうか？
一度末尾に追記してみたものの上手く動かなかったので
以前、バージョン非表示などの追記をした後に記述したところ、ソースにて読み込みが確認できました。
remove_action('wp_head','wp_generator');
remove_action('wp_head', 'rsd_link');
remove_action('wp_head', 'wlwmanifest_link');
remove_action('wp_head', 'start_post_rel_link');
remove_action('wp_head', 'index_rel_link');
remove_action('wp_head', 'adjacent_posts_rel_link');
wp_enqueue_script('jquery.randomdisplay', '/wp-content/themes/Custom/js/jquery.randomdisplay.js', array('jquery'));
この場合はheader.phpの<?php wp_head(); ?>の前には記述する必要はないという理解であっていますか？
新規ページで
サンプルとして、投稿に書いてみたリスト
<div class="top_box">
<ul class="itembox" randomdisplay="3">
<li><div class="item_box"><h4>titleA</h4></div></li>
<li><div class="item_box"><h4>titleB</h4></div></li>
<li><div class="item_box"><h4>titleC</h4></div></li>
<li><div class="item_box"><h4>titleD</h4></div></li>
<li><div class="item_box"><h4>titleE</h4></div></li>
<li><div class="item_box"><h4>titleF</h4></div></li>
</ul>
</div>
を作成しブラウザで確認すると3つではなく、全て表示されてしまいます。
ソースでは
<script type="text/javascript" src="http://hogehoge.com/wp-content/themes/example/js/jquery.randomdisplay.js?ver=3.0.1"></script>
を読み込んでいます。
何がいけないんでしょう。
怪しい点などありますでしょうか？
宜しくお願いします。
その手順でよろしいとは思うんですけどねぇ。
稼動サイトやテストサイトとかで見せてもらえればわかりやすいんですけどねぇ。
kvexさん
外出していて帰りが遅くなってしまい、レスが遅くなってしまいました。
教えていただいた部分を見直し、もう少しだけ自分でいろいろ試してみようと思います。
上手くいきましたらまた、ご報告させていただきます。
ひとまず、ありがとうございます。
