kaji0245回答ポイント 100pt

wp-touchのサムネイル画像の修正をしたく以下のサイトを参考に修正中です。

http://knk-n.com/2011/06/27/wptouch-top/

しかしながら、以下の行でシンタックスエラーになります。
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

コピー分は以下のブロックです。
function catch_that_image() {
global $post, $posts;
$first_img = '';
ob_start();
ob_end_clean();
$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches [1] [0];

if(empty($first_img)){ //Defines a default image
$first_img = "http://knk-n.com/Default.jpg";
}
return $first_img;
}

※ 有料アンケート・ポイント付き質問機能は2023年2月28日に終了しました。

ログインして回答する

みんなの回答

oil9992013/01/21 23:28:19
満足50pt
preg_match_allの引数が間違っています。
以下のように修正してみてください。
```
$output = preg_match_all('/&lt;img.+src=[\'"]([^\'"]+)[\'"].*&gt;/i', $post->post_content, $matches);
$first_img = $matches[1][0];
```
スター
- 1件のコメントを見る
- kaji0245 2013/01/22 01:33:41
  
  ありがとうございます。
  シンタックスエラーは解除されましたが、サムネイル画像が表示されません(・・;)
  
  スター

rouge_20082013/01/22 16:54:32
満足50pt

「＆lt;」を「<」、「＆gt;」を「>」に修正する必要があります。(記事の投稿時にコードが自動変換されたのでしょうか・・・)
※一応「.*」の直後(※「>」の直前)に「?」も追加した方が良さそうです。

※これで画像は表示されますが、投稿から取得した画像を「width="75" height="75"」で縮小表示しているだけですので、これだけだと元画像のサイズによっては画像が縦横どちらかが伸びて表示されてしまいます。
サムネイル画像は正方形の画像(※デフォルトで150×150)の設定になっていますので、縮小表示の場合も綺麗に表示されます。
次のようにして一番目の投稿画像のサムネイル画像のURLを取得して、その画像を縮小表示するようにしてみてください。

function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
	preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*?>/i', $post->post_content, $matches); // この行を修正済み
	//$first_img = $matches[1][0]; // ※この行を削除して次の行を追加※
	$first_img = preg_replace('/^(http:.+?)(?:-[0-9]{2,3}x[0-9]{2,3})?\.(jpe?g|gif|png)$/', '$1-150x150.$2', $matches[1][0]);
 
	if(empty($first_img)){ //Defines a default image
		$first_img = "http://knk-n.com/Default.jpg"; // 投稿画像がない場合のデフォルト画像の指定と画像のアップロードを忘れずに・・・
	}
	return $first_img;
}

※サムネイル画像のサイズ設定は正方形になるようにして、「設定」→「メディア」で「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」にチェックを入れておく必要があります。

【追記】

※サムネイル画像の設定を150×150以外にしている場合は、置換の指定「'$1-150x150.$2'」をサムネイル画像の設定サイズに合わせて変更するといいです。(※縦横180×180に設定している場合は、「'$1-180x180.$2'」になります。)
※これらの画像サイズ等の設定は、設定変更後から有効になり、画像アップロード時に一緒に作成されます。(以前投稿した画像には反映されません。)
※これまで「サムネイルを実寸法にトリミングする (通常は相対的な縮小によりサムネイルを作ります)」にチェックが入っていなかった場合は、正方形のサムネイル画像は作成されていませんので、手動で作成してFTPでアップロードしてください。(サムネイル画像のファイル名は、「元画像のファイル名-150x150.拡張子」のように元画像のファイル名に続けてハイフンとサイズが続きます。)

【※修正済み※】

回答のコードを少し修正済みです。
「$output = preg_match_all( ～ )」とする必要がないので、代入の部分を削除しました。

スター

3件のコメントを見る
rouge_2008 2013/01/22 17:31:35
ちなみに「add_image_size()」を使用すると、任意のサイズの画像が作成されるようになります。
既存の投稿画像がない(※既存画像の分は手動で対応可能な)状態なのでしたら、WPtouchで表示する画像サイズを追加して、直接表示しても良さそうです。

テーマの「functions.php」に次のように追記すると、100×100の画像が画像アップロード時に一緒に作成されますので、上記の置換の設定でこの画像サイズを指定するだけです。
```
add_image_size( 'mobile-thumbnail', 100, 100, true );
```
※画像サイズの名前は任意です。(このサイズ名は「wp_get_attachment_image()」などの関数で表示する際に利用します。)
※第4引数は必ず「true」を指定します。(デフォルトでは「false」ですが、相対的な縮小で作成されてしまうので、元画像が正方形ではない場合に正方形になりません。)

http://elearn.jp/wpman/function/add_image_size.html

スター
kaji0245 2013/01/23 00:07:58

いつもありがとうございます。
カスタムフィールドテンプレートで写真項目を今回のサムネイルに指定させることは可能でしょうか？

スター
rouge_2008 2013/01/23 08:16:35
> カスタムフィールドテンプレートで写真項目を今回のサムネイルに指定させる

すみません。どういう事をやりたいのでしょうか？
カスタムフィールドテンプレートでアップロードした画像(※「type = file」)を、WPtouchの記事一覧のサムネイル画像として表示させるという事でしょうか？
その場合は、次のようになります。
```
function catch_that_image() {
	global $post, $posts;
	$first_img = '';
	ob_start();
	ob_end_clean();
 
	$thumb_img = wp_get_attachment_image(get_post_meta($post->ID,'カスタムフィールドの名前',true));

	// サムネイル画像(「150×150」や「180×180」等)を任意のサイズに縮小して表示する場合は、次の行を有効にします。(※「85×85」で表示する場合になっていますが、任意のサイズに変更してください。)
	//$thumb_img = preg_replace('/^(<img.+)width="150" height="150"([^>]+>)$/', '$1width="85" height="85"$2', $thumb_img);

	if(empty($thumb_img)){ //Defines a default image
		$thumb_img = "http://knk-n.com/Default.jpg";
	}
	return $thumb_img;
}
```
※「wp_get_attachment_image()」はデフォルトでサムネイル画像('thumbnail')を表示するHTMLを返します。

「add_image_size()」で追加したオリジナルサイズの画像を表示したい場合は、「wp_get_attachment_image()」の第2引数に画像のサイズ名を指定します。
```
	$thumb_img = wp_get_attachment_image(get_post_meta($post->ID,'カスタムフィールドの名前',true), 'mobile-thumbnail');
```
※上記は「add_image_size('mobile-thumbnail'～)」で追加した画像サイズを表示する場合

http://elearn.jp/wpman/function/wp_get_attachment_image.html

※上記どちらを利用する場合も、画像を表示するHTMLを返しますので、テンプレートの表示したい箇所に「<?php echo catch_that_image(); ?>」を記述します。(※imgタグを記述する必要はありません。)

スター

その他の回答を読む

この質問へのコメント

コメントはありません

この質問への反応（ブックマークコメント）

質問の情報

登録日時: 2013-01-21 20:18:28
終了日時: 2013-01-28 20:20:03
回答条件: 1人5回まで

この質問のカテゴリ

ウェブ制作

wp-touchのサムネイル画像の修正をしたく以下のサイトを参考に修正中です。

みんなの回答

oil9992013/01/21 23:28:19
満足50pt

kaji0245 2013/01/22 01:33:41

rouge_20082013/01/22 16:54:32
満足50pt

rouge_2008 2013/01/22 17:31:35

kaji0245 2013/01/23 00:07:58

rouge_2008 2013/01/23 08:16:35

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

wp-touchのサムネイル画像の修正をしたく以下のサイトを参考に修正中です。

みんなの回答

oil9992013/01/21 23:28:19 満足50pt

kaji0245 2013/01/22 01:33:41

rouge_20082013/01/22 16:54:32 満足50pt

rouge_2008 2013/01/22 17:31:35

kaji0245 2013/01/23 00:07:58

rouge_2008 2013/01/23 08:16:35

この質問へのコメント

この質問への反応（ブックマークコメント）

質問の情報

この質問のカテゴリ

この質問に含まれるキーワード

人気の質問

メニュー

PC版

oil9992013/01/21 23:28:19
満足50pt

rouge_20082013/01/22 16:54:32
満足50pt