Share
In diesem Tutorial werde ich Sie durch die Erstellung eines schönen "Register" -Formulars führen, indem Sie Fancybox, jQuery und natürlich WordPress verwenden. Wie Sie feststellen werden, ist der Prozess sehr einfach.
Zuerst platzieren Sie unseren Button oben auf der Seite und ersetzen die Standardbeschreibung im Design.
Registrieren
Beachten Sie, dass das Href (# register-form) in der Registrierungsschaltfläche dieselbe ID wie das unten stehende Formular hat. Wir verwenden auch die Klasse ".show", um FancyBox mit jQuery aufzurufen.
Wir brauchen unsere Basis. Lassen Sie uns unser Markup erstellen. Öffnen Sie die Datei header.php und platzieren Sie das folgende Snippet an einer beliebigen Stelle.
Registriere dein Konto
Melden Sie sich bei uns und genießen Sie es!
Beachten Sie, dass ich display: none verwende, um das Formular anfänglich auszublenden.
Das CSS ist ziemlich einfach. Ich stelle lediglich ein schnelles Formulardesign in PhotoShop ein.
Das Formular ohne das Styling sieht folgendermaßen aus: (Beachten Sie, dass ich die Anzeige entfernt habe: keine im Markup, um meine Stile zu überprüfen)
Beginnen wir als nächstes damit, unsere Box zu gestalten.
div # register-form width: 400px; Überlauf versteckt; Höhe: 230px; Position: relativ; Hintergrund: # f9f9f9 URL (images / secure.png) no-repeat 260px 40px; Schriftfamilie: Helvetica Neue, Helvetica, Arial! wichtig;
Wenn ich fortfahre, stelle ich jetzt die Texteingaben ein und füge etwas mehr Fantasie hinzu.
div # register-form input [type = "text"] display: block; Rahmen: 1px fest #ccc; Marge: 5px 20px; Polsterung: 9px 4px; -moz-border-radius: 4px; -webkit-border-radius: 4px; Breite: 200px; Schriftfamilie: Helvetica Neue, Helvetica, Arial! wichtig; div # register-form input [type = "text"]: hover border-color: # b1b1b1; div # register-form input [type = "text"]: focus -moz-box-shadow: 0 0 3px #ccc; -webkit-box-shadow: 0 0 3px #ccc;
Jetzt werde ich die Schaltfläche formatieren, einen Schwebeflugstatus hinzufügen und die Standardschaltfläche durch ein Bild ersetzen.
div # register-form input [type = "submit"] # register background: url (images / register.jpg) no-repeat; Grenze: 0; Lösche beide; Cursor: Zeiger; Höhe: 31px; Überlauf versteckt; Position: relativ; links: 295px; Text-Gedankenstrich: -9999px; oben: 42px; Breite: 92px; div # register-form input [type = "submit"] # register: hover Hintergrundposition: 0 -32px;
Zum Schluss fügen wir noch etwas allgemeines Styling hinzu.
div # register-form span display: block; Rand unten: 22px; div # register-form div.title margin-left: 15px div # register-form div.title h1, div # register-form div.title span text-shadow: 1px 1px 0px #fff div # register- form div.title h1 margin: 7px 0; p.Anweisung Position: absolut; unten: -2px; links: 10px; Schriftgröße: .9em; Farbe: # 6d6d6d; Text-Schatten: 1px 1px 0px #fff;
Voila! Wir haben unsere Form. Lassen Sie uns nun mit der jQuery-Funktion fortfahren.
Zunächst müssen wir jQuery in WordPress einbinden. Um dies zu erreichen, müssen wir den folgenden Code vor dem
Tag in der Datei header.php. Denken Sie daran, da WordPress selbst jQuery verwendet, möchten wir es möglicherweise nicht zweimal laden!Laden Sie Fancybox herunter und legen Sie es in Ihrem WordPress-Ordner ab. Um etwas mehr zu organisieren, habe ich einen Ordner "Includes" erstellt.
Als nächstes öffnen Sie Ihre footer.php-Datei und platzieren Sie die folgende vor dem Ende von Etikett
Und jetzt rufen wir die Fancybox-Methode auf. Fügen Sie diese nach dem obigen Code und vor dem schließenden Body-Tag ein.
Accentsconagua
jQuery (document) .ready (function () jQuery (". show"). fancybox ('titleShow': 'false', 'transitionIn': 'fade', 'transitionOut': 'fade');) ; Wir sind fertig! Unser Formular wurde erstellt. Schließlich müssen wir nur die erforderlichen WordPress-Informationen übergeben, damit sie ordnungsgemäß funktionieren.
Hier ist nichts Besonderes. Wir benötigen nur zwei WordPress-Snippets, die in der Datei wp-login.php versteckt sind.
Der erste Ausschnitt:
Und:
Der endgültige Code sollte so aussehen:
Registriere dein Konto
Melden Sie sich bei uns und genießen Sie es!
Bitte beachten Sie, dass es ist wirklich wichtig, und notwendig, um user_login als Namen und als ID in Ihrer Texteingabe zu haben; Gleiches gilt für die E-Mail-Eingabe. Sonst funktioniert es nicht.
Und damit sind wir fertig!
Mit einem Hauch von Code und einigen Verbesserungen ist es uns gelungen, ein gut aussehendes "Anmeldeformular" für unsere Benutzer zu erstellen. Was denkst du?
