賢威6.1に『この記事は約 ◯ 分で読めます。』を表示させる 【WPの小技集】

11.112013

この記事は3分で読めます

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

時々記事の上部に、

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

っていうのを見かけて、

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

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

  

 

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

 

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

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

 

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

 

 

画面が真っ白です(・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を記入すれば表示されます。

 

 

 

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

コードも拝借しました。

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

スポンサーリンク

HP初心者でも楽々。サイト作成お助けツール


■ 初心者でも自分で更新できる最短ホームページテンプレート
■ サクサクっと綺麗なサイトを作りたいなら=サイト作成システム「SIRIUS」
■ 豊富な素材を組み合わせて簡単にLPが作れる=LP作成用テンプレート【MeVIUS-メビウス-】
■SEOに強い戦略的テンプレート「賢威6.2」。レスポンシブWebデザインにも対応!パンダアップデート・ペンギンアップデートで悩むサイトオーナー様必見のSEOマニュアルが付属!

HPやブログで稼げるようになるためには?


■ブログを育てて未来の資産とする方法=PRIDE(プライド)
■初心者のためのアフィリエイトの教科書=3Mブログサイトアフィリエイト「LUREA plus」ルレアプラス
■もうキーワードで悩まない=オートレンダー 「未来のトレンドキーワードやライバル不在の穴場キーワードがわかるアフィリエイトオールインワンツール!」


関連記事

  1. PageNavi&Pagenavi Style

■スポンサーリンク

■過去記事

ご訪問者様

  • 141View:
  • 245209Total:
  • 0Online:
■オススメできるもの

◎PRIDE(プライド)

trend

◎LUREA(ルレア)

lurea

◎MeVIUS(メビウス)