完成イメージ

導入までの流れ

• iPhone用最適化プラグインインストール
• 有効化
• 初期設定
• 新規テーマ作成
• メイン画像の追加
• ソーシャルとの連携（WordTwit・WP Social Bookmarking Light・Twitterガジェット）

①まずはインストールしよう！

管理画面より「プラグイン」→「新規検索」を選択します。
プラグイン検索欄に「WP Touch」と入力し「プラグインの検索」をクリックします。

検索結果に「WP Touch」が表示されるので「いますぐインストール」を選択します。

「インストールが完了しました。」と表示されれば完了です！

早速、「プラグインを有効化」から有効化してみましょう！

管理画面の「設定」部分に「WP Touch」が表示されました。
これでiPhone用に最適化されました！

②日本語化しよう！

まず英語はわからないという人は、管理画面を日本語化しましょう。
「WP touch Language」から「Japanese」を選択します。

選択したら画面の一番下の「Save Options」から保存します。
これで日本語になりました。よかったよかった!!!

③自分のテーマを作成しよう！

まずはテーマを作成します。
wp-content/plugins/wptouch/themes/default/
先ほどダウンロードしたファイルから「default」テーマを丸ごとコピーします。
新しいテーマ名に変更します。今回は「new_themes」とします。

wptouch.phpのソース編集

次に、新しいテーマを読み込ませる為にファイルを変更します。

wp-content/plugins/wptouch/wptouch.php

「wptouch.php」（version：1.9.35）　602行目あたりと611行目あたりの2箇所

「default」の部分を新しいテーマ名「new_themes」に変更し、保存します。

 

④自分のテーマのメイン画像追加しよう！

画像main_img.jpg (w320 h200)を用意

用意できたら画像を下記の場所にフォルダを作成し、アップロードしましょう。
http://example.com/wp-content/plugins/wptouch/themes/new_themes/images/

header.phpのソース編集

画像を読み込ませるためにファイルを変更します。

http://example.com/wp-content/plugins/wptouch/themes/new_themes/header.php

ここの最終行にある

<?php wptouch_core_header_check_use(); ?>

このうえに

<!-- #start the wptouch plugin use check --><a href="http://example.com/"><img title="メインタイトル" src="http://example.com/wp-content/plugins/wptouch/themes/new_themes/images/main_img.jpg" alt="メインタイトル"/></a>

これを追加して保存！

ホームへリンクさせるのも忘れずに！！！

 

⑤ソーシャルボタンを設置

■ソーシャルプラグイン導入

• WP Social Bookmarking Light
  http://wordpress.org/extend/plugins/wp-social-bookmarking-light/
  

有効化するだけで、様々なソーシャルボタンを記事やページ内に挿入する事ができます。もちろんiPhoneでも閲覧できます。

■WordPress投稿内容をTwitterと連動させる（WordTwitプラグイン）

• ・WordTwit
  http://wordpress.org/extend/plugins/wordtwit/

Twitterアカウントを設定すればOK！
ドンドン投稿してみんなと記事を共有しよう！！！

■Twitterガジェットを表示させる方法

• Twitterガジェット
  http://twitter.com/goodies/widgets

こちらでTwitterガジェットのコードを取得します。

index.phpの書き換え

/wp-content/plugins/wptouch/themes/new_themes/index.php取得したコードはindex.phpを編集します。

149行目あたり

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

のソースの直前に先程のサイトで取得したコードを挿入します。

<div><script src=”http://widgets.twimg.com/j/2/widget.js”></script>    <script>    new TWTR.Widget({      version: 2,      type: ‘profile’,      rpp: 10,      interval: 6000,      width: ‘auto’,      height: 600,      theme: {        shell: {          background: ‘#09732c’,          color: ‘#ffffff’        },        tweets: {          background: ‘#ffffff’,          color: ‘#323232′,          links: ‘#3a64ad’        }      },      features: {        scrollbar: true,        loop: false,        live: true,        hashtags: true,        timestamp: true,        avatars: true,        behavior: ‘all’      }    }).render().setUser(‘Twitterのアカウント名’).start();    </script></div>

※注意点

• <div></div>で囲んでください
  
• width: ‘auto’,←横幅はautoにしてください
  
• setUser(‘Twitterのアカウント名’).←ツイッターアカウントを変更してください