web-dev-qa-db-ja.com

The_post_thumbnail（）を変更/修正するにはどうすればよいですか。 HTML出力？

私はカスタムテーマの作成に取り組んでおり、このテーマに少しの間取り組んでいます。私はthe_post_thumbnail();関数のHTML出力を修正しようとしています。私は自分のサイトで網膜画像をサポートしようとしていて、バックエンドにプラグインをロードするよりもむしろ機能を自分のテーマに組み込もうとしているので、これを行う必要があります。

デフォルトでは、the_post_thumbnail();は単に here で見つけたget_the_post_thumbnail();を呼び出すだけです。私の最初の考えは 'post_thumbnail_html 'フィルタにプラグインすることでした、しかし私はそれがうまく動くようには思えません。そう...

ループ内で自分の投稿のサムネイルを呼び出す方法は次のとおりです。

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'unique-class-here', 'title' => 'unique-title-here')); ?>

これは、the_post_thumbnail();...を呼び出すときに出力する必要があるコードです。

<img src="" alt="" data-src="image.png" data-alt="Alt text" class="retina unique-class-here" />

そして、以下のコードは私が私のfunctions.phpファイルに現在持っているものです：

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $src = wp_get_attachment_image_src(get_post_thumbnail_id(), $size);
    $html = '<img src="" alt="" data-src="' . $src['0'] . '" data-alt="" class="retina" />';
    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

注意すべきことがいくつかあります。 'data-alt'属性に適切なメタデータテキストを渡す方法がわかりません。また、テーマ全体でカスタムのpost_thumbnailサイズを使用するので、必要な特定のpost_thumbnailサイズを渡すことができる必要があります。最後に、属性配列がデフォルトの 'retina'クラスとその配列内の他の属性に加えてクラスを渡す必要があることがわかります。

ご協力ありがとうございます。このトピックについてはあまりオンラインではありません。私の質問はこのコミュニティへの追加の投稿を正当化するのに十分なほど異なっていたと思いました。あなたが何か考え、解決策を持っているそして/または何か説明を必要とするかどうか私に知らせてください。

phpfunctionspost-thumbnailshtmlwp-get-attachment-image
7
kaffolder

わかりました、それで私は解決に達したかもしれないと思います。それは私が望んでいるほど素敵で簡単なことではありませんが、その場合も、デフォルトのWordpress機能を大幅に変更するには、場合によっては抜本的な対策が必要になります。 :)

これは私のサイト全体で Retinise.js プラグインで動作するように投稿サムネイル用のHTML出力を書き直す私の実用的な解決策です。もちろん、このコードは他の投稿サムネイルのHTML操作にも適応できます。

私のfunctions.phpファイルで、私はこの関数を作成しました：

<?php
function modify_post_thumbnail_html($html, $post_id, $post_thumbnail_id, $size, $attr) {
    $id = get_post_thumbnail_id(); // gets the id of the current post_thumbnail (in the loop)
    $src = wp_get_attachment_image_src($id, $size); // gets the image url specific to the passed in size (aka. custom image size)
    $alt = get_the_title($id); // gets the post thumbnail title
    $class = $attr['class']; // gets classes passed to the post thumbnail, defined here for easier function access

    // Check to see if a 'retina' class exists in the array when calling "the_post_thumbnail()", if so output different <img/> html
    if (strpos($class, 'retina') !== false) {
        $html = '<img src="" alt="" data-src="' . $src[0] . '" data-alt="' . $alt . '" class="' . $class . '" />';
    } else {
        $html = '<img src="' . $src[0] . '" alt="' . $alt . '" class="' . $class . '" />';
    }

    return $html;
}
add_filter('post_thumbnail_html', 'modify_post_thumbnail_html', 99, 5);
?>

それから、WPループでthe_post_thumbnail();を呼び出すときはいつでも、このコードを使用します。

<?php the_post_thumbnail('custom-thumbnail-size', array('class' => 'retina additional-class')); ?>

WPループの外側で操作している場合、このコードは（明らかに小さな変更で）動作するはずです。これが他の誰かに時間とフラストレーションを節約することを願っています！たぶん私がそれに遭遇したとき、私は私が私のテーマにどのように網膜サポートを焼き付けたかについてのQ&Aを終えるために完全な始めを掲示するつもりです。プラグインは使用されていません。

興味があるなら、正しい方向に誰かを向けるためのいくつかのリンクがあります！

8
kaffolder

ハックな解決策：

wordpressはデフォルトで多くのクラスを<img>に追加しているので、その振る舞いを強制的に変更しないのであれば、文字列class=の前にstr_replaceを介して何かを「注入」することができます。コードでは：

$image = get_the_post_thumbnail( $post->ID, 'medium', array( 'class' => 'myclass' ) );
$moreattrs = 'data-fullimg= "full.jpg"';

$image = str_replace('class=', $moreattrs.' class=', $image );

何かが "class ="で始まっているなら、それがあなたが望むものであると仮定するのはかなり安全です。もちろん、それはそのclass=を含む奇妙なファイル名でめちゃくちゃになるかもしれません、しかし特にワードプレスで、それは非常にありそうもありません。

<imgを検索して置き換えることもできます。それについて考えて、私はそれが少し安全であるべきだと思います。

2
Sebastian Schmid

たぶんあなたはwp_get_attachment_image_attributesにフックすることができます：

function my_custom_image_attributes( $attr, $attachment ) {
  remove_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');
  $image = wp_get_attachment_image_src( $attachment->ID, 'full' );
  $attr['data-src'] = $image[0];
  $attr['data-alt'] = $attachment->post_title;
  $attr['class'] .= ' retina';
  return $attr;
}
add_filter('wp_get_attachment_image_attributes','my_custom_image_attributes');

これはテストされ修正される必要があります。 サムネイルを投稿するためにクラス名を追加します （最後にvwp_get_attachment_imageソースコードをチェックしてください）.

あなたのテーマでthe_post_thumbnail()を呼び出す直前にフックを追加する必要があります。

また、私はあなたがdata-altとして何を使う必要があるのか​​わかりません、私の意見では、あなたはフィルタと共に渡されるattachementのフィールドを使うことができます（それはカスタムフィールドであることができます）。

0
Simon