ゆめぴょんの知恵ゆめぴょんの知恵
サイト制作、WordPressカスタマイズ、無料アプリ紹介など。海外旅行135ヶ国。知識を知恵にするブログ!

【WordPress】WPtouchでソーシャルボタンやAdsense設置と日付表記の変更方法

スマホを使う女性

WordPressプラグイン「WPtouch」は簡単にブログをスマホ用にできるけど、標準のままだと機能的にも見栄え的にもいまいちです。ソーシャルボタン、記事下へのAdsense設置、月日書式変更、メニュー修正について共有します。

ゆめぴょん(@yume_pyon)です。こんちはっ!

先日の記事でプラグイン「WPtouch」を使って、WordPressブログをスマホ対応にしました。ホームでサムネイル画像も表示させたので、基本的にはこれで問題ないのですが、今回はもう少しアレンジしてみます。

【WordPress】WPtouchでスマホ対応!サムネイル表示やAnalytics設定方法【WordPress】WPtouchでスマホ対応!サムネイル表示やAnalytics設定方法

WordPressプラグイン「WPtouch」は、ブログを簡単にスマホ対応にでき…

WordPressプラグイン「WPtouch」の改良点

今回は次のような点を改良しました。あなたの好みの部分だけ利用してください。

  1. 「メニュー」表記のずれを修正
  2. 日付・月日の書式を変更
  3. 記事のすぐ下にGoogle Adsense広告を表示
  4. 記事の下にソーシャルボタンを設置

なお今回の修正はWPtouchの標準テーマを編集します。必ずテーマファイル全てのバックアップを作成しておいてください。修正は自己責任でお願いします。

WPtouchのテーマファイルはWordPress管理フォルダ内の「/wp-content/plugins/wptouch/themes/default/」の中にあります。

WPtouchをバージョンアップ時にはテーマファイルも書換えられる可能性があるので、修正後のテーマファイルもバックアップを作成しておくことをオススメします。

「メニュー」表記のずれを修正

テーマフォルダの「style.css」を編集します。ファイル内で「#headerbar-menu」を検索して探してください。

下のソースコードの7行目を追加してください。私が確認したところ、70pxあれば十分でしたが好みで変更してください。

日付・月日の書式を変更

トップページ(ホーム)の日付はテーマフォルダの「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」に変更して、その後は下のようにコメント化しました。

記事の日付はテーマフォルダの「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は非推奨です。広告を止められることもあるので注意してください。

記事の下にソーシャルボタンを設置

WPtouchでソーシャルボタン設置

テーマフィルダの「single.php」を編集します。好きな場所に好きなソーシャルボタンのコードを記述すればいいでしょう。私は記事の下に設置しました。ボタンのコードは下の記事を参考にしてみてください。

保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK保存版!SNSソーシャルボタン設置コード一覧まとめ!コピペでOK68 shares

記事にソーシャルボタンを設置することは、もはや必須になりつつあります。良い記事は…

参考のため、私が最初に設置したTwitter、Facebook、Google+、LINE、Pocket、はてなブックマークの6つのボタンのソースコードを書いておきます。設置後は必ずあなたの環境でボタンをクリックして動作確認してください。HTML5用です。

忘れずに必ず修正してほしい箇所が2つあります。7行目のTwitterの「yume_pyon」はあなたのツイッターアカウントに変更してください。38行目のはてブの「@」は半角に変更してください。

あなたの好みのボタンだけ設置すればいいと思います。順序も好みで変えてください。

まとめ:今日のゆめぴょんの知恵

ここまでやれば、スマホ対応画面も機能的にはかなりPC版に近づいてきたと思います。あとは関連記事や人気記事を表示させたいと思っています。完成したらまた記事にします。PC版の設置方法は下の記事を参考にしてください。

WordPress Popular Postsでサムネイル画像付き人気記事一覧の表示方法WordPress Popular Postsでサムネイル画像付き人気記事一覧の表示方法53 shares

「WordPress Popular Posts」は記事の下やサイドバーにブログ…

WordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にもWordPress Popular Postsでカテゴリ別サムネイルつき人気記事一覧!SEO対策にも

このブログではプラグイン「Popular Post」でサムネイルつき人気記事の一…

次回の記事は「ウェブ制作に役立つチップ」の予定です(^^)。更新を見逃さないためにも、 feedlyの登録をおすすめします(^^)/

ゆめぴょん(@yume_pyon)でした。ばいちゃお! こてっZzz

«前記事:【WordPress】WPtouchでスマホ対応!サムネイル表示やAnalytics設定方法【WordPress】WPtouchとPopularPostsでスマホにサムネイル付のカテゴリー別人気記事を表示:次記事»
ページ
↑先頭
ホーム