WordPress WPtouch モバイルプラグインをカスタマイズする方法 ホームページ制作 | 墨田区

WordPress WPtouch モバイルプラグインをカスタマイズする方法

LINEで送る
Pocket

WordPressのモバイルプラグインであるWPtouchをカスタマイズする方法 をご紹介します。もはやサイトのスマホ対応は必須な時代となりました。利用ユーザーの大半はモバイル対応されていないサイトだと分かった瞬間、離脱するという傾向があるそうです。
あ、自分もその一人です^^
とはいえ、ユーザーの離脱率は下げたいところですよね。
しかし「モバイル対応って大変そう・・・」というイメージをお持ちではありませんか?
大丈夫!WordPress のモバイル対応プラグイン WPtouch をインストールすれば、簡単にスマホ対応できます。ここでは WPtouch の設定変更から Google アドセンスの広告表示、トップページのカスタマイズまでおこないます。




【PR】マジか?!「アレ」してるLINEスタンプっていったい・・・


Wptouchの設定を変更

まずは、WordPress 管理画面プラグインのインストールから「WPtouch Mobile Plugin」と検索して、インストール後「有効化」してください。
※ここでは WPtouch 3.6.6 をインストールしました。
インストールと有効化が終わると 左メニューに WPtouch が出てきます。

日本語化

デフォルト言語は英語なので、日本語に変更しましょう。
Core Settings」を選択します。
WPtouchメニューから「Core Settings」を選択

画面中央にある Regionalization を「日本語」に設定します。
「Regionalization」を日本語に変更

日本語にしないと、モバイルサイト内の要所要所で英語が表記されます。
※「Read More…」とか。


Google Analyticsの設定

Google Analytics のトラッキングコードを「Custom Code」へコピペします。
Google Analytics のトラッキングコードを「Custom Code」へコピペ

一番下にある「Save Changes」で保存します。

WPtouchのテーマを設定変更

WPtouch のテーマ設定を変更します。
WPtouch のメニューから「テーマ設定」を選択します。
WPtouchのメニューから「テーマ設定」を選択


投稿数を変更

一般タブから、トップページの投稿数を変更します。
10 件は表示させたいので 10 と入力します。
※デフォルトは 5 です。
ブログ投稿表示数を変更


サムネイルを変更

デフォルトの設定では、アイキャッチ画像が上部に設定されます。
PCならまだしも、画面の狭いモバイル端末でアイキャッチ画像を表示されても邪魔なので、トップページのみサムネイル表示させます。

アイキャッチ画像を非表示に設定

赤枠部分がアイキャッチ画像


デフォルトは「ブログリスト、シングル投稿」に設定されています。
トップページのブログリストのタイトル横に表示されるサムネイルはそのままにしたいので「ブログリストのみ」を選択します。
サムネイル投稿の設定変更

アイキャッチ画像が設定されていると、トップページにスライダーが表示されます。
画面を占有するので、不要であればチェックを外しましょう。
スライダーの設定変更

下図の大きい赤枠がスライダーです。アイキャッチ画像が設定されているブログタイトルをスライド表示できますが、正直スペース取りすぎて邪魔です。
下図の小さい赤枠がブログタイトル横に表示されるサムネイルです。
スライダーとサムネイルの表示

このサイトはあんまりアイキャッチ画像を指定してないので、こんなもんで十分です。

ここまでの変更でサイトを表示すると下図のようになります。
シンプルになったトップページ

とってもシンプルになりました。


ブランド設定を変更

デフォルトのタイトル背景色は「緑」となっています。
これはちょっとイケてないので、変更します。
ページタイトルの背景色を変更


テーマカラーを変更

ブランド設定を選んで変更したいテーマカラーをクリックするとパレットが出てきます。
テーマカラーを設定

サイトのテーマカラーに合わせて変更しましょう。ここでは以下のように変更しました。

テーマ背景#f9f9f8
ヘッダー&メニュー#fdfeff
リンク#35c4ff
投稿/ページヘッダー#ebebeb

サイトロゴを変更

サイトのロゴ画像があればアップロードすればサイトタイトルに表示できます。
このサイトでは文字より画像の方がかっこいいと思ったので変更することにしました。
サイトロゴを変更


テーマフッターを変更

フッターに表示する文言を変更できます。Copyright などを変更しましょう。
フッターを変更


共有中のリンクを表示のチェックを外す

共有中のリンクを表示」にチェックが入っていると、下図のリンクが表示されます。
共有リンクバーの設定変更

Facebook、Twitter、Google+ という、3大 SNS サイトへ共有できます。
このサイトでは別の WordPress プラグインで「WP Social Bookmarking Light」を使っているので、機能が重複します。そのためここではチェックを外しておきます。
※WP Social Bookmarking Light はスマホで見るとズレるんですよねぇ・・・。
「共有中のリンクを表示」のチェックを外す

ページ下の「変更を保存」ボタンを押下して保存しましょう。

どのように反映されたかをサイトを表示してチェックしましょう。
ブランド設定変更後のページ

サイトタイトルがロゴになったのと、ページタイトルの背景色が変わりました。


投稿ページにGoogleAdSenceコードを設定

さて、ここからが本題です。WPtouch の管理画面からでは Google アドセンスの表示設定はできません。直接プラグインのテーマファイルを書き換える必要があります。テーマファイルを編集してもバージョンアップしたら消えてしまいますので注意が必要です。
編集ファイルのバックアップは必ず取っておいてください。
※いちいちメンドクサイと思われる方はプロ版の購入を検討ください。

Google アドセンスの広告は「1ページに3つまで挿入できる」のはご存知ですよね。
※3つ以上は規約違反になりますので、ご注意ください。

今回配置するのは、サイトタイトル下記事下、それと本文内です。
広告サイズは「大きいことが正義」の名のもと、「320×100」のアドセンスコードを配置しますw

FTP ツールを使って、以下のファイルをダウンロードします。
/wp-content/plugins/wptouch/themes/bauhaus/default/single.php
「秀丸」「さくらエディタ」などのテキストエディタを使って編集します。


サイトタイトル下にアドセンスコード挿入

single.php の2~3行目辺りにアドセンスコードを挿入します。

<?php get_header(); ?>
//ここに広告コードを挿入します。
 <div id="content">
    <?php while ( wptouch_have_posts() ) { ?>

      <?php wptouch_the_post(); ?>
・・・

記事下にアドセンスコード挿入

single.php の52~53行目辺りにアドセンスコードを挿入します。

・・・(中略)・・・
      </div>

    <?php } ?>
  </div> <!-- content -->
//ここに広告コードを挿入します。
  <?php get_template_part( 'related-posts' ); ?>

  <?php get_template_part( 'nav-bar' ); ?>
・・・(中略)・・・

本文中にアドセンスコード挿入

本文中に Google アドセンスコードを挿入します。
本文中にアドセンスコード挿入するにはわけがあります。
例えば、サイトタイトル上とサイトタイトル下に広告を配置したとします。
これは「メインコンテンツを広告で押し下げる行為」となり Google アドセンスの規約に引っかかります。せっかく広告を配置しても、広告配信が停止されてしまっては意味がありません。リスクを回避するという意味と、遅い広告をきちんと表示するため本文中に広告を表示します。ただし、これは記事中に more タグが挿入されていることが前提となります。
more タグの置換については こちら で詳しく紹介しています。
WordPress本文中のmoreタグをアドセンス広告へ置換する方法

FTPツールを使って、以下のファイルをダウンロードします。
/wp-content/plugins/wptouch/themes/bauhaus/default/functions.php

以下のソースを貼り付けます。

//more位置へ挿入
add_filter('the_content', 'adMoreReplace');
function adMoreReplace($contentData) {
$qr = '<br/><br/>';
$adTags = <<< EOF
//ここに広告コードを挿入します。
<br/><br/>
EOF;
$contentData = preg_replace('/<span id="more-[0-9]+"><\/span>/', $qr . $adTags, $contentData);
return $contentData;
}

広告の確認

編集したファイルをアップロードして、自分のスマホから確認しましょう。
下図はサイトタイトル下に表示された広告です。
※広告はボカシしています。
サイトタイトル下に表示された広告

下図は本文中に表示された広告です。
※広告はボカシしています。
本文中に表示された広告

下図は記事下に表示された広告です。
※広告はボカシしています。
記事下に表示された広告


固定ページを変更

FTPツールを使って、以下のファイルをダウンロードします。
/wp-content/plugins/wptouch/themes/bauhaus/default/page.php

同様の修正をおこなってアップロードすれば OK です。


トップページを変更

モバイルサイトのトップページを変更します。
WordPress のトップページで利用される index.php はこれまでの「bauhaus」というテーマではなく「foundation」というテーマにありますのでこちらを変更します。

FTPツールを使って、以下のファイルをダウンロードします。
/wp-content/plugins/wptouch/themes/foundation/default/index.php
/wp-content/plugins/wptouch/themes/foundation/default/header.php

Google アドセンスコードは 投稿ページ・固定ページと同様に index.php を修正します。

<?php get_header(); ?>
//ここに広告コードを挿入します。
 <div id="content">
  <?php if ( wptouch_have_posts() ) while ( wptouch_have_posts() ) { ?>
・・・(中略)・・・
  <?php } ?>
//ここに広告コードを挿入します。
<?php get_footer(); ?>

このサイトのトップページは、本業の1つである「ホームページ制作」について掲載しています。PCサイト同様に掲載したいので、以下のように修正しました。

<div id="content">
<div class="sakaentop">
<h2>お客様のビジネスに付加価値をプラス!</h2>
・・・(中略)・・・
</div>
  <?php if ( wptouch_have_posts() ) while ( wptouch_have_posts() ) { ?>

スタイルを記入する為 header.php の head タグ内に下記を追記します。

<style type="text/css">
<!--
div.sakaentop {
padding: 0 6px 0 6px;
}
 --> 
</style>

アップロードする際に注意点があります。
今回 index.php には日本語文字を追記しました。
ダウンロードしてきたファイル日本語を追記してアップロードすると 文字化け しました。
そこでファイル形式を UTF-8 にしてアップロードしたところ、正しく日本語が表示されました。アドセンスコードを追記するだけでしたら意識する必要はないのですが、今回のように日本語を追記する場合はご注意ください。

トップページを表示すると、こんな感じに仕上がりました。
サカエンのモバイルサイトが出来上がり


まとめ

今回の設定はあくまでこのサイトがおこなった手順となっています。ご自分のサイトデザインに合わせてカスタマイズして、かっこいいモバイルサイトを作ってくださいね。

ちなみに今回一生懸命修正したソースは、プラグインがバージョンアップされると上書きされてしまいます。バックアップをきちんと取っておきましょう。このプラグインはバージョンアップしても、今回修正したファイルにはそれほど変更がかかっていない印象を受けます。一度手順をモノにしてしまえば、次回からそんなに手間がかからないと思いますよ。

どうしても面倒な方は、プロ版の購入をご検討ください。
時間をお金で買ったと思えば安いかもしれません^^


おつかれさまでした。

LINEで送る
Pocket

この記事がお役に立ちましたら シェア をお願いいたします。

Wordpressの勉強が思うように進まないときは!

Wordpressの勉強が思うように進まないのであれば、プロに直接質問ができる プログラミングスクール を検討してみてはいかがでしょうか?プログラミングスクールに申し込めば、短期間で一定のスキルを身に着けることができます!

Wordpressコースあり!オンライン完結型 テックアカデミー TechAcademy [テックアカデミー]

どこかに通う必要なく、自宅でプログラミングやアプリ開発を学ぶことができるのが特徴のスクールです。未経験からプロになるまで最短4週間という、超短期集中型の学習ができます。年齢層は10代〜40代の男女が中心で、学引があり多くの学生が受講しているそうですよ。オンラインで受講ができるスクールですので、全国どこからでも学習ができますね。

更にさらに、パーソナルメンターにチャット質問できちゃうんです!!

これは素晴らしいことですよ!ハマったり困ったことが起こるのがプログラミングの世界。知っている誰かに聞けば数分で解決することが、自分だけだと何時間もかかったりしますから!

いやー、便利な世の中になりましたよねー。講師もバリバリのエンジニアということですから、なんとも素晴らしいスクールがあったものですね。学割を使えば社会人より半額以下で受講できますから、学生さんには超おすすめです。

オンラインスクールですから営業エリアは全国です。
気になる方は一度チェックしてみてください。無料の動画説明会も常時開催していますよ。


Wordpressコースあり!きめ細やかなコーチング WebCamp 1ヶ月でWebスキルをマスター!|WebCamp ウェブキャンプ

「1ヶ月でWebスキルをマスターするWebCamp」では、みんなで学ぶ集団講義制と、自由に通えるフレックス制を導入しており、自分のスタイルに合った学び方が選べるのが特徴です。そして生徒1人1人に必ずプログラミングのスペシャリストが付き、きめ細やかなコーチングをしてくれるところが魅力的です。

特に珍しいのは、ママコースというものがあること。本当は自分のスキルを伸ばしたい主婦・ママ達を応援してくれているんですねー。素晴らしい!!
ママコースは こちら から

こちらも卒業生なら無期限&無制限で、公式パートナーの求人をご紹介してくれますので、安心してスキルアップに取り組めますね。

東京・愛知・福岡を営業エリアとされています。
まずは気軽に 無料説明会 に申し込んでみるのもアリですよ^^


Wordpressコースあり!現場のプロが直接教えてくれる 超現場主義 ウェブデザインスクールをお探しならWEB塾 超現場主義|東京・名古屋・札幌・豊明

WEB制作会社でもある「デザインスクール Web塾 超現場主義」は、一般的なパソコンスクールとは全く違います。WEB制作の現場で活躍しているクリエイター達がマンツーマンで指導するというスタイルは、プロの現場に入り、諸先輩方から指導を受けているのと何ら遜色がありません。間違いなく短期間でプロの技を習得できるでしょう!

更にさらに、なんと 就職のサポート をしてくれるというのですから驚きです!!

Web業界への転職支援や、フリーランスとしての仕事の紹介、また人材派遣会社との連携で派遣登録など、その契約形態は様々です。スキルアップもできて仕事もアサインしてくれるとはなんとも素晴らしいスクールがあったものですね。

東京・名古屋・札幌・豊明を営業エリアとされています。
気になる方は一度チェックしてみてください。


コメント - Thank you for the comment.

  1.  

    はじめまして。
    いつも参考にさせていただいてます。
    wptouchのことでお聞きしたいのですが
    記事中の画像を携帯で縦から横にしたときに画面いっぱいに表示されるようにする方法はどうしたらいいのでしょか?
    ネットで書かれてるやり方を試してもならなかったので質問させていただきました。
    よろしければ返答頂けたら助かります。

    返信

     
    •  

      コメントありがとうございます。いつも参考にしていただいているとは恐縮です。とってもうれしいです♪
      Wptouchプラグインを使った場合、画像は自動で最適化されます。とはいえ、元画像のサイズに左右されますので、PCサイト用の画像が小さいとどうにも拡大はされないと思います。もしかしたらCSSで対応することも可能かもしれませんね。このサイトでは試していませんが、以下のソースをWptouchのCSSに組み込んでみたらいかがでしょうか。
      img {
      max-width: 100%;
      height:auto;
      }
      max-widthを100%に設定し、heightをautoにすることによって画像サイズを最大化できると思います。検証はできておりませんのでご了承ください。

      返信

       
      •  

        お忙しいところ返信していただきましてありがとうございます。
        wptouchのcssに追加しましたがならなかったです。
        せっかく教えていただいたのに申し訳ありません。
        また色々試してみます。
        ありがとうございます。

        返信

         
        •  

          そうでしたか、残念です・・。何か方法がわかりましたらコメントいただけるとうれしいです。

          返信

           

Trackback

  1. […] WordPress WPtouch モバイルプラグインをカスタマイズする方法 WordPressのモバイルプラグインであるWPtouchをカスタマイズする方法をご紹介します。もはやサイトのスマホ対応は必須な時代と・・・【ホームページ制作のサカエ】 […]

コメントを残す

お名前 (必須)
メールアドレス
(アドレスは公開されません)

コメント(必須)

Trackback URL