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

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

ただいまの
回答率

90.47%

  • WordPress

    7419questions

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

WordPress メディアピッカーの使い方【自作テーマ】

解決済

回答 2

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,784

g-n-n

score 16

ブログ形式のテンプレートを作成しています。
ダッシュボードメニューに「ブログ設定」というメニューを追加してヘッダー画像などを設定できるようにしたいと考えています。
やりたいことは、「ブログ設定」のページでメディアピッカーで画像をアップロード、選択し更新ボタンを押すと反映されるごく単純なものです。

メディアピッカーを呼び出して画像の設定ができればと思ったのですが、「~に挿入」のボタンを押した際の挙動がわかりません。
呼び出し自体は投稿ページのHTMLをとりあえずコピペして、class insert-media add_media がついているボタンを押されたらjQueryでメディアピッカーが呼び出される…のだろうというところまでは分かりました。
投稿からコピペしたせいか、ボタンが「投稿に挿入」となっているのも問題ですが…

wp.media などのページも見てみたのですが、古い情報の為かうまく動いてくれませんでした
ベストプラクティスなどあればよろしくお願いします

ブログ設定

使い方が上手くわからなかったので今のページを表示させているコードをここに貼ります

参考:WordPress 3.5の新メディアアップローダーを自作プラグインやテーマに組み込む。 | Firegoby

<?php
add_action ( 'admin_menu', 'blogSetting' );
function blogSetting() {
    add_menu_page(
      __('Blog Settings'),
      __('Blog Settings'),
      'manage_options',
      'blog-settings',
      'my_plugin_options',
      '',
      25
    );
}
function my_plugin_options() {
    if ( !current_user_can( 'manage_options' ) )  {
        wp_die( __( 'You do not have sufficient permissions to access this page.' ) );
    }
  wp_enqueue_media();
public function admin_scripts()
{
    wp_enqueue_media(); // メディアアップローダー用のスクリプトをロードする
    // カスタムメディアアップローダー用のJavaScript
    wp_enqueue_script(
        'my-media-uploader',
        plugins_url("media-uploader.js", __FILE__),
        array('jquery'),
        filemtime(dirname(__FILE__).'/media-uploader.js'),
        false
    );  
}
echo <<<EOT
<script>
</script>
<div class="wrap">
  <h2>Blog Settings</h2>
<form method="post">

  <h3>Blog Title</h3>
  <input type="text" />

  <h3>Blog Header Image</h3>
  <div id="wp-content-media-buttons" class="wp-media-buttons">
    <button type="button" id="demo-media">
      <span class="wp-media-buttons-icon"></span> メディアを追加
    </button>
  </div>
  <div id="media"></div>
  <input type="checkbox" />Use Header Image
<hr>
  <input type="submit" name="submit" id="submit" class="button button-primary" value="更新">
</form>
</div>
EOT;
}
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 2

checkベストアンサー

0

お使いのコードが書かれて無いため参考URLだけですが、以下のページにほぼほぼ答えがあると思います。よければ試してみてください。

【WordPressの管理画面内でメディアアップローダーを呼び出す | work.log】
https://worklog.be/archives/2377

【WordPress メタボックスでメディアライブラリ呼出し - とみぞーノート】
http://wiki.bit-hive.com/tomizoo/pg/WordPress メタボックスでメディアライブラリ呼出し


追記:

【WordPress 3.5の新メディアアップローダーを自作プラグインやテーマに組み込む。 | Firegoby】
https://firegoby.jp/archives/4031

【メディアアップローダ周りのデフォルト表示を設定する(wp4.0以降) | weblog by web.contempo.jp】
http://web.contempo.jp/weblog/tips/p1975

投稿

編集

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2016/05/02 01:34

    上のリンクはすでに試していてうまくいかなかったので、下のリンクを試してみようかと思います

    キャンセル

  • 2016/05/02 01:41

    実装例(URL)を追加しました。
    試したこと、またそのコードを質問文に書かれたほうが、回答を得られやすいと思います。

    キャンセル

  • 2017/02/28 15:41

    試してみたのですがうまくいきませんでした。
    時間が経過した質問ですので一回回答を切らせていただきます。ありがとうございました。

    キャンセル

0

設定ページを表示させているadmin_scripts()に、option API関係の記述がないようです。作った設定項目を反映させるためにはデータベースに設定内容を保存する必要があります。以下のような記事が参考になるかと存じます。

https://wpdocs.osdn.jp/設定ページの作成
http://tenderfeel.xsrv.jp/wordpress/142/

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

関連した質問

  • 解決済

    動的にプルダウンリストなどを生成したい js?

    画像の様な入力フォームを作っているのですが、 例えば、画像の場合で言うなら「言語」のところで 「追加する」をクリックすると 上と同じプルダウンリストが生成されるようにするには

  • 解決済

    jQueryで最下部までスクロールしたときに「同意する」ボタンを活性化させたい

    前提・実現したいこと teratailでの投稿が初めてなので至らぬところがあるかと思いますが ご教示願いいたします。 HTMLとjQueryを用いて、規約を最終行までスク

  • 解決済

    ヒアドキュメント

    PHPでサイトの作成での勉強で、ログインのモーダルウインドウを表示するようにしたんですが、全ページにつけるとなると結構たいへんで、後にデザイン変更する時も大変になるのでと思い。管理

  • 受付中

    Javascriptを利用して追加した<select><option>の値を複数取得したい

    前提・実現したいこと PHP、Javascriptを利用して<select><option>の行を必要がある時に「追加する」ボタンを押して、追加していく仕組みを作り、PHPで値を取

  • 解決済

    [jQuery] ajaxで外部の読み込みでの疑問。

    jQueryのajaxについて、読み込みで、まだよく分かっていないので、勉強のために、検証用サンプルを作りました。 index.htmlの[ボタン]を押すごとに、<div i

  • 受付中

    javascriptのon clickイベントで関数以外を実行させたい

    on clickイベントで $("startButton").onclick =  start() のようにスタートボタンを押したら関数を実行させたいのですが、 スタートボタンを押

  • 解決済

    Swift3.0 動的な変数

    プログラミング初心者です。お力を借りたいと思います。 Swiftでは動的な変数名を作れないようなのですが 規則的な変数名の変数を多数作りたいと思っています。(同じようなボタンな

  • 解決済

    HTML ボタンのonclickでJSが動かない

     前提・実現したいこと TODOリストをつくりたいのですがボタンのonclickでJSが動かないのでつまずいてます ボタンでやりたいことは(TODOの)追加と(フォームの)リセット

同じタグがついた質問を見る

  • WordPress

    7419questions

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