テクノロジー

ワードプレスの投稿者一覧をショートコードにする

mizuno's icon'
  • mizuno
  • 2020/04/04 06:07
Content image

ワードプレスで投稿者一覧を表示したくなったので、ショートコードを作成しました。
※PHPの基礎は知っている前提です。拙著WordPressユーザーのためのPHP入門をごらんください。

ショートコードとは

WordPressでは、記事の中でプログラムを実行したい、といった場合でも、標準ではt投稿中にプログラムコードを書いても無効になります。プログラムを書きたい場合は、
(1)(テーマのfunctions.php・あるいはプラグインとして)あらかじめプログラムコードを書いておく
(2)投稿では呼び出すコード名を指定する
となっています。

この仕組みのことをショートコードと呼びます。(記事に挿入するコードのことをショートコードと呼ぶこともあります。)

ショートコードの作り方

ショートコードを作るときは、(1)コード作成が必要です。この作業はさらに2つに分けられます。
(A)実行する関数を作る
(B)コードをショートコードとして登録する

<?php
// (A)
function sample_function() {
    // ここにコードを書く
}

// (B)
//                         ↓ 実行する関数
add_shortcode( 'abcde', 'sample_function');
//               ↑ショートコードで呼び出すときの名前

投稿では、(2)呼び出すコード名を指定します。手順は、

(C)ショートコードブロックを選ぶ
(D)[abcde]と書く

です。

Content image
(C)ショートコードブロックを選ぶ
Content image
(D)ショートコード名を書く

実際に書いたコード

以下のようなコードを書きました。

<?php
// user をショートコードで出力する
function ounziw_userlist_shortcode( $atts ) {
   $atts  = shortcode_atts( [
      'size'     => '96', // 画像サイズ
      'orderby'  => 'rand', // ランダムに並べる
      'order'    => 'ASC' // 並び順
   ], $atts );
   $args  = [ // ユーザーを取得する設定(どんな条件で抽出するか)
      'size' => $atts['size'],
      'orderby' => $atts['orderby'],
      'order'   => $atts['order'],
      'role__in' => ['Contributor', 'Author', 'Editor'] // 寄稿者、投稿者、編集者
   ];
   $user_query = new WP_User_Query( $args ); // ユーザーを取得する処理
   $items = '';
   foreach ( $user_query->results as $user ) { // ユーザー一人ずつ順に処理していく
      $items .= sprintf(
         '<div class="c-row__col c-row__col--1-2 c-row__col--md-1-4"><a href="%s" title="%s">%s</a>
</div>', // テーマのcss classを指定してHTMLを生成する
         esc_url( get_author_posts_url( $user->ID, $user->user_nicename ) ),
         esc_attr( $user->display_name ),
         get_avatar( $user->ID, $atts['size'], '', $user->display_name )
      );
   }
   return sprintf(
      '<div class="c-row">%s</div>',
      $items
   );
}
add_shortcode( 'ounziw_userlist', 'ounziw_userlist_shortcode' );

上の記述で、ユーザー一覧をショートコード化できました。

追加の記述

デフォルトではユーザー一覧をランダム順にするオプションは無かったので、https://stackoverflow.com/questions/33538624/how-to-random-order-a-user-list-with-get-users を参考にフックを追加しました。

// ランダム表示のオプションを追加するフック
// https://stackoverflow.com/questions/33538624/how-to-random-order-a-user-list-with-get-users
function my_random_user_query( $class ) {
   if ( 'rand' == $class->query_vars['orderby'] ) {
      $class->query_orderby = str_replace( 'user_login', 'RAND()', $class->query_orderby );
   }

   return $class;
}
add_action( 'pre_user_query', 'my_random_user_query' );

こうすることで、ユーザー一覧をランダム表示するショートコードが完成しました。

実際に活用しているページは↓サイト概要-ブックレコメンドをごらんください。

他の記事もごらんください。

 

Supporter profile icon
Article tip 1人がサポートしています
獲得ALIS: Article like 49.54 ALIS Article tip 1.00 ALIS
mizuno's icon'
  • mizuno
  • @mizuno
月70万PVウェブメディア「計算フォーム」 https://calculator.jp/ でウェブ集客支援。書籍「WordPressユーザーのためのPHP入門」他一冊。TWITTER: @ounziw

投稿者の人気記事
コメントする
コメントする
こちらもおすすめ!
Eye catch
クリプト

ジョークコインとして出発したDogecoin(ドージコイン)の誕生から現在まで。注目される非証券性🐶

Like token Tip token
38.31 ALIS
Eye catch
他カテゴリ

ALISのシステム概観

Like token Tip token
5.00 ALIS
Eye catch
ゲーム

ドラクエで学ぶオーバフロー

Like token Tip token
30.10 ALIS
Eye catch
クリプト

Bitcoinの価値の源泉は、PoWによる電気代ではなくて"競争原理"だった。

Like token Tip token
159.32 ALIS
Eye catch
テクノロジー

オープンソースプロジェクトに参加して自己肯定感を高める

Like token Tip token
85.05 ALIS
Eye catch
クリプト

NFT解体新書・デジタルデータをNFTで販売するときのすべて【実証実験・共有レポート】

Like token Tip token
121.79 ALIS
Eye catch
クリプト

Bitcoin史 〜0.00076ドルから6万ドルへの歩み〜

Like token Tip token
947.13 ALIS
Eye catch
クリプト

約2年間ブロックチェ-ンゲームをして

Like token Tip token
61.20 ALIS
Eye catch
クリプト

Uniswap v3を完全に理解した

Like token Tip token
18.92 ALIS
Eye catch
テクノロジー

なぜ、素人エンジニアの私が60日間でブロックチェーンゲームを制作できたのか、について語ってみた

Like token Tip token
270.93 ALIS
Eye catch
テクノロジー

彼女でも分かるように解説:ディープフェイク

Like token Tip token
32.10 ALIS
Eye catch
テクノロジー

iOS15 配信開始!!

Like token Tip token
7.20 ALIS