*

WPtouchカスタマイズを4つ紹介 スマホ用テーマの更新をしました

公開日: : 最終更新日:2012/07/28 Wordpress

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

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

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

wptouch1

WPtouchのカスタマイズ手順

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

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

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

wptouch2

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

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

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

wptouch3

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用のテーマと比べてシンプルなテーマ用ファイルになっています

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

wptouch4

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

wptouch7

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

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

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

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内に下記コードを挿入します

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

wptouch8

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 検索ボタンが小さいので少し大きく

wptouch5

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

style.css内 274行目

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

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

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

wptouch6

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

wptouch9

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

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

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

wptouch11

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

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

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

 

  • このエントリーをはてなブックマークに追加

Message

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

 

    • Info (64)
    • Tips (129)
    • 市販ソフト (8)
    • 解決 (85)
    • 技あり (8)
    • 比較 (14)
    • Wordpress (15)
    • ハードウェア レビュー (26)
    • Windows8アプリ (2)
    • 美しいデスクトップを求めて (13)
    • Freesoft ゲーム (11)
    • 未分類 (1)



PAGE TOP ↑