Share
Flervalsfrågor är något som de flesta av oss har mött minst en gång i vårt liv. Vi älskar dem eftersom vi kan ge korrekta svar genom att logiskt tänka på förutsedda möjligheter, även om vi inte exakt vet rätt svar. Också svara tar mindre tid vilket gör den så populär.
Att skapa ett flervalsfrågor i WordPress kan vara en mycket spännande och lönsam uppgift. Du kan använda den i din personliga blogg för att locka till fler besökare, eller du kan skapa en premieavdelning med avancerade frågesporter, eller du kan skapa frågesporter som fokuserar på populära certifikatprov. Det finns många möjligheter att göra det lönsamt.
Det här pluginet tar dig inte igenom för att skapa frågesport för att bygga ett företag, men vi måste börja någonstans för att komma dit vi vill åka. Så det skulle vara en bra start för att skapa frågesportar och göra vinster ut ur det.
Så låt oss börja.
Först måste vi samla kraven i plugin innan vi går till design eller implementering. I grund och botten borde vi kunna skapa multipelvalsquizzer och låta användare ta frågorna och få resultat.
Så låt oss ta en titt på de detaljerade kraven och komponenterna i vårt plugin:
Denna handledning kommer att konstrueras som en tvådelad serie, där vi utvecklar baksidan av plugin i första delen, följt av pluginfronten i andra delen.
I den här delen kommer vi att fokusera på att utveckla backend i plugin där vi utvecklar nödvändiga data för frågesport.
Vanligtvis finns en lista med frågesporter, var och en innehåller en specifik lista över frågor. Med denna plugin kommer vi inte att skapa frågesport. Vi kommer att skapa individuella frågor och tilldela dem dynamiskt till frågesporter när det begärs.
Nu kan vi ta tid att identifiera de komponenter som krävs för att implementera backenden som anges i följande avsnitt.
Accentsconagua
wptuts_quiz.quiz_categories för wptuts_quiz posttyp.Efter att ha identifierat de nödvändiga WordPress-komponenterna kan vi direkt flytta in till implementering av backend för quiz-plugin.
Frågeprocessen består av fyra huvudavsnitt: definierar anpassad posttyp, definierar anpassad taxonomi, tilldelar anpassade fält och valideringar. Var och en av dessa avsnitt kommer att diskuteras med detaljerad kod i de kommande avsnitten.
Vi behöver den mest grundläggande formen av anpassad posttyp för frågor utan några avancerade konfigurationer. Det enda vi behöver tänka på är valet av rätt fält för frågan.
Standardinställningsskärmen innehåller två fält för titel och innehåll. Du kan välja något av dessa fält för frågan. Jag ska välja sammanfattning av både titel- och innehållsfält med tanke på avancerade möjligheter.
Vi kommer att skapa ett objektorienterat plugin istället för ett funktionellt plugin, så alla nödvändiga åtgärder, kortkoder och initialiseringar görs inom konstruktören. Följande innehåller koden för att genomföra wptuts_quiz posttyp.
klass WP_Quiz public $ plugin_url; allmän funktion __construct () $ this-> plugin_url = plugin_dir_url (__FILE__); add_action ('init', array ($ this, 'wpq_add_custom_post_type')); public function wpq_add_custom_post_type () $ labels = array ('name' => _x ('Frågor', 'wptuts_quiz'), 'menu_name' => _x ('WPTuts Quiz', 'wptuts_quiz'), 'add_new' => _x ('Add New', 'wptuts_quiz'), 'add_new_item' => _x ('Lägg till ny fråga', 'wptuts_quiz'), 'new_item' => _x ('Ny fråga', 'wptuts_quiz'), 'all_items' => _x ('Alla frågor', 'wptuts_quiz'), 'edit_item' => _x ('Redigera fråga', 'wptuts_quiz'), 'view_item' => _x ('Visa fråga', 'wptuts_quiz'), 'search_items '=> _x (' Sökfrågor ',' wptuts_quiz '),' not_found '=> _x (' Inga frågor hittades ',' wptuts_quiz ')); $ args = array ('labels' => $ etiketter, 'hierarchical' => true, 'description' => 'WP Tuts Quiz', 'supports' => = true, 'show_ui' => true, 'show_in_menu' => true, 'show_in_nav_menus' => true, 'publicly_queryable' => sant, 'exclude_from_search' => false, 'has_archive' => true, 'query_var' = > true, 'can_export' => true, 'rewrite' => true, 'capability_type' => 'post'); register_post_type ('wptuts_quiz', $ args); Vi har aktiverat både titel och redigeringsfält i den anpassade posttypen för att kunna använda frågan. Eftersom funktionerna finns i en klass måste vi använda $ detta i våra WordPress-åtgärder, filter och kortkoder för att ringa upp funktionerna.
Förutom att alla parametrar som nämns i koden initialiseras med standardvärdena.
För att gruppera frågor i specifika avsnitt behöver vi något som liknar standard WordPress-kategorier. Därför kommer vi att använda en anpassad taxonomi som heter quiz_categories. Vi behöver ringa den anpassade taxonomineringsfunktionen på i det åtgärder som vi gjorde tidigare. Så konstruktören i vår plugin-klass behöver uppdateras med följande kod.
add_action ('init', array ($ this, 'wpq_create_taxonomies'), 0); Då kan vi genomföra wpq_create_taxonomies funktion på wptuts_quiz posttyp som visas i följande kod.
funktionen wpq_create_taxonomies () register_taxonomy ('quiz_categories', 'wptuts_quiz', array ('etiketter' => array ('name' => 'Quiz Kategori', 'add_new_item' => 'Lägg till ny quiz-kategori', 'new_item_name' = > "New Quiz Category"), "show_ui" => true, 'show_tagcloud' => false, 'hierarchical' => true)); Jag har använt standardalternativsparametrarna för att skapa denna anpassade taxonomi. När plugin är aktiverad visas din anpassade posttyp och taxonomi som visas på följande skärm.
Därefter måste vi skapa flera svar för varje fråga. I denna plugin är det maximala antalet svar per enskild fråga begränsad till fem.
Du kan dynamiskt tilldela 1-5 svar på alla frågor. Vi måste också ange det korrekta svaret från den angivna listan med svar. Eftersom dessa uppgifter är förknippade med våra frågor kan vi använda en metakassa med anpassade fält för att skapa de nödvändiga fälten.
Som vanligt behöver vi uppdatera konstruktören med följande kod:
add_action ('add_meta_boxes', array ($ this, 'wpq_quiz_meta_boxes')); Tänk på följande kod för genomförandet av metakasser med svarfält.
funktion wpq_quiz_meta_boxes () add_meta_box ('quiz-answers-info', 'Quiz Svar Info', array ($ this, 'wpq_quiz_answers_info'), 'wptuts_quiz', 'normal', 'high'); funktion wpq_quiz_answers_info () global $ post; $ question_answers = get_post_meta ($ post-> ID, '_question_answers', true); $ question_answers = ($ question_answers == ")? array (", ",", ","): json_decode ($ question_answers); $ question_correct_answer = trim (get_post_meta ($ post-> ID, '_question_correct_answer', true)); $ html = ''; $ html. = '| '; $ html. = ' |
|---|
post_meta bord med nyckeln _question_answers. Så vi får tillgång till det här fältet med hjälp av get_post_meta funktion för att få nuvarande värden.post_meta bord med nyckeln _question_correct_answer.get_post_meta funktionen kommer att tilldelas respektive fält.Du borde se något som liknar följande skärm, när du har skapat metaboxen.
Nu har vi all information som krävs för vår plugin för quizgenerering. Nästa steg är att spara fråge data i databasen.
Men vi behöver några valideringar innan det. Så låt oss gå över i valideringar.
Vi har inte komplicerade valideringsregler vid denna tidpunkt i frågan skapande processen. Därför kommer vi att använda klientsidan jQuery-valideringar innan de skickas in.
Här behöver vi admin_enqueue_scripts åtgärd som ska ingå i konstruktören av vårt plugin.
Så uppdatera konstruktören med följande kod innan vi börjar.
add_action ('admin_enqueue_scripts', array ($ this, 'wpq_admin_scripts')); Kolla nu på följande kod för att inkludera nödvändiga skriptfiler för validering.
funktion wpq_admin_scripts () wp_register_script ('quiz-admin', plugins_url ('js / quiz.js', __FILE__), array ('jquery')); wp_enqueue_script ("quiz-admin"); Använder sig av wp_register_script och wp_enqueue_script, vi har en plugin-specifik JS-fil som heter quiz.js för hantering av valideringar. Valideringen kommer att göras med jQuery-biblioteket och därför har vi satt in det inbyggda jQuery-biblioteket som ett beroende av vår plugin-specifika JavaScript.
Vi har tagit med skripten, låt oss genomföra de faktiska valideringarna i quiz.js filen som visas i följande kod.
jQuery (dokument) .ready (funktion ($) $ ("# post-body-content"). prepend (''); $ ('# post'). Skicka (funktion () if ($ ("# post_type") .val () == 'wptuts_quiz') returnera wpq_validate_quizes ();); ); För det första tilldelar vi en tom div element till bildskärmen för att skapa eventuella fel. Då kan vi ringa en anpassad JS-funktion på postpubliceringsåtgärden genom att kontrollera rätt posttyp med hjälp av #post_type doldt fältvärde.
Följande kod innehåller genomförandet av wpq_validate_quizes fungera.
var wpq_validate_quizes = funktion () var err = 0; $ ( "# Quiz_error") html ( ""); $ ( "# Quiz_error") döljer (). om ($ ("# title") .val () == ") $ (" # quiz_error ").Var vänlig ange frågestitel.
val (); ($ ("# quiz_answer" + correct_answer) .val () == "") $ ("# quiz_error"). bifoga("Korrekt svar kan inte vara tomt.
"), (err), if (err> 0) $ (" # publicera "). removeClass (" knapp-primärtaktiverad "); $ (" spinner "). hide (); $ (" # quiz_error " ) .show (); return false; else return true;; Följande bild visar bildskärmen för skapande av inlägg med anpassade valideringsmeddelanden.
När formuläret är framgångsrikt validerat utan fel kan vi gå vidare till att spara frågetaljerna till databasen.
WordPress ger en åtgärd som heter spara inlägget, som kommer att utföras strax efter posten skapandet. Vi kan definiera en anpassad funktion på spara inlägget åtgärd för att spara anpassade fältuppgifter i databasen.
Som vanligt uppdaterar konstruktören med spara inlägget åtgärdskod.
add_action ('save_post', array ($ this, 'wpq_save_quizes')); Genomförande av wpq_save_quizes funktionen ges i följande kod.
funktion wpq_save_quizes ($ post_id) if (! wp_verify_nonce ($ _POST ['question_box_nonce'], basnamn (__FILE__))) return $ post_id; om (definierad ('DOING_AUTOSAVE') && DOING_AUTOSAVE) returnera $ post_id; om ('wptuts_quiz' == $ _POST ['post_type'] && current_user_can ('edit_post', $ post_id)) $ question_answers = isset ($ _POST ['quiz_answer']))? ($ _POST ['quiz_answer']): array (); $ filtered_answers = array (); foreach ($ question_answers som $ svar) array_push ($ filtered_answers, sanitize_text_field (trim ($ answer))); $ question_answers = json_encode ($ filtered_answers); $ correct_answer = isset ($ _POST ['correct_answer'])? sanitize_text_field ($ _POST ['correct_answer']): ""; update_post_meta ($ post_id, "_question_answers", $ question_answers); update_post_meta ($ post_id, "_question_correct_answer", $ correct_answer); annars returnera $ post_id; Post-ID skickas automatiskt till denna funktion. Ursprungligen utför vi valideringar för nonce värde och autosave. Det viktigaste innan du sparar är valideringen av posttyp.
Om du släpper in posttypskontrollen kommer den här koden att utföras för alla posttyper i din WordPress-installation, inklusive vanliga inlägg, vilket kan leda till inkonsekventa data.
Slutligen får vi värdena i våra svarfält och korrekt svarfält som ska sparas i databasen med hjälp av update_post_meta fungera. Alla anpassade fält detaljer kommer att sparas i post_meta tabell.
Nu har vi slutfört frågeställningen. Eftersom vi använder slumpmässigt genererade frågesporter kan du behöva massor av frågor för att se det här pluginet i aktion. Så gör dig redo genom att lägga till ytterligare frågor innan vi genomför frågesporten i nästa del.
Även om det inte är obligatoriskt är det perfekt att ha en inställningssida för vårt plugin så att administratören kan anpassa sig efter deras preferenser.
Så låt oss implementera en enkel inställningssida för att innehålla frågans varaktighet och antal frågor per frågesport. Vi måste genomföra admin_menu handling i konstruktören.
add_action ('admin_menu', array ($ this, 'wpq_plugin_settings')); funktion wpq_plugin_settings () // skapa ny menyn top_menu add_menu_page ('WPTuts Quiz Settings', 'WPTuts Quiz Settings', 'administrator', 'quiz_settings', array ($ this, 'wpq_display_settings')); funktion wpq_display_settings () $ html = ' '; echo $ html; Vi kan använda add_menu_page funktion för att lägga till en inställningssida i adminområdet. De wpq_display_settings funktionen används för att implementera visningselementen på inställningssidan.
Vi har använt två textfält för varaktighet och frågor per frågesport. Forminsändning och datasparande kan hanteras manuellt med hjälp av anpassad kod, men WordPress ger oss en förenklad metod för uppdatering av alternativ.
I denna metod måste du ställa in formuläråtgärden till options.php fil. Då måste du skapa ett dolt fält som kallas åtgärd för att innehålla värdet av "uppdatering'. Slutligen måste vi ha ett annat dolt fält som heter page_options att innehålla namnen på de två textfälten som ska uppdateras.
Se till att du använder de här inbyggda alternativuppdateringsteknikerna i scenarier där kraven för att spara fälten inte är komplexa.
När knappen Skicka skickas, kommer formuläruppgifterna att uppdateras automatiskt utan någon anpassad kod.
Vi har avslutat bakgrunden för vår quiz-plugin. Nu kan du skapa frågor och göra dig redo för nästa del där vi kommer att använda dessa frågor för att dynamiskt skapa frågesporter.
Fram till dess, låt mig veta det bästa sättet att genomföra en dynamisk frågesport på fronten. Tänk på att endast en fråga kommer att visas i taget. När användaren begär en fråga kan han flytta till nästa fråga.
Ser fram emot dina förslag.
