2016/10/08 (更新日:2016/12/02)

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

WordPress WordPressプラグイン
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
 

あとがき

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

このエントリーをはてなブックマークに追加
Pocket

おすすめ記事:

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

コメントを残す

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