Ändern Sie Ihren Beitrag mit einer schönen Petition

WordPress ist eine großartige Mehrzweckplattform. Sie können eine Website für viele verschiedene Zwecke erstellen: eine Unternehmenswebsite, eine Fotoschau, ein Nachrichtenportal, eine Restaurant-Website mit einer interaktiven Speisekarte ... Oh, und natürlich einen Blog. Sie können mit WordPress bloggen. Vergessen.

Seltsamerweise übersehen gemeinnützige Organisationen diese Flexibilität oft und nutzen sie aus. In diesem Tutorial zeigen wir Ihnen, wie Sie ein einfaches Petitionsskript erstellen, das zeigt, wie eine Organisation von WordPress profitieren kann.

---

Was genau bauen wir?

Ich bin ein großer Fan von Shortcodes (wie Sie meinen vorherigen Beiträgen entnehmen können), daher werden wir eine Reihe von Shortcodes und einige nützliche Funktionen erstellen, die Shortcodes verwenden können. Wir werden das alles in einer Datei namens petition.php ablegen und sie als WordPress-Plugin verwenden.

---

Hilfsfunktionen

Da wir sie in Shortcodes verwenden werden, dachte ich, es wäre das Beste, sie zuerst zu erstellen und zu erklären.

Grundlegende E-Mail-Verifizierungsfunktion

Wenn Sie PHP5 auf Ihrem Server verwenden, verwenden wir für unsere Funktionalität den integrierten E-Mail-Validator:

// e-mail address validating function
function validate_email( $email ) {
	if ( $email == '' ) {
		return false;
	} else {
		return filter_var( $email, FILTER_VALIDATE_EMAIL );
	}
}

Wenn Sie etwas Altes wie PHP4 verwenden, können Sie verschiedene Funktionen verwenden, die reguläre Ausdrücke verwenden:

// e-mail address validating function
function validate_email( $email ) {
	if ( $email == '' ) {
		return false;
	} else {
		$eregi = preg_replace( '/([a-z0-9_.-]+)' . '@' . '([a-z0-9.-]+){2,255}' . '.' . '([a-z]+){2,10}/i', '', $email );
	}
	return empty( $eregi ) ? true : false;
}

Bitte beachten Sie: Sie können nicht beide gleichzeitig verwenden!

Funktion zum Einreichen von Einträgen

Wir könnten eine andere Datenbanktabelle erstellen und verwenden, um die Petitionseinreichungen zu speichern, aber ich denke nicht, dass dies eine gute Vorgehensweise ist. Hey, gibt es ein Problem mit benutzerdefinierten Feldern?

// submit the signer with a 'petition_submission' meta key to the post
function submission( $name, $email, $date ) {
	global $post;
	$array = array( 'name' => $name, 'email' => $email, 'date' => $date );
	$petition_meta = serialize( $array );
	add_post_meta( $post->ID, 'petition_submission', $petition_meta );
	return true;
}

Wie Sie dem Code entnehmen können;

• Wir fügen die Variable $name、$email 和 $date in die Funktion ein (aus dem Shortcode, den wir später behandeln werden)
• Fügen Sie drei Variablen zusammen, indem Sie ein Array erstellen und es serialisieren
• und speichern Sie die Daten als benutzerdefiniertes Feld mit dem Namen 'petition_submission'

Einfach, oder? Jetzt können wir zum etwas schwierigen Teil kommen.

Funktion zum Abrufen übermittelter Inhalte

Wir können jetzt Einsendungen speichern, aber wie erhalten wir sie und gehen mit ihnen um? So geht's:

// fetch the submissions from the post
function get_the_submissions( $number = 5 ) {
	$petition_meta = get_post_custom_values( 'petition_submission' );
	if ( $petition_meta ) {
		$output = array_slice( $petition_meta, $number * -1 );
		return array_reverse( $output );
	}
}

Erinnerst du dich, als ich sagte, dass das ein bisschen schwierig sein würde? Ich habe gelogen:

• Wir weisen den Wert der Post-Metadaten mit der Taste „petition_submission“
einer Array-Variablen zu
• Dann erhalten wir $number (Standard 5) Commits vom Ende des Arrays (Anmerkung -1)
• Wir geben eine umgekehrte Liste dieser Reihe von Slices zurück, um sie vom neuesten zum ältesten zu sortieren

Extra: Zu verwendende CSS-Selektoren

Wir werden einige CSS-Selektoren im Code verwenden, also fügen Sie sie in die Datei style.css Ihres Themes ein:

#petition_form {}
#petition_form label {
	font-weight: bold;
	font-size: larger;
	line-height: 150%;
}
#petition_form input {
	display: block;
	margin: 5px 0;
	padding: 3px;
}
#petition_name {
	width: 200px;
}
#petition_email {
	width: 200px;
}
#petition_submit {
	padding: 5px;
}
.petition_success {
	color: #693;
}
.petition_error {
	color: #A00;
}
.petition_list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.petition_list li {
	background-image: none !important;
}
.petition_list span {
	display: inline-block;
	width: 45%;
	padding: 1%;
	margin: 1%;
	background-color: #FAFAFA;
}
.submission_name {}
.submission_date {
	font-style: italic;
	color: #888;
}

Fühlen Sie sich frei, die Standardwerte der Eigenschaften zu bearbeiten :)

---

Shortcode

Wir haben die Hilfsfunktionen und den CSS-Code fertiggestellt. Kommen wir nun zum spaßigen Teil – den Shortcodes!

Wir könnten einfach einen großen Shortcode verwenden, um das Formular anzuhängen, die Einträge aufzulisten und die Anzahl der Einsendungen anzuzeigen, aber... warum den ganzen Spaß verderben? Darüber hinaus ermöglichen uns separate Shortcodes für diese drei Elemente, sie überall in unseren Inhalten zu verwenden.

Habe ich dir jemals erzählt, wie ich Shortcodes liebe?

Shortcode für Petition

Diese Funktion ist ziemlich lang, daher werde ich PHP-Kommentare verwenden, um den Code zu erklären Inside :

function petition_form_sc( $atts ) {
	// extract the shortcode parameters
	extract( shortcode_atts( array(
		// the text value of the submit button
		'submit' => 'Submit',
		// the text for the error message
		'error' => 'Your e-mail address is not valid. Please re-enter the form with a valid name and e-mail address.',
		// the text when the submission is successful
		'success' => 'Your submission has been saved. Thank you!'
	), $atts ) );

	// the HTML elements of our petition form
	$form = '<form action="'.get_permalink().'" method="post" id="petition_form">
		<label for="petition_name">Name:</label>
		<input type="text" name="petition_name" id="petition_name" />
		<label for="petition_email">E-mail address:</label>
		<input type="text" name="petition_email" id="petition_email" />
		<input type="submit" name="petition_submit" id="petition_submit" class="submit" value="'.$submit.'" />
	</form>';

	// if the form is "POST"ed...
	if ( $_SERVER['REQUEST_METHOD'] == 'POST' ) {
		// ...get the name...
		$name = $_POST['petition_name'];
		// ...and the e-mail address...
		$email = $_POST['petition_email'];
		// ...and the date of "just now", with the date format of your WP options.
		$date = date( get_option( 'date_format' ) );
		// validate the e-mail address first!
		if ( validate_email( $email ) == true ) {
			// the e-mail address is valid! remember the function below?
			submission( $name, $email, $date );
			// we sent the variables with the submission() function, now we print the success message WITHOUT THE FORM:
			return '<div class="petition_success">' . $success . '</div>';
			// (if you want the form to be printed again after the submission, just add .$form before the semicolon.)
		} else {
			// the e-mail address is NOT valid! we should print the error message WITH THE FORM:
			return '<div class="petition_error">' . $error . '</div>' . $form;
		}
	}
	// and if the form isn't "POST"ed (meaning the visitor just visited the page), just show the form!
	else {
		return $form;
	}
}
add_shortcode( 'petition_form', 'petition_form_sc' );

Ich habe versucht, so klar wie möglich zu sein, aber wenn Sie glauben, dass ich etwas verpasst habe, können Sie mich gerne fragen, indem Sie diesen Beitrag kommentieren!

Kurzcode zum Einreichen einer Liste

Der Abschnitt „Neueste Einträge“ ist ein Beweis dafür, dass sich Menschen Ihrem Anliegen anschließen. Daher müssen wir mindestens eine bestimmte Anzahl von Einsendungen auflisten.

Dies ist auch keine Kurzfunktion, daher erkläre ich den Code noch einmal mit Kommentaren:

function petition_list_sc( $atts ) {
	// extract the shortcode parameters
	extract( shortcode_atts( array(
		// we could set a default number but remember, we already did that in the get_the_submissions() function :)
		'number' => ''
	), $atts ) );

	// get the $number latest submissions...
	$submissions = get_the_submissions( $number );

	// ...and list 'em!
	$output = '<ul class="petition_list">';
	if ( $submissions ) {
		foreach( $submissions as $submission ) {
			// unserialize the data
			$signer = unserialize( $submission );
			// unserialize the data AGAIN, don't know why...
			$signer = unserialize( $signer );
			// you might want to change this part, but the default format look great with the CSS in this tutorial.
			$output .= '<li>';
			$output .= '<span class="submission_name">' . $signer['name'] . '</span>';
			$output .= '<span class="submission_date">' . $signer['date'] . '</span>';
			$output .= '</li>';
		}
	}
	$output .= '</ul>';

	return $output;
}
add_shortcode( 'petition_list', 'petition_list_sc' );

Wenn Sie noch Fragen stellen möchten, hinterlassen Sie bitte einen Kommentar zu diesem Beitrag.

Shortcode für die Petitionszählung

Dies ist eine sehr kleine Funktion, um herauszufinden, wie viele Einträge eingereicht wurden:

function petition_count_sc() {
	$petition_meta = get_post_custom_values( 'petition_submission' );
	return count( $petition_meta );
}
add_shortcode( 'petition_count', 'petition_count_sc' );

Wie Sie sehen können, wirft es einfach das benutzerdefinierte Feld in ein Array, zählt es und gibt die Zahl zurück.

---

Fazit

Ich möchte betonen, dass dies ein sehr einfaches Beispiel dafür ist, wie Unternehmen durch die Nutzung dieser Art von Skript von WordPress profitieren können. Wenn Ihnen Verbesserungen an diesem Skript (oder Tutorial) einfallen, teilen Sie uns Ihre Gedanken bitte in den Kommentaren unten mit. Vielen Dank fürs Lesen!

Das obige ist der detaillierte Inhalt vonÄndern Sie Ihren Beitrag mit einer schönen Petition. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!