
前回に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; }
上記の実装により以下の赤枠で囲った部分にきれいに表示することができました!
あとがき
ちょっと手間がかかる方法ではありましたが、うまく実装できると記事を読んでくれる方にも便利になります!