注目キーワード
  1. MacBook
  2. WordPress
  3. iPhone

【WordPress】プラグインを使用せずに記事をランダムに表示する方法

wordpress720logo

検索結果に記事がない場合等、メインカラムがすっからかんで非常にむなしくなった時に使える、プラグインを使用せずに記事をランダムに表示する方法です。

最近、新しいテーマの作成途中でレイアウトの変更を行っているのですが、検索をかけて検索結果に記事がない場合、メインカラムがすっからかんで非常にむなしいため、何か表示したいなと思いついたのが、記事をランダムに表示してお勧めする方法。

そこで探した結果 かちびとnetさんの「記事をランダムで抽出する」という方法を発見!
参考にさせて頂きました。

スポンサーリンク

方法

アイキャッチを使用してもいいのですが、折角なので前回も使用しました「プラグインを使用せずにトップページをflickrとアイキャッチの画像表示にする方法」のコードを使ってサムネイル表示も追加して、LinkWithin風に作成しました。

<?php//最初の画像を取得  function catch_that_image() { global $post, $posts; $first_img = ''; ob_start(); ob_end_clean(); $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); $first_img = $matches [1] [0]; if(empty($first_img)){ //Defines a default image  $first_img = "画像がない場合の指定画像"; } return $first_img; }?>

 

<div id="suggest">  <h2> おすすめ記事  </h2>  <ul><?php $rand_posts = get_posts('numberposts=8&orderby=rand'); foreach( $rand_posts as $post ) :?> <li><a href="<?php the_permalink(); ?>">  <img alt="<?php the_title(); ?>" src="<?php echo catch_that_image(); ?>"  width="110px" height="110px" /><div class="suggest-title">  <?php the_title(); ?></div> </a> </li> <?php endforeach; ?></ul></div>

nuberposts : 表示する記事数を設定
orderby=randでランダム表示

#suggest {margin:auto;padding:25px 0;width:545px;}#suggest h2 {font-size:15px;color:#fff;background:#665e53;padding:8px 0 8px 15px;font-weight:normal;}#suggest ul{ list-style:none ; overflow:hidden; display: block ; }#suggest li a{ margin: 5px 3px; padding: 5px; display: block ; font-size: 12px ; color: #665e53 ;  text-decoration: none ; width: 120px;height: 245px; line-height: normal ;float:left; }#suggest li a img{border:solid 1px #ccc;padding:3px;}.suggest-title{margin:5px;}#suggest li a:hover{ color: #fff ; background-color: #665e53 ; border-radius: 5px;-moz-border-radius: 5px; -webkit-border-radius: 5px; }

結果

下図のように表示させました。

suggest

毎回ランダムに記事が表示され、埋もれていた記事が出てくるので大変有り難いです。
通常画面のサイドバー等に表示させてもいいかなと思いました。 

 via : [WordPress] 記事をランダムで抽出する – かちびと.net

いいね!&フォローで最新情報をお届けします!
スポンサーリンク