tabbed forms

Μια περιοχή για το WordPress, αυτή την δημοφιλή δωρεάν πλατφόρμα για blogging

Συντονιστές: WebDev Moderators, Super-Moderators, PHP Moderators

Απάντηση
argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

tabbed forms

Δημοσίευση από argate7 » 20 Φεβ 2014 13:18

Υπάρχει κάποιος τρόπος να φτιάξω σε wordpress, φόρμα που να έχει 2-3 tabs? Κάθε tab θα έχει τα ίδια πεδία με τα υπόλοιπα. Μπορεί να δώσει κάποιος τα φώτα του??

Είναι η πρώτη φορά που ασχολούμαι με wordpress και δεν τα ξέρω τα κατατόπια!

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

tabbed forms

Δημοσίευση από geomagas » 20 Φεβ 2014 13:27

Μπορείς. Το WP παράγει τα γνωστά html/css/javascript και για να το κάνει, χρησιμοποιεί την επίσης γνωστή php.

Αν η ερώτησή σου αφορά το wordpress api, πες πιο αναλυτικά τι θέλεις να κάνεις.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

tabbed forms

Δημοσίευση από argate7 » 20 Φεβ 2014 13:51

Σε HTML,CSS με JavaScript θα μπορεσω εύκολα να το κανω. Ρωτάω αν υπάρχει άλλος τρόπος μεσα στο wordpress. Με κάποιο API ή καποιο plugin.

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

tabbed forms

Δημοσίευση από geomagas » 20 Φεβ 2014 14:02

Ναι, προφανώς θα φτιάξεις ένα plugin που θα χρησιμοποιεί το wordpress api για να παράγει αυτό που θέλεις.

Αφού ξεκινήσεις το plugin σου, μία ιδέα είναι να προσθέσεις ένα shortcode (πχ [myform]) το οποίο θα παράγει τη φόρμα σου και το οποίο θα περιλαμβάνεις σε οποιοδήποτε σημείο του content θέλεις να εμφανίζεται (η φόρμα).

Από εκεί και πέρα, είσαι σε "χαρτογραφημένα νερά"!

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

tabbed forms

Δημοσίευση από argate7 » 20 Φεβ 2014 14:05

Στην ουσία το φτιάχνω σαν να το έφτιαχνα εκτός wp και σε αυτη την περίπτωση το φέρνω στη μορφή του API του wp για να μπορώ να το χρησιμοποιώ ξανά και ξανά. Σωστά;;

Υπάρχει καποιο tutorial για το συγκεκριμένο plugin??

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

tabbed forms

Δημοσίευση από geomagas » 20 Φεβ 2014 14:25

Δεν ξέρω κανένα για κάτι τόσο συγκεκριμένο, αλλά αν θέλεις να ξεκινήσεις, δοκίμασε αυτό:

Κώδικας: Επιλογή όλων

<?php
/*
Plugin Name&#58; agrate7 form
*/

add_shortcode&#40;'my_form','render_my_form'&#41;;

function render_my_form&#40;$atts&#41;
  &#123;
  $r='';
  if&#40;isset&#40;$_POST&#91;'fubar'&#93;&#41;&#41; $r.="<p>fubar=&#123;$_POST&#91;'fubar'&#93;&#125; posted!</p>";
  // rest of $_POST validation/handling here
  $r.='<form method="post">';
  $r.='<label>Gimme a fubar&#58;';
  $r.='<input type="text" id="fubar" name="fubar">';
  $r.='</label>';
  $r.='<input type="submit" value="Fubarize me">';
  $r.='</form>';
  return $r;
  &#125;
- Γράψε το σε ένα αρχείο στο wp-content/plugins (καλύτερα να του φτιάξεις το δικό του φάκελο).
- Ενεργοποίησε το από το admin
- Φτιάξε ένα άρθρο ή σελίδα με περιεχόμενο:

Κώδικας: Επιλογή όλων

My awsome fubarizer form
&#91;my_form&#93;
Like it???
- Και δες το να δουλεύει.

Από εκεί και πέρα, το θέμα είναι πως θα παράγεις το $r στην παραπάνω συνάρτηση. Αυτό δεν είναι wordpress-specific, αλλά αν θέλεις το συζητάμε.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

tabbed forms

Δημοσίευση από argate7 » 20 Φεβ 2014 16:09

Δεν μπόρεσα να βγάλω άκρη.

Για να δώσω λίγο καλύτερα το παράδειγμά μου... Θέλω να κάνω κάτι σαν τη φόρμα που έχει στο http://www.petas.gr/gr/aktoploika-eisitiria.html αλλά από δίπλα να έχει tabs για εισητήρια και για αεροπλάνα και τρένων. Μία τέτοια φόρμα. Είναι πιο κατανοητό αυτό? Συγγνώμη αν δεν το είχα προσδιορίσει καλύτερα νωρίτερα.

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

tabbed forms

Δημοσίευση από geomagas » 20 Φεβ 2014 16:59

argate7 έγραψε:Δεν μπόρεσα να βγάλω άκρη.
Εννοείς ότι δεν σου έτρεξε το παραπάνω, ή ότι δεν ξέρεις πως να το συνεχίσεις;
argate7 έγραψε:Για να δώσω λίγο καλύτερα το παράδειγμά μου... Θέλω να κάνω κάτι σαν τη φόρμα που έχει στο http://www.petas.gr/gr/aktoploika-eisitiria.html αλλά από δίπλα να έχει tabs για εισητήρια και για αεροπλάνα και τρένων. Μία τέτοια φόρμα. Είναι πιο κατανοητό αυτό? Συγγνώμη αν δεν το είχα προσδιορίσει καλύτερα νωρίτερα.
Οκ. Αν σου πω να το κάνεις σε html, μπορείς; (προφανώς εσύ ξέρεις πως θα φαίνεται)
Και μετά θα σου εξηγήσω πως να το ενσωματώσεις σε plugin.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

tabbed forms

Δημοσίευση από argate7 » 20 Φεβ 2014 20:35

Παρακάτω ο κώδικας που έχω...

Κώδικας: Επιλογή όλων

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="style.css" rel="stylesheet" type="text/css">
</head>
<body>
<div id="wrapper">
  <div id="tabContainer">
    <div id="tabs">
      <ul>
        <li id="tabHeader_1">Τίτλος 1</li>
        <li id="tabHeader_2">Τίτλος 2</li>
        <li id="tabHeader_3">Τίτλος 3</li>
      </ul>
    </div>
    <div id="tabscontent">
      <div class="tabpage" id="tabpage_1">
        <h2>Τίτλος 1</h2>
         <form name="form1" method="post" action="">
        <table width="200" border="0">
          <tr>
            <td><label>Tιτλος<br /><input name="title" type="text"></label></td>
          </tr>
          <tr>
          <td></td>
            <td align="right"><label>Μέρα<br /><input name="day" type="checkbox"></label></td>
          </tr>
          <tr>
            <td><label>Παιδιά<br /><select name="kids"></select></label></td>
          </tr>
          <tr>
            <td><label>Ονοματεπώνυμο<br /><input name="name" type="text"></label></td>
            <td></td>
            <td><label>E-mail<br /><input name="email" type="text"></label></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td></td>
            <td align="right"><input name="submit" type="submit" value="Αποστολή"></td>
          </tr>
        </table>
        </form>
      </div>
      <div class="tabpage" id="tabpage_2">
        <h2>Τίτλος 2</h2>
        <form name="form1" method="post" action="">
        <table width="200" border="0">
          <tr>
            <td><label>Tιτλος<br /><input name="title" type="text"></label></td>
          </tr>
          <tr>
          <td></td>
            <td align="right"><label>Μέρα<br /><input name="day" type="checkbox"></label></td>
          </tr>
          <tr>
            <td><label>Παιδιά<br /><select name="kids"></select></label></td>
          </tr>
          <tr>
            <td><label>Ονοματεπώνυμο<br /><input name="name" type="text"></label></td>
            <td></td>
            <td><label>E-mail<br /><input name="email" type="text"></label></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td></td>
            <td align="right"><input name="submit" type="submit" value="Αποστολή"></td>
          </tr>
        </table>
        </form>
      </div>
      <div class="tabpage" id="tabpage_3">
        <h2>Τίτλος 3</h2>
        <form name="form1" method="post" action="">
        <table width="200" border="0">
          <tr>
            <td><label>Tιτλος<br /><input name="title" type="text"></label></td>
          </tr>
          <tr>
          <td></td>
            <td align="right"><label>Μέρα<br /><input name="day" type="checkbox"></label></td>
          </tr>
          <tr>
            <td><label>Παιδιά<br /><select name="kids"></select></label></td>
          </tr>
          <tr>
            <td><label>Ονοματεπώνυμο<br /><input name="name" type="text"></label></td>
            <td></td>
            <td><label>E-mail<br /><input name="email" type="text"></label></td>
          </tr>
          <tr>
            <td>&nbsp;</td>
            <td></td>
            <td align="right"><input name="submit" type="submit" value="Αποστολή"></td>
          </tr>
        </table>
        </form>
      </div>
    </div>
  </div></div>
<script src="tabs_old.js"></script>
<script type="text/javascript">

  var _gaq = _gaq || &#91;&#93;;
  _gaq.push&#40;&#91;'_setAccount', 'UA-1332079-8'&#93;&#41;;
  _gaq.push&#40;&#91;'_trackPageview'&#93;&#41;;

  &#40;function&#40;&#41; &#123;
    var ga = document.createElement&#40;'script'&#41;; ga.type = 'text/javascript'; ga.async = true;
    ga.src = &#40;'https&#58;' == document.location.protocol ? 'https&#58;//ssl' &#58; 'http&#58;//www'&#41; + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName&#40;'script'&#41;&#91;0&#93;; s.parentNode.insertBefore&#40;ga, s&#41;;
  &#125;&#41;&#40;&#41;;

</script>
</body>
</html>

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

tabbed forms

Δημοσίευση από geomagas » 20 Φεβ 2014 21:40

Λοιπόν:

1) Δημιουργείς ένα φάκελο στο wp-content/plugins
2) Ρίχνεις μέσα τα style.css και tabs_old.js
3) Κόβεις μόνο το #wrapper div και το γράφεις σε ένα πχ form.html.part στον ίδιο φάκελο
4) Δημιουργείς (πάντα στον ίδιο φάκελο) ένα πχ plugin.php και μέσα βάζεις:

Κώδικας: Επιλογή όλων

<?php
/*
Plugin Name&#58; agrate7 form
*/

function form_script_and_style&#40;&#41; 
  &#123;
  wp_enqueue_style&#40;'form-style',plugins_url&#40; '/style.css',__FILE__&#41;&#41;;
  wp_enqueue_script&#40;'form-js',plugins_url&#40; '/tabs_old.js',__FILE__&#41;&#41;;
  &#125;

add_action&#40;'wp_enqueue_scripts','form_script_and_style'&#41;;

function process_post_data&#40;&#41;
  &#123;
  // process $_POST here
  &#125;

function render_my_form&#40;$atts&#41;
  &#123;
  process_post_data&#40;&#41;;
  $dir=plugin_dir_path&#40;__FILE__&#41;;
  return file_get_contents&#40;"$dir/form.html.part"&#41;;
  &#125;

add_shortcode&#40;'my_form','render_my_form'&#41;;
5) Κάνε ότι είπα παραπάνω, από την ενεργοποίηση και κάτω.

Προφανώς, θα πρέπει να συμπληρώσεις την process_post_data().

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

tabbed forms

Δημοσίευση από argate7 » 20 Φεβ 2014 23:43

Θα το δοκιμάσω αυτο μου που έστειλες. Μεσα στη μέθοδο τι θα πρέπει να κανω;; Δεν κατάλαβα.

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

tabbed forms

Δημοσίευση από geomagas » 21 Φεβ 2014 08:28

Να ελέγξεις αν έχει γίνει submit η φόρμα και να πράξεις αναλόγως.

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

tabbed forms

Δημοσίευση από argate7 » 21 Φεβ 2014 15:23

Λοιπόν αγορίνα έκανα ό,τι ακριβώς μου είπες. Το βρήκα μέσα στο admin panel το plugin που δημιουργήθηκε, αλλά δεν μπορώ μέσα στην index να την εμφανίσω τη φόρμα.

geomagas
Δημοσιεύσεις: 667
Εγγραφή: 06 Απρ 2013 13:36
Τοποθεσία: Ηράκλειο Κρήτης
Επικοινωνία:

tabbed forms

Δημοσίευση από geomagas » 21 Φεβ 2014 17:38

...Ποιά index;;;

Έφτιαξες μία σελίδα να βάλεις μέσα το shortcode;

argate7
Δημοσιεύσεις: 233
Εγγραφή: 30 Σεπ 2009 02:38

tabbed forms

Δημοσίευση από argate7 » 22 Φεβ 2014 19:24

Προσπάθησα μέσα στην index και όχι στο header, footer κλπ. να βάλω το [my_form] αλλά δε μου εμφανίζει τίποτα. Μπορεί και να έκανα μ@λακία αλλά δεν ξέρω πως θα πρέπει να παίξω με τα plugin στο wp.

Απάντηση

Επιστροφή στο “WordPress γενικά”

Μέλη σε σύνδεση

Μέλη σε αυτήν τη Δ. Συζήτηση: Δεν υπάρχουν εγγεγραμμένα μέλη και 1 επισκέπτης