Modifiez votre message avec une belle pétition

WordPress est une excellente plateforme polyvalente. Vous pouvez créer un site Web avec de nombreux objectifs différents : un site Web d'entreprise, une vitrine de photographies, un portail d'actualités, un site Web de restaurant avec un menu interactif... Oh, et bien sûr un blog. Vous pouvez bloguer en utilisant WordPress. Oublié.

Curieusement, les organisations à but non lucratif négligent souvent cette flexibilité et en profitent. Dans ce didacticiel, nous allons vous montrer comment créer un script de pétition simple qui montre comment une organisation peut bénéficier de WordPress.

---

Que construisons-nous exactement ?

Je suis un grand fan des shortcodes (comme vous pouvez le voir dans mes articles précédents), nous allons donc créer un tas de shortcodes et quelques fonctions utiles à utiliser par les shortcodes. Nous mettrons tout cela dans un fichier appelé petition.php et l’utiliserons comme plugin WordPress.

---

Fonctions auxiliaires

Puisque nous allons les utiliser dans des shortcodes, j'ai pensé qu'il serait préférable de les créer et de les expliquer d'abord.

Fonctionnalité de base de vérification des e-mails

Si vous utilisez PHP5 sur votre serveur, nous utiliserons le validateur d'e-mail intégré pour nos fonctionnalités :

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

Si vous utilisez quelque chose d'ancien comme PHP4, vous pouvez utiliser différentes fonctions qui utilisent des expressions régulières :

// 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;
}

Attention : Vous ne pouvez pas utiliser les deux en même temps !

Fonction pour soumettre des entrées

Nous pourrions créer et utiliser une table de base de données différente pour contenir les soumissions de pétitions, mais je ne pense pas que ce soit une bonne pratique. Hé, un problème avec les champs personnalisés ?

// 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;
}

Comme vous pouvez le lire dans le code ;

• Nous mettons la variable $name、$email 和 $date dans la fonction (à partir du shortcode que nous aborderons plus tard)
• Rassemblez trois variables en créant un tableau et en le sérialisant
• et enregistrez les données dans un champ personnalisé nommé 'petition_submission'

Simple, non ? Nous pouvons maintenant passer à la partie un peu difficile.

Fonction pour obtenir du contenu soumis

Nous pouvons désormais sauvegarder les soumissions, mais comment les obtenir et agir avec elles ? Voici comment procéder :

// 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 );
	}
}

Tu te souviens quand j'ai dit que ce serait un peu difficile ? J'ai menti :

• Nous attribuons la valeur des métadonnées de publication à une variable de tableau à l'aide de la touche "petition_submission"
• Ensuite, nous obtenons $number (par défaut 5) commits à partir de la fin du tableau (note -1)
• Nous renvoyons une liste inversée de ce tableau de tranches pour le trier de la plus récente à la plus ancienne

Extra : sélecteurs CSS à utiliser

Nous utiliserons certains sélecteurs CSS dans le code, alors placez-les dans le fichier style.css de votre thème :

#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;
}

N'hésitez pas à modifier les valeurs par défaut des propriétés :)

---

Shortcode

Nous avons terminé les fonctions d'assistance et le code CSS. Passons maintenant à la partie amusante : les shortcodes !

Nous pourrions simplement utiliser un gros shortcode pour joindre le formulaire, lister les entrées et afficher le nombre de soumissions, mais... pourquoi tuer tout le plaisir ? De plus, des shortcodes distincts pour ces trois éléments nous permettront de les utiliser n'importe où dans notre contenu.

Vous ai-je déjà dit à quel point J'aime les shortcodes ?

Shortcode pour la pétition

Cette fonction est assez longue, je vais donc utiliser les commentaires PHP pour expliquer le code À l'intérieur  :

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' );

J'ai essayé d'être le plus clair possible, mais si vous pensez que j'ai raté quelque chose, n'hésitez pas à me le demander en commentant ce post !

Shortcode pour soumettre une liste

La section « Dernières entrées » est la preuve que des personnes rejoignent votre cause, nous devons donc répertorier au moins un certain nombre de soumissions.

Ce n'est pas non plus une fonction courte, je vais donc expliquer à nouveau le code avec des commentaires :

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' );

Encore une fois, si vous souhaitez poser des questions, n'hésitez pas à laisser un commentaire sur ce post.

Shortcode pour le nombre de pétitions

Il s'agit d'une toute petite fonction permettant simplement de savoir combien d'entrées ont été soumises :

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

Comme vous pouvez le voir, il jette simplement le champ personnalisé dans un tableau, le compte et renvoie le nombre.

---

Conclusion

Je dois souligner qu'il s'agit d'un exemple très simple de la façon dont les organisations peuvent bénéficier de WordPress en tirant parti de ce type de script. Si vous pensez à des améliorations de ce script (ou tutoriel), veuillez partager vos réflexions dans les commentaires ci-dessous. Merci d'avoir lu!

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!