人力検索はてな
モバイル版を表示しています。PC版はこちら
i-mobile

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

●質問者: kaji0245
●カテゴリ:ウェブ制作
○ 状態 :終了
└ 回答数 : 2/2件

▽最新の回答へ

1 ● oil999
●50ポイント

preg_match_allの引数が間違っています。
以下のように修正してみてください。

$output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches);
$first_img = $matches[1][0];

kaji0245さんのコメント
ありがとうございます。 シンタックスエラーは解除されましたが、サムネイル画像が表示されません(・・;)

2 ● rouge_2008
●50ポイント

「&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( ? )」とする必要がないので、代入の部分を削除しました。


rouge_2008さんのコメント
ちなみに「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さんのコメント
いつもありがとうございます。 カスタムフィールドテンプレートで写真項目を今回のサムネイルに指定させることは可能でしょうか?

rouge_2008さんのコメント
> カスタムフィールドテンプレートで写真項目を今回のサムネイルに指定させる すみません。どういう事をやりたいのでしょうか? カスタムフィールドテンプレートでアップロードした画像(※「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を返しますので、テンプレートの表示したい箇所に「&lt;?php echo catch_that_image(); ?&gt;」を記述します。(※imgタグを記述する必要はありません。)
関連質問

●質問をもっと探す●



0.人力検索はてなトップ
8.このページを友達に紹介
9.このページの先頭へ
対応機種一覧
お問い合わせ
ヘルプ/お知らせ
ログイン
無料ユーザー登録
はてなトップ