Skip to content
2011/07/01 / Javelina

WordPressプラグイン「WPtouch」のテーマを少しだけカスタマイズ

このブログのようにWordPress.comを使用したブログは、設置型のWordPressとは違って、スマートフォンでアクセスした時にスマートフォン向けの表示にしてくれるWPtouchが自動的に有効になります。(オフにすることもできますが)

WPtouchでの表示はやっぱりスマートフォン向けなだけあって、PC向けの表示に比べて格段に見やすいです。

なんとなく避けてたけど本家ブログ(設置型WordPress使用)のほうもスマートフォン向けの表示ができた方がいいよな・・・というわけで、本家のブログにもWPtouchプラグインを入れることにしました。

WPtouchのテーマはそのままで十分見やすいのですが、折角なので少しカスタマイズ。
以下のような点を自分好みに変更してみました。
 

新しいテーマフォルダを追加

まず、WPtouchにはテーマが一つ(default)しかないので、defaultの他に独自のテーマが使えるようにします。
wptouch\themes\内にあるdefaultというフォルダをコピーし、適当な名前をつけます。ここでは仮にnew_defaultとしておきます。

new_defaultフォルダを作ったら、wptouch\wptouch.phpを次のように修正します。

	function get_stylesheet( $stylesheet ) {
		if ($this->applemobile && $this->desired_view == 'mobile') {
			return 'default';//ここを修正する
		} else {
			return $stylesheet;
		}
	}
		  
	function get_template( $template ) {
		$this->bnc_filter_iphone();
		if ($this->applemobile && $this->desired_view === 'mobile') {
			return 'default';//ここを修正する
		} else {	   
			return $template;
		}
	}

これを

	function get_stylesheet( $stylesheet ) {
		if ($this->applemobile && $this->desired_view == 'mobile') {
			return 'new_default';//修正後
		} else {
			return $stylesheet;
		}
	}
		  
	function get_template( $template ) {
		$this->bnc_filter_iphone();
		if ($this->applemobile && $this->desired_view === 'mobile') {
			return 'new_default';//修正後
		} else {	   
			return $template;
		}
	}

このように。WPtouch1.9.30の場合ですが、修正箇所は559行目と568行目です。
今後プラグインがバージョンアップしても、この部分を修正し、new_defaultフォルダを再アップするだけでテーマを適用することができます。
 

背景を自分で用意したものに変更

通常ですとサイトの背景は6パターンから選択することができますが、今回は自分で用意した画像を使うことにしました。

まず、new_defaultフォルダに背景として使用したい画像を入れます。
次に、new_default\header.phpのbodyタグのclassに書かれている

<?php wptouch_core_body_background(); ?>

を削除します。

続いて、new_default\style.cssを編集して、bodyの背景画像を指定します。

body {
	margin: 0;
	padding: 0;
	font: 12px Helvetica;
	-webkit-text-size-adjust: none;
	min-height: 460px;
	background-image:url('./画像のファイル名');//この一文を追加
	background-repeat: repeat;
	background-position: 0 0;
}

もちろん、画像じゃなく、background-colorを指定してもOKです。
 

サイトタイトルをセリフ体に

サイトタイトルのゴシック体(サンセリフ体)をセリフ体に変更。
以下のようにnew_default\style.cssを編集。

#headerbar-title a{
font-family: HelveticaNeue-Bold, sans-serif;

これを

#headerbar-title a{
font-family: serif;

このように。
ついでに太字も解除しました。↓

#headerbar-title{
font-weight:bold;//この一文を削除

 

一部のテキストの色を変更

背景を暗めの色の画像にしたことで背景画像の上に直接表示される文字が見づらくなってしまったので、一部のテキストを明るい色の文字に変更。背景画像の上に直接表示される文字は以下のクラス・IDのcolorを修正すれば大体OKだと思います。

.result-text
.ajax
h3#comments, h3#respond
p.logged
form#commentform label
#footer
#secureimgdiv

ちなみに、あまり関係ないかもしれませんが念のためにtext-shadowの色も背景に近い色に設定しておいた方がよいかもです。
 

「関連エントリー」を表示

PC向けの方でSimilar Postsという関連エントリーを表示するプラグインを利用してるので、それをWPtouchにも使うことにしました。
new_default\single.phpの<!– Let’s rock the comments –>というコメントアウトの上に、

<?php if(!is_attachment()){?>
<div class="post">
<h3>関連する記事</h3>
<ul>
<?php similar_posts('limit=5&output_template=<li>{link}</li>');?>
</ul>
</div>
<?php }?>

このようにコードを挿入しました。

あとは修正したファイル(wptouch\wptouch.php)と、新テーマフォルダ(wptouch\themes\new_degault)をまるごとアップすれば完了です。
他にも固定ページごとにcssを追加したり、functions.phpをいじったりと軽微な修正をいくつかしましたが、大まかな変更点は上に記した通りです。

あとはWPtouchの管理画面上で、ファビコンの変更とリンク色の変更、タイトルの省略を無効、抜粋表示の無効などの設定を行いました。

それではどのように変わったかスクリーンショット。

WPtouchカスタムテーマ:インデックスページ

↑WPtouchカスタムテーマ:インデックスページ

WPtouchカスタムテーマ:記事単体ページ

↑WPtouchカスタムテーマ:記事単体ページ

 
とりあえず満足である!
 

カスタマイズに関しては、こちらの記事も併せてどうぞ。↓
WPTouchテーマのカスタマイズ(投稿日時・コメント日時、コメント欄のYouTubeURLの差し替え 他
 

携帯がスマートフォンじゃないからチェックできないという場合は、Google Chromeの起動オプションでUser Agentをスマートフォンに指定して、サイトにアクセスするとよいかもです。ChromeのUser Agentの変更は、ショートカットの「リンク先」の後ろに–user-agent=”指定したいブラウザのUserAgent”という風に記述して起動することで可能です。例えばiPhoneのUser Agentを指定する場合は↓※下に追記があります。
 

XPの場合
“C:\Documents and Settings\ユーザ名\Local Settings\Application Data\Google\Chrome\Application\chrome.exe” –user-agent=”Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A347 Safari/525.20″
 

Vista/Windows7の場合
C:\Users\ユーザー名\AppData\Local\Google\Chrome\Application\chrome.exe –user-agent=”Mozilla/5.0 (iPhone; U; CPU iPhone OS 2_0 like Mac OS X; ja-jp) AppleWebKit/525.18.1 (KHTML, like Gecko) Version/3.1.1 Mobile/5A347 Safari/525.20″
 

たぶんこんな感じでOKです。Firefoxならアドオンで。
 

2012年10月29日 追記:ChromeでのUA変更について
つい最近知ったのですが、Chromeの場合はバージョン17から、内臓されているデベロッパーツールの機能でいつでもユーザーエージェントの切替が可能になっていたようです。

参照サイト:適宜覚書-Fragmentsさん
拡張要らずでお手軽にGoogle Chromeのユーザエージェントを変更する方法 | 適宜覚書-Fragments

ショートカットに書き加えるより、デベロッパーツールを使用した方が手間も少ないし確実ですね。デベロッパーツールは、ブラウジング中Ctrl+Shift+Iで呼び出すことができます。詳しい方法は上記サイトを参考になさってみてください。

 

広告

コメントを残す

以下に詳細を記入するか、アイコンをクリックしてログインしてください。

WordPress.com ロゴ

WordPress.com アカウントを使ってコメントしています。 ログアウト / 変更 )

Twitter 画像

Twitter アカウントを使ってコメントしています。 ログアウト / 変更 )

Facebook の写真

Facebook アカウントを使ってコメントしています。 ログアウト / 変更 )

Google+ フォト

Google+ アカウントを使ってコメントしています。 ログアウト / 変更 )

%s と連携中

%d人のブロガーが「いいね」をつけました。