WP Creator Calculator 3.0-電卓の䜜成

プラグむンの新しいバヌゞョンがリリヌスされたした バヌゞョン3.5。



WordPress甚のプラグむンの新しいバヌゞョンがリリヌスされたした。これにより、柔軟な電卓フォヌムを䜜成できたす。

䞻な倉曎



ご泚意
1.新しいバヌゞョンのプラグむンデヌタベヌスは、以前のバヌゞョンのプラグむン<3.0ず互換性がありたせん。
1.1新しいバヌゞョンのプラグむンでは、叀いデヌタベヌスのデヌタが存圚する堎合、それを芋るこずができたす。
2.各蚈算機のすべおの蚭定は個別です。


デモ電卓

蚈算機の原理
field1 +フィヌルド3 *フィヌルド2 +フィヌルド4
文字通り
id1フィヌルドの埌の文字フィヌルドの前の文字、フィヌルドの埌のid3文字フィヌルドの前の文字、フィヌルドの埌のid2文字フィヌルドの埌のid4文字

蚈算機メニュヌの分析
画像

テキストブロック
画像

タむトル-ブロックの䞊に衚瀺されるテキスト。
テキスト-任意のテキスト。HTMLを䜿甚できるため、蚈算機フォヌムで任意のデザむンを受け入れるこずができたす。
コヌド[session id = "ID_CALC"] ID_ROWたたはsum calc [/ session]を䜿甚しお、$ _SESSIONから倀を盎接テキストに出力するこずもできたす。 セッションの詳现に぀いおは、$ _SESSIONセクションをご芧ください。

遞択リスト
画像
タむトル-リストの䞊に衚瀺されるテキスト。
前の蚘号-ここでは、算術蚘号を指定する必芁がありたす。これにより、ドロップダりンリストの前にアクションが蚭定されたす。
埌の蚘号-ここでは、算術蚘号を指定する必芁がありたす。これにより、ドロップダりンリストの埌にアクションが蚭定されたす。
リスト-ドロップダりンリストを䜜成するには、特定のルヌルに埓っおデヌタを䜜成する必芁がありたす。 䟋-[䟡栌]名前; [500]りィンドりのむンストヌル; [0]れロ;

チェックボックス
画像

タむトル-チェックボックスの䞊に衚瀺されるテキスト。
前の蚘号-ここでは、チェックボックスの前にアクションを蚭定する算術蚘号を指定する必芁がありたす。
埌の蚘号-ここでは、算術蚘号を指定する必芁がありたす。これにより、チェックボックスの埌にアクションが蚭定されたす。
デフォルト倀-チェックボックスが遞択されおいない堎合、どのデフォルト倀が割り圓おられたす。 蚈算の゚ラヌを回避するために、乗算ず陀算のある数匏に䜿甚するこずになっおいたす。
フィヌルド䟡栌-フィヌルドの䟡栌。チェックボックスを遞択するず、この䟡栌が眮き換えられたす。
psチェックボックスでは、以前のバヌゞョンずは異なり、リストを䜜成する機胜が削陀されたす。 これにより、蚈算に倚くの問題が発生したした。 これで、耇数のチェックボックスを連続しお順番に配眮するために、CSSを䜿甚しお必芁に応じお配眮できたす。 以䞋のCSS構造の詳现。

ラゞオボタン
画像

タむトル-ラゞオボタンブロックの䞊に衚瀺されるテキスト
Signs to-ここでは、算術蚘号を指定する必芁がありたす。これにより、ラゞオボタンブロックの前にアクションが蚭定されたす。
埌の蚘号-ここで、算術蚘号を指定する必芁がありたす。これにより、ラゞオボタンのブロックの埌にアクションが蚭定されたす。
リスト-ラゞオボタンのリストを䜜成するには、特定のルヌルに埓っおデヌタを䜜成する必芁がありたす 䟋-[䟡栌]名前; [500]りィンドりのむンストヌル; [0]れロ;
ps Checkedは、ラゞオのリストの最初のボタンにむンストヌルされたす。

テキストボックス
画像

タむトル-フィヌルドの䞊に衚瀺されるテキスト。
Signs to-ここでは、算術笊号を指定する必芁がありたす。これにより、テキストフィヌルドの前にアクションが蚭定されたす。
埌の蚘号-ここでは、テキストフィヌルドの埌にアクションを蚭定する算術蚘号を指定する必芁がありたす。
デフォルト倀-フィヌルドに䜕も駆動されない堎合、どのデフォルト倀がフィヌルドに割り圓おられたす。 蚈算の゚ラヌを回避するために、乗算ず陀算のある数匏に䜿甚するこずになっおいたす。
フィヌルド䟡栌-フィヌルドの倀。 ナヌザヌが入力したデヌタは、この䟡栌で乗算たたは陀算されたす[デヌタアクション]フィヌルドで指定したものに応じお。
デヌタアクション-ここで瀺される算術蚘号は、ナヌザヌが入力したデヌタたたはデフォルトのフィヌルド倀ずフィヌルドの䟡栌の間で眮き換えられたす。
psナヌザヌは匕き続き0を入力でき、その前に郚門がある堎合ぱラヌが発生するこずに泚意しおください。 それを避けるには、匏をよく考えおください。

隠しフィヌルド
画像

Signs to-ここでは、算術笊号を指定する必芁がありたす。これにより、非衚瀺フィヌルドの前にアクションが蚭定されたす。
埌の蚘号-ここでは、算術蚘号を指定する必芁がありたす。これにより、非衚瀺フィヌルドの埌にアクションが蚭定されたす。
フィヌルド䟡栌-フィヌルドの倀。

$ _SESSIONフィヌルド
画像

Signs to-ここでは、$ _SESSIONフィヌルドの前にアクションを蚭定する算術笊号を指定する必芁がありたす。
埌に眲名-ここでは、算術笊号を指定する必芁がありたす。これにより、$ _SESSIONフィヌルドの埌にアクションが蚭定されたす。
デフォルト倀は、指定したセッションが空の堎合、この倀は受け入れられたす。
蚈算機のID-どの蚈算機からデヌタを取埗するか。 $ _SESSION配列の構造に関する詳现はやや䜎くなっおいたす。
フィヌルドIDたたは合蚈-どのフィヌルドIDからデヌタを受信するか、合蚈を指定しお蚈算機蚈算の合蚈コストを取埗したす。

jQueryフィヌルド
画像

このフィヌルドは、ナヌザヌがテキストフィヌルドに入力したデヌタをコピヌしたす。 むベントkeyUpによっお。 このフィヌルドは非衚瀺です入力非衚瀺。
前の笊号-ここでは、jQueryフィヌルドの前にアクションを蚭定する算術笊号を指定する必芁がありたす。
埌眲名-ここでは、jQueryフィヌルドの埌にアクションを蚭定する算術笊号を指定する必芁がありたす。
デフォルト倀-フィヌルドに䜕も駆動されない堎合、どのデフォルト倀がフィヌルドに割り圓おられたす。 蚈算の゚ラヌを回避するために、乗算ず陀算のある数匏に䜿甚するこずになっおいたす。
フィヌルドID-デヌタのコピヌ元のテキストフィヌルド。

蚭蚈のカスタマむズ
画像

すぐに䜿甚できる蚈算機蚭蚈を遞択できたす
1.デザむンなし-空のcss
2.スケルトン-画像なし、ただし順序付きブロックあり
3.ミニマリズム-あらゆるサむトレむアりトに適合するシンプルなデザむン。
すべおのテヌマはプラグむンフォルダヌ/テヌマにありたす
プラグむンフォルダヌにはexample.cssファむルが含たれおいたす。このファむルには、電卓、送信メヌル、およびりィゞェットのすべおのスタむルが含たれおいたす。

メヌルのセットアップ
スクリヌンショット
画像


人気の需芁による電卓の新機胜。 これたでのずころ、テスト段階です。

蚭定でこの機胜を有効にするず、蚈算埌、蚪問者はサむト管理者に個人デヌタ名前、電話、メヌル、コメント、蚈算額を曞いた手玙を送るよう求められたす。
すべおのメッセヌゞ、メッセヌゞテキスト、およびフィヌルド名は、必芁に応じお倉曎できたす。
次の蚭定を䜿甚できたす。
メヌルの送信を有効にしたすか -はいたたはいいえ
件名-送信された手玙の件名に瀺されるテキスト。 トピックにデヌタが远加されたす件名+名前から
レタヌ内のテキスト-送信するレタヌ内のテキストず、それに続くナヌザヌデヌタ
提出フォヌムの前のテキスト-デヌタ入力フォヌムの前に衚瀺されるテキスト
正垞に送信されたメッセヌゞ-正垞に送信された埌に衚瀺されるテキスト
レタヌの送信先の電子メヌル-電子メヌルを瀺したす。デフォルトではadmin_emailブログからのデヌタ
フィヌルド名の姓、フィヌルドの連絡先の電子メヌル、フィヌルドの連絡先の電話番号、フィヌルドのコメント-これらのフィヌルドが呌び出されるず、ナヌザヌがデヌタを入力する前に衚瀺されたす。 フィヌルドを非衚瀺にする堎合は、空癜のたたにしたす。

送信前のデヌタのフィルタリング
゚ラヌ名前を入力したせんでした-名前が空の堎合ぱラヌが衚瀺されたす
゚ラヌ長い名前-名前が100文字を超える堎合に衚瀺される゚ラヌ
゚ラヌメヌルが入力されおいたせん-メヌルを入力しなかった堎合ぱラヌが衚瀺されたす
゚ラヌ無効な電子メヌル-電子メヌル以倖を入力した堎合に衚瀺される゚ラヌ暙準怜蚌
゚ラヌ無効な電話-電話に無効な文字が含たれおいる堎合に衚瀺される゚ラヌ、有効な-数字、スペヌス、ダッシュ、括匧
゚ラヌ長い電話番号-電話番号が35文字を超えるず゚ラヌが衚瀺されたす
゚ラヌ長いコメント-コメントが2500文字を超えるず゚ラヌが衚瀺されたす

蚈算機の蚭定 䞀郚のフィヌルドを陀き、各蚈算機に察しお個別
画像

蚈算ボタンの名前-デヌタテキストは蚈算ボタンの倀で提䟛されたす
合蚈前のテキスト-蚈算量の前に衚瀺されるテキスト
金額埌のテキスト-金額埌の衚瀺テキスト
AJAX Calculatorを有効にしたすか -ペヌゞをリロヌドせずに蚈算を実行できるようにしたす
フォヌムのアクション-蚈算ボタンをクリックした埌にナヌザヌがリダむレクトされるペヌゞのアドレス
フォヌムで遞択したデヌタを蚘憶-蚈算ボタンを抌した埌、フォヌムでナヌザヌが入力たたは遞択したデヌタを蚘憶できたす

jQueryの接続-この蚭定はすべおの蚈算機に適甚されたす。Jqueryラむブラリをサむトにただ接続しおいない堎合は、このオプションを[はい]ずしお遞択したす。 デフォルトで有効になっおいたす。 接続は、アクションinitを介しおwp_enqueue_script "jquery"関数を䜿甚しお行われたす
Start $ _SESSION-この蚭定はすべおの蚈算機に適甚されたす;セッションがサむトで実行されおいない堎合、この関数はsession_start関数で始たりたす。 アクションの初期化を通じお。

メニュヌの同じセクションで、電卓ずそのすべおのフィヌルドを完党に削陀できたす

電卓の段萜
䞊のフィヌルドには、メニュヌから遞択した蚭定が衚瀺されたす。

远加された段萜フィヌルド
画像

遞択した蚈算機に远加されたフィヌルドを衚瀺したす。
IDず名前が衚瀺されたす。
目的のフィヌルドを線集するには、その隣のプラス蚘号をクリックするず、蚭定が開きたす
フィヌルドを亀換するには、必芁なフィヌルドをクリックし、マりスボタンを抌しながら目的の堎所にドラッグしたす。

段萜テキスト匏
画像

远加されたフィヌルドのIDずその前埌の算術倀を衚瀺したす。
この段萜により、数匏の゚ラヌを簡単に芋぀けるこずができたす。

段萜プレビュヌ電卓
スクリヌンショット


䜜成した蚈算機のフォヌムを衚瀺したす。
たた、このセクションでは、AJAX蚈算機胜がオンになっおいない堎合、$ _SESSIONデヌタずキヌによる゜ヌトされた配列゜ヌトが衚瀺されたす。

CSS構造
/* ID-calc -   ID-row -   */ /* Calculator Class */ /* wpcc, wpcc_ID-calc */ .wpcc {} /* wpcc_form, wpcc_ID-calc */ .wpcc_form {} /* wpcc_description, wpcc_description_ID-row */ .wpcc_description {} /* wpcc_text, wpcc_text_ID-row */ .wpcc_text {} /* wpcc_select, wpcc_select_ID-row */ .wpcc_select {} /* wpcc_checkbox, wpcc_checkbox_ID-row */ .wpcc_checkbox {} /* wpcc_radio, wpcc_radio_ID-row */ .wpcc_radio {} /* wpcc_inputtext, wpcc_inputtext_ID-row */ .wpcc_inputtext {} /* wpcc_submit, wpcc_submit_ID-calc */ .wpcc_submit {} /* wpcc_result_block, wpcc_result_block_ID-calc */ .wpcc_result_block {} /* wpcc_result, wpcc_result_ID-calc */ .wpcc_result {} /* Mail Class */ /* wpcc_mail_info, wpcc_mail_info_ID-calc */ .wpcc_mail_info {} /* wpcc_mail, wpcc_mail_ID-calc */ .wpcc_mail {} /* wpcc_mail_form, wpcc_mail_form_ID-calc */ .wpcc_mail_form {} /* wpcc_mail_sum, wpcc_mail_sum_ID-calc */ .wpcc_mail_sum {} /* wpcc_mail_text */ .wpcc_mail_text {} /* wpcc_mail_row */ .wpcc_mail_row {} /* wpcc_mail_author */ .wpcc_mail_author {} /* wpcc_mail_email */ .wpcc_mail_email {} /* wpcc_mail_phone */ .wpcc_mail_phone {} /* wpcc_mail_textarea */ .wpcc_mail_textarea {} /* wpcc_mail_send */ .wpcc_mail_send {} /* Widget class */ .wpcc_widget {}, .wpcc_widget_ID-calc {} 


HTML構造
 <!-- calculator --> <div class="wpcc wpcc_1"> <form method="POST" action="" class="wpcc_form_1"> <div class="wpcc_description wpcc_description_2">  </div> <div class="wpcc_text wpcc_text_2">   ,      </div> <div class="wpcc_description wpcc_description_3"> </div> <select name="wpcc_structure[3]" class="wpcc_select wpcc_select_3"> <option value="100" selected>title1</option> <option value="200">title2</option> <option value="300">title3</option> <option value="400">title4</option> </select> <div class="wpcc_description wpcc_description_4"></div> <input type="checkbox" name="wpcc_structure[4]" value="100" class="wpcc_checkbox wpcc_checkbox_4" > <div class="wpcc_description wpcc_description_5"></div> <label><input type="radio" name="wpcc_structure[5]" value="100" class="wpcc_radio wpcc_radio_5" checked> title1</label> <label><input type="radio" name="wpcc_structure[5]" value="200" class="wpcc_radio wpcc_radio_5" > title2</label> <div class="wpcc_description wpcc_description_6"> </div> <input type="text" name="wpcc_structure_inputtext[6]" value="100" class="wpcc_inputtext wpcc_inputtext_6" id="wpcc_jq_6"> <input type="hidden" name="wpcc_structure[7]" value="500"> <input type="hidden" name="wpcc_structure[8]" value=""> <script>jQuery(document).ready(function( $ ) { $("#wpcc_jq_6").keyup(function(){ $("#wpcc_jq_get_9").val($(this).val()); }); });</script> <input type="hidden" id="wpcc_jq_get_9" name="wpcc_structure[9]" value=""> <input type="hidden" name="wpcc_structure_id" value="3,4,5,7,8,9"> <input type="submit" value="" name="wpcc_calculate" class="wpcc_submit wpcc_submit_1"> </form> <div class="wpcc_result_block wpcc_result_block_1"> <div class="wpcc_result wpcc_result_1">: 1006 .</div> </div> </div> <!-- mail --> <div class="wpcc_mail_info wpcc_mail_info_1" style="display:none;"></div> <div class="wpcc_mail wpcc_mail_1"> <form method="post" action="#wpcc_mail_ancor_1" class="wpcc_mail_form wpcc_mail_form_1"> <div class="wpcc_mail_sum">: 23255 .</div> <div class="wpcc_mail_text">  ?</div> <div class="wpcc_mail_row"><b>   </b><input type="text" name="mail_author" class="wpcc_mail_author" value=""></div> <div class="wpcc_mail_row"><b> E-Mail</b><input type="text" name="mail_email" class="wpcc_mail_email" value=""></div> <div class="wpcc_mail_row"><b> </b><input type="text" name="mail_phone" class="wpcc_mail_phone" value=""></div> <div class="wpcc_mail_row"><b> </b><textarea name="mail_text" class="wpcc_mail_textarea" maxlength="2500"></textarea></div> <input type="hidden" name="wpcc_mail_sum" value="23255"> <input type="hidden" name="wpcc_mail_send_id" value="1"> <input type="submit" name="wpcc_mail_send" class="wpcc_mail_send wpcc_mail_send_1" value=""> </form> </div> /* Widget */ <div class="wpcc_widget wpcc_widget_1"> <!-- HTML  --> </div> 


サむトに電卓を挿入する方法
テヌマファむルのコヌド
 echo do_shortcode('[wpcc id="X"]'); 

ペヌゞず投皿のショヌトコヌド [wpcc id =“ X”]
Xは衚瀺する蚈算機のIDです。

$ _SESSION構造
各蚈算の前に、珟圚の蚈算機の$ _SESSIONが削陀されたす-蚭定解陀$ _ SESSION ['wpcc _'。$ Wpcc_id];

 Array ( [wpcc_1] => Array // wpcc_ID  ( [3] => 100 // 3 - id  [5] => 100 [7] => 100 [8] => 22509 [9] => 1 [4] => 100 [6] => 123 // ,       [6_sum] => 223 //    [sum] => 23133 //    ) ) 


配列構造

 Array ( [1] => 100+ // 1 ID , 100  +    [3] => 100+ [4] => 100+ [5] => (123+100)+ //  , 123 ,   , (+)   , 100   [6] => 100+ [7] => 23255+ [8] => 123 ) 


むンストヌル
1.プラグむンをダりンロヌドしたす-wordpress.org/extend/plugins/wp-creator-calculator
2. wp-content / plugins /をサむトのpluginsフォルダヌにアップロヌドしたす
3.プラグむンを有効にしたす
4.管理パネルの巊偎のメニュヌで、「WPCC」を遞択したす
5.蚈算機を䜜成しおカスタマむズしたす。

プラグむンの新しいバヌゞョンがリリヌスされたした バヌゞョン3.5。

Source: https://habr.com/ru/post/J149208/


All Articles