安全性と使いやすさを考慮した、フロントエンドファイルのアップロードの処理


8

メディアを添付する機能のない既存のフォーラムのようなプラグインを採用しようとしています。

プラグインはカスタム投稿タイプとして機能するため、投稿に画像を添付するのと同じくらい「シンプル」です。

私はファイルの種類ではなく画像の添付についてのみ懸念していますが、プラグインは使用するためwp_editor、ソリューションは何らかの方法でそれと統合する必要があります。tinyMCEボタンを作成することについては、ソリューションが画像のサムネイルをtinyMCEテキストエリアに挿入できる限り、私はあまり面倒ではありません。

注意してください、私は私の管理領域ではなく私のウェブサイトのフロントエンドを参照しています。

絶対に理想的な状況で、このシナリオを実行してください。

  • ユーザーが[質問する]をクリックした
  • 使用は彼らの投稿の詳細を入力します
  • ユーザーがtinyMCEインターフェイスのボタンをクリックすると、StackExchangeと同様に、ユーザーにファイルのアップロードを要求します。
  • 次に、システムは正しいサイズのサムネイルをtinyMCEテキストエリアに挿入し、ファイルをこのサムネイルサイズにクランチします
  • この画像をクリックすると、投稿の画像添付ファイルと同じ機能が提供されます。
  • ユーザーはもう一度クリックして新しい画像を挿入できます
  • ユーザーは必要に応じてtinyMCEテキストエリアから画像を削除することもできます

ただし、tinyMCEボタンが周辺機器であることを嬉しく思います。「ファイルアップロード」ボックスの方がはるかに簡単であれば、問題ありません。

私はこのリンクに出くわしましたが、私はt'interwebsでWordPressの記事を読むことについて常に不安を感じています。

前もって感謝します、


私はその特定のチュートリアルの作者を知っています。より具体的にあなたの質問に答えられるように、彼にpingを
送信し

質問:wp_editor()関数を既に使用している場合は、それに含まれているメディアアップロードのシックボックスを使用するだけではどうですか?私はwp_editorフロントエンドを使用していませんが、画像のアップロードで正常に機能している人もいます。たとえば、こちらを参照してください...
goldenapples

EAMannに感謝します。ゴールデンアップルは望ましいと思いますが、プラグインの作者は、wp_editorのメディアアップロードへのアクセスを許可すると、ユーザーに私のメディアライブラリ全体への任意のレベルのアクセス権が付与されると言っていますか?私はそれがまったく当てはまらないようにしたい-彼らが自分のものをアップロードするためだけに。
2012

ああ、そうだね。私はその問題については考えていませんでした。私は見ていないmedia-upload.php間にソースが、私はかなり確信して上のフィルタtheresのだmedia_upload_tabsあなたは、「メディアライブラリ」タブを無効にすることができます。私はそれを見て、見てみましょう...
goldenapples

回答:


4

wp_editor関数を既に使用しているので、最も簡単な方法はWP_Editorインスタンスにメディアボタンを含めることです-この方法で、「投稿に挿入」ボタンを含むネイティブ関数が組み込まれます無料で。

これをどのように行うかは、操作しようとしているプラ​​グインに明らかに依存します。ただし、これで開始できます。このようなコードをページテンプレートに含めてエディターを表示すると、ページにエディターが表示されます。これをフォームに含めて結果を処理することは、ここでは詳しく説明しません。

// Define the global variable $post_id - this is used by the media uploader
// to attach uploads to a specific post (so that the uploader can see uploads
// attached to this post and not others)
global $post_id;
$post_id = $post->ID; // should be the ID of the new post created

// Now filter the list of tabs available in the media editor.
// Remove everything but the "From Computer" option.

add_filter( 'media_upload_tabs', 'wpse42068_remove_additional_tabs' );

function wpse42068_remove_additional_tabs( $_default_tabs ) {
    return array( 'type' => __('From Computer') );
}

// Now just include the WP_Editor. See
// http://codex.wordpress.org/Function_Reference/wp_editor
// for settings available
wp_editor( '', 'posteditor', array( 'media_buttons' => true ) );

投稿IDの定義はおそらく重要な部分であり、その方法は機能のロジックによって異なります。私はお勧めします:

  • 最初にこのページにアクセスして自動ドラフトを作成し、グローバル$ post_id変数に返された投稿IDを保存します。
  • 次に、フォームの送信時に、同じIDで作成された投稿を保存します。

初心者にはわかりにくい。とにかくありがとう
白紙のホワイトレター

6

たぶん、これは理想的な解決策ではありませんが、試してみる価値はあります。グーグルで取得しましたが、残念ながら私はURLを忘れてしまいました。取り付け部分は、@ goldenapplesの記事と同じです。

こちらが基本機能です。

function attach_uploads($uploads,$post_id = 0){
    $files = rearrange($uploads);
    if($files[0]['name']==''){
        return false;   
    }
    foreach($files as $file){
        $upload_file = wp_handle_upload( $file, array('test_form' => false) );
        $attachment = array(
        'post_mime_type' => $upload_file['type'],
        'post_title' => preg_replace('/\.[^.]+$/', '', basename($upload_file['file'])),
        'post_content' => '',
        'post_status' => 'inherit'
    );
        $attach_id = wp_insert_attachment( $attachment, $upload_file['file'], $post_id );
        $attach_array[] = $attach_id;
        require_once(ABSPATH . 'wp-admin/includes/image.php');
        $attach_data = wp_generate_attachment_metadata( $attach_id, $upload_file['file'] );
        wp_update_attachment_metadata( $attach_id, $attach_data );
    }
    return $attach_array;
}

ajax関数

add_action('wp_ajax_attach_file', 'process_attach_file');
function process_attach_file() {

    // add some filter and validation on the id and the files here
    $post_id = $_POST['post_id'];
    $files = $_FILES['profile-picture'];

    // insert attachment
    $attached_files = attach_uploads($files,$post_id);

    // set the first file as post thumbnail
    if($attached_files){
        set_post_thumbnail( $post_id, $attached_files[0] ); 
    }

    // now all you have to do is set the response data

}

マークアップ

<form id="upload-form" action="<?php echo admin_url('admin-ajax.php'); ?>" method="post" class="form" enctype="multipart/form-data" >
    <label for="profile-picture">Foto Profil</label>
    <input type="file" id="profile-picture" name="profile-picture[]" size="40" multiple />
    <?php wp_nonce_field( // intention nonce); ?>
    <input name="action" value="attach_file" type="hidden">
    <input name="post_id" value="12" type="hidden">
</form>

この助けを願っています


この機能が何をするかを要約できますか?
12

1
承知しました。最初の関数は、ファイルのアップロードを処理する関数です。まず、アップロードされたファイル配列を並べ替えて、「foreach」ループに適したものにします。
ifdion

1
wp_handle_uploadアップロードされたファイルをwp-content / uploadsディレクトリに配置します。wp_insert_attachmentファイル情報をキャッチし、添付ファイルとしてwp_postsテーブルに保存します。wp_generate_attachment_metadata そしてwp_update_attachment_metadata 言うことを行います。2番目の部分は、関数を使用してマークアップに表示されたフォームを処理するajax関数ですattach uploads
ifdion

1
再配置関数の追加リファレンス[リンク](php.net/manual/en/features.file-upload.multiple.php
ifdion
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.