これでスマホ表示もデザインできる! wordpressのスマホ対応プラグインWPtouchの使い方!

 - 

 -  >

 -  Web Design, ブログ

気付いている人がいるのかわかんないですけど、最近このブログのスマホ版のデザインを少しだけ変えました。

ちゃんとやっていなくて、スマホ対応用のプラグインのWPtouchの使い方が全然分からなかったのですが、最近少しだけ分かるようになったので、重要な点をいくつか書いていきます。

 

まず参考にした記事はこの二つです。

【WPtouch】新バージョン(3.1)でAdsense広告を挿入する方法 | 「ネットビジネスで稼ぐ」を考えるハヤトのブログ【WPtouch】新バージョン(3.1)でAdsense広告を挿入する方法 | 「ネットビジネスで稼ぐ」を考えるハヤトのブログ

Wordpressのスマホ対応を助けるプラグインWPtouch Mobile Plugin | たかなblogWordPressのスマホ対応を助けるプラグインWPtouch Mobile Plugin | たかなblog

 

 

スマホ版へのアドセンスの入れ方

まずアドセンスの入れ方です。

WPtouchのcore settingの部分にcustom codeという部分があります。そこにアドセンスのコードを入れると一つはアドセンスなどをフッターに入れることができます。

けど、普通に見てみるとそれ以上にアドセンスなどを入れる項目はWPtouchにはありません。

 

そのため、管理画面ではなく、FTPから直接ファイルの編集をしなくてはいけません。

そのファイルは、WPtouchのsingle.PHPというファイルで、wp-content→plugins→wptouch→themes→bauhaus→default→single.PHPという風に探していくとあるはずです。

それがスマホ版の記事の基本的なデザインを統括しているファイルなので、それを編集するとアドセンスをフッター以外にも挿入することができます。

 

入れる場所は【WPtouch】新バージョン(3.1)でAdsense広告を挿入する方法 | 「ネットビジネスで稼ぐ」を考えるハヤトのブログで詳細を確認してください。

ちなみに自分は入れる場所は多分今はバージョンが違ってよくわからないので、感覚で入れました。

記述がこんな感じです。

スクリーンショット 2014 08 13 1 13 41
スクリーンショット 2014 08 13 1 14 06

 

HTMLをコードの状態でブログに書き出す方法がわからなかったので、スクショになってしまいましたが、大体こんな感じで適当に入れてみると大丈夫です。(適当に入れておかしくなっても責任は取れませんが、自分は多少ズレても大丈夫でした。)

また記事下の部分と管理画面でのフッターの部分はソーシャルメディア関連のフォローボタンも挿入しています。

(こういう風にコードを公開しちゃって大丈夫かな? アドセンスだけは表示しちゃダメっぽいから消したけど・・・)

 

 

アイキャッチ画像の消し方

続いてアイキャッチ画像の消し方ですが、WPtouchでスマホ版を設定すると、勝手にアイキャッチ画像がタイトル下に表示されるんですよね。

前から何となく邪魔だということには気付いていたんですが、自分がスマホでみないもので放置していたら、らふらくさんに指摘してもらったので、調べてみたら簡単に消せました。

こういう指摘をしてもらえることはとても嬉しいですね。

 

こちらはFTPとかに行かなくても、ワードプレスの管理画面で操作することができます。

スクリーンショット 2014 08 13 1 28 53

 

thema settingsに行くとこのような画面がありますので、そこでPost thumbnailsを変更するとアイキャッチ画像を消せます。確か最初はAllでしたが、ここから変更するとアイキャッチ画像は消えます。

 

 

細かいデザイン編集

続いて最後に他のデザインの編集に着いて色々書きます。

まず色ですが、WPtouchを初期設定のままにしておくと緑っぽい微妙な色になっていると思います。

この色ってダサくないですが? この色もちゃんと編集することができます。

 

先ほどの画面の隣にBrandingというところがありますが、そこから全てではないですが、色の編集を行うことができます。

スクリーンショット 2014 08 13 1 41 05

 

そしてここで、サイトのロゴを編集することもできます。

スクリーンショット 2014 08 13 1 44 27

 

またこちらも最近まで気付いていなかったのですが、さらに隣にいくとBookmark iconsというのがあるので、そこからブログタイトルを変えることができます。

スマホ側もちゃんと編集しないと、ブログのタイトルは変更されないようです。

 

 

最後の注意

ここはまだ全部ちゃんと分かっているわけじゃないんですが、ワードプレス自体やプラグインをアップデートするとここで編集した内容がもとに戻ってしまうことがあります。(戻ってしまうのは、FTPなどで直接コードの記述に変更を加えた時です。)

そのためアップデートをした時は、必ずちゃんとデザインがもとに戻っていることはないか等の確認をしたほうがいいです。

 

自分も一度アップデートをした後に何か収益が落ちているなと思っていたら、恐らくアップデートが原因で記述がもとに戻っていました。

また自分はPC版のテーマ上、PCでもサイドバー以外の記事の上下のアドセンスはテーマに直接コードを入れていますので、テーマのアップデートでもデザインが変わってしまうことがありますので、こういったところにも注意してみてください。

 

 

関連記事はこちら。

WordPressのスマホ対応を助けるプラグインWPtouch Mobile Plugin | たかなblog
【WPtouch】新バージョン(3.1)でAdsense広告を挿入する方法 | 「ネットビジネスで稼ぐ」を考えるハヤトのブログ

Facebookでシェアする

Twitterでシェアする

はてなブックマークに追加

 更新をチェックする! follow us in feedly

カスタム検索

Popular Post

Copyright© 新卒フリーランサーのブログ!2014 All Rights Reserved.