ページトップへ
このあたりをクリックするとトップに戻ります
  • 2011/06/27
  • No. 123

私がWPtouchのトップページ画面をカスタマイズするために行った5つのこと

1000001778

WordPressのテーマにこだわっている人はたくさんいらっしゃいますが、スマートフォン用のテーマにも少しこだわってみましょう。多くの方が使用しているWordpressのスマートフォン用プラグインWPtouchを私も使っています。といっても他人と全く同じは面白みに欠けるので、日々カスタマイズ少しずつ続けてきました。ここらである程度まとめて見たいと思います。記事が長くなること、また記事数を稼ぎたいということもあり、2回にわたって紹介していきます。今回はトップページ画面編です。

WPtouch導入しただけだと上のようなトップページ画面が表示されると思います。

index

ちなみに私のWPtouchのトップページ画面はこんな感じです。
番号ごとにカスタマイズの方法を紹介していきます。

1. カレンダーアイコンを表示しない

System

当ブログはそこまで日付に意味を持っているわけではなく、カレンダーアイコンにスペースを割くのもちょっとなぁ…とも思うのでカレンダーアイコンを非表示にしています。WPtouchのオプションの「General Settings」の「Text Justification Options」から「No Icon or Thumbnail」を選びます。ここで「No Icon or Thumbnail」を選べば記事のサムネイルが表示されるのかと思ったのですがそうでもなかったので続きは次の項目で。

2. 記事の最初の画像をサムネイルとして表示

「No Icon or Thumbnail」で記事のサムネイルが表示されないのでコードを追加して記事の最初の画像をサムネイルとして表示するようにしました。

/wp-content/plugins/wptouch/theme/default/function.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 = "http://knk-n.com/Default.jpg";
    }
    return $first_img;
}

を追加します。

http://knk-n.com/Default.jpg

の部分に画像が表示されなかった場合に表示させる画像のURLとその画像を用意しておきましょう。

そして、

/wp-content/plugins/wptouch/theme/default/index.php

(以下index.php)

で画像を追加したい箇所に

<a href="<?php the_permalink(); ?>" >
<img class="alignleft" src="<?php echo catch_that_image(); ?>" alt="" width="75" height="75" />
</a>

を追加すれば、記事の最初の画像をサムネイルとして表示することができます。widthheightは各自で変更してください。

個人的には<div class="post-author">の前あたりがいいんじゃないかと。

参考記事: 記事内の一番最初の画像を取得してサムネイル画像表示 | 簡単ホームページ作成支援-Detaramehp

3. 日付表示

1-1の方法ででカレンダーアイコンを非表示にすると日付が文字で表示されるようになるのですが日本人の日付の感覚からするとちょっと表示がおかしく見えます。例えば今日だと「Written on 27.06.2011 at “時刻”」という具合に。そこでフォーマットを少し変更します。

index.phpの130行目近くの

<?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)  @ h:i a') ?>

に変更して「Written on 2011/06/27(月) @ “時刻”」というフォーマットにしました。

4. はてなブックマークカウンターを表示する

index.phpの

<a class="h2" href="<?php the_permalink(); ?>">
    <?php the_title(); ?>
</a>

の下に

<a rel="nofollow" target="_blank" href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>">
    <img border="0" src="http://b.hatena.ne.jp/entry/image/<?php the_permalink(); ?>" alt=""/>
</a>

を追加します。

5. TwitterのFollow Meボタンをつける

WordPressプラグイン「Twitter Follow Me Box」を導入するとPC上のページにTwitterのFollow Meボタンが表示されるのですが、WPtouchでも同様に表示されるようです。ユーザ名やボタンの色、表示位置はオプションから設定してください。

System-1

おわりに

ごりゅごさんのエントリーを読んでGoogle Analyticsを導入してから2ヶ月近くが経とうとしています。

そんな中でスマートフォンから当ブログのアクセスが20%を超えているを知って、スマートフォン向けのテーマにも少しこだわってもいいんじゃないかと思ったのがカスタマイズをはじめようとしたきっかけでした。スマートフォンからのアクセスの多さに驚いたのをよく覚えています。

けっこうめんどうなこともありましたが見やすくなっていると幸いです。
次回は記事画面でのカスタマイズを紹介します。