WordPressで記事を読むのにかかる所要時間を表示させる方法2～WPtouchでのスマホ表示への対応方法～

Tweet

Pocket

前回にWordPressで書いた記事を読むのにかかる所要時間を表示させる機能の実装の仕方を書きましたが、WPtouchでのスマホ表示を確認してみると表示できてませんでした。今回はWPtouchでのスマホ表示への対応方法を書きます。

そもそもWPtouchとは？

「WPtouch」とは、WordPressでスマホ表示に対応させるプラグインです。かなり有名なプラグインなので知っている方・使っている方も多いと思います。

テーマによってはスマホ表示に対応しているテーマもありますが、対応していないテーマも多いんですよね。このWPtouchを使うことによりWordpressにあまり詳しくない方でも簡単にスマホ表示に対応させることができます。
 
ここではWPtouchのインストールの仕方、使い方を詳しくは解説はしませんが、ただインストールして有効化させるだけで手軽にスマホ表示に対応させることができる便利なプラグインです。

WordPressの管理画面の左メニュー「プラグイン」⇒新規追加から、「WPtouch」をキーワード検索して出てくる「WPtouch モバイルプラグイン (WPtouch Mobile Plugin)」をインストールして有効化するだけで使えます！

記事を読むのにかかる所要時間のWPtouchでのスマホ表示への対応

先に言っておきますが、紹介する方法は直接プラグインのファイルを編集する荒業となりますので、ある程度のIT知識・技術がある方へ向けた方法となります。

記事の上の部分に表示させたいため、以下のファイルを直接ファイルサーバから探して編集します。
レンタルサーバなどであれば、直接WEB上からファイルサーバにアクセスできますね。自分はFileZillaというFTPクライアントを使ってファイルサーバにアクセスしています。ファイルサーバ上で以下のファイルを探します。

上記のファイルが個別記事のファイルsingle.phpとそれに関連するデザインを変更するためのCSSファイルstyle.cssですね。上記を編集します。

<div class="post-page-content">

上記の記述がsingle.phpの24行目に見られ、これの上に前回も紹介した以下のコードを実装します。

<?php
$mycontent = $post->post_content;
$word = mb_strlen(strip_tags($mycontent));
$m = floor($word / 600)+1;
$est = ($m == 0 ? ” : $m) ;
?>
<div class="read-time"><span class="read-time-count">この記事は約 <b><?php echo $est; ?></b> 分で読めます。</span></div>

また、調整レベルではありますが以下のコードをstyle.cssの一番下に記述してレイアウトの調整を行いました。

/* 記事を読む所要時間用 */
.read-time {
	margin: 15px 0;
	text-align: right;
}

.read-time-count {
	padding: 5px;
	border: 1px solid #555555;
}

上記の実装により以下の赤枠で囲った部分にきれいに表示することができました！

あとがき

ちょっと手間がかかる方法ではありましたが、うまく実装できると記事を読んでくれる方にも便利になります！
 
 

Tweet

Pocket

おすすめ記事:

【WordPress】プラグイン「Theme Check」でのテーマチェックの仕方 【WordPress】プラグイン「PHP Compatibility Checker」でPHP互換性チェックをしてみました 【WordPress】プラグイン「Contact Form 7」のjsファイルとcssファイルを特定のページにだけ読み込む方法 【WordPress】プラグイン「P3(Plugin Performance Profiler)」でプラグインの負荷を調べてみました！ 【WordPress】WP Super Cacheが有効化も削除も出来なくなった状態から削除できた方法 WordPressで記事を読むのにかかる所要時間を表示させる方法1 【WordPress】ウィジェットエリアに自分で選んだピックアップ記事を表示する方法 WordPressでブログサイトに海外テーマを使い続けてきて日本のテーマを使わなかった理由 「WordPressプロフェッショナル養成読本」を読んでみた感想 WordPress の隠しページ!? 全オプションが変更できる「All Options」