※ 追記しました。
ワードプレスのプラグイン[WPtouch]を使用しているのですが、デフォルトの表示がいまいちなんでちょこっとカスタマイズしてます。
具体的には…
- 各ページの日付書式
- シングルページのSNSボタン追加
- メニューボタンの表示
- 関連記事 (YARPP) を表示
- Amazonを表示
…の2つ5つです。
以後もっと増えるかもしれませんけど、現状ではこんな感じ。
各ページの日付書式の変更
変更箇所は、次の通りです。
index.phpの変更箇所
ファイルの場所は…
ワードプレスをおいてあるディレクトリ/wp-content/plugins/wptouch/themes/default/
になります。
変更箇所は、30行目と111行目の2箇所になります。
変更前その1
<?php echo get_the_time('M') ?> <?php echo get_the_time('j') ?>, <?php echo get_the_time('Y') ?>
変更後その1
<?php echo get_the_time('Y') ?>-<?php echo get_the_time('m') ?>-<?php echo get_the_time('d') ?> <?php echo get_the_time('D') ?>
変更前その2
<?php if ($wptouch_settings['post-cal-thumb'] != 'calendar-icons') { ?><span class="lead"><?php _e("Written on", "wptouch"); ?></span> <?php echo get_the_time('d.m.Y') ?> <?php _e("at", "wptouch"); ?> <?php echo get_the_time('G:i') ?><br /><?php if (!bnc_show_author()) { echo '<br />';} ?><?php } ?>
変更後その2
<?php if ($wptouch_settings['post-cal-thumb'] != 'calendar-icons') { ?><span class="lead"><?php _e("Written on", "wptouch"); ?></span> <?php echo get_the_time('Y-m-d D') ?> <?php _e(" ", "wptouch"); ?> <?php echo get_the_time('H:i') ?><br /><?php if (!bnc_show_author()) { echo '<br />';} ?><?php } ?>
single.phpの変更箇所
ファイルの場所は…
ワードプレスをおいてあるディレクトリ/wp-content/plugins/wptouch/themes/default/
↑になります。
変更箇所は、8行目の1箇所になります。
変更前
<div class="single-post-meta-top"><?php echo get_the_time( __( 'M js, Y @ h:i a' , 'wptouch'
変更後
<div class="single-post-meta-top"><?php echo get_the_time( __( 'Y-m-d D H:i' , 'wptouch'
日付の書式について
上記でいったい何をしてるかというと、日付の書式をカスタムしています。
その際にPHPでの日付の書式についてちょこっとだけ説明。
このページからの抜粋になってしまいますが、書いてきましょう。
簡単な方のsingle.phpの8行目はデフォルトだと…
M jS, Y @ h:i a
…になります。
これだと、M(月。3 文字形式。) jS(日。先頭にゼロをつけない。&英語形式の序数を表すサフィックス。2 文字。), Y(年。4 桁の数字。) @ h(時。数字。12 時間単位。):i(分。先頭にゼロをつける。) a(午前または午後（小文字）)となり…
5月 6th, 2013 @ 06:04 pm
…という表示になる。
これを、”4桁の年-2桁の月（0つき）-2桁の日（0つき）曜日 24H単位の時:分”にしたいので…
Y-m-d D H:i
…という風に変更し…
2013-05-06 月 18:04
…と表示させることにした。
このあたりは、各個人の好みによる所が大きいと思うので、ご自由に設定してください。まぁ、僕の場合は、PC用テーマの日付表示と揃えたかっただけなんですけどね。
あ、曜日はおまけです（笑）。
シングルページのSNSボタン追加
これはちょっとややこしいです（笑）。というか、僕の頭の中で整理出来てないだけかもしれませんけど…（苦笑）。
以前、プラグインに頼らない方法でSNSボタンとOGPを追加したのですが、これをした事を前提として話を進めます。というか、僕ようのメモみたいなものなので、この辺りはご容赦ください。
手順
流れとしては、こんな感じ。
- プラグインのフォルダ/wptouch/themes/default/にsocial-button.phpとsocial-script.phpとheader_ogp.phpをアップロード。
- プラグインのフォルダ/wptouch/themes/default/single.phpの任意の位置にsocial-button.phpを呼び出す記述をする。
- プラグインのフォルダ/wptouch/themes/default/header.phpにsocial-script.phpを呼び出す記述をする。
- プラグインのフォルダ/wptouch/themes/core/core-header.phpにheader_ogp.phpを呼び出す記述をする。
- プラグインのフォルダ/wptouch/themes/default/style.cssにsocial-button.phpの内容に対するCSSを追加する。
- social-button.phpで使う画像を、任意の位置にアップロードしsocial-button.phpの画像のパスを変更。
…といった感じです。
メニューボタンの表示
僕だけなのかもしれませんが、右上にあるメニューボタンがこんな（←）感じに表示されていて、嫌な感じです…。
というわけで、これをどうにか直したいわけですが、どこをどうすれば良いのだろう？
そんなときは、とりあえずブラウザでソースを確認です。
ところが、iPhoneではソースが見れません。ではどうするか？Mac版Safariでしたら、「開発」＞「ユーザーエージェント」＞「Safari iOS 5.1 – iPhone」でiPhoneでアクセスしたときの表示が確認出来ます。その後、「ページのソースを表示」してソースを確認します。
すると…
<div id="headerbar-menu"> <a href="javascript:return false;">メニュー</a> </div>
…メニューの周辺はこんな感じでした。
ということは、divのidがheaderbar-menuという事で、style.cssでheaderbar-menuを検索しその辺りを変えれば表示も変わるだろうという事で、早速調べてみると…
#headerbar-menu {
position: absolute;
top: 0;
right: 0;
margin: 0;
padding: 0;
}
…とありました。
しかし、これだけでは表示が上の画像の様になってしまう原因は見つかりません。
ここで現状確認。iPhoneで見ると、横幅が一文字分しかなくまるで縦書きのようになっている…。ということは、横幅を指定してあげれば良いんじゃね？と思いつき、以下を追加してみた。
width: 100%;
そして、iPhoneで確認。
するとどうでしょう（笑）？良い感じです（笑）。
関連記事 (YARPP) の表示
せっかく関連記事を表示させるプラグインYet Another Related Posts Pluginをインストールしてあるのに、WPtouchで表示させないのはもったいないなという事で、表示させてみた。
手順
- YARPP用のテンプレートをアップ
- style.cssにYARPP用のCSSを追加
- single.phpの任意の場所にコードを挿入
…といった感じです。
YARPP用のテンプレートをアップ
まず、YARPP用のテンプレートを作ります。
僕の場合、「ワードプレスの場所/wp-content/plugins/yet-another-related-posts-plugin/yarpp-templates」内にある、yarpp-template-example.phpをコピーして内容を変えて、「ワードプレスの場所/wp-content/plugins/wptouch/themes/default」にアップします。
style.cssにYARPP用のCSSを追加
次に、「ワードプレスの場所/wp-content/plugins/wptouch/themes/default/style.css」にYARPP用のCSSを追加します。
CSSの内容は、各自お好みに合うようにどうぞ。
single.phpの任意の場所にコードを挿入
僕の場合、トップやアーカイブ一覧表示時には表示させないで、単一記事表示のみ表示させたいので、single.phpだけですが他のページにも表示させる場合には、該当するテンプレートに挿入してください。
挿入するコードは、以下の通りです。
<?php related_posts(); ?>
僕の場合は、記事内に表示させたかったので、該当する箇所に挿入しました。
Amazonを表示
これも、トップやアーカイブ一覧表示時には表示させないで、単一記事表示のみ表示させたいので、single.phpだけに挿入してます。
この件については、特に説明は要らないと思うので、省きます（笑）。
まとめというか…補足というか…
以上が、WPtouchに対するカスタマイズ内容です。
で、これを書いてる真の目的は、WPtouchをアップデートする際に、うっかりダッシュボードからアップデートしてしまうと、全てデフォルト値に戻ってしまうので、出来れば手動でアップデートが推奨…じゃなかった、しなさいよという自分への戒めなのです（笑）。
とはいえ、手動でアップデートするのも手間がかかるので、最低でも「プラグインのフォルダ/wptouch/themes/」をバックアップしておいて、アップデート後に「プラグインのフォルダ/wptouch/themes/」をアップロードすれば手間が軽減されるかな？
アップデート内容が、テーマの表示も変更になってるかもしれないので、素でアップデート後に表示を確認して、該当ファイルだけをアップデートするのが、一番無難かな？
細かいところもカスタムしてますが、ここで説明しなくてもわかる人にはわかると思うので、省きます（爆）。
Amazonで「WordPress プラグイン」を探す
コメント