どーも、インフルエンザから復帰した@masterpeace_21です。
今日は、先日紹介した「MASTERPEACE21のデザインを初心者ながら色々いじってみた。」で最後に触れたwptouchのカスタマイズについてです！
あなたもコレを見てかっこ良くwptouchをカスタマイズしてください。
まず、今回は本当に1番最初のまっさらな状態から紹介します。
また、バージョンアップで若干変わってくるかもしれないです。今回のバージョンは現時点で最新の1.9.38で背景テーマは「クラシック」です。
カスタマイズの前に下準備。
テーマをコピーして他の名前で保存しよう
まず、wptouchには、最初2種類のテーマが入っています。使われているのはdefaultというtheme。
今回はコレをカスタマイズしていきます。
その前に、defaultを書き換えるのでは無く、複製したものをカスタマイズしていきます。
なので、defaultをコピーし名前を変えて保存しましょう。
パスはwp-content/plugins/wptouch/themes/defaultです。
適用させるテーマを変更しよう
次に新しい名前で作成したテーマをwptouchに適用させます。
wp-content/plugins/wptouch/wptouch.phpを開いて編集します。
651行〜
function get_stylesheet( $stylesheet ) {
if ($this->applemobile && $this->desired_view == 'mobile') {
return 'default';
} else {
return $stylesheet;
}
}
659〜
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 'masterpeace21';
} else {
return $stylesheet;
}
}
function get_template( $template ) {
$this->bnc_filter_iphone();
if ($this->applemobile && $this->desired_view === 'mobile') {
return 'masterpeace21';
} else {
return $template;
}
}
に変更します。この時の名前は各個人で新しくコピーして作成した名前です。
これで、適用されるテーマが変更されました。
ヘッダーをカスタマイズしよう
まず、ヘッダーを変更する方法です。
今回、僕の場合シンプルにするために、標準で付いているMENUと検索は消して画像のみにしました。
まず、右のMenuと下の検索バーを削除します。
新しく作成したフォルダのheader.phpを編集します。
121行目らへんからある
以降を全て削除します。
そして最後に＜/div＞を付け加えます。
<div id="headerbar-menu"> <a href="javascript:return false;"></a> </div>
次にCSSにヘッダーの背景画像を変更するためstyle.cssを編集。
163行目らへんにある#headerにbackgroundを追加します。今回は黒で。
#headerbar {
width: 100%;
background-position: 0 0;
background-repeat: repeat-x;
height: 85px;
border-bottom: 1px solid #1E1E1E;
font-size: 19px;
-webkit-touch-callout: none;
background:black !important;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 1);
}
適度にheightも変更します。これで背景が黒くなりました。
また、シャドーを入れて影も付けます。
次にブログ名を画像に置き換えます。
先ほどのheader.phpの115行目らへんにある
<div id="headerbar">
<div id="headerbar-title">
<!-- This fetches the admin selection logo icon for the header, which is also the bookmark icon -->
<img id="logo-icon" src="<?php echo bnc_get_title_image(); ?>" alt="<?php $str = bnc_get_header_title(); echo stripslashes($str); ?>" />
<a href="<?php bloginfo('url'); ?>"><?php wptouch_core_body_sitetitle(); ?></a>
</div>
</div>
を
<div id="headerbar"> <div id="headerbar-title"> <a href="http://masterpeace21.com"> <img src="http://masterpeace21.com/wp-content/themes/portfolio-press/images/logo.png" alt="MasterPeace21" width="100%"> </a> </div> </div>
次にstyle.cssの174行目らへんの
#headerbar-title {
text-shadow: #242424 -1px -1px 1px;
padding-top: 10px;
padding-left: 10px;
display: block;
margin: 0;
border-style: none;
padding-bottom: 4px;
-o-text-overflow: ellipsis;
-ms-text-overflow: ellipsis;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
width: 85%;
font-weight: bold;
height: 29px;
}
を適宜変更します。今回の場合heightが足りないので変更するか削除。
また、widhtが85%になっているので100%に変えました。
ヘッダーは基本的には終わりです。
背景を設定しよう
まずwptouchの設定でダサいカレンダーアイコンなどを非表示にします。
次にダサい背景を変更してしまいましょう。
まず、僕はメインページでタイトル一覧の背景が白いのが嫌なんで変更します。
cssの787行目らへんにある.postを以下に変更
.classic-wptouch-bg {
background-image: url(好きな画像);
}
のURLを自分の好きな画像のパスに変更します。
ここは、wptouchで設定している背景によって行が異なるので注意。
記事ページを変更しよう
まず、僕が思ったのは枠いらない・・・ｗ
なのでborder等を削除します。style.cssにある
.post{
padding:10px;
}
に変更すれば、記事の枠は全部消えます。
次に、記事下にある変なのｗを削除します。
single.phpの36行目らへんから、
<div class="single-post-meta-bottom"> <?php wp_link_pages( 'before=<div class="post-page-nav">' . __( "Article Pages", "wptouch-pro" ) . ':&after=</div>&next_or_number=number&pagelink=page %&previouspagelink=»&nextpagelink=«' ); ?>
68行目までを削除します。
基本的にはこれで終わり
でっす。他にはソーシャルボタンや、Facebookコメントなどを付け足したくらいですね。
まずは、自分でやってみる事をオススメします。Safariの開発者モード(Goriさんに教えてもらった)でiOSのUAにして要素を見ながら一個ずつやれば、失敗せずに形になったものが出来上がると思います。
最後に・・・
実は、この記事は途中でインフルエンザのため1週間放置してました。
なので、内容に食い違いとかがあるかもしれないので投稿するのを躊躇したのですが、少しでも参考になればと思います。
