質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.34%

【Wordpess】シングルページでOGPでACFの画像を表示させたい

解決済

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 866
退会済みユーザー

退会済みユーザー

前提・実現したいこと

WordPress 4.7.4を使用してサイトの構築をしています。
プラグインを使わずに、OGPの画像を表示したいと考えています。

  1. アイキャッチがある場合アイキャッチ画像を表示
  2. ない場合はACFで取得している画像を表示
  3. それ以外はimagesフォルダの画像を表示

としたいです。
更新するスタッフはimagesフォルダへのアップロードが難しいと考えているので、ACFで画像をアップロードしてもらい、任意で画像が変更できるようにしたいです。

発生している問題

ACFの画像のURLが取得できていないため、2を通り越して3のimagesフォルダの画像を取得している感じになってしまっています。

該当のソースコード

<meta property="og:type" content="blog">
<!-- OGP -->
<?php if (is_single() || is_page()) { ?>
<?php while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<?php if (has_post_thumbnail()): ?>
<?php
$thumbnail_id = get_post_thumbnail_id($post->ID);
$src_info = wp_get_attachment_image_src($thumbnail_id, 'large');
$src = $src_info[0];
?>
<meta property="og:image" content="<?php echo $src; ?>" />
<?php elseif(post_custom('background')): ?>
<meta property="og:image" content="<?php get_field( 'background', 345 ); ?>" />
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/img_ogp.png" />
<?php endif; ?>
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php endwhile; ?>

<?php } elseif (is_home()) { ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="blog" />
<?php if(post_custom('background')): ?>
<meta property="og:image" content="<?php get_field( 'background', 345 ); ?>" />
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/img_ogp.png" />
<?php endif; ?>
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php } else { ?>
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/img_ogp.png" />
<meta property="og:url" content="<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php } ?>

<!-- /OGP -->
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="App-ID(15文字の半角数字)">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@twitterID">

acfの設定

acfでの設定は下記となります。

  • フィールドタイプ:画像
  • 返り値:画像URL
  • プレビューサイズ:サムネイル
  • ライブラリ:全て

また、固定ページの中に設定項目を全部入れています。

よろしくお願いします。

解決済コード

<meta property="og:type" content="blog">
<!-- OGP -->
<?php if (is_single() || is_page()) { ?>
<?php while (have_posts()) : the_post(); ?>
<meta property="og:title" content="<?php the_title(); ?>" />
<meta property="og:type" content="article" />
<?php if (has_post_thumbnail()): ?>
<?php
$thumbnail_id = get_post_thumbnail_id($post->ID);
$src_info = wp_get_attachment_image_src($thumbnail_id, 'large');
$src = $src_info[0];
?>
<meta property="og:image" content="<?php echo $src; ?>" />
<?php elseif(get_field( 'background', 345 )): ?>
<?php 
    $ogp_img = get_field('background',345);
    //「background」はカスタムフィールドのフィールド名、「345」は設定用に作成した固定ページのID
    $size = "full";
    if( !empty($ogp_img) ): ?>
    <meta property="og:image" content="<?php echo $ogp_img; ?>" />
<?php endif; ?>
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/img_ogp.png" />
<?php endif; ?>
<meta property="og:url" content="<?php the_permalink(); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php endwhile; ?>

<?php } elseif (is_home()) { ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>" />
<meta property="og:type" content="blog" />
<?php if(get_field( 'background', 345 )): ?>
<?php 
$ogp_img = get_field('background',345);
//「background」はカスタムフィールドのフィールド名、「345」は設定用に作成した固定ページのID
$size = "full";
if( !empty($ogp_img) ): ?>
<meta property="og:image" content="<?php echo $ogp_img; ?>" />
<?php endif; ?>
<?php else: ?>
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/img_ogp.png" />
<?php endif; ?>
<meta property="og:url" content="<?php bloginfo('url'); ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php } else { ?>
<meta property="og:title" content="<?php wp_title('|', true, 'right'); ?><?php bloginfo('name'); ?>" />
<meta property="og:type" content="article" />
<meta property="og:image" content="<?php bloginfo('template_url'); ?>/images/img_ogp.png" />
<meta property="og:url" content="<?php echo get_bloginfo('url').$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:description" content="<?php bloginfo('description'); ?>" />
<?php } ?>

<!-- /OGP -->
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<meta property="og:locale" content="ja_JP" />
<meta property="fb:app_id" content="App-ID(15文字の半角数字)">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@twitterID">
  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

ACFでせずとも標準のアイキャッチを利用すればよいと思います。(提示のコードはそれを前提に書かれているような)

提示のコードでは $image_url が取得だけして使われていません。それを使うように書き換えれば良いと思います。

【アイキャッチ画像 | Web Design Leaves】
http://www.webdesignleaves.com/wp/wordpress/150/

add_theme_support('post-thumbnails');

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/05/05 18:32

    アイキャッチ画像に関しては、問題なく表示されているようですが、
    未だACFの画像は表示されません・・・
    質問のコードを修正するので、ご指摘いただければありがたいです!!

    elseif(post_custom('background')):

    この条件分岐も怪しいなとはおもっているのですが・・・

    キャンセル

  • 2017/05/05 21:49

    elseif(get_field( 'background', 345 )):

    キャンセル

  • 2017/05/06 18:12

    条件分岐に入れるとよかったんですね。
    おかげで解決できました!
    ありがとうございました!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.34%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る