自動でスマホ最適化/WPプラグイン「WPtouch」

WPプラグイン「WP TOUCH」のタイトル画像


WordPressプラグイン「WPtouch」

iPhoneやAndroid携帯などのモバイル端末からの訪問者に自動で最適なモバイルテーマに変換するプラグイン

インストール方法

  • (1)管理画面左側「プラグイン」から「新規追加」でこのプラグインを検索
  • (2)「いますぐインストール」をクリック
  • (3)「プラグインを有効化」をクリックして有効に

インストール方法をもっと詳しく

参考までにダウンロードサイト

はじめに

 
 国内のスマートフォン普及率は確実に伸びている。実際、携帯ショップに行ってもスマフォばかりでガラゲーの棚は少ない。年配者はともかく若者層はスマフォの選択しかないような状況だ。

日経BPコンサルティングは2013年8月30日、国内のスマートフォン(スマホ)普及率が28.2%に達したとの調査結果を発表した。今年7月上旬から中旬にかけての調査で、約1年前の前回調査(18.0%)から10ポイント増加した。また、携帯電話・スマートフォンを介して行われる購買である「携帯・スマホ流通マネー」の規模が4兆円を突破した。
出典元:日経新聞「国内スマホ普及率は28.2% 流通マネーは4兆円突破 」より

 今後はますますスマフォ人口が増えるので、やはりサイトもスマフォを意識したサイトすることは必須です。

 今はやりのレスポンシブデザインならば、PCからスマフォまで対応するサイトも可能ですが、使い勝手の良さでまだまだの部分があります。

 このWPプラグインの「WPtouch」は、簡単にモバイル最適化を可能にするため、誰もが利用している有名なプラグインです。

 デザイン自体がシンプルで、味気ない感じもありますが、いかにもなスマフォライクなインターフェースために使いやすい。

 レスポンシブなデザイン対応でなければ、スマートフォンユーザーのために、とりあえず入れておきたいやつです。

 

有効化後の設定、使い方

 有効化すればすぐ適用されます。

WPプラグイン「WP TOUCH」の使い方その1

 なんとなく、スマフォサイトっぽいですね。

 デフォルトでもいけるのですが、設定を変更して使い勝手を向上します。

設定画面を日本語に

各種設定をする前に、General SettingsのRegionalization SettingsのWPtouch Languageで、「Japanese」を選択し、ページの一番下にある「save」をクリックして保存します。

これで日本語に変わります。

日付からサムネイルにする

WPプラグイン「WP TOUCH」の使い方その2

記事一覧オプションで、デフォルトのカレンダーから「記事のサムネイルまたは指定画像を投稿」に変更する。

WPプラグイン「WP TOUCH」の使い方その3

インデックスの投稿者名を削除

WPプラグイン「WP TOUCH」の使い方その4

 ログインIDと投稿者名が同じ場合、セキュリティ上の問題で投稿者名は隠した方がいいでしょう。
 index.phpは、チェックを外すだけです。(カスタマイズ編で説明しますが、single.phpは、テンプレートのコードを削除することになります。)
 
 
WPプラグイン「WP TOUCH」の使い方その5

ヘッダー項目などの変更

詳細オプションで、ヘッダーから検索を外したり、タグ項目を外すなど設定が変更できます。

WPプラグイン「WP TOUCH」の使い方その6

背景色など変更

スライル&カラーオプションで背景の色などを変更できます。

WPプラグイン「WP TOUCH」の使い方その7

ホームアイコンを設置

こんな感じにホームアイコンを設置します。

WPプラグイン「WP TOUCH」の使い方その8

作成した画像をアイコンを登録します。

WPプラグイン「WP TOUCH」の使い方その9

一旦、保存した後で、選択します。

WPプラグイン「WP TOUCH」の使い方その10

アイコンが表示されました。

WPプラグイン「WP TOUCH」の使い方その11

グーグルアドセンスの導入

表示されたページの下のほうに「Advertising,starts&Custom Code」という
項目があるので、そこのID入力欄に自分のアドセンスIDを入れます。アドセンスIDは、グーグルアドセンス画面の一番上部のサイト運営者 ID:pub-の部分です。

wp-ad

もっとカスタマイズ

新しいテーマを作る

wptouch/themes/にある「default」をコピーして、新しい名前にする。「origin01」にしました。

「default」は、アップデートの際に上書きされてしまうため、新しく作った方が面倒がなくなります。

WPプラグイン「WP

新しいテーマを表示させるためには、wptouch/wptouch.phpにを修正します。

	function get_stylesheet( $stylesheet ) {
		if ($this->applemobile && $this->desired_view == 'mobile') {
			return 'default';
		} else {
			return $stylesheet;
		}
	}
		  
	function get_template( $template ) {
		$this->bnc_filter_iphone();
		if ($this->applemobile && $this->desired_view === 'mobile') {
			return 'default';
		} else {	   
			return $template;
		}
	}

下記の「default」の2箇所を新しいテーマ名に変更すれば、こちらのテーマが適用されます。

	function get_stylesheet( $stylesheet ) {
		if ($this->applemobile && $this->desired_view == 'mobile') {
			return 'origin01';
		} else {
			return $stylesheet;
		}
	}
		  
	function get_template( $template ) {
		$this->bnc_filter_iphone();
		if ($this->applemobile && $this->desired_view === 'mobile') {
			return 'origin01';
		} else {	   
			return $template;
		}
	}

これで新しいテーマが適用されます。

インデックスの日付を変更

 
デフォルトは英語が前提のためか、日付不自然な表記となってますので変更します。

WPプラグイン「WP TOUCH」の使い方その13

index.phpの128行目あたりにある以下のコードを変更。

<?php echo get_the_time('d.m.Y') ?> <?php _e("at", "wptouch"); ?> <?php echo get_the_time('G:i') ?><br />

下記に変えます。

<?php the_time('Y/m/d'); ?>

WPプラグイン「WP TOUCH」の使い方その14

シングルページの日付変更と投稿者名の削除

 シングルページもインデックス同様に日付の表記が変、なおかつ投稿名も私はいらないので削除します。

WPプラグイン「WP TOUCH」の使い方その15

single.phpの8行目あたりにある以下のコードを変更。投稿者名は削除します。

<div class="single-post-meta-top"><?php echo get_the_time( __( 'M jS, Y @ h:i a', 'wptouch' 
) ) ?> &rsaquo; <?php the_author() ?><br />

下記に変えます。

<div class="single-post-meta-top"><?php the_time('Y/m/d'); ?>

スッキリとしました。

WPプラグイン「WP TOUCH」の使い方その16

zenbackを追加

Zenbackは、ブログやサイトの記事下や横に設置するウィジェット(ブログパーツ)で使っている方も多いかと思います。これを表示させるようにします。

zenback.phpのファイルを新しく作成し、そこにzenbackのコードを記入する。

その後、

<?php the_content(); ?>

直後に下記を入力

<?php the_content(); ?>
 <!-- zenback -->                   
 <?php include( TEMPLATEPATH . '/zenback.php' );  ?>

本文の下に表示されました。

WPプラグイン「WP TOUCH」の使い方その18

フッターリンクの削除

デフォルトだと、不必要な文言がありますのでこれを削除します。(残っててもいいですが・・)

WPプラグイン「WP TOUCH」の使い方その19

footer.phpの下記の部分を削除する。

	<p><?php _e( 'Powered by', 'wptouch' ); ?> <a href="http://www.wordpress.org/"><?php _e( 'WordPress', 'wptouch' ); ?></a> <?php _e( '+', 'wptouch' ); ?> <a href="http://www.bravenewcode.com/products/wptouch-pro"><?php WPtouch(); ?></a></p>
	<?php if ( !bnc_wptouch_is_exclusive() ) { wp_footer(); } ?>
</div>

テンプレートに直接、広告ゾーンを追加

ad.phpファイルを作成し、index.phpと、single.phpそれぞれに表示させるようにコードを入力します。

まず、index.phpの4行目の前に広告ゾーンを追加する。

<!-- 広告 -->                   
 <?php include( TEMPLATEPATH . '/ad.php' );  ?>  

<div class="content" id="content<?php echo md5($_SERVER['REQUEST_URI']); ?>">

無事表示されました。

WPプラグイン「WP TOUCH」の使い方その20

次に、single.phpの29行目の前に広告ゾーンを追加する。

<!-- 広告 -->                   
 <?php include( TEMPLATEPATH . '/ad.php' );  ?>
<!-- 広告 --> 
        	<div class="post" id="post-<?php the_ID(); ?>">

WPプラグイン「WP TOUCH」の使い方その21

まとめ

 「WPtouch」は、デフォルトでもすぐに適用できるのでレスポンシブデザイン未対応のテンプレートを使っている方は、さくっとやるには簡単です。
 スマートフォン時代に入ってますますモバイルファーストな取り組みは必要となります。今から考えておく必要があります。

LINEで送る
Pocket

WordPressこれで学びました

  • WordPressの参考書は、制作ものが多いけど、この本はSEOに特化した割り切りが良い。初めてWordPress導入し、SEO対策をどうしようと悩んでいた時に購入しました。
     WordPressは基本的にはSEOに優れたCMSでありますが、能力を最大化するには、パーマリンク等のSEOに適した設定やSE対策のプラグインなどでパワーアップさせる必要があります。読んだ時は、目から鱗が落ちる内容で、当初はそのまま実践してました。
     また、WordPressだけでなく、基本的なSEO対策の本として、キーワードやタイトル設定なども勉強になりました。

コメントを残す