[WordPress] 記事数に応じてサイドバーの画像を切り替える



Nプログラマです。

今回はWordPressで記事数に応じてサイドバーの画像を切り替える、という内容です。

/img/article/common/icon/medals/000.png
0記事
/img/article/common/icon/medals/010.png
10記事
/img/article/common/icon/medals/100.png
100記事

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にアップロードします。

メディア > 新規追加 > の順にクリックし、ドラッグ&ドロップファイルを選択してアップロードします。

/img/article/2019/06/30/01.jpg
ファイルのアップロード

アップロードが完了しました。

/img/article/2019/06/30/02.jpg
ファイルのアップロード完了

アップロードパスの確認

ショートコードで使うため画像アップロードパスを確認します。

アップロードした画像をクリックします。

/img/article/2019/06/30/03.jpg
アップロード画像を選択

画像の設定画面が表示されるので、リンクをコピーをクリックします。

/img/article/2019/06/30/04.jpg
画像のパスをコピー

コピーした内容はこのようなパスになっています。

http://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について

ここでは開発環境で実行しているためlocalhost:8000となっていますが、レンタルサーバなどでは独自ドメイン割り当てられたドメインが、この部分に表示されます。

https://ドメイン/画像までのファイルパス

ショートコードを実装する

出来上がったコードがこちら。
function.phpなどに記述して使います。

ショートコード コードを開く
ショートコード

add_shortcode('post_count_img', function() {
	// 記事数を取得
	$post_count = wp_count_posts()->publish;

	// 記事数に応じたファイル名を作る
	$value = floor($post_count / 10) * 10;
	// 100記事以上になったら100記事用の画像を表示
	if ($value > 100) {
		$value = 100;
	}
	// ファイルパスにファイル名を埋め込み
	$file_path= sprintf('http://localhost:8000/wp-content/uploads/2019/06/%03s.png', $value);

    // 表示するimgタグを返す
	return '<img src=' . $file_path. '>';
});

バックアップ!

function.phpなどに記述する場合は、対象のファイルのバックアップを取っておきましょう。

コードの説明

公開した記事数の取得

$post_count = wp_count_posts()->publish;

WordPressのwp_count_posts関数公開済み投稿数を取得のコードを参考にして、公開済みの記事数を取得しています。

記事数に応じたファイル名を作る

取得した公開済みの記事数から、どの画像を表示するのかを求めます。

$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文でこのようにしています。

if ($value > 100) {
    $value = 100;
}

ファイルパスにファイル名を埋め込み

先程画像のファイル名が決まったので、あとはファイルパスを合わせて最終的な画像パスを取得します。

今回はphpのsprintf関数を使うことにしました。

$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変数に入ります。

// 100の場合
http://localhost:8000/wp-content/uploads/2019/06/100.png

表示するimgタグを返す

先程取得したファイルパスをhtmlタグに加工して戻り値として返します。

コレをWordPressのウィジェットなどで使えば、記事数に応じた画像を表示することができます。

ウィジェットに使ってみる

先程の画像切り替えのショートコードをウィジェットに使ってみます。

サイドバーにテキストウィジェットを追加

WordPressの管理画面から外観 > ウィジェットとクリックして、ウィジェットのページを開きます。

ウィジェットページの下の方にあるテキストウィジェットを、サイドバーのところに追加します。

/img/article/2019/06/30/05.jpg

追加する方法はドラッグ&ドロップか、テキストウィジェットの右の▼マークからウィジェットを追加で追加します。

/img/article/2019/06/30/06.jpg
ウィジェットを追加

ウィジェットの追加はこれで完了です。

テキストウィジェットにショートコードを書く

先程追加したテキストウィジェットにメダル画像を表示するショートコードを追加します。

/img/article/2019/06/30/07.jpg

本文は先程作成したショートコードの[post_count_img]です。

一行のみでシンプルですが、これで記事数に応じた画像を表示することができます。

これで準備は完了です。
実際のページを確認してきます。

タイトルについて

タイトルはメダル画像としました。
記念メダルとか自分な好きな文言を設定してください。

メダル画像が表示されているかを確認

それではメダル画像が表示されているかを実際のページで確認をします。

確認のため記事を20個作成した状態で表示してみた結果がこちらです。

/img/article/2019/06/30/08.jpg
記事数が20個

問題なく表示できています。

記事数を100と101記事の時に表示される画像も確認しておきます。

/img/article/2019/06/30/09.jpg
記事数が100と101の時
なプ

テスト用記事を100個作るの大変だった。

記事数に応じて画像が切り替わっていることを確認できました。
これでよさそうです。

ラクにテスト用記事を増やす

WordPressのプラグインDuplicate Postを利用しました。
投稿一覧から記事をコピーできるのでラクです。

おわりに

今回は、WordPressで記事数に応じてサイドバーの画像を切り替える、という内容でした。

サンプルでは10記事毎に画像を変更していましたが、カスマイズすることで20記事単位などに変更できるので試してみてください。

それでは、このへんで。
バイナリー!



関連した記事