WordPressプラグイン「WPtouch」は簡単にブログをスマホ用にできるけど、標準のままだと機能的にも見栄え的にもいまいちです。ソーシャルボタン、記事下へのAdsense設置、月日書式変更、メニュー修正について共有します。
ゆめぴょんです。こんちはっ(^^)/
先日の記事でプラグイン「WPtouch」を使って、WordPressブログをスマホ対応にしました。ホームでサムネイル画像も表示させたので、基本的にはこれで問題ないのですが、今回はもう少しアレンジしてみます。
WordPressプラグイン「WPtouch」の改良点
今回は次のような点を改良しました。あなたの好みの部分だけ利用してください。
- 「メニュー」表記のずれを修正
- 日付・月日の書式を変更
- 記事のすぐ下にGoogle Adsense広告を表示
- 記事の下にソーシャルボタンを設置
なお今回の修正はWPtouchの標準テーマを編集します。必ずテーマファイル全てのバックアップを作成しておいてください。修正は自己責任でお願いします。
WPtouchのテーマファイルはWordPress管理フォルダ内の「/wp-content/plugins/wptouch/themes/default/」の中にあります。
WPtouchをバージョンアップ時にはテーマファイルも書換えられる可能性があるので、修正後のテーマファイルもバックアップを作成しておくことをオススメします。
「メニュー」表記のずれを修正
テーマフォルダの「style.css」を編集します。ファイル内で「#headerbar-menu」を検索して探してください。
下のソースコードの7行目を追加してください。私が確認したところ、70pxあれば十分でしたが好みで変更してください。
[css highlight=”7″]
#headerbar-menu {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
width: 70px;
}
[/css]
日付・月日の書式を変更
トップページ（ホーム）の日付はテーマフォルダの「index.php」を編集します。ファイル内で「get_the_time(‘d.m.Y’)」を検索してください。現在のバージョン1.9.8.9では111行目に1ヶ所だけ見つかります。
この「get_the_time(‘d.m.Y’)」やすぐ後の「get_the_time(‘G:i’)」を好みの日付表示になるように修正してください。私は「d.m.Y」を「Y/m/d」に変更して、その後は下のようにコメント化しました。
[html]
<!– <?php _e("at", "wptouch"); ?> <?php echo get_the_time(‘G:i’) ?>–>
[/html]
記事の日付はテーマフォルダの「single.php」を編集します。上と同じように「get_the_time」を検索します。
日付表記を好みのとおりに編集してください。私は「Y/m/d」にしました。ついでにすぐ後の著者表示もコメント化しました。
記事のすぐ下にGoogle Adsense広告を表示
先日の記事でもAdsenseの設置について書きました。WPtouchの標準設定では、タイトルのすぐ下と画面の一番下にAdsense広告を表示できます。今回はテーマファイルに直接記述して好きな場所に挿入してみます。
私は記事のすぐ下に設置してみました。テーマファイル「single.php」の「<?php the_content(); ?>」のすぐ下に設置したいGoogle Adsenseコードをコピペするだけでいいです。
広告サイズは「250×250」が妥当です。「300×250」は端末によってははみだします。Adsense広告のすぐ上には記事と間違えないために「スポンサーリンク」の文字を入れておくことをおすすめします。
またスマホ画面の時に、記事の上に大きな広告を設置することもGoogleは非推奨です。広告を止められることもあるので注意してください。
記事の下にソーシャルボタンを設置
テーマフィルダの「single.php」を編集します。好きな場所に好きなソーシャルボタンのコードを記述すればいいでしょう。私は記事の下に設置しました。ボタンのコードは下の記事を参考にしてみてください。
参考のため、私が最初に設置したTwitter、Facebook、Google+、LINE、Pocket、はてなブックマークの6つのボタンのソースコードを書いておきます。設置後は必ずあなたの環境でボタンをクリックして動作確認してください。HTML5用です。
忘れずに必ず修正してほしい箇所が2つあります。7行目のTwitterの「yume_pyon」はあなたのツイッターアカウントに変更してください。38行目のはてブの「＠」は半角に変更してください。
[html]
<style>
.social_btn { margin:5px 0 16px 0 }
.social_btn>div { float:left; margin:0 10px 0 0 }
</style>
<aside class="social_btn">
<div><a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="yume_pyon">Tweet</a></div><script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?’http’:’https’;if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+’://platform.twitter.com/widgets.js’;fjs.parentNode.insertBefore(js,fjs);}}(document, ‘script’, ‘twitter-wjs’);</script>
<div><div class="fb-like" data-href="<?php the_permalink(); ?>" data-width="150" data-layout="box_count" data-show-faces="false"></div></div>
<div id="fb-root"></div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/ja_JP/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, ‘script’, ‘facebook-jssdk’));</script>
<div><div class="g-plusone" data-size="tall"></div></div>
<script type="text/javascript">
window.___gcfg = {lang: ‘ja’};
(function() {
var po = document.createElement(‘script’); po.type = ‘text/javascript’; po.async = true;
po.src = ‘https://apis.google.com/js/plusone.js’;
var s = document.getElementsByTagName(‘script’)[0]; s.parentNode.insertBefore(po, s);
})();
</script>
<br style="clear:both" /><br />
<div><script type="text/javascript" src="//media.line.naver.jp/js/line-button.js?v=20131101" ></script>
<script type="text/javascript">
new jp.naver.line.media.LineButton({"pc":false,"lang":"ja","type":"e"});
</script></div>
<div><a data-pocket-label="pocket" data-pocket-count="vertical" class="pocket-btn" data-lang="en" data-save-url="<?php the_permalink(); ?>"></a></div>
<script type="text/javascript">!function(d,i){if(!d.getElementById(i)){var j=d.createElement("script");j.id=i;j.src="https://widgets.getpocket.com/v1/j/btn.js?v=1";var w=d.getElementById(i);d.body.appendChild(j);}}(document,"pocket-btn-js");</script>
<div><a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-layout="vertical-balloon" title="このエントリーをはてなブックマークに追加" data-hatena-bookmark-lang="en"><img src="http://b.st-hatena.com/images/entry-button/button-only＠2x.png" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border:none" /></a><script src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8"></script></div>
<br style="clear:both" /></aside>
[/html]
あなたの好みのボタンだけ設置すればいいと思います。順序も好みで変えてください。
まとめ：今日のゆめぴょんの知恵
ここまでやれば、スマホ対応画面も機能的にはかなりPC版に近づいてきたと思います。あとは関連記事や人気記事を表示させたいと思っています。完成したらまた記事にします。PC版の設置方法は下の記事を参考にしてください。
ゆめぴょんでした。ちゃおっ！
