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

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

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

WooCommerceは、2011年にリリースされたWordPressのためのECプラグインです。ECサイトに必要な一連の機能を簡単に導入できる上、柔軟なカスタマイズをすることも可能です。

WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Q&A

解決済

1回答

1090閲覧

Woocommerceで販売するデータを管理画面等でプレビューできるようにしたい

bokupiroki

総合スコア54

WooCommerce

WooCommerceは、2011年にリリースされたWordPressのためのECプラグインです。ECサイトに必要な一連の機能を簡単に導入できる上、柔軟なカスタマイズをすることも可能です。

WordPress

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

PHP

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

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

0グッド

0クリップ

投稿2020/02/16 13:09

編集2020/02/16 16:53

###実現したいこと・前提条件

  • WordPressのプラグイン「Woocommerce」で画像などのデータを販売している
  • Woocommerceの仕様上、データを実際に購入した人にしか該当データへのアクセス権が与えられない
  • ゆえに商品登録をした投稿者自身(管理者)はデータをプレビューできない
  • プレビューされないので、販売しているデータが可視化できず間違ったデータを登録していないか不安になる

FTPでサーバーの中をのぞけば済む話かもしれませんが、なんとかWordPress管理画面上でプレビューできないものかと考えております。
プラグインを使う方法、javascriptを使う方法などで何か手段はないでしょうか?

###画面該当箇所
↓従来の商品登録ページ
イメージ説明

↓該当のURLにブラウザで直接アクセスした結果
イメージ説明

↓WordPress上の「メディア」などで確認しても、本来の画像ではなく代替え用の画像が表示される
イメージ説明

###試したこと
たとえば、投稿画面の任意の場所に、何かを出力するだけなら下記の方法で可能です。

php

1//functions.php 2/*投稿画面の任意の場所に何か追加*/ 3add_action('admin_footer-post-new.php', 'add_custom_text'); 4add_action('admin_footer-post.php', 'add_custom_text'); 5function add_custom_text() 6{ 7 ?> 8 <script> 9 jQuery(function ($) { 10 $('#woocommerce-product-data').before('<p>ここに画像をプレビュー</p><img src="投稿した画像のURLが出力される関数">'); 11 }); 12 </script> 13<?php 14}

ですが、権限の問題から画像にアクセスができないのでこのような表示になります。↓
イメージ説明

例えば、記事公開後に画像を何かしらの手段で権限有の状態で複製して
上記のコードにはめ込めば理論上表示できるのではないかと踏んでおります。

###補足情報(FW/ツールのバージョンなど)
WordPress5.3.2
woocommerce3.8.1

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

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

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

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

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

bokupiroki

2020/02/16 17:08

試したこと追記しました。 また、WordPressメディア上で「画像を編集」をクリックすると画像編集画面に普通に飛べました。 その画面では画像がちゃんとプレビューされています。 「ワードプレスのURL/wp-admin/admin-ajax.php?action=imgedit-preview&_ajax_nonce=80c220b6c2&postid=602」という形式であればプレビューできるようなので、現在このパスを投稿画面にねじ込んで画像プレビューを可能にしようともくろんでいます。
guest

回答1

0

ベストアンサー

PHP

1add_action( 'woocommerce_product_options_general_product_data', function() { 2 $args = [ 3 'numberposts' => -1, 4 'post_mime_type' => 'image', 5 'post_parent' => get_the_ID(), 6 'post_type' => 'attachment' 7 ]; 8 $images = get_children( $args ); 9 foreach( $images as $image ) { 10 $nonce = wp_create_nonce( "image_editor-$image->ID" ); 11 ?> 12 <img src="<?php echo admin_url( 'admin-ajax.php', 'relative' ); ?>?action=imgedit-preview&amp;_ajax_nonce=<?php echo $nonce; ?>&amp;postid=<?php echo $image->ID; ?>"> 13 <?php 14 } 15} );

投稿2020/02/18 10:59

退会済みユーザー

退会済みユーザー

総合スコア0

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

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

bokupiroki

2020/02/19 10:02

画像が表示されました! ありがとうございます。 アイキャッチ画像など投稿内にアップされているほかの画像データも表示されるので、 画像IDの条件を指定したif文を使ったりしてうまいことやってみようとおもいます。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問