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

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

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

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

PHP

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

Q&A

解決済

1回答

581閲覧

ワードプレス カスタムフィールドでメディアアップローダーを作成する

tkduke

総合スコア10

WordPress

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

PHP

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

0グッド

0クリップ

投稿2023/01/07 11:22

編集2023/01/09 20:26

ワードプレスで、投稿記事・固定記事・カスタム投稿の編集画面下部に、add_meta_boxを追加して、記事独自のOGP画像を設定出来るようにしたいと思っています。

add_meta_boxの作成・画像アップローダーは下記コードにて実現できたのですが

<?php /** * 個別OGPイメージ */ add_action('admin_menu', 'create_ogp_fields'); function create_ogp_fields() { add_meta_box( 'ogp_setting', //編集画面セクションのHTML ID 'このページのOGP画像を設定', //編集画面セクションのタイトル 'insert_ogp_fields', //編集画面セクションにHTML出力する関数 'post', //投稿ページ ); add_meta_box( 'ogp_setting', 'このページのOGP画像を設定', 'insert_ogp_fields', 'page', //固定ページ ); add_meta_box( 'ogp_setting', 'このページのOGP画像を設定', 'insert_ogp_fields', get_theme_mod('custom_post_status'), //カスタム投稿1 ); add_meta_box( 'ogp_setting', 'このページのOGP画像を設定', 'insert_ogp_fields', get_theme_mod('custom_post_status2'), //カスタム投稿2 ); add_meta_box( 'ogp_setting', 'このページのOGP画像を設定', 'insert_ogp_fields', get_theme_mod('custom_post_status3'), //カスタム投稿3 ); } function insert_ogp_fields() { global $post; $ogpMedia = get_post_meta($post->ID, 'ogpMedia', true); ?> <form method="post" action="admin.php?page=site_settings"> <div id="media"> <img src="<?php echo $ogpMedia; ?>" alt=""> </div> <input style="width:0;height:0;padding:0;margin:0;visibility:hidden" name="ogpMedia" type="text" value="<?php echo $ogpMedia ?>"/> <input style="width:80px" type="button" name="media" value="画像選択" /> <input style="width:80px" type="button" name="media-clear" value="削除" /> </form> <script> (function ($) { var custom_uploader; //メディアアップローダーボタン $("input:button[name=media]").click(function(e) { e.preventDefault(); if (custom_uploader) { custom_uploader.open(); return; } custom_uploader = wp.media({ title: "画像を選択", //タイトルのテキストラベル button: { text: "画像を設定" //ボタンのテキストラベル         }, library: { type: "image" //imageにしておく。 }, multiple: false //選択できる画像を1つだけにする。 }); custom_uploader.on("select", function() { var images = custom_uploader.state().get("selection"); /* file の中に選択された画像の各種情報が入っている */ images.each(function(file){ $("input:text[name=ogpMedia]").val(""); //テキストフォームをクリア $("#media").empty(); //id mediaタグの中身をクリア $("input:text[name=ogpMedia]").val(file.attributes.url); //テキストフォームに選択したURLを追加 $("#media").append('<img src="'+file.attributes.url+'" />'); //プレビュー用にメディアアップローダーで選択した画像を表示させる }); }); custom_uploader.open(); }); //削除ボタンを押した時の処理 $("input:button[name=media-clear]").click(function() { $("input:text[name=ogpMedia]").val(""); //テキストフォームをクリア $("#media").empty(); //id mediaタグの中身をクリア }); })(jQuery); </script> <?php } ?>

画像を保存する際に下記コードで思いもかけないところでエラーが出ます。(テーマの変更時に画面が真っ白になったりとか)

<?php function save_ogp_fields($post_id) { if (isset($_POST['ogpMedia'])) { update_post_meta($post_id, 'ogpMedia', $_POST['ogpMedia']); } } add_action('save_post', 'save_ogp_fields'); ?>

この保存する際のコードを削除すると、上記エラーは出ないのですが、画像が保存できません。
何がおかしいのでしょうか?
上記コードは両方とも、あるサイトで見つけて若干カスタマイズしたものです。
よろしくお願い致します。

補足情報
WordPress 6.1.1
PHP Version 8.1.14

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

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

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

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

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

CHERRY

2023/01/08 12:51

どのようなエラーが発生しているのでしょうか。 具体的な発生しているエラーメッセージを記載していただけないでしょうか。
tkduke

2023/01/09 06:41

有難うございます。 テーマ変更時にはエラーメッセージはなく、該当テーマから他のテーマに変更した場合に画面が真っ白になるのです。 再読み込みすれば、変更後のテーマで表示されます。 phpファイルを修正した場合に 「何かうまくいかなかったようです。変更が保存されていないかもしれません。手動で修正し、FTP 経由でファイルをアップロードすることもできます。」 と表示されます。 よろしくお願い致します。
guest

回答1

0

自己解決

解決いたしました。

<?php } ?>
以下を <?php } add_action('save_post', 'save_ogp_fields'); function save_ogp_fields($post_id) { if (isset($_POST['ogpMedia'])) { update_post_meta($post_id, 'ogpMedia', $_POST['ogpMedia']); } }

に修正
phpバージョンを 8.0に。

有難うございました。

投稿2023/01/09 11:26

tkduke

総合スコア10

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

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問