WordPressの過去の投稿をサムネイル付きでランダム表示

Wordpressの投稿をランダム表示 WordPress
2019.05.15
投稿数が増えてくると過去の投稿が埋もれてしまうことがあります。たまに見ると新鮮な刺激を与えてくれることもありますので、ランダムでピックアップ表示してくれるようにするTipsを紹介します。 classのつけてあるコードはWordpressテーマ「Cocoon」での「エントリーカード（デフォルト）」で使用すると、サイズなどを同じく統一したものにできます。 今回の手順です
  • ランダムで呼び出した投稿を整形して並べるコードをphpファイルにして保存
  • phpファイルを呼び出すためのショートコードをfunction.phpに編集して登録
  • ショートコードをウィジェットに挿入

コードをphpファイルに保存

こちらがコードになります。Cocoon用のclassがないものと、classがあるものを掲載します。 ピックアップしてランダム表示する投稿は5本 テキストエディタでphpファイルとして保存し、テーマフォルダにアップロードします。 今回はファイル名をrand.phpとして保存しました。

classを付けていないコード

<?php
$the_query = new WP_Query( array(
    'orderby' => 'rand',
    'posts_per_page' => '5',
    ) );
if ( $the_query->have_posts() ) :
    echo '<div class="randam-section"><h2>ランダムセクション</h2>';
  while ( $the_query->have_posts() ) :
    $the_query->the_post();
?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>">
      <article>
        <?php if ( has_post_thumbnail() ) : ?>
          <figure>
          <?php the_post_thumbnail( array( 320, 180 ) ); ?></figure>
        <?php endif; ?>
        <div>
          <h3><?php the_title();?></h3>
        </div>
      </article>
    </a>
<?php
  endwhile;
    echo '</div>';
else:
?>	
<span>記事はありません</span>
<?php
endif;
?>
<?php wp_reset_postdata(); ?>

Cocoonエントリーカード（デフォルト）用

<?php
$the_query = new WP_Query( array(
    'orderby' => 'rand',
    'posts_per_page' => '5',
    ) );

if ( $the_query->have_posts() ) :
    echo '<div class="randam-section"><h2>ランダムセクション</h2>';
  while ( $the_query->have_posts() ) :
    $the_query->the_post();
?>
    <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" class="entry-card-wrap a-wrap border-element cf">
      <article class="entry-card e-card cf post type-post status-publish format-standard has-post-thumbnail hentry">
        <?php if ( has_post_thumbnail() ) : ?>
        <figure class="entry-card-thumb card-thumb e-card-thumb">
        <?php the_post_thumbnail( array( 320, 180 ), array( 'class' => 'entry-card-thumb-image card-thumb-image wp-post-image' ) ); ?></figure>
        <?php endif; ?>
        <div class="entry-card-content card-content e-card-content">
          <h3 class="entry-card-title card-title e-card-title"><?php the_title();?></h3>
        </div>
      </article>
    </a>
<?php
  endwhile;
    echo '</div>';
else:
?>    
<span>記事はありません</span>
<?php
endif;
?>
<?php wp_reset_postdata(); ?>

function.phpの編集

function.phpの編集があります。ftpソフトを使用してバックアップをとってからの編集をしてください。 ソリシティではftpソフト「FileZilla」を使用して、function.phpをダウンロード後に複製をする。それから片方にはファイル名に-oldと追加してバックアップをとっています。 
//ショートコードを使ったphpファイルの呼び出し方法
function my_php_Include($params = array()) {
 extract(shortcode_atts(array('file' => 'default'), $params));
 ob_start();
 include(STYLESHEETPATH . "/$file.php");
 return ob_get_clean();
}
add_shortcode('myphp', 'my_php_Include');

ショートコードをウィジェットに挿入

ウィジェットのインデックスリストトップに[カスタムhtml]として呼び出すためのショートコードを記入します 
[myphp file='rand']
表示設定が選択できるので、「ウィジェットの表示」→「チェック・入力したページで表示」→「トップページのみ」という選択でフロントページでのみ表示させる設定としました。

Cocoon用調整CSS

Cocoonのデフォルトでデフォルトのエントリーカードを使用するときのcssをこちらに置いておきます。参考にしてください。 ウィジェットのインデックスリストトップに置いたときのものです、aside#custom_html-2 の部分は置いた時の環境によって数字が変わってきます。 
aside#custom_html-2 {
background: initial;
padding: initial;
margin-bottom: 3%;
}
.randam-section img {
height: 180px;
object-fit: cover;
}

まとめ

参考にさせていただいたサイト
https://wpdocs.osdn.jp/%E9%96%A2%E6%95%B0%E3%83%AA%E3%83%95%E3%82%A1%E3%83%AC%E3%83%B3%E3%82%B9/WP_Query
wpdocs.osdn.jp