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と違いインターフェイス等にもう少し工夫が要りそうですが
少しずつカスタマイズしていきたいと思います
この記事へのコメントはありません。