Amazonタイムセール

ブログ

ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!

投稿日:

ブログをいくつか運営していますが全てにブログで記事数を表示しています。

このブログではプロフィールの下段に

ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!

ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!

別のレビューブログでは

ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!

と表示しています。

今回は「ブログで書いた記事数を表示する方法」を紹介します。

コピペするだけでOKですのでブログ運営をしている方は是非お試しください。

ブログで総記事数を表示する方法①。総記事数を乗っけるコードを公開。コピペだけでOK!

まずこのブログで行っているブログで総記事数を表示する方法を紹介します。

このように表示されています。
ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!
記事数の数字は当然自動で更新されていきます。
一回コードを載せればOKです。

記事数を表示するコード

<div class="center"><div style="padding: 10px; margin-bottom: 10px; border: 2px dashed #333333; border-radius: 5px;">
<?php
$count_posts = wp_count_posts();
$published_posts = $count_posts->publish;
echo '現在の総投稿数は '. $published_posts .' 記事です。';
?>
</div></div>

中の「現在の総投稿数は '. $published_posts .' 記事です。」の部分は英文字以外は変更可能です。

例えば「このブログで '. $published_posts .' 記事書いたよ~!」みたいなのでもOKです。

ブログで総記事数を表示する方法②。総記事数を乗っけるコードを公開。コピペだけでOK!

次はレビューブログで乗っけている表示方法です。

ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!

記事数を表示するコード

メモ帳マークみたいなのがありますが、これは僕が使用しているブログテーマ「AFFINGER」のみ表示されるコードです。

<div class="st-blackboard">
<p class="st-blackboard-title-box"><span class="st-blackboard-title">レビューを書いた数</span></p>
<div class="center"><strong><font size="5"><?php echo wp_count_posts()->publish; ?></font></strong></div>
</div>

四角枠でこれと同じような表示をする場合は

<div class="center"><div style="padding: 10px; margin-bottom: 10px; border: 4px solid #3b5998; border-radius: 5px;">
レビューを書いた数
<div class="center"><strong><font size="5"><?php echo wp_count_posts()->publish; ?></font></strong></div>
</div></div>

でできるかと思います!

ブログの記事数表示をする外枠の種類を変更するコード・HTML

ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!
最初に掲載した外枠を点線や実線など色々変更が可能です。

少し載せるのでお試しください。

細かい点線の枠に入れる

ここに文字を入力する。

+ コードはここをクリックして下さい

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333;">
ここに文字を入力する。
</div>

点線の枠に入れる

ここに文字を入力する。

+ コードはここをクリックして下さい

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333;">
ここに文字を入力する。
</div>

実線の枠に入れる

ここに文字を入力する

+ コードはここをクリックして下さい

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333;">
ここに文字を入力する。
</div>

二重線の枠に入れる

ここに文字を入力する

+ コードはここをクリックして下さい

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333;">
ここに文字を入力する。
</div>

細かい点線の枠に入れる(角丸つき)

ここに文字を入力する

+ コードはここをクリックして下さい

<div style="padding: 10px; margin-bottom: 10px; border: 1px dotted #333333; border-radius: 5px;">
ここに文字を入力する。
</div>

点線の枠に入れる(角丸つき)

ここに文字を入力する

+ コードはここをクリックして下さい

<div style="padding: 10px; margin-bottom: 10px; border: 1px dashed #333333; border-radius: 5px;">
ここに文字を入力する。
</div>

実線の枠に入れる(角丸つき)

ここに文字を入力する

+ コードはここをクリックして下さい

<div style="padding: 10px; margin-bottom: 10px; border: 1px solid #333333; border-radius: 10px;">
ここに文字を入力する。
</div>

二重線の枠に入れる(角丸つき)

ここに文字を入力する

+ コードはここをクリックして下さい

<div style="padding: 10px; margin-bottom: 10px; border: 5px double #333333; border-radius: 10px;">
ここに文字を入力する。
</div>

【おわりに】ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!

ブログで記事数を表示する方法。総記事数を乗っけるコードを公開。コピペだけでOK!
ブログで書いた記事数を表示する方法」を紹介しました!

コピペだけでできますのでご活用ください。

お役に立てれば嬉しく思います!

付録の「 稼ぐサイトの設計図」もどういう風にブログを書くのが効果的かなどを細かく解説してくれているのでとても助かりました。

この記事が気に入ったら
いいね!しよう

Twitter で nori_blog(更新情報用)を

Amazonタイムセール
この記事のURLをコピーする

-ブログ
-,

Copyright© のり部屋 , 2021 All Rights Reserved.