Skip to content
2012/01/17 / Javelina

WPTouchテーマのカスタマイズ(投稿日時・コメント日時、コメント欄のYouTubeURLの差し替え 他)

くどいようですが、私の本家ブログDevilish Designでのお話しです。
(これ言っておかないと、このブログもWordPress.comを使用していて紛らわしいので)
最近WordPressやWPTouchで変更した箇所などをメモっておこうと思います。

ちなみに、これ以前にこちらの記事で紹介したカスタマイズを施してあります。↓
WordPressプラグイン「WPtouch」のテーマを少しだけカスタマイズ
 

WPouchのコメント欄の日付を修正

 
最近、WPTouchを見ていてふと気づいたのですが、コメントの日付がおかしい。
なんだか、 “2月s, 2週s 前” という風に表示されています。↓
 

 
これは多分、ツイッターのように”2ヶ月前”とか”2週間前”という表示方法なのかな?そうだとしたら日本語化がうまくいっていないようです。

ここで通常ならば正確な日本語に直す所なんですが、私の場合は普通に日付・時間表示の方が良いので以下のように修正しました。

修正ファイルはwp-content/plugins/wptouch/themes/default(テーマを別名でカスタムしている場合はそのフォルダ)/comments.phpです。
 

 
/*comments.php*/

<?php if (function_exists('wptouch_time_since')) { 
     echo wptouch_time_since(abs(strtotime($comment->comment_date_gmt . " GMT")), time()) . " " . __( 'ago', 'wptouch' ); } else { the_time('F jS, Y'); 
} ?>	

↑この部分を下のように変更

<?php echo get_comment_date() . ' at ' . get_comment_time('G:i');?>
  

 
get_comment_date()をそのままで出力するとM jS, Y(Nov 3rd, 2011のような表記)の形で出力されるのですが、私はこのままが好きなので敢えて変更していません。

普通に2011/12/3のような表記にする場合はget_comment_date(‘Y/n/j’)と書けばOKです。

ちなみにget_comment_timeをそのまま出力するとg:i a(11:30 amなど)の形で出力されます。こちらは24時間単位にしてam/pm記号を出さないようにしています。

これで、以下のようにコメントの日付・時間を表示することができました。
 

 

WPTouchの記事一覧ページ・記事単体ページの日付を修正

 
また、WPTouchの記事一覧ページと記事単体ページ(WPTouchテーマフォルダのindex.phpとsingle.php)の日付表示も変更しました。こちらは特に表示がおかしくなっているわけではないのですが、コメントの日付と同じ形式で表示するように調整しました。

それと、私はインデックスページは投稿日のカレンダーアイコンが出る設定にしているのですが、その場合投稿日時が表示されないのでカレンダーアイコンを設定している場合でも表示されるように変更しました。また、”By 著作者”を改行しないようにbrタグを削除しました。

変更箇所は以下の通りです。
 

 
/*index.php*/(127行目あたり)

<?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 } ?>

↑この部分を下のように変更

<span class="lead"><?php _e("Written on", "wptouch"); ?></span> <?php echo get_the_time() ?> <?php _e("at", "wptouch"); ?> <?php echo get_the_time('G:i') ?>
 
 
/*single.php*/(8行目あたり)

<?php echo get_the_time('M jS, Y @ h:i a') ?> &rsaquo; <?php the_author() ?>

↑この部分を下のように変更

<?php echo get_the_time() ?> <?php _e("at", "wptouch"); ?> <?php echo get_the_time('G:i') ?> By <?php the_author() ?>
 

 

WPTouchのコメント欄に書かれたYouTubeのURLを画像リンクに

 
PC向け表示でのコメント表示では、YouTubeのURLを書き込んだ時に自動でoEmbed埋め込みをしてくれる
oEmbed for Commentsというプラグイン(YouTubeだけではなくVimeoやFlickrなどにも対応。詳しくはリンク先をご覧下さい)を有効にしているのですが、
WPtouchのコメント欄では動画のサムネイル+リンクという形にしたかったので、functions.phpを以下のように編集して対応してみました。

修正ファイルはwp-content/plugins/wptouch/themes/default(テーマを別名でカスタムしている場合はそのフォルダ)/functions.phpとstyle.cssです。
 

 
/*functions.php*/(以下を新たに記述)

function youtube_on_comments($comenttext) {
$comenttext = get_comment_text();
       $search = array(
       "/http\:\/\/(www.youtube.com|youtube.com)\/(v\/|watch\?v=|embed\/)([a-zA-Z0-9\-_]*)/",
       "/http\:\/\/youtu.be\/([a-zA-Z0-9\-_]*)/"
       );
       $replace = array(
       '<a class="youtube_video" href="http://m.youtube.com/#/watch?v=$3"><img class="youtube_thumbnail" src="http://i.ytimg.com/vi/$3/hqdefault.jpg" /><img class="movie_start" src="images/movie_start.png" alt="start" width="50" height="50" /></a>',
       '<a class="youtube_video" href="http://m.youtube.com/#/watch?v=$1"><img class="youtube_thumbnail" src="http://i.ytimg.com/vi/$1/hqdefault.jpg" /><img class="movie_start" src="images/movie_start.png" alt="start" width="50" height="50" /></a>',
       ); 

       $comenttext = preg_replace($search, $replace, $comenttext); 
return $comenttext;
}

add_filter('comment_text', 'youtube_on_comments', 10);
 
 
/*style.css*/(以下を新たに記述)

a.youtube_video{
display:block;
width:100%;
max-width:300px;
height:auto;
position:relative;
margin:0 auto;
padding:0;
}
a.youtube_video img.youtube_thumbnail{
display:block;
width:100%;
max-width:300px;
height:auto;
position:relative;
z-index:10;
margin:0;
padding:0;
border:none;
}
a.youtube_video img.movie_start{
display:block;
width:50px;
height:50px;
position:absolute;
z-index:20;
left:50%;
top:50%;
margin:-25px 0 0 -25px;
padding:0;
border:none;
}
 

 
これで、コメントにyoutubeの動画のURLを記述すると下のように表示されるようになります。
 

 
ちなみに上記のコードで使用した再生ボタン画像はこちらです。(白の透過pngなのでブラウザで表示しても恐らく見えないと思います)
 
上記のコメントでのYouTubeのURLの表示変更は、投稿の本文内でも同様に処理することはできます(自動埋め込みを切っている場合)。

一応、その場合の書き方ですが、下記のコードでOKだと思います。

 
/*functions.php*/(以下を新たに記述)

function youtube_on_content($content) {
       $search = array(
       "/http\:\/\/(www.youtube.com|youtube.com)\/(v\/|watch\?v=|embed\/)([a-zA-Z0-9\-_]*)/",
       "/http\:\/\/youtu.be\/([a-zA-Z0-9\-_]*)/"
       );
       $replace = array(
       '<a class="youtube_video" href="http://m.youtube.com/#/watch?v=$3"><img class="youtube_thumbnail" src="http://i.ytimg.com/vi/$3/hqdefault.jpg" /><img class="movie_start" src="images/movie_start.png" alt="start" width="50" height="50" /></a>',
       '<a class="youtube_video" href="http://m.youtube.com/#/watch?v=$1"><img class="youtube_thumbnail" src="http://i.ytimg.com/vi/$1/hqdefault.jpg" /><img class="movie_start" src="images/movie_start.png" alt="start" width="50" height="50" /></a>',
       ); 

       $content = preg_replace($search, $replace, $content); 
return $content;
}

add_filter('the_content', 'youtube_on_content', 2);
 

 

WPTouchのメニューをわかりやすく・タッチしやすくカスタマイズ

 
WPTouchでは、画面上部のタイトルバーの右端に▼マークがあり、これが固定ページ・カテゴリー・タグの一覧を呼び出すボタンになっているのですが、ボタンが小さいためこれが非常に分かりづらく押しづらい。なのでボタンを大きく見えやすく、またタッチしやすくカスタマイズしました。

修正ファイルはwp-content/plugins/wptouch/themes/default(テーマを別名でカスタムしている場合はそのフォルダ)/style.cssと、ボタンになる部分の画像(85px×90px)が必要です。
 

 
/*style.css*/

#headerbar-menu a {
	height: 45px;
	display: block;
	background: url(../core/core-images/wptouch-menu-dropper.png) 0 0;
	width: 30px;
	margin: 0;
	padding: 0;
}

↑この部分を下のように変更

#headerbar-menu a {
	height: 45px;
	display: block;
	background: url('作成したメニューボタンのURL') 0 0;
	width: 85px;
	margin: 0;
	padding: 0;
}
 

 

 
ちなみに上記のコードで使用したメニューボタン画像はこちらです。

メニューボタンのカスタマイズは、こちらのサイトを参考にさせていただきました。

WPtouchのメニューをカスタマイズする方法|webデザイン初心者が中級デザイナーになるためのブログ
 

広告

コメントを残す

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

WordPress.com ロゴ

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

Twitter 画像

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

Facebook の写真

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

Google+ フォト

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

%s と連携中

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