index.phpにアイキャッチ画像を設定

  • ノッブス

    (@ngoa)


    8年、 1ヶ月前

    最近はSNSなどにURLをコピペすると、アイキャッチ画像とタイトル、抜粋文が表示されるケースがよくあるのですが、Wordpressのそれぞれの投稿のモノは、アイキャッチ画像を設定していればそれが表示されて便利なのですが、index.phpをトップに設定しているとアイキャッチ画像が設定できず、アイキャッチ画像がSNSに表示されなかったり、意図しない画像がアイキャッチ画像として表示されたりします。

    index.phpやcategory.php、archive.phpに特定のアイキャッチ画像を設定する方法はありますか？

    以下をfunction.phpに書き込む方法はみつけたのですが、これだとページ毎に設定できないようでした。

    if (has_post_thumbnail()) {
	the_post_thumbnail();
}else {
	echo '<img src="' . get_bloginfo('template_directory') . '/images/default.png' . '" width="300" height="186" alt="thumbnail" />';
}<del datetime="2016-10-17T07:52:05+00:00">
    • このトピックはノッブスが8年、 1ヶ月前に変更しました。
    • このトピックはノッブスが8年、 1ヶ月前に変更しました。
11件の返信を表示中 - 1 - 11件目 (全11件中)
  • Takahashi Fumiki

    (@takahashi_fumiki)

    8年、 1ヶ月前

    > 最近はSNSなどにURLをコピペすると、アイキャッチ画像とタイトル、抜粋文が表示されるケースがよくあるのですが

    これはOGPという特定のタグをhead内に書く規約に則ったものが表示されています。こんなの↓

    `
    <meta property=”og:image” content=”/path/to/image.jpg” />
    `

    https://developers.facebook.com/tools/debug/
    ↑で確認できます。

    で、おそらくはなんらかのプラグインによってそのOGPが自動で設定されていると思うのですが、そのプラグイン次第で対応方法は変わります。
    Jetpackとか使ってますか？

    トピック投稿者 ノッブス

    (@ngoa)

    8年、 1ヶ月前

    Takahashiさん、ご返信ありがとうございます。

    はい、Jetpack使ってます！

    Takahashi Fumiki

    (@takahashi_fumiki)

    8年、 1ヶ月前

    http://news.kynosarges.org/2014/02/17/default-opengraph-image-for-jetpack/

    上の記事によると、このやり方でデフォルトの画像を設定できるみたいですよ。

    
add_filter( 'jetpack_open_graph_image_default', function() {
    return get_template_directory_uri() . '/images/default.png';
});
    トピック投稿者 ノッブス

    (@ngoa)

    8年、 1ヶ月前

    add_filter( 'jetpack_open_graph_image_default', function() {
    return get_template_directory_uri() . '/images/default.png';
});

    こちらだとサイトの左上に画像が表示されるもの、
    <meta property=”og:image” content=”https://s0.wp.com/i/blank.jpg&#8221; />
    のままでした。

    以下の様にもしてみましたが、やはり
    <meta property=”og:image” content=”https://s0.wp.com/i/blank.jpg&#8221; />
    このままでした。

    /**
 * Adds default OpenGraph image.
 * Christoph Nahr 2014-02-28
 * @param array $tags Array of OpenGraph tags.
 * @return Specified array, possibly modified.
 */
function add_default_image( $tags ) {

    // replace blank Jetpack default image with site header
    if ( $tags['og:image'][0] == "http://wordpress.com/i/blank.jpg" ) {
        unset( $tags['og:image'][0] );
        $tags['og:image'][0] = 'http://mushikago.com/i/appsmemo_logo.png';
    }

    // always remove useless HTTPS image tags
    unset( $tags['og:image:secure_url'] );

    return $tags;
}
add_filter( 'jetpack_open_graph_tags', 'add_default_image' );

    Jetpackの共有とパブリサイズをoffにもして見ましたがかわりませんでした。

    Takahashi Fumiki

    (@takahashi_fumiki)

    8年、 1ヶ月前

    サイトアイコンとか設定してますか？　している場合は、それが使われるらしいですが……
    そもそもフィルターがきいているのかどうかがわからないので、フィルターがきちんと動作しているか、次のコードで試してみるのはどうでしょう？　稼働中のサイトだとできませんが。

    
add_filter( 'jetpack_open_graph_tags', function($tags){
    // ここでタグを書き換える
    // ためしに全部出力してから強制終了してみる
    var_dump($tags);
    exit;
    return $tags;
} );
    トピック投稿者 ノッブス

    (@ngoa)

    8年、 1ヶ月前

    なんどもありがとうございます。

    ためしてもみましたが、正常にすべてvar_dumpされました。
    og:image以外は正常でした。

    og:image” content=”https://s0.wp.com/i/blank.jpg
    となっておりました。

    Takahashi Fumiki

    (@takahashi_fumiki)

    8年、 1ヶ月前

    では、そこで og:image を入れ替えたら動きませんかね？ ちょっとJetpackを使っているサイトをすぐいじれる状況ではないのであれですが……

    
add_filter( 'jetpack_open_graph_tags', function($tags){
    // トップページならog_imageを書き換え
    if ( is_front_page() || is_home() ) {
        $tags['og:image'] = get_template_directory_uri() . '/images/default.png';
    }
    return $tags;
} );

    処理上はog:imageとog:image:secureがありえるようですが、 @ngoa さんのサイトがそれを使っているかどうかはちょっとわからないので、必要だと思われる部分を書き換えてみてください。

    トピック投稿者 ノッブス

    (@ngoa)

    8年、 1ヶ月前

    やはり変わらないです。
    default.png　ももちろん実際のファイル名に書き換え、アップロードもしてしておりますが、
    <meta property=”og:image” content=”https://s0.wp.com/i/blank.jpg&#8221; />
    のままです。

    エラーくらい出て欲しいのですが。

    oisit

    (@oisit)

    8年、 1ヶ月前

    あんまり関係なさそうだが、いくつかの事柄。
    1.例示のadd_filterの書き方、PHPのバージョンによっては、機能しないかも。
    add_filterで検索（googleとかで）して参考にしてみてください。
    2.スレ主のwordpressのテンプレート階層に対する理解度
    該当のテンプレがなければ、すべてのページでindex.phpは使われますが、ご存知ですか。
    テンプレート階層で検索すると出てくると思うので参考にしてみてはどうでしょう。
    関係なければ時間を無駄にさせてごめんなさい。特に2。

    トピック投稿者 ノッブス

    (@ngoa)

    8年、 1ヶ月前

    テンプレートファイルを作って、それをフロントページに設定するしかないですかね？

    Takahashi Fumiki

    (@takahashi_fumiki)

    8年、 1ヶ月前

    @ngoa やり方はいろいろあるのですが、JetPackほどよく使われているプラグインが「フロントページだけOGPをカスタマイズできない」ということはないと思うので、フィルターがきちんとかかっていないとか、そういう問題だと思います。

    var_dump してみた結果を貼ってもらえれば、もう少しましなアドバイスができるかもしれません。

11件の返信を表示中 - 1 - 11件目 (全11件中)
  • トピック「index.phpにアイキャッチ画像を設定」には新たに返信することはできません。