WPtouchをカスタマイズしてスマートフォン向けオリジナルテーマを作成してみました!

wptouch-2

ブログを始めてから約10ヶ月経ったのですが、そろそろ300記事を達成した際に掲げた目標の一つ、「半年以内に、スマーフォン向けにテーマを作成する」を達成しようとWPtouchをカスタマイズしてオリジナルテーマを作成してみました。

タイトルの画像が粗いのはお気にされずに…
ただ単にアップした画像が悪かとです! 

試行錯誤しながら変更等しましたので、試される際は自己責任でお願いします。

スポンサーリンク

WPtouch

wptouch-3 

今更なのですが、WPtouchは本当に便利です!
WPtouchをインストールし、有効化するだけでWordPressのサイトをスマーフォン(iPhone)用に最適化してくれるのですから…

ただ、使っておきながらなんですけど、このままの仕様だとオリジナリティーに欠けてしまうデザインの為、今回カスタマイズして、スマートフォン向けオリジナルテーマを作成しました。

今回カスタマイズしたところ

  • defaultのテーマをコピーしてカスタマイズ
  • タイトルをカスタマイズ
  • トップページのレイアウトを変更

defaultのテーマをコピーしてカスタマイズ

これ一番大事かも…って声を大にして言いたいです! 

WordPressを使用されている方はよくあると思いますが、プラグインがどんどんバージョンアップしますよね。そんなバージョンアップを何も考えずにしてしまうと、上書きされてしまい、あああ…

という結果になってしまったことって無いですか?
私はあるので、まず「default」のテーマ(フォルダごと)をコピーしフォルダ名を変更します。特になんでもいいと思います。私は「smart-phone」というフォルダにしました。ネーミングセンスのかけらが一つもない名前ですが…

※ここでは、「smart-phone」というフォルダ名で行っています。

…で、そもそも何処に「default」のテーマってあるのかといいますと、「plugins」の中の「wptouch」の「themes」の中にあります。

wp-content/plugins/wptouch/themes/default/

 この「default」のテーマをコピーして「smart-phone」という名前に変更し、カスタマイズしていくわけですが、じゃあ何処でこのテーマを選択するの?ってことになります。

特に、WPtouchの設定画面ではテーマ選択というものがありませんので、以下のファイルを開いて書き換えます。

開くファイルは、「plugins」の中の「wptouch」の中の「wptouch.php」というファイルになります。

wp-content/plugins/wptouch/wptouch.php

wptouch.phpを変更する

ファイルを開き、以下の部分を探します。

wptouch-4

この2ヵ所を「default」から今回は「smart-phone」に変更し保存します。

wptouch-5

以上で、オリジナルテーマが適応されていますが、現在「default」テーマと同じの為見た目変わりがありませんので、驚くかもしれませんが大丈夫です!

もしも、レイアウト等がおかしくなってもここを「default」に戻せば、元のテーマに戻りますので、これで安心してカスタマイズできます。

それでは、先程コピーして作成した「smart-phone」の中のファイルを使用して、カスタマイズしていきます。

タイトルをカスタマイズ 

まず、サイトの顔である、タイトルをカスタマイズしてみました。

tree-smartphone

上のような、200px × 117pxのタイトル画像を作成しました。
後ろの色とマッチさせるため、PNG画像を使用しています。

また、以下のアイコンを個人的に表示させたくは無かったので、まずそちらの処理から始めてみます。

wptouch-6

アイコンを外す

個人的にアイコンを表示させないように、以下の3行目のコードを外しました。

<div id="headerbar-title">
		<!-- This fetches the admin selection logo icon for the header, which is also the bookmark icon -->
		<a href="<?php echo home_url('/'); ?>"><img id="logo-icon" src="<?php echo bnc_get_title_image(); ?>" alt="<?php $str = bnc_get_header_title(); echo stripslashes($str); ?>" /></a>
		<a href="<?php echo home_url('/'); ?>"><?php wptouch_core_body_sitetitle(); ?></a>
	</div>

上から下のようにコードを外しました。

<div id="headerbar-title">
		<!-- This fetches the admin selection logo icon for the header, which is also the bookmark icon -->
		
        <a href="<?php echo home_url('/'); ?>"><?php wptouch_core_body_sitetitle(); ?></a>
	</div>

以上でアイコンは外れました。

次にタイトルを画像に変換する 

個人的に、タイトル画像を以下のフォルダにアップしました。

wp-content/plugins/wptouch/themes/core/core-images/tree-smartphone.png

画像をアップしたら、次にCSSを利用して背景に持ってきます。
元からあるCSSに上書きをする形をとります。

#headerbar-title a {
	letter-spacing: -1px;
	position: relative;
	display: block;
    width: 200px;
    height: 117px;
    text-indent: -9999px;
	overflow: hidden;
	background:url(../core/core-images/tree-smartphone.png) no-repeat;
}

これで、タイトルを画像に変更できました。

wptouch-7

トップページのレイアウトを変更 

次にトップページのレイアウトを変更してみました。

何がどうなったかと言いますと

wptouch-10

上のような感じにしてみました。

細かく説明致しますと、サムネイルの大きさを大きくし、投稿日を上に配置し、記事タイトルをその下に配置し、抜粋をサムネイルの右側に配置しました。

また、記事タイトルと抜粋を文字数で制限して表示させています。

記事タイトルと抜粋の文字数制限

どうしても、個人的に記事タイトルが長くなってしまうため、PCサイト向けのテーマでは全て表示できるように、タイトル部分を大きめに取っているのですが、それだとスマートフォンでは大きくなりがちです。

…ということで、記事タイトル及び抜粋に文字数で制限がかかるようにします。

まず、functions.phpに以下のコードを書きます。

/* 抜粋の代替え */
function my_excerpt( $length ) {
     global $post;
     $content = mb_substr( strip_tags( $post -> post_excerpt ), 0, $length );
     $content = $content . '...<a href="'. get_permalink() . '">'."すべてを読む".'</a>';
     return $content;
}

/* タイトルの代替え */
function trim_str_by_chars( $str, $len, $echo = true, $suffix = '...', $encoding = 'UTF-8' ) {
	if ( ! function_exists( 'mb_substr' ) || ! function_exists( 'mb_strlen' ) ) {
		return $str;
	}
	$len = (int)$len;
	if ( mb_strlen( $str = wp_specialchars_decode( strip_tags( $str ), ENT_QUOTES, $encoding ), $encoding ) > $len ) {
		$str = wp_specialchars( mb_substr( $str, 0, $len, $encoding ) . $suffix );
	}
	if ( $echo ) {
		echo $str;
	} else {
		return $str;
	}
}

次に表示させたい所に、抜粋なら

<?php echo my_excerpt(57); ?>

記事タイトルなら、

<?php trim_str_by_chars( get_the_title(), 58 );?>

と書きます。

※数字は調整して下さい!
 

レイアウトの変更 

次にレイアウトを変更しました。

元の「index.php」コードの順番を上から、投稿日・記事タイトル・サムネイル・抜粋の順に変更し、CSSで整えます。

<div class="post-author">
	    <?php if ($wptouch_settings['post-cal-thumb'] != 'calendar-icons') { ?><?php echo get_the_time('Y.m.d') ?>
	    <?php _e("投稿", "wptouch"); ?><?php if (!bnc_show_author()) { echo '<br />';} ?><?php } ?>
        <?php if (bnc_show_author()) { ?><span class="lead"><?php _e("By", "wptouch"); ?></span> <?php the_author(); ?><?php } ?>
	    <?php if (bnc_show_categories()) { echo('<span class="lead">' . __( 'Categories', 'wptouch' ) . ':</span> '); the_category(', '); echo('<br />'); } ?>            
		<?php if (bnc_show_tags() && get_the_tags()) { the_tags('<span class="lead">' . __( 'Tags', 'wptouch' ) . ':</span> ', ', ', ''); } ?>
	  </div>	
				
	  <!-- タイトル -->
      <a class="h2" href="<?php the_permalink(); ?>"> <?php trim_str_by_chars( get_the_title(), 58 );?></a>
                
				
      <!-- thumbnail -->				
	  <div class="wptouch-post-thumb-wrap">
	    <div class="wptouch-post-thumb">
			<?php if (has_post_thumbnail()) { ?>
				<?php the_post_thumbnail(); ?>
			<?php } else { ?>				
				<?php
				  $total = '24'; $file_type = '.jpg'; 
							
				  // Change to the location of the folder containing the images 
	              $image_folder = '' . compat_get_plugin_url( 'wptouch' ) . '/themes/core/core-images/thumbs/'; 
				  $start = '1'; $random = mt_rand($start, $total); $image_name = $random . $file_type; 
							
				  if ($wptouch_settings['post-cal-thumb'] == 'post-thumbnails-random') {
				    echo "<img src=\"$image_folder/$image_name\" alt=\"$image_name\" />";
				  } else {
				    echo '<img src="' . compat_get_plugin_url( 'wptouch' ) . '/themes/core/core-images/thumbs/thumb-empty.jpg" alt="thumbnail" />';
				  }?>
			<?php }  ?>
		</div>
	  </div>
	  <!-- end thumbnail -->    
    
      <!-- 抜粋 -->
      <div id="entry-<?php the_ID(); ?>" >
 		<?php echo my_excerpt(57); ?>
	  </div> 
	
	  <div class="clearer"></div>

CSSで整えたところ、以下のようになりました。

wptouch-8

※ここでは、CSSの具体的な変更等は参考にならないと思い割愛させて頂きました。

以上、今回大きくカスタマイズしたところです。

大変参考になりました、ありがとうございます!

あとがき

一概にスマートフォンに対応すべく方法はWPtouchだけでなく、jQuery Mobileやレスポンシブルデザイン、PC用とは別にスマートフォン向けにテーマを分けてプラグインで振り分ける方法などいろいろありますが、WPtouchを選んだ理由は…

この中で、一番楽そうだったから…

jQuery Mobileでも一度試してみましたが…zzzzz
という具合に、思考が止まりそうだったためWPtouchで行いました。

WPtouchが簡単!という訳ではないのですが、ただこれらの中ではというぐらいで、無い頭をフル活用し最大限に振り絞りましたので、現在はあしたのジョーの気分です(燃え尽きた…)

まとまりの無い長文にお付き合い頂き、ありがとうございます。
こんなブログですが、今後もよろしくお願い致します。
また、デザイン崩れなどありましたら、ご指摘頂ければ幸いです。 

スポンサーリンク