米が好き

過去2回に渡り紹介してきた『WPtouch』ですが、やっぱり自分で色々カスタマイズしないと気がすまないってんで、調べて色々触ってみました。
（過去記事：1回目、2回目）

私が今回試みた事。
1テーマを分ける。
2ファビコン付ける。
3トップページの表示をタイトルだけでなく、内容も見えるようにする。
4一部のカテゴリーを違う表示にする。
5PCと同じようなCSSにする。

元々の完成度が高い『WPtouch』なので、そんなに変更する箇所はありませんね。
要は自分好みの表示設定にしたいって事で。
文中に出てくる行番号などは、最新バージョンの『1.9.5』の場合です。


1テーマを分ける。
PCと同じで、テーマがiPhone用ってなだけですね。
PC版もiPhone版みたいにしようと思ったら出来る訳です。

で、『WPtouch』のテーマは以下の場所にあります。

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

この中に『index』『single』『page』『header』『footer』やスタイルシート等があります。
これをそのまま変更しても良いんですが、残念な事にWPtouchのバージョンアップ時にテーマ内も更新されてしまいます。
せっかく頑張って変更しても、これでは意味がありません。
で、defaultフォルダを丸ごとコピーして、新しいテーマを作りましょう。

wp-content/plugins/wptouch/themes/kome/

こんな感じにして、この『kome』内のファイルを変更していくことにしましょう。

で、どこでこのテーマのフォルダを読み出しているかと言うと、以下のファイルになります。

wp-content/plugins/wptouch/wptouch.php

このファイルを開き、以下の箇所を変更しましょう。

wptouch.php（version：1.9.5）　464行目～

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 'kome';
  } else {
    return $stylesheet;
  }
}
    
function get_template( $template ) {
  $this->bnc_filter_iphone();
  if ($this->applemobile && $this->desired_view === 'mobile') {
    return 'kome';
  } else {     
    return $template;
  }
}

新しく作ったテーマフォルダ名にします。
今後バージョンアップがあっても、ここを変更するだけの手間で済みます。（多分）


2ファビコン付ける。
これはとても簡単です。
管理画面の『WPtouch』ページを開き、以下の場所の『Upload Icon』をクリックして好みの画像をアップして、その下の『Loco Icon // Menu Items & Pages Icons』で選択するだけです。



3トップページの表示をタイトルだけでなく、内容も見えるようにする。
プラグインを使用した直後は、以下のような表示になっています。


これでは面白くないってんで、記事の内容をPCみたいにトップにも表示させてみましょう。
これも管理画面で行います。
以下の赤枠で囲んだチェックを外します。


で、以下のような表示になります。



4一部のカテゴリーを違う表示にする。
3のような表示でも良いんですが、私の場合『2ch まとめブログ』はPCで表示させないようにしてます。
今回私が一番したかった事が、
「2ch記事は表示させるけどタイトルのみ。
　その他の記事はPCのように全文（続きを読む以降の記事は隠す）表示させたい」
って事でした。

結論から言うと、こんな感じになります。


まずは全文表示させる方法です。
新しく作ったテーマフォルダ内の『index.php』を開きます。

index.php（version：1.9.5）　65行目～

<div id="entry-<?php the_ID(); ?>" <?php if (bnc_excerpt_enabled()) { ?>style="display:none"<?php } ?> class="mainentry <?php echo $wptouch_settings['style-text-size']; ?> <?php echo $wptouch_settings['style-text-justify']; ?>">
  <?php the_excerpt(); ?>
  <a class="read-more" href="<?php the_permalink() ?>"><?php _e( "Read This Post", "wptouch" ); ?></a>
</div>

上記の関数を、以下の関数に変更します。

<div id="entry-<?php the_ID(); ?>" <?php if (bnc_excerpt_enabled()) { ?>style="display:none"<?php } ?> class="mainentry <?php echo $wptouch_settings['style-text-size']; ?> <?php echo $wptouch_settings['style-text-justify']; ?>">
  <?php the_content(); ?>
  <a class="read-more" href="<?php the_permalink() ?>"><?php _e( "Read This Post", "wptouch" ); ?></a>
</div>

これで、タイトルだけでなくサムネ画像込みの全文表示になります。
しつこく書きますが、『続きを読む』以降の記事は表示されません。

しかし、これでは隠したい『2ch まとめブログ』も全文表示されてしまいます。
『index.php』を見てみると、以下のような事が分かります。

index.php（version：1.9.5）　58行目～

  <a class="h2" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <div class="post-author">
    <?php if (bnc_show_author()) { ?><span class="lead"><?php _e("Author", "wptouch"); ?>:</span> <?php the_author(); ?><br /><?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>  
  <div class="clearer"></div>  


  <div id="entry-<?php the_ID(); ?>" <?php  if (bnc_excerpt_enabled()) { ?>style="display:none"<?php } ?> class="mainentry <?php echo $wptouch_settings['style-text-size']; ?> <?php echo $wptouch_settings['style-text-justify']; ?>">
    <?php the_excerpt(); ?>
    <a class="read-more" href="<?php the_permalink() ?>"><?php _e( "Read This Post", "wptouch" ); ?></a>
  </div>  
</div>

本当は行間あいていませんが、上部がタイトル表示部分、下部が記事表示部分のようです。
では、これを踏まえて『記事表示部分を if文 で分けてみましょう。

全文書くとこんな感じです。（赤字が追加文）

  <?php
    foreach(get_the_category() as $category) {
    $cat_id = $category -> cat_ID;
    }
  ?>

  <a class="h2" href="<?php the_permalink(); ?>"><?php the_title(); ?></a>
  <div class="post-author">
    <?php if (bnc_show_author()) { ?><span class="lead"><?php _e("Author", "wptouch"); ?>:</span> <?php the_author(); ?><br /><?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>  
  <div class="clearer"></div>

  <?php if ($cat_id == 49) { ?>
  </div>

  <?php } else { ?>

  <div id="entry-<?php the_ID(); ?>" <?php if (bnc_excerpt_enabled()) { ?>style="display:none"<?php } ?> class="mainentry <?php echo $wptouch_settings['style-text-size']; ?> <?php echo $wptouch_settings['style-text-justify']; ?>">
    <?php the_content('<span></span>続きを読む >><br class="clear" />'); ?>
    <a class="read-more" href="<?php the_permalink() ?>"><?php _e( "Read This Post", "wptouch" ); ?></a>
  </div>
  <?php } ?>
</div>

一番最初の『foreach文』でカテゴリーIDを取得し、『$cat_id』に代入します。
後は、下部の記事表示を if文 で分岐させる訳です。
『49』ってのが、『2ch まとめブログ』のカテゴリーIDになります。
カテゴリーIDが『49』の場合は、下部を表示させず『</div>』で終了ってな訳です。
書いてみるとたったこれだけですが、これだけで2・3時間悩んでました…。

最初に書いた『foreach文』で、他にも色々出来そうですね。


5PCと同じようなCSSにする。
テーマフォルダ分けたんだから、CSSのファイル名も変えれば良いじゃん！
って思いましたが、CSSを読み出している箇所が以下の部分になります。

wp-content/plugins/wptouch/themes/core/core-header.php

そうなんです、バージョンアップ後の手間を考えるのであれば、『style-compressed.css』に書くしかないんです。
諦めて『style-compressed.css』に追加するか、以下のようなコードを入れて『style.css』メインにするしかありません。

@import "style.css";

私は『style-compressed.css』のコードは全てコメントアウトして、上記のコードを入れて『style.css』に追加コードを書いたりしています。

では、CSSを付け足して表示された内容です。

2ch リスト表示
before	after

『続きを読む』表示
before	after

記事詳細ページ
before	after

結構やりたいことやれてスッキリしました。
後は細かいCSSの調整ですが、その辺はちょこちょこ手を加えたいと思います。