WPtouchを使ってスマートフォン用の画面を公開していますが、最近結構スマートフォンからの

閲覧してくださる方が多いのに気づき、WPtouchの方も少しカスタマイズしてみました

サムネイル表示の仕方などを順にご紹介します

WPtouchのカスタマイズ手順

1 オリジナルのテーマ用のフォルダを作成

plugins / wptouch / themes にある defaultフォルダをコピーして

新たなテーマ名を作成します

私の場合はnewthemeというフォルダを作成して中のファイルはdefaultフォルダからコピーします

2 オリジナルテーマを使う様に設定

plugins / wptouch にある wptouch.php を編集します

wptouch.php 621行 630行 return ‘newtheme’; という風に

defaultから新しいテーマフォルダ名を入力します

これでWPtouchにてオリジナルのテーマをこのフォルダで作成していきます

3 テーマ内のファイルを確認

header.php ヘッダー部分のphpファイル

footer.php フッター部分のphpファイル

index.php ホーム画面のphpファイル

single.php 個別記事のphpファイル

page.php ページのphpファイル

comments.php コメント入力部分のphpファイル

functions.php 機能の追加等が出来るphpファイル

style.css WPtouchのこのオリジナルテーマのCSSファイル

とPC用のテーマと比べてシンプルなテーマ用ファイルになっています

順にカスタマイズを紹介していきます

1 カレンダーの日付を見やすく調整

私のブログでは日付はそんなに意味を持たないと思い

カレンダー表示しないとしています

その場合に日付が日本仕様ではない為に読みづらくなるために少し改良しました

index.php内 111行目

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

この部分を

<?php echo get_the_time('Y/m/d(D)') ?>

という形に変更して見やすい形にしています

2 サムネイル表示

functions.php内に下記コードを挿入します

下記コードは記事の一番初めの画像を取得して表示してくれます

function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];
if(empty($first_img)){ //Defines a default image
$first_img = "/images/default.jpg";
}
return $first_img;
}

functions.php は重要なファイルなので、変なスペース等が入ると動作しない

という場合がありますので、ご注意

次にサムネイル表示させたい場所に下記コードを挿入します

<a href="<?php the_permalink(); ?>" >

<img class="alignleft" src="<?php echo catch_that_image(); ?>" alt="" width="70" height="55" />

</a>

私の場合はindex.php内の<div class=”post-author”>の前に挿入しています

3 検索ボタンが小さいので少し大きく

検索ボタンが小さいので少しタップしにくいと思い文字を大きくしました

style.css内 274行目

font: bold 13px “Helvetica Neue”, Helvetica, Arial, sans-serif;

このフォントサイズを11pxから13pxと変更しています

4 ホーム画面などのアイコンを見やすく表示

これはWordpress内から簡単に設定出来るのですが

WPtouchの設定画面から変更が可能です

ホームメニューに表示したいページをチェックして

この画面の上にアイコンが並んでいるので、それを参考にページのアイコンを選んでいきます

他にもCSSなど色々と変更する事によって色々な設定が出来そうです

PCと違いインターフェイス等にもう少し工夫が要りそうですが

少しずつカスタマイズしていきたいと思います