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

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

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

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

Q&A

解決済

2回答

227閲覧

WordPressOGPタグ設定時のエラーについて(function.php)

miw_arock

総合スコア10

WordPress

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

PHP

PHPは、Webサイト構築に特化して開発されたプログラミング言語です。大きな特徴のひとつは、HTMLに直接プログラムを埋め込むことができるという点です。PHPを用いることで、HTMLを動的コンテンツとして出力できます。HTMLがそのままブラウザに表示されるのに対し、PHPプログラムはサーバ側で実行された結果がブラウザに表示されるため、PHPスクリプトは「サーバサイドスクリプト」と呼ばれています。

0グッド

0クリップ

投稿2019/03/20 10:22

前提・実現したいこと

Wordpressで構築しているサイトにOGPタグの設定したく、
フックをfunctions.phpに記述しています。

投稿記事(single.php)の場合に、
①アイキャッチ画像
↓ なければ…
②本文欄の画像(1枚目)
↓ なければ…
③デフォルト画像
の優先順番でog:image画像を取得したいです。

発生している問題・エラーメッセージ

タグは問題なく吐き出しされ、
画像も意図したものが取得できているのですが、
本文欄に画像がない場合に、

html

1<b>Notice</b>: Undefined offset: 0 in ....

というエラーがheadタグ内に出てしまいます。本文欄に画像があれば、エラーは出ません。
エラーが出ないよう、コードを修正をしたいです。

該当のソースコード

php

1function my_meta_ogp() { 2 if (is_single()) { 3 global $post; 4 $ogp_title = ''; 5 $ogp_descr = ''; 6 $ogp_url = ''; 7 $ogp_img = ''; 8 $insert = ''; 9 10 //og:title、og:des 11 setup_postdata($post); 12 $ogp_title = $post - > post_title; 13 $ogp_descr = mb_substr(get_the_excerpt(), 0, 100); 14 $ogp_url = get_permalink(); 15 wp_reset_postdata(); 16 17 //og:type 18 $ogp_type = 'article'; 19 20 //og:image 21 if ( has_post_thumbnail() ) { 22 $ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); 23 $ogp_img = $ps_thumb[0]; 24 } else { 25 //本文に画像があるか判別 26 $first_img = ''; 27 ob_start(); 28 ob_end_clean(); 29 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); 30 $first_img = $matches [1] [0]; 31 if(empty($first_img)) { 32 //本文に画像がない 33 $ogp_img_directory_url = get_stylesheet_directory_uri(); 34 $ogp_img = ''.$ogp_img_directory_url.'/common/img/ogp.jpg'; //デフォルトのOGP画像 35 } else { 36 //本文に画像がある 37 $ogp_img = $first_img; 38 } 39 } 40 41 //出力するOGPタグをまとめる 42 $insert. = '<meta property="og:title" content="'.esc_attr($ogp_title).'" />'."\n"; 43 $insert. = '<meta property="og:description" content="'.esc_attr($ogp_descr).'" />'."\n"; 44 $insert. = '<meta property="og:type" content="'.$ogp_type.'" />'."\n"; 45 $insert. = '<meta property="og:url" content="'.esc_url($ogp_url).'" />'."\n"; 46 $insert. = '<meta property="og:image" content="'.esc_url($ogp_img).'" />'."\n"; 47 $insert. = '<meta property="og:site_name" content="'.esc_attr(get_bloginfo('name')).'" />'."\n"; 48 49 echo $insert; 50 } 51} 52//head内にOGPを出力 53add_action('wp_head', 'my_meta_ogp'); 54

自分で試したこと・調べたこと

php

1$first_img = $matches [1] [0];

に問題があるとエラーは言っていて、

  • リスト空の配列に対して要素の取得を行おうとする
  • 配列のサイズを超えた範囲にアクセスしてしまう

ということが原因…というところまで分かり、その意味もなんとなくイメージはつかめるのですが、
具体的にどこをどのように修正したらよいのか、私の知識では検討がつかずつまづいております。(><)

どなたか、ご教示いただけないでしょうか。
よろしくお願いします。

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

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

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

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

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

guest

回答2

0

$output = preg_match_all('/<img.+src='"['"].*>/i', $post->post_content, $matches);

画像がある場合と無い場合で$output変数を確認してみてください。
if文で分岐できるはずです。

投稿2019/03/20 11:52

tabuu

総合スコア2449

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

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

miw_arock

2019/03/21 05:01

tabuuさん ありがとうございます。 まずは$outputの変数を確認してみるんですね。 やってみます!
miw_arock

2019/03/21 08:20

tabuuさんからいただいたヒントで、エラーが出なくなりました。 ありがとうございました!
guest

0

自己解決

og:imageの該当箇所のみ記載します。
$outputの変数の有無を、まず確認した上で「どうするか」なのですね、、、
言われてみたら確かに!と納得できました。勉強になりました。

php

1 //og:image 2 if ( has_post_thumbnail() ) { 3 $ps_thumb = wp_get_attachment_image_src( get_post_thumbnail_id(), 'full'); 4 $ogp_img = $ps_thumb[0]; 5 } else { 6 //本文欄に画像があるか判別 7 $first_img = ''; 8 ob_start(); 9 ob_end_clean(); 10 $output = preg_match_all('/<img.+src=[\'"]([^\'"]+)[\'"].*>/i', $post->post_content, $matches); 11 if(!empty($output)) { 12 //$outputに変数があったら 13 $first_img = $matches [1] [0]; 14 $ogp_img = $first_img; 15 } else { 16 //$outputに変数がなかったら 17 $ogp_img_directory_url = get_stylesheet_directory_uri(); 18 $ogp_img = ''.$ogp_img_directory_url.'/common/img/ogp.png'; //デフォルトのOGP画像 19 } 20 }

投稿2019/03/21 08:19

miw_arock

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問