ベストセラー人気 WordPress テーマTop 30 詳細

WordPress Quformの提出内容をフロントエンドに表示する方法(+ wpDataTablesプラグイン)

Last Updated:2021年9月26日| 23のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

前へから Quformで提出した文章を KBoard スレッドに登録する方法について簡単に説明しました。 他の方法でwpDataTablesプラグインを使用してQuform問い合わせフォームデータをフロントエンドに表示することができます。

Quformコンテントゥフォームを介して提出した内容をフロントエンドに表示する方法

これらの方法ではなく、別の方法でフロントエンドに表示する方法で wpDataTablesというプラグインを使用することができそうです。 フロントエンドに表示する方法についてQuformでは、次のような方法を提示しています。

WordPress 伝言板で Quform> Form Builder> Settings> Databaseで提出した内容をカスタムデータベーステーブルに保存するように設定した後で、wpDataTablesを使用して、フロントエンドに表示することができます。

KBoardのような韓国型掲示板の使用が気にされる場合には、上記のように Quformで提示する方法を使用することを考慮してみることができます。

WordPress Quformの提出内容をフロントエンドに表示する方法

wpDataTablesについては、この記事では、「wpDataTables - WordPressテーブル/チャートプラグイン"の部分を参照してください。

次の映像ではWPFormsで作られたお問い合わせフォームを介して送信されたデータをフロントエンドに表形式で表示する例を示します。

Contact Form 7の場合、カスタムデータベースを直接作成Contact Form 7の提出内容が保存されるようにした後、上記の方法に従うと、と思われる。 (少しのプログラミングの知識が必要な作業です。ただQuformを使用する方が効率的になります。Contact Form 7は、セキュリティ上のもあまり良くないですね。)

Contact Form 7を使用している場合には、Flamingo、プラグインとContact Form 7 Viewsプラグインをインストールして、フロントエンドユーザーが送信したデータを表示することができます。 詳細については、「WordPress Contact Form 7のデータを表示する」を参照してみてください。

ユーザーが自分のデータを表示して編集することができ、編集可能なテーブルを作成

wpDataTablesを使用して、ユーザーが自分のデータのみを編集(修正)することができるように、編集可能なテーブルを作成する方法を次の映像で確認することができます。

User IDは WordPressユーザーIDとして自動的に WordPressで取得ようです。

This is the ID of the user in wordpress。 (Given automatically from wordpress)

このプラグインは、DB処理が頻繁なユーザーが利用する時間を大幅に削減することができます。

I just purchased the plugin and it works perfectly、exactly like i had hoped。 Saved my IT team tons of time。 If you need a table plugin with oomph、this is your plugin。

思うように設定するために困難を経験する場合、プラグイン販売者に連絡してください。 Codecanyonプラグインを購入すると、デフォルトの6ヶ月のサポートが提供され、サポート延長オプションを選択すると、12ヶ月の間サポートを受けることができます。 また、サポートが切れてもアップデートは継続することができます。 サポート終了後のサポートを受けるにはサポートを購入する必要があります。 (販売者に連絡する必要がない場合サポートを更新したり、購入する必要がありません。)

参照



23のコメント

コメント

  1. こんにちは。 しきりに気ヘッドしまい、申し訳ありません。 ㅠㅠ
    quformsでfile uploadフォームを作成し、イメージファイルをアップロードするときの画像サイズを強制的に減らすことができる方法がないでしょう? 一日700枚の写真がアップロードされるサイトを作り中なのに...写真の容量が3メガ移るかサーバーの容量が耐えがダメですね。;;;

    応答
    • こんにちは? コメントは常に歓迎します。 気になる点がございましたら、いつでもコメントをあげてください。 ご不明な点がなくてもコメントを上げていただければ幸いです。 コメントが多いSEOにも役立ちます。笑

      お問い合わせの内容につきましては、いくつかのソリューションを考えてみることができるようになります。

      1.最も良いのは、画像をアップロードする前に、圧縮をして画像のサイズを減らすことです。 私は画像の圧縮サイトで画像を圧縮した後、アップロードしています。 あまりにも圧縮がされて画像が鮮明に出てこない場合が時折ありますが、サーバーのストレージ容量を削減する良い方法です。 Photoshopでウェブ画像として保存するオプションを通じて画像ファイル圧縮が可能です。

      2.画像​​をサーバーに保存する必要がなく、電子メールのみ受信する場合、ファイルをサーバーに保存するオプションをオフにすれば簡単に解決されています。

      3.第三の方法でファイルのアップロードサイズを制限することです。 Quformでは、ファイルのアップロードサイズの制限オプションがあるので、このオプションを使用して、アップロード可能なファイルサイズを1MB程度下げ、もしこの容量を超える場合、警告メッセージを表示することができます。 また、サブラベルに「1MB以下のファイルのみアップロード可能です。 ファイルサイズがこれより大きい場合は、ファイルサイズを減らしてください。」と似たような案内文を表示することも可能になります。

      4.もう一つの方法をより考えてみることができますよ。 この方法が機能するかをテストする必要があります。 必要に応じて作動しても、サーバーの容量を削減には効果がないこともあるようです。

      1)まず、WP Smushのようなイメージの最適化プラグインをインストールします。

      https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%EC%9D%B4%EB%AF%B8%EC%A7%80-%EC%B5%9C%EC%A0%81%ED%99%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-wp-smush/

      このようなプラグインをインストールして有効にすると、メディアファイルをアップロードする際に、圧縮をさせます。 しかし、無料版では、元のサイズを維持します。 有料版を使用する必要が元自体の大きさも軽減します。

      2)
      Quformでは、イメージをメディアライブラリに保存するオプションもあります。

      https://www.screencast.com/t/zOUPJn6SPsn

      メディアライブラリに保存するオプションを有効にすると、画像がメディアライブラリにアップロードされ、WP Smushなどのプラグインを介し圧縮になります。 しかし、有料版を使用する必要が元のサイズが変更されます。

      また、この問題は、メディアライブラリにアップロードされ、サムネイルファイルも一緒に作成することができます。 / wp-content / uplaods / 2021 / ...フォルダの下を見ると、同じ名前のイメージファイルが複数の生成されたことを確認することができます。

      https://www.thewordcracker.com/intermediate/too-many-image-files-in-wordpress/

      従ってこの方法は、むしろサーバーのストレージ容量をより占める可能性もあり、実効性がないこともあります。

      上記の事項を考慮して適切な方法を選択してください。 個人的には、ファイルのアップロードサイズを制限して、「画像をアップロードする前に、圧縮をしたり、画像のサイズを減らしてほしい」と要請した案内文を表示することがいいんじゃないかと思います。

      応答
      • 迅速な回答ありがとうございます。 ところが、700枚の写真がコンピュータや既存の写真をアップロードするのがではなく、カメラで撮ってあげる方法です。 それnasに設置した WordPressを介してデータを受信します。 現在は、お客様から必要なものを実装は、試してみたサーバーの容量管理とトラフィックの問題が発生するように思えるアップロード時 WordPress 写真のアップロードのように自動的に削減する方法を探しています。 ㅠㅠ

      • もう少しサイトの構成を申し上げフォームで発注フォームを受け取ります。 発注フォームに10〜12枚の写真を受ける発注を入れる方式がスマートフォンのカメラを使用した発注です。 回答いただいた方法では、実装が少し難しいようです。(オルリシヌン方がコンピュータ知らずがほとんどだったので、...)quformフォーラム行って、既存のデータを検索するから私と似たような分数分があったフォーラム管理者の回答は、phpコードが必要である。 、コメント、ありがとうございました途中全部であって...ㅠㅠ3〜4メガ写真を一日700枚、1年であれば約740基という非常に美しいの容量が出てきて... ;;; こぶquform hook機能やないスクリプトコードを利用した自動容量を減らす方法はないのかこれはないプーリーから密か化私の方法を知っているね。アドバイス求めます。

      • うーん...この場合は、イメージファイルをPCにバックアップし、定期的に(例えば、月にXNUMX回)を削除することはいかがでしょうか

        Quformでファイルのアップロードフィールドを作成し確認してみる/ wp-content / uploads / quform / 2/2021形式のフォルダにファイルがアップロードなりますね。

        そして ファイルバードのような WordPress メディアライブラリフォルダのプラグインを使用すると、伝言板でもファイルを体系的に管理することができます。

  2. また、...ここに来るアドバイスを求めます。 ㅠㅠㅠㅠ
    quformsでselect menu項目をdbにある内容で入れたくググルシンに検索したら

    jQuery(function ($) {
    var calculate = function () {
    var total = 0;

    // A text input field with numeric value
    var
    val4 = $('.quform-field-3_7').val();
    val5 = $('.quform-field-3_8').val();
    if (val5 && val5.length && $.isNumeric(val5)) {
    total += parseFloat(val5*val4);
    }
    // Display the result to the user (optional)
    $('#form-total').text('Total:' + total+ '₩');

    // Set the value of the hidden field (optional)
    $('.quform-field-3_20').val(total).triggerHandler('change');
    $('.quform-field-3_10').val(total).triggerHandler('change');
    };

    // Calculate on page load
    calculate();

    // Recalculate when these text input fields are changed
    $('.quform-field-3_7').on('keyup blur', calculate);
    $('.quform-field-3_8').on('keyup blur', calculate);
    });

    というフレーズを教えてくださった主に私のコード自体が自動的になかろう。
    そして、コードが動作をしてもquforms> settings> Custom JavaScripで、phpが動作するかもしれ...分からない

    まとめるとwpdatatablesに作成されたdb中row項目かをquforms select menu項目に入れたい。方法は何でしょうか...

    応答
    • こんにちは? このjqueryスクリプトは、ユーザーが選択または入力した値を計算して、他の Quform フィールドに自動的に入力されるようにする機能を行うことです。 例えば、計算値をquform-field-3_20に保存した場合、フォームを送信する際quform-field-3_20フィールドの値がカスタムテーブル内のレコードとして保存されるようにコードを作成してテーマ関数ファイルに入れでしょう?

      まとめるとwpdatatablesに作成されたdb中row項目かをquforms select menu項目に入れたい。方法は何でしょうか...

      =>この部分につきましては、正確にどのようにすることを望んで感が取れないですね。
      WpDataTablesで作成されたカスタムDBにQuformを介して配信されるデータを入れてから、WpDataTablesを使用して、フロントエンドに表示する用途で活用することができるようですが...

      応答
      • quformsで作られた記事のリストフォーム(例えば、記事名、記事の電話番号)を利用して入力されます。 その後、wpdatatablesを利用して二つの項目をdbテーブルを作成して保存します。 そして記事のリストの中から記事名が、他のフォームselectmenuに項目に自動的に記事の名前だけ呼んで来ることができように項目が作成されたものを作りたいと思います。 https://godblessc.com/table.jpg

      • 意図を理解しました。

        次のようなquformのフックを使用して目的の操作が可能になります。

        テーマの関数ファイルにコードを追加します。

        add_action('quform_pre_display_1', function (Quform_Form $form) {
        // Custom code
        });

        Custom code部分にDBからデータをドラッグして満たすコードを入れていただければされます。

        例として、次のようなコードを参照することができます。

        function my_load_booking_data($ form)
        {
        グローバル$ wpdb;

        $ id = isset($ _ GET [ 'booking_id'])? $ _GET [ 'booking_id']: '';

        if(!$ id){
        戻り値;
        }

        $ result = $ wpdb-> get_row($ wpdb-> prepare( "SELECT * FROM bookings WHERE id = '%s'"、$ id));

        if(is_object($ result)){
        $ startDate = '';
        if($ result-> start_date){
        $ startDate = explode( ' - '、$ result-> start_date);
        $ startDate = array( 'day' =>(int)$ startDate [2]、「month」=>(int)$ startDate [1]、「year '=>(int)$ startDate [0]);
        }

        $ endDate = '';
        if($ result-> end_date){
        $ endDate = explode( ' - '、$ result-> end_date);
        $ endDate = array( 'day' =>(int)$ endDate [2]、「month」=>(int)$ endDate [1]、「year '=>(int)$ endDate [0]);
        }

        $ form-> setValues(array(
        「iphorm_2_4 '=> $ result-> id、
        「iphorm_2_1 '=> $ result-> name、
        「iphorm_2_2 '=> $ result-> email、
        「iphorm_2_3 '=> $ result-> message、
        「iphorm_2_5 '=> $ startDate、
        「iphorm_2_6 '=> $ endDate
        ));
        }
        }
        add_filter( 'iphorm_pre_display_2'、 'my_load_booking_data');

        上記のコードは、Form 1から送信されたデータをForm 2の特定のフィールドに入力する機能をすることQuformで提示しているコードです。 ただ参考だけハシゴヨ、実際のコードは、実際の状況に合わせて少し応用すると思われる。

        WordPressでカスタムDBからデータをドラッグするには https://wordpress.stackexchange.com/questions/51984/how-to-display-data-from-custom-table-in-wordpress-database 文を参照してみてください。

      • ああ、上記のコードは、間違ってコピーしました。
        jQuery(関数($){
        var $ select1 = $( '。quform-field-10_3」)、
        $ select2 = $( '。quform-field-10_4');

        var data = {
        「Toyota」:[
        {text: "Camry」、value:「camry '}、
        {text: "Corolla」、value:「corolla '}、
        {text: "RAV4」、value:「rav4 '}
        ],
        「Ford」:[
        {text:「F-150」、value: 'f-150」}、
        {text: "Focus」、value: 'focus'}、
        {text: "Kuga」、value:「kuga '}
        ],
        「Volkswagen」:[
        {text: "Golf」、value:「golf」}、
        {text: "Polo」、value: 'polo'}、
        {text: "Tiguan」、value:「tiguan '}
        ]
        };

        $ select1.on( 'change'、function(){
        var value = $ select1.val()、
        options = [new Option(「Please select '、' ')];

        if(data [value]){
        for(var i = 0; i <data [value] .length; i ++){
        options.push(new Option(data [value] [i] .text、data [value] [i] .value));
        }
        }

        $ select2.html(options).prop(「selectedIndex '、0);
        })。change();
        });

        このコードだ。;;; 他のコードを入れました。

      • お知らせいただいた方法で、今日一日前後に走ったが、やはりコーディング理解と応用能力がだめ現在は放棄をしました。 有料講義があれば聞いてみたい。ㅜㅜ;

      • こんにちは。 手間が多いです。 テストをしてみると思うように作成が容易ではないですね。ㅠこの方式を実装する方法を探してみる Gravity Formsプラグインのアドオンの中、このような機能を提供するプラグインがあるようです。 https://gravitywiz.com/documentation/gravity-forms-populate-anything/ サイトを参照してみてください。

        https://www.screencast.com/t/lW8z0BvA

        Quformはシンプルに使用するには良いが、開発が必要な場合には、Gravity Formsが機能面でより豊かなものになります。 Gravity Forms料金表を見てみるとBasicが年間59ドルで、毎年の費用が出るのでquformの割には費用負担がある方です。

        まずはアドオン、プラグイン開発者に必要に応じて実装が可能かどうか、一度お問い合わせ見ればいいようです。

    • 遅い時刻まで手間が多いです。 問題が解決されたことをうれしく思いですね。

      キュポムも自主的にDBテーブルを作成するので、カスタムテーブルを作成せずに、Quform DBテーブル内のレコードを呼んで来て、フロントエンドに表示する場合、管理者ページ内で変更する場合、フロントエンドにも反映されます。 しかし、Quformでwp_quform_entiriesとwp_quform_entry_dataというXNUMXつのDBのテーブルを作成し、テーブルの列構造が少し複雑でMySQLのJoinを使用して、必要なデータとして表示することができるようです。 wpDataTablesを活用すれば、Quform問い合わせフォームデータをプリントエンドに必要に応じて表示することができます。

      楽しい一週間過ごしてください。

      応答
  3. 迅速な回答ありがとうございます。 本文に添付してくださった映像表示および変更するテーブルまで作ったが、フロントエンドに変更すると、DB側の修正されたデータがコピーなって新たに生じる問題が発生しました。 変更するたびに、新たに生じ...

    応答
  4. mysqlでテーブル作成、quformsでdatabaseも作って、通常の入力はされたが、quforms> entriesで内容の変更をしたmysqlデートは修正がいけない。もし、この部分の解決策でしょう。;;;ㅜㅜ

    応答
    • こんにちは、ジョンミンホ様。 Quformでは、データをDBに保存するオプションを提供しています。 デフォルト値をそのまま使用する場合Quform問い合わせフォームを介して送信されるデータは、独自のDBテーブルに格納されてForms> Entriesで確認が可能です。 基本的にwp_quform_entry_dataテーブルに保存されており、entry_id、element_id、valueの3つの列で構成されています。

      Forms> Entriesで変更する場合wp_quform_entry_dataテーブル内のレコードが変更されます。

      カスタムテーブルを作成する場合wpDataTables> Create a TableでCreate a data table manuallyを選択して、新しいテーブルを造り、

      カラムを作成するときにUser IDカラムを一つ追加するようにします。 次にEditingタブでAllow front-end editing(フロントエンドの編集を許可)オプションを有効にすることができます。

      https://www.screencast.com/t/tJeQlvzGFNBf

      思うように実装するのは難しい場合 wpDataTables販売にサポートを要請してください。 このプラグインをうまく活用すれば、開発作業が容易になるでしょう。 このプラグインは有料プラグインであるため、目詰まり部分があれば支援を要請することができます。

      応答
      • 高速親切な回答ありがとうございます。 WPdatatableを購入し、回答いただいたように実装はしたが、まさにその次の順序がまったくわかりません。 ㅠㅠ最終はquformsデータをフロントエンドに送信内容を変更したときも、フロントエンドで修正された内容が反映さになるようにすることだ修正反映この部分が説明いただいたものまで進行をした...アゴのような言葉だけを繰り返して申し訳ありませんします。 ㅜㅜ

      • 本文に「ユーザーが自分のデータを表示して編集することができ、編集可能なテーブルを作成する」のセクションを追加しました。 そのセクションに挿入されたYouTubeの映像を参考してみてください? 思うようにうまく実装されない場合wpDataTablesプラグイン販売者に連絡すると案内を受けることができます。

  5. こんにちはブログを頻繁に見ている WordPress 初心者です。
    国内で WordPress 資料を最もよく整理されたサイトだから、多くの助けになりますよ!
    ホームページを制作中quformで入力されたデータをwpDataTablesに受けてみたいのですが
    接続がだめよㅜㅜ
    もし該当の説明や資料お願い求めることができる?

    応答
    • こんにちは?

      Quformコンタクトフォームが提出され、DBにデータが保存されます。
      しかし、見てみると、データが必要な方法で保存されていないので、wpDataTablesで処理して表示したい場合には、quformでデータを転送する直前に、別のテーブルを作成し、データを好きなように保存しなければならないようです。

      少し具体的に説明すると...現在Quformテーブルでは、次の図のようにentry_id、element_id、value三つのフィールド(列)となっています。

      https://www.thewordcracker.com/wp-content/uploads/2018/10/Quform-data-2.jpg

      別のテーブルを作成したいフィールドにそれぞれの値が入るようにphpMyAdminでの作業をしてくださって、その後にQuformでデータが送信される前に、DBにも値が保存されるようにすると、作業が容易になるでしょう。

      最終的には https://www.thewordcracker.com/intermediate/wordpress-copy-quoform-messages-to-kboard/ 記事で説明するのと同様の方法になると思われる。

      phpMyAdminのテーブルとフィールドを作成する方法は、次の記事を参照してください。

      https://www.liquidweb.com/kb/creating-tables-in-a-database-with-phpmyadmin/

      問題は、Quformでフォームを送信する前に、データが直接作成したテーブルにも保存されるようにしなければならんです。 それは初心者がするには容易ではない側面があるようです。 直接やってみたい場合は、次kopress文を参照してください。

      https://kopress.kr/topic/%ED%8F%BC%EB%B9%8C%EB%8D%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-quform%EC%97%90%EC%84%9C-%EB%B3%84%EB%8F%84-db%EC%97%90-%EA%B8%B0%EB%A1%9D%ED%95%98%EA%B3%A0-%EB%B6%88%EB%9F%AC%EB%93%A4%EC%9D%B4/

      応答
      • 本当にありがとうございます!
        このように、高速詳細な回答いただけるとは思わなかった、本当に多くのことになりました
        ブログ繁栄し、これからも良いコンテンツお願いします〜!