WPtouchでスマホページに対応してみました!!

2013/05/26

今回、インストールしたのは、バージョン 1.9.6.3です。

wptouch_01 普通にプラグインの新規追加で、wptouchiで検索するとインストールできました。

 導入初期は、英文ですが、

これなら、私でも大丈夫みたいです。

 表示確認は、スマホで確認するのがベストですが、スマホを見ながら確認するのも面倒なので、ブラウザのSleipnir4を使用。

sleipnir4ツール>ユーザーエージェント>でAndrroidの表示ができるので、こちらで表示を見ながら設定。

以前は、Safariを使ってiPhoneの表示にして確認していたけど、セキュリティーの関係で、、、Windows版は、、、などどこかで見たような、、、

で、使用していない。Firefoxでは、携帯サイトの確認に使っていたけど、スマホ表示は不明。
(追記)Firefoxでも「ツール」の中にiPhone3Gの表示がありました。

〇一般的な設定

記事一覧のオプションで、表示するものと表示しないものをチェック

  1. タイトルの省略を有効にする (タイトルが長い場合に、折りたたまず省略する)
  2. 投稿者名を表示
  3. カテゴリーを表示
  4. タグを表示
  5. 抜粋を表示

投稿者名など必要ないものはチェックをはずす。

〇詳細オプション

Allow zooming on content
この項目だけ英文表示なんだけど、ここにチェックを入れるとスマホ表示で拡大ができるってものでした。
このほかは、必要に応じて、チェック!

〇プッシュ通知オプション

何もしないまま

〇スタイル&カラーオプション

ここで背景画像の選択や投稿タイトルのフォント、背景色などの設定ができる。

まず、背景を変更
wptouch_02背景画像は、wp-content\plugins\wptouch\themes\core\core-images\backgrounds と深い階層の中にありますね。この中で、まず使用しないだろうな?と思うような画像をファイル名を変えずに画像を入れ替えるということも出来るな!ということで、

skated-concrete、設定表示では、「ステーテッドコンクリート」と表示されるファイルをサイズはそのままで、画像のみ入れ替えて選択すると背景画像が変わった。

各項目の色の変更

タイトルテキストの色
ヘッダーの背景色
サブヘッダーの背景色
サイト全体のリンクの色

各RGBカラーコードは、ネット上で多くのみなさんによって公開されているので、助かります。
「RGBカラーコード」で検索するだけで、、、

〇Advertising, Stats & Custom Code

ここは、このままにしたけど、、、いいのか?わからないけど、、

〇デフォルト & カスタムアイコンプール

アイコンがいっぱいあるので、どれを使ったらいいのかわからないくらいだけど、とりあえず全部使用しない場合は、フォルダから削除したり、自分のサイトのアイコンを作っておけば表示される。

アイコンプールのフォルダは、wp-content\plugins\wptouch\images\icon-pool の中、
サイズは、31ピクセル×32ピクセルなので、そのサイズでアイコンを作成して、それだけを置くとそれだけしか表示されない。
 設定画面からもアップロードは可能ですが、削除はできないのではないかと思います。FTPで置き換えるしかないですね。

〇ロゴアイコン // メニュー項目 & ページアイコン

アップロードしたアイコンをロゴとして設定。
メニューとして表示する項目を設定。
メニューリストの表示順
各固定ページのアイコンも選択できる

ここで、マップアイコンやカレンダーアイコンは残しておいたほうがいいかも。

もう一つ、「メニュー」の表示が変です。横幅が小さくて表示が縦長に表示されているので、修正。
wp-content\plugins\wptouch\themes\default のstyle.css の222行付近、#headerbar-menuの設定に width:80px; を追加して、横幅を広げてあげた。

#headerbar-menu {
position: absolute;
width:80px;
top: 0;
right: 0;
margin: 0;
padding: 0;
}

と、ここまでで、「オプションを保存」してみた。で、以下の表示

wptouch_03〇大分県日田市の文字列(サブヘッダーに文字列)

サブヘッダーの部分は、デフォルトでは、検索アイコンが表示されているが、検索を表示しない設定にして、文字列を挿入してみた。

挿入箇所は、wp-content\plugins\wptouch\themes\default\header.phpの126行

<div id="drop-fade">
<div class="drop-mess">大分県日田市</div>

「drop-fade」がサブヘッダーなのでその中にdrop-messでクラス設定して、文字色をFFFにするなど設定してみました。このスペースも結構、使えますのね。文字列ではなくて、サブメニューとか置けそうです。

とりあえず、ここまでで、あとトップページを変更します。