###前提・実現したいこと
WordPress 4.7.4を使用してサイトの構築をしています。
プラグインを使わずに、OGPの画像を表示したいと考えています。
- アイキャッチがある場合アイキャッチ画像を表示
- ない場合はACFで取得している画像を表示
- それ以外は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">
回答1件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
退会済みユーザー
2017/05/04 14:42
2017/05/04 14:54
退会済みユーザー
2017/05/05 09:32
2017/05/05 12:49
退会済みユーザー
2017/05/06 09:12