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

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

新規登録して質問してみよう
ただいま回答率
85.50%
WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

Q&A

解決済

1回答

3172閲覧

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

退会済みユーザー

退会済みユーザー

総合スコア0

WordPress

WordPressは、PHPで開発されているオープンソースのブログソフトウェアです。データベース管理システムにはMySQLを用いています。フリーのブログソフトウェアの中では最も人気が高く、PHPとHTMLを使って簡単にテンプレートをカスタマイズすることができます。

0グッド

0クリップ

投稿2017/05/04 05:39

編集2017/05/06 09:11

###前提・実現したいこと
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">

気になる質問をクリップする

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

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

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

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

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

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

add_theme_support('post-thumbnails');

投稿2017/05/04 06:17

kei344

総合スコア69364

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

退会済みユーザー

退会済みユーザー

2017/05/04 14:42

いつも、アドバイスいただきありがとうございます。 前提・実現したいことに書いているのですが、 1.アイキャッチがある場合アイキャッチ画像を表示 2.ない場合はACFで取得している画像を表示 3.それ以外はimagesフォルダの画像を表示 アイキャッチは最優先で表示するようにしています。 ただ、アイキャッチを毎度設定するのもなんだかなというのもあり、 固定ページに設定のページを作りACFで画像をアップロードできればと考えていました。 (というのも、たまにメイン画像を変えてデフォルトにしたいというオーダーもあったため) 直接フォルダに画像をアップロードしてもらう方法もあるかと思いますが、Webのこと知らない人に言ってもいい加減だったりするので、それはあまりさせたくないなとおもっているので、ACFでと考えていました。
kei344

2017/05/04 14:54

やりたいことを読めていなかったですね、すみません。 ただ回答したとおり、アイキャッチ画像が使用されていません。 また、「elseif(post_custom('background')):」はそのページの記事にbackgroundというカスタムフィールドがあるかを確認しているため、仕様と違うのでは。 カスタムフィールドの取得は「get_field( "background", 123 );」の123の部分を固定ページのidに変えればWP_Queryなしで取得出来ます。 【ACF | get_field()】 https://www.advancedcustomfields.com/resources/get_field/
退会済みユーザー

退会済みユーザー

2017/05/05 09:32

アイキャッチ画像に関しては、問題なく表示されているようですが、 未だACFの画像は表示されません・・・ 質問のコードを修正するので、ご指摘いただければありがたいです!! elseif(post_custom('background')): この条件分岐も怪しいなとはおもっているのですが・・・
kei344

2017/05/05 12:49

elseif(get_field( 'background', 345 )):
退会済みユーザー

退会済みユーザー

2017/05/06 09:12

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問