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

20161008_01
Pocket

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



 

そもそもWPtouchとは?

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

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

 
20161008_02
 

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

 

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

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

バージョン 4.2.6で確認して編集しました。バージョンにより内容が異なる場合があります。また、プラグインをバージョンアップ(更新)することによって再度編集が必要になる可能性があるため注意してください。

 

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

 

(WordPressをインストールしているフォルダ)/wp-content/plugins/wptouch/themes/bauhaus/default/single.php

 

(WordPressをインストールしているフォルダ)/wp-content/plugins/wptouch/themes/bauhaus/default/style.css

 

上記のファイルが個別記事のファイル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>

 

文字コードに注意してください。自分が編集した時はファイルダウンロード時に「shift-jis」になっており、サーバで設定されている「UTF-8」になっていなかったために日本語部分が文字化けして、ファイルの文字コードを「shift-jis」⇒「UTF-8」に変更して正しく表示されました。

 

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

 

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

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

 

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

 
20161008_03
 

あとがき

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



 

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

最新情報をお届けします

Twitter でTONOSTをフォローしよう!

Pocket

コメントを残す

メールアドレスが公開されることはありません。