[WordPress] 記事数に応じてサイドバーの画像を切り替える
Nプログラマ(@Nprog128)です。
今回はWordPressで記事数に応じてサイドバーの画像を切り替える、という内容です。
hugoでもやったのでそれのWordPress版です。
» [Hugo] 公開した記事数によって表示する画像を切替えてみた
画像の切り替え処理は、WordPressのショートコード(PHP)を使います。
コピペで動くの思いますので、よかったら参考にしてください。
当サイトでは、公開した記事数に応じて記念メダルの画像を表示しています。
この記念メダルの画像は、クロネさんという方が公開している画像を利用させて頂いています。
クロネのブログ講座「100記事講座」に記念メダルが登場！
画像の準備
今回使う画像を作ってみました。
これ以外に自分が使いたい画像がある場合は、そちらをお使いください。
ポイントは記事が0 - 9用の画像があることです。
これで10記事に達成していない状態でも画像を表示することができます。
| 画像名 | 表示する画像 | 備考 |
|---|---|---|
| 000.png |  | 0 - 9 記事 |
| 010.png |  | 10 - 19 記事 |
| 020.png |  | 20 - 29 記事 |
| 030.png |  | 30 - 39 記事 |
| 040.png |  | 40 - 49 記事 |
| 050.png |  | 50 - 59 記事 |
| 060.png |  | 60 - 69 記事 |
| 070.png |  | 70 - 79 記事 |
| 080.png |  | 80 - 89 記事 |
| 090.png |  | 90 - 99 記事 |
| 100.png |  | 100記事以降 |
画像をアップロードする
WordPressへアップロード
これらの画像をWordPressにアップロードします。
メディア > 新規追加 > の順にクリックし、ドラッグ&ドロップかファイルを選択してアップロードします。
アップロードが完了しました。
アップロードパスの確認
ショートコードで使うため画像アップロードパスを確認します。
アップロードした画像をクリックします。
画像の設定画面が表示されるので、リンクをコピーをクリックします。
コピーした内容はこのようなパスになっています。
1http://localhost:8000/wp-content/uploads/2019/06/100.png
同じ日付でアップロードしている場合は、ファイル名以外のパスは同じになっているはずです。
すべて確認するとこんな感じになります。
- http://localhost:8000/wp-content/uploads/2019/06/000.png
- http://localhost:8000/wp-content/uploads/2019/06/010.png
- http://localhost:8000/wp-content/uploads/2019/06/020.png
- http://localhost:8000/wp-content/uploads/2019/06/030.png
- http://localhost:8000/wp-content/uploads/2019/06/040.png
- http://localhost:8000/wp-content/uploads/2019/06/050.png
- http://localhost:8000/wp-content/uploads/2019/06/060.png
- http://localhost:8000/wp-content/uploads/2019/06/070.png
- http://localhost:8000/wp-content/uploads/2019/06/080.png
- http://localhost:8000/wp-content/uploads/2019/06/090.png
- http://localhost:8000/wp-content/uploads/2019/06/100.png
これを記事数に応じて画像を切り替えるショートコードの中で使っていきます。
ここでは開発環境で実行しているためlocalhost:8000となっていますが、レンタルサーバなどでは独自ドメインや割り当てられたドメインが、この部分に表示されます。
例 https://ドメイン/画像までのファイルパス
ショートコードを実装する
出来上がったコードがこちら。
function.phpなどに記述して使います。
ショートコード コードを開く
1add_shortcode('post_count_img', function() {
2 // 記事数を取得
3 $post_count = wp_count_posts()->publish;
4
5 // 記事数に応じたファイル名を作る
6 $value = floor($post_count / 10) * 10;
7 // 100記事以上になったら100記事用の画像を表示
8 if ($value > 100) {
9 $value = 100;
10 }
11 // ファイルパスにファイル名を埋め込み
12 $file_path= sprintf('http://localhost:8000/wp-content/uploads/2019/06/%03s.png', $value);
13
14 // 表示するimgタグを返す
15 return '<img src=' . $file_path. '>';
16});
function.phpなどに記述する場合は、対象のファイルのバックアップを取っておきましょう。
コードの説明
公開した記事数の取得
1$post_count = wp_count_posts()->publish;
WordPressの wp_count_posts関数 の公開済み投稿数を取得のコードを参考にして、公開済みの記事数を取得しています。
記事数に応じたファイル名を作る
取得した公開済みの記事数から、どの画像を表示するのかを求めます。1$value = floor($post_count / 10) * 10;
記事数を10で割った結果を切り捨て、10をかけると画像のファイル名を取得することができます。
表示したい画像の名前は、先程のアップロードした画像のファイルパスを確認すると、 000, 010, 020 … 090, 100までです。
例で見てみましょう。
- 9記事の場合(10記事以下)
9 / 10 = 0.9、切り捨てで0、0 * 0 = 0 - 10記事の場合(10 から 19 記事)
10 / 10 = 1、切り捨てで1、1 * 10 = 10 - 90記事の場合(80 から 89 記事)
90 / 10 = 9、切り捨てで9、9 * 10 = 90
100記事以上は100記事の画像を表示しているので、if文でこのようにしています。
1if ($value > 100) {
2 $value = 100;
3}
ファイルパスにファイル名を埋め込み
先程画像のファイル名が決まったので、あとはファイルパスを合わせて最終的な画像パスを取得します。
今回はphpのsprintf関数を使うことにしました。
1$file_path= sprintf('http://localhost:8000/wp-content/uploads/2019/06/%03s.png', $value);
一番最後にある%03sというのがポイントで、この書き方で$valueを表示すると0詰めの3ケタで表示されます。
こちらも例で見てみます。
- 記事数に応じたファイル名が0の場合
0を3ケタの0詰めで表示すると000 - 記事数に応じたファイル名が90の場合
90を3ケタの0詰めで表示すると090 - 記事数に応じたファイル名が100の場合
0を3ケタの0詰めで表示すると100
3ケタになっていない場合は3ケタまで0詰めされて、3ケタの場合(100)ならそのまま表示されます。
最終的に3ケタ表示にした結果が$file_path変数に入ります。
1// 100の場合
2http://localhost:8000/wp-content/uploads/2019/06/100.png
表示するimgタグを返す
先程取得したファイルパスをhtmlタグに加工して戻り値として返します。コレをWordPressのウィジェットなどで使えば、記事数に応じた画像を表示することができます。
ウィジェットに使ってみる
先程の画像切り替えのショートコードをウィジェットに使ってみます。
サイドバーにテキストウィジェットを追加
WordPressの管理画面から外観 > ウィジェットとクリックして、ウィジェットのページを開きます。
ウィジェットページの下の方にあるテキストウィジェットを、サイドバーのところに追加します。
追加する方法はドラッグ&ドロップか、テキストウィジェットの右の▼マークからウィジェットを追加で追加します。
ウィジェットの追加はこれで完了です。
テキストウィジェットにショートコードを書く
先程追加したテキストウィジェットにメダル画像を表示するショートコードを追加します。
本文は先程作成したショートコードの[post_count_img]です。
一行のみでシンプルですが、これで記事数に応じた画像を表示することができます。
これで準備は完了です。
実際のページを確認してきます。
タイトルはメダル画像としました。
記念メダルとか自分な好きな文言を設定してください。
メダル画像が表示されているかを確認
それではメダル画像が表示されているかを実際のページで確認をします。
確認のため記事を20個作成した状態で表示してみた結果がこちらです。
問題なく表示できています。
記事数を100と101記事の時に表示される画像も確認しておきます。
記事数に応じて画像が切り替わっていることを確認できました。
これでよさそうです。
WordPressのプラグインDuplicate Postを利用しました。
投稿一覧から記事をコピーできるのでラクです。
おわりに
今回は、WordPressで記事数に応じてサイドバーの画像を切り替える、という内容でした。
サンプルでは10記事毎に画像を変更していましたが、カスマイズすることで20記事単位などに変更できるので試してみてください。
それでは、このへんで。
バイナリー！
