WPtouch Pro の初期設定　～モバイル・サイトの作成　 ^{0}

購入からライセンスキーのアクティベイトに関しては、WPtouch Proのメリットと購入方法をご参照ください。

ここではライセンスキーを購入し、ご自身のURLでアクティベイトしてからの初期設定の手順について説明しています。

§ ライセンスのアクティベイト

支払い手続きをして、Eメールでライセンスキーを受け取ったら、一番に管理画面で有効化します。

WPtouch Pro → License で、登録したメールアドレスとライセンスキーを入力します。
先方のサーバーに認識されるまで、しばらく時間がかかります。
下記のような「Your Account Email and License Key has been accepted.」の青いメッセージが出れば成功です。
日本語バージョンは下方。

次に、WPtouch Proの公式サイトのマイページにアクセスし、「My Plugin」の「LISENCED　SITE」にライセンス申請したURLが登録されているかどうか確認します。

§ 管理画面の設定

ライセンス登録が済んだら様々な設定を行うのですが、WPtouch Proの場合、先にテーマ・テンプレートを整え、PCブラウザで一つ一つモバイルサイトを確認しながら設定を進めた方が分かりやすいです。

とりあえず、日本語設定すれば、管理画面も日本語化されるので、分かりやすいです。

§ 子テーマの作成

まず「テーマブラウザ」にて子テーマを作成します。この場合、「Classic」の「Copy As Child」をクリックします。

すると wp-content/wptouch-data/themes/classic-child-1/iphone/ に style.css と function.php が自動生成されます。plugin フォルダの wptouchpro のディレクトリとは異なりますので注意してください。

§ function.phpの設定

WordPressの個別機能について、デスクトップ・テーマ(PCサイト用)のfunction.phpに記載している場合は、それと同じ内容をコピーしてアップロードします。

全てではなくモバイル・サイトにも反映させたい機能、たとえば、カスタムポスト、タクソノミー、フィード配信などです。

子テーマを作成している場合、function.php は、/wp-content/wptouch-data/themes/テーマ名-child-1/iphone/functions.php に存在します。

§ ディベロッパー・モードを有効にする

PCのブラウザでもモバイル・サイトが確認できるよう、ディベロッパー・モードを有効にします。
IE、Chrome、FireFox、Safariなど、主要なブラウザで機能します。

§ 細かいカスタマイズ

あとはブラウザやスマートフォンでサイトの状態を確認しながら、細かい部分を設定します。
難しい部分はほとんど無いです。
メニュー、アイコン、サムネイルや抜粋などを整えたら、普通に記事を閲覧する分にはOKです。

カスタムポストについてはこちらの記事もご参照ください。→　「」

By: 阿月まり Category: WPtouch-Pro Tags: WPtouch-Pro

WPtouch Proのメリットと購入方法 ^{0}

ガラケーからスマートフォンへの移行が進む中、iPhoneやAndroidからのアクセスも急増しています。

WordPressの場合、有料プラグインWPtouch Proを導入することでスマートフォン対応のページが簡単に作ることができます。

WPtouchには無料版もあり、そちらでも差し支えないのですが、有料版ではカスタムポストのサポートをはじめ、FirefoxやChromeからモバイルサイトのチェックができるディベロッパーモード、独自メニューなど、いろんな機能が揃っていますので、まあ初期費用が高いと言えば高いのですが、今は円高でレートが有利なこともありますし、スマートフォンからの訪問者をしっかりキープしたい場合は強くおすすめします。

§ 有料版WPtouch Proのメリット

無料版でもベーシックな機能は揃っていますが、PC用サイトをスマートフォンやタブレットでもフルに表示したい場合、有料版でないとサポートしてない機能もたくさんあります。

＊カスタムポスト・タイプの表示(無料版ではカスタムポストはきちんと表示されません)
＊iPad対応(iPhoneとは異なるテンプレートが用意されている)
＊子テーマの自動作成(無料版には親テンプレートしかなく、アップデートの度に編集箇所のファイルの書き直しが必要)
＊カスタムメニューの作成
＊PCブラウザでのモバイルサイトの確認
＊コメントのスレッド化
etc。

一番の問題はカスタムポストのサポートです。

PC用サイトに導入していない場合は関係ないですが、多くの重要なカスタムポストを有する場合、このいずれもモバイルで表示されないのは大変な損失です。
（無料版の場合、カスタムポストのURLにアクセスするとトップページにリダイレクトされるなど正しく表示されません）

WPtouch Proでは、最新版の Ver 2.5からカスタムポストがきちんと表示されるようになった為、私も購入に踏み切りました。
理由は「人気記事がカスタムポストに集中していること」「商用に利用していること」です。
開発元の「Bravenewcode」でも指摘されていますが、2013年にはモバイルからのアクセスがPCを上回るだろうとの予測もあり、日本はアメリカほどでないにしても、スマートフォンからのアクセスが急増するのは確かだと思います。

実際、私もPro版に切り替えてから、スマートフォンからのアクセスがほぼ2倍になりました。カスタムポストの人気記事が大きな理由だと思います。無料版ではカスタムポストにアクセスできない為、このすべてを取りこぼしていたからでしょう。
それまでEZとdocomoが上位だったのですが、Pro版にした翌日には1位と2位が逆転しました。

また私のサイトはいずれも画像や動画が多いため、コンテンツを自動的に切り替えてくれるプラグインは有り難いです。

もう一点は、スマートフォンを持っていなくて、モバイルサイトの確認にFirefoxのアドオンを使っていたのですが、Pro版のディベロッパーモードを使えば、IE、Firefox、ChromeなどPCブラウザで簡単にモバイルサイトが閲覧できるので、これも重宝します。

まあ「1サイト＝49ドル」「5サイト＝99ドル」なので、人によっては負担に感じるかもしれませんが、円高ですし、なによりアクセスが増加するのは有り難いですよね。私はカスタムポストが完璧に表示されるようになったことで非常に満足しております。

なんにせよ、これからまだまだスマートフォンの利用率が増加するのは確かなので、「どうしようかな・・」と逡巡されている方も、購入後7日間ならキャンセル可能ですので、まずは試してみてください。

なお、無料版は旧バージョン1.9なので、カスタムポスト機能等、最新のPro版とは大きく異なります。

§ 購入方法

まずBraveNewCodeの公式サイト『WPtouch Pro』のページに行って、『Buy Now』の緑カートのボタンをクリックします。
アカウント設定画面が現れるので、名前、居住国、メールアドレスを記入します。支払いやサポートに関わりますので匿名はNGです。

カードかPayPalか支払い方法を選択します。

PayPalを選択すると自動的にページが切り替わるので、アカウントを入力して先に進みます。

支払い手続きが完了すると、すぐにライセンスキーの記されたメールが送られてくるので、ちゃんと保存しておきます。

§ プロフィールの設定とライセンス登録

ライセンスキーのメールを受け取ったら、会員ページにログインします。

「EDIT PROFILE & SETTING」でプロフィールを設定をします。

次に「MY PLUGIN」を開き、ライセンスキーを登録して、ダウンロードします。

ファイルをサーバーにアップロードし、WordPressのプラグイン管理画面で有効化したら、License → Account & Key を開きます。
登録したメールアドレスとライセンスキーを入力し、配布元のサーバーに情報を送ります（少し時間がかかるのでリロードしたりブラウザを閉じないこと！）。
承認メッセージが表示されたら成功です。

もう一度、会員ページの MY PLUGIN にアクセスし、利用中のURLがちゃんと表示されているか確認します。

これでPro版のフル機能が使えるようになります。お疲れさまでした。

By: 阿月まり Category: WPtouch-Pro Tags: WPtouch-Pro

WPtouch Proでカスタムポストを設定する ^{0}

ここではiPhone / iPad テンプレート最適化の有料プラグイン「WPtouch-Pro」でカスタムポストを表示する方法を紹介しています。

一般には表示の切り替えの難しいカスタムポストですが、WPtouch-Pro の場合、管理画面からカスタムポストを有効化し、function.phpにちょっとコードを書き加えるだけで、ラクラク表示されるようになります。通常テーマのようにsingle-●●.php を作る必要もありません。
カスタムポストを設定している場合、これがモバイルでもきちんと表示されるか否かでアクセスも大きく違ってきますので、ぜひ表示設定して、アクセスアップにお役立てください。

なお、無料の WPtouch-free にはカスタムポストのサポート機能がありませんので、お気を付けください。

§ 基本の設定

まず「テーマブラウザ」にて子テーマを作成します。この場合、「Classic」の「Copy As Child」をクリックします。

すると wp-content/wptouch-data/themes/classic-child-1/iphone/ に style.css と function.php が自動生成されます。plugin フォルダの wptouchpro のディレクトリとは異なりますので注意してください。

function.phpにお使いのデスクトップ・テーマ(PC表示用)に使用しているカスタムポスト設定と同じ内容をコピーして、アップロードします。（参照→カスタムポストの実用とカスタマイズ）
こういうの↓

次に、アクティブテーマ → Extentions → Custom Post Types で 表示したいカスタムポストを有効にします。

実際にiPhone もしくは iPad でカスタムポストのURLにアクセスし、きちんと表示されたら成功です。

※デスクトップ・テーマのようにsingle-●●.phpを作る必要はありません。

§ アーカイブにカスタムポストを含める

WPtouch-Proには、iPhoneやiPadに適した独自のArhivesが備わっています。
デフォルトの状態ではカスタムポストタイプはアーカイブリストに含まれないので、function.php に次のようなコードを記入します。

通常投稿のpostに加え、diary、love、という二種類のカスタムポストをアーカイブリストに含める場合。
Arhivesにもトップページのインデックスにも表示されるようになります。

add_filter( 'getarchives_where' , 'ucc_getarchives_where_filter' , 10 , 2 );
function ucc_getarchives_where_filter( $where , $r ) {
	$args = array( 'public' => true , '_builtin' => false );
	$output = 'names'; $operator = 'and';
	$post_types = get_post_types( $args , $output , $operator );
	$post_types = array_merge( $post_types , array( 'post','diary','love' ) );
	$post_types = "'" . implode( "' , '" , $post_types ) . "'";
	return str_replace( "post_type = 'post'" , "post_type IN ( $post_types )" , $where );
}

By: 阿月まり Category: WPtouch-Pro Tags: WPtouch-Pro, モバイル