ランダムな投稿にリンクされるボタンショートコードのつくり方

以下のような要望がありました。

Cocoonフォーラム

書き込みの前に以下の3点をご確認ください。 1つのトピックにつき1つの質問を書き込んでください 不具合・カスタマイズ対象ページのURLを提示し高速化を無効にしてください 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります...

wp-cocoon.com

2023.01.25

ただ、そこまで需要がありそうなものでもなかったので、機能化は見合わせて実装方法だけ紹介しておきたいと思います。

実際に組み込むかどうかは様子を見てからにしようと思います。

ランダムボタンの実装方法

ランダムボタンを実装するには、子テーマのfunctions.phpに以下のように記述します。

//ランダムボタンショートコード
add_shortcode('random_button', 'random_button_shortcode');
if ( ! function_exists( 'random_button_shortcode' ) ):
function random_button_shortcode( $atts ) {
  extract(shortcode_atts(array(
    'label' => __( 'ランダムボタン', THEME_NAME ),
    'size' => 'l',
    'color' => 'red',
  ), $atts));
  $args = array(
    'post_type' => 'post',
    '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();
      $tag = '<a class="random-post-button btn btn-'.$color.' btn-'.$size.'" href="' . get_permalink() . '">'.$label.'</a>';
      wp_reset_postdata();
      return $tag;
    endwhile; wp_reset_postdata();
  }
}
endif;

ショートコードの利用

ショートコードを利用する場合は、以下のようなショートコードで利用します。

[random_button label="ボタンのキャプション" size="l" color="pink"]

上記ショートコードだと、以下のようなボタンが表示されます（画像）。

ショートコードのオプション

label

labelには、以下のようにボタンに表示するキャプションを入力します。

例：label="投稿からランダムで表示"

size

sizeはs、m、lから選択してください。

例：size="l"

• s
• m
• l

color

colorで色選択を行います。

例：color="blue"

色は以下から選択できます。

• red
• pink
• purple
• deep
• indigo
• blue
• light-blue
• cyan
• teal
• green
• light-green
• lime
• yellow
• amber
• orange
• deep-orange
• brown
• grey
• blue-grey
• black

参考

ランダムボタンの参考にした記事はこちら。

https://www.nxworld.net/wordpress/wp-random-post-link-button.html

www.nxworld.net