ブログめぐりをしていると、

時々記事の上部に、

「この記事は約 ◯ 分で読めます。」

っていうのを見かけて、

これって、記事のボリュームがわかるので、

便利だよね～って思ってたんですよね。

で、自分のサイトにも表示させたくて、

いつものように、ぐぐる様にお尋ねしたら、出てきました。

そのサイトを参考に、ソースを賢威のテンプレに貼り付けたら・・・

画面が真っ白です（・0・）

ああ、またしても。。orz

賢威さすがです。

そのガッチガチのガードの硬さは、

深窓のご令嬢のようです（笑）

なかなか一筋縄では、オチてくれません＾＾；

んで、例によって、ひとつひとつ、

しらみ潰しにファイルを検証していきます。

まあ、ここんとこは、省略しましょう（笑）

で、目を酷使すること数時間、

ようやくできました＾＾

ので、これまた覚書として書いておこうと思います。

投稿記事に『この記事は約 ◯ 分で読めます。』を表示させる

単一記事の投稿 (single.php)の編集

テーマ編集の中の、単一記事の投稿 (single.php)の

表示させたい場所に、以下のコードを差し込みます。

タイトルの下、ソーシャルボタンの下に表示させる時は、

「single.php」の中から、

<?php get_template_part(‘social-button’); ?>

の記述箇所を探して、その下辺りに入れます。

※ソーシャルボタンは、記事の上下で表示させるようになっていますので、

　上の方のソーシャルボタンになります。

　わたしのサイトでは、上部のボタンは削除して、

　ソーシャルボタンは下部のものだけを表示させています。

<?php
$mycontent = $post->post_content;
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 600)+1;
$est = ($m == 0 ? ” : $m) ;
?>

<div class=”time” align=”right”>
<span class=”countdown”>この記事は約 <b><?php echo $est; ?></b> 分で読めます。</span>
</div>

 固定ページに表示させる

同じように、固定ページテンプレート (page.php）を編集します。

表示位置を左に変更する

表示させる位置を記事の左側にしたい時は、

<div align=”left“>
<span>この記事は約 <b><?php echo $est; ?></b> 分で読めます。</span>
</div>

 

と、rightをleftに変更します。

CSS（スタイルシート）の編集

WPの左メニューの「外観」の中にある

「CSS編集」の「CSS スタイルシートエディター」で、

スタイルシートを編集します。

賢威の「design.css」に直に書いてもいいのですが、

万が一不具合が生じた時に、

元に戻せなくなったら困るので、

できれば、こちらで書き換えることをオススメします。

.countdown {
font-size: 11px;　⇐　文字の大きさ
color: #999;　　　⇐　文字の色
}

.countdown:before {　　　　⇐　文字の前にアイコンを表示
content: url(‘　アイコンのURL　’);　⇐　任意のアイコンをUPして、そのURL　http://～
margin-right: 3px;　　　⇐　アイコンの表示位置
vertical-align: top;　　　⇐　上に同じ
}

.time {
margin: 10px 0 7px 2px;　　
}

.bold {
font-weight: bold;
}

.nocomments {
display: none;
}

文字の前に、アイコンを表示させたい時は、

好きなアイコンを用意して、アップロードし、

そのURLを記入すれば表示されます。

参考にさせていただいたのは、こちらのサイト様。

コードも拝借しました。

ありがとうございました＾＾

The following two tabs change content below.

• この記事を書いた人
• 最新の記事

サトシオ

WEBデザインとかアフィリエイトとかやってます。 3度のメシよりWEBが好きです。気が付けばネット歴20年ｗ 月間に読むコミックスの量ならだれにも負けない自信があります！　←ジマンになってないｗｗｗ 兵庫県在住・人妻・主婦・2児（といってももうデカいよ）の母・8匹の猫飼い

最新記事 by サトシオ (全て見る)

• 丹波の黒大豆の枝豆をタジンで調理してみた -
• 【簡単手作り】　シャキシャキした食感が楽しい「れんこんハンバーグ」レシピ -
• ぶどうパンを焼いてみた【レシピ】 -
• お中元をそろそろ考えないと -
• 内職したことありますか？ -