WordPress:ランダムに選ばれた記事へ遷移するリンクボタンを作成する方法

  • Posted on
  • Category : WordPress
WordPress:ランダムに選ばれた記事へ遷移するリンクボタンを作成する方法

WordPressでランダムに選ばれた記事へのリンクが設定されたボタンを作成・配置する方法です。個人的に使う機会も利用しているのを見かけることも少ないですが、ブログやWebマガジンなどでよく見る人気記事や関連記事を表示するのと同じように、他の記事も見せたいときに配置する要素のひとつとして使えると思います。

普段からWordPressを多用している人なら何となく想像できると思いますが、実装にはWP_Queryを使用し、まずfunctions.phpに下記を記述します。

functions.php

if ( ! function_exists( 'random_post_button' ) ) :
	function random_post_button( $post_type = 'post' ) {
		$args = array(
			'post_type' => $post_type,
			'posts_per_page' => '1',
			'post_status' => 'publish',
			'orderby' => 'rand',
			'ignore_sticky_posts' => true,
		);
		$the_query = new WP_Query( $args );
		if ( $the_query->have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post();
			echo '<a class="random-post-button" href="' . get_permalink() . '">Random Post</a>';
		endwhile; endif; wp_reset_postdata();
	}
endif;

簡単にWP_Queryで指定しているパラメータを説明すると、それぞれ下記のようになります。

post_type
どの投稿タイプを利用するかを指定する部分で、上記コードをそのまま利用した場合は「post(投稿)」がデフォルトとして設定されています。
デフォルトの投稿タイプを変更したい場合は( $post_type = 'post' )'post'を任意のものに変更してください。
posts_per_page
表示件数を指定するもので、今回は1件分だけ必要なので'1'にします。
post_status
公開されたものが対象となるようにします。
orderby
投稿の並びを指定するもので、今回はランダムで出したいので'rand'にします。
ignore_sticky_posts
先頭固定表示は無視したいのでtrueにしておきます。

あとは、表示させたい箇所に<?php random_post_button(); ?>と記述すれば、ランダムで選ばれた記事のリンクが設定されたa要素が出力されます。
上記コードをそのまま使用した場合は、a要素に.random-post-buttonというクラスが付与されているので、それを利用してCSSで見栄えを整えれば完成です。

もし、複数の投稿タイプで使用したいというときは、関数を呼び出す際に投稿タイプ名を引数に記述することで実装できます。
例えば「post(投稿)」とは別に「news」というカスタム投稿があり、「news」内の記事からランダムで選ばれたリンクが設定されたボタンを表示したければ、<?php random_post_button( 'news' ); ?>のように記述すれば実装できます。

ちなみに、CSSでボタンの見栄えを整える場合は、ホバーエフェクトなども含めて以下のようなエントリーを以前書いているので、手っ取り早く実装したいときはこれらも参考にしてみてください。

Back to Top

WordPress:ランダムに選ばれた記事へ遷移するリンクボタンを作成する方法

WordPress:ランダムに選ばれた記事へ遷移するリンクボタンを作成する方法

/ WordPress

Tagged with:

NxWorld

Sorry... doesn't support your browser

To get the best possible experience using our site we recommend that you upgrade to a modern web browser.NxWorldではご利用中のブラウザサポートはしていません。
Internet Explorerのアップグレード行う、もしくはその他のブラウザを使用しての閲覧をお願いします。