Ubah suai siaran anda dengan petisyen yang cantik

WordPress ialah platform pelbagai guna yang hebat. Anda boleh membuat tapak web dengan pelbagai tujuan: tapak web syarikat, pameran fotografi, portal berita, tapak web restoran dengan menu interaktif... Oh, dan sudah tentu blog. Anda boleh berblog menggunakan WordPress. terlupa.

Anehnya, organisasi bukan untung sering mengabaikan fleksibiliti ini dan mengambil kesempatan daripadanya. Dalam tutorial ini, kami akan menunjukkan kepada anda cara membuat skrip petisyen mudah yang menunjukkan cara sesebuah organisasi boleh mendapat manfaat daripada WordPress.

---

Apa sebenarnya yang kita bina?

Saya peminat tegar kod pendek (seperti yang anda boleh lihat daripada siaran saya sebelum ini), jadi kami akan membuat sekumpulan kod pendek dan beberapa fungsi berguna untuk digunakan kod pendek. Kami akan meletakkan semua ini dalam fail yang dipanggil petition.php dan menggunakannya sebagai pemalam WordPress.

---

Fungsi tambahan

Memandangkan kita akan menggunakannya dalam kod pendek, saya fikir adalah lebih baik untuk mencipta dan menerangkannya terlebih dahulu.

Fungsi pengesahan e-mel asas

Jika anda menggunakan PHP5 pada pelayan anda, kami akan menggunakan pengesah e-mel terbina dalam untuk fungsi kami:

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

Jika anda menggunakan sesuatu yang lama seperti PHP4, anda boleh menggunakan fungsi berbeza yang menggunakan ungkapan biasa:

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

Sila ambil perhatian: Anda tidak boleh menggunakan kedua-duanya pada masa yang sama!

Fungsi menghantar penyertaan

Kami boleh mencipta dan menggunakan jadual pangkalan data yang berbeza untuk mengandungi penyerahan petisyen, tetapi saya rasa ini bukan amalan yang baik. Hei, ada masalah dengan medan tersuai?

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

Seperti yang anda boleh baca dari kod;

• Kami meletakkan pembolehubah $name, $email dan $date ke dalam fungsi (daripada shortcode yang akan kami bincangkan kemudian) $name、$email 和 $date 变量放入函数中（来自我们稍后将介绍的简码）
• 通过创建数组并将其序列化将三个变量放在一起
• 并将数据保存为名为 'petition_submission' 的自定义字段

很简单，对吧？现在我们可以进入有点困难的部分了。

获取提交内容的函数

我们现在可以保存提交的内容，但是我们如何获取它们并使用它们进行操作？方法如下：

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

还记得我说过这会有点困难吗？我撒谎了：

• 我们使用“petition_submission”键将帖子元数据的值分配给数组变量
• 然后我们从数组末尾获得了 $number Satukan tiga pembolehubah dengan mencipta tatasusunan dan mensirikannya
Dan simpan data sebagai medan tersuai bernama 'petition_submission'
• Mudah kan? Sekarang kita boleh sampai ke bahagian
agak sukar

.

Fungsi untuk mendapatkan kandungan yang dihantar

Kami kini boleh menyimpan penyerahan, tetapi bagaimanakah kami mendapatkannya dan bertindak dengannya? Begini caranya:

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

Ingat apabila saya berkata ini akan menjadi

agak sukar

? Saya berbohong:

---

Kami menetapkan nilai metadata siaran kepada pembolehubah tatasusunan menggunakan kekunci "petition_submission"

Kemudian kami mendapat $number (lalai 5) commit dari hujung tatasusunan

(nota -1)

Kami memulangkan terbalik

senarai tatasusunan hirisan ini untuk menyusunnya daripada yang terbaru kepada yang paling lama

Tambahan: pemilih CSS untuk digunakan Kami akan menggunakan beberapa pemilih CSS dalam kod, jadi letakkannya dalam fail

style.css

tema anda:

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

Jangan ragu untuk mengedit nilai lalai sifat :)

Kod ringkas

Kami telah melengkapkan fungsi pembantu dan kod CSS. Sekarang, mari kita ke bahagian yang menyeronokkan - kod pendek!

Kita hanya boleh menggunakan kod pendek yang besar untuk melampirkan borang, menyenaraikan penyertaan dan memaparkan bilangan penyerahan, tetapi... mengapa membunuh semua keseronokan? Selain itu, kod pendek yang berasingan untuk ketiga-tiga elemen ini akan membolehkan kami menggunakannya di mana-mana sahaja dalam kandungan kami.

Pernahkah saya memberitahu anda cara

Saya suka

kod pendek?

Kod pendek untuk petisyen

Fungsi ini agak panjang, jadi saya akan menggunakan komen PHP untuk menerangkan kod

---

Di dalam

:

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

Saya cuba untuk menjadi sejelas mungkin, tetapi jika anda rasa saya terlepas sesuatu, jangan ragu untuk bertanya kepada saya dengan mengulas pada siaran ini!

🎜Kod pendek untuk menyerahkan senarai🎜 🎜Bahagian "Entri Terkini" adalah 🎜bukti🎜 bahawa orang menyertai usaha anda, jadi kami perlu menyenaraikan sekurang-kurangnya beberapa penyerahan tertentu. 🎜 🎜Ini juga bukan fungsi pendek, jadi saya akan menerangkan kod dengan ulasan sekali lagi: 🎜

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

🎜Sekali lagi, jika anda ingin bertanya sebarang soalan, sila tinggalkan komen pada siaran ini. 🎜 🎜Kod pendek untuk kiraan petisyen🎜 🎜Ini adalah fungsi yang sangat kecil hanya untuk mengetahui jumlah penyertaan yang dihantar: 🎜 rrreee 🎜Seperti yang anda lihat, ia hanya membuang medan tersuai ke dalam tatasusunan dan mengiranya serta mengembalikan nombor itu. 🎜 🎜 🎜Kesimpulan🎜 🎜Saya harus menekankan bahawa ini adalah contoh yang sangat mudah tentang cara organisasi boleh mendapat manfaat daripada WordPress dengan memanfaatkan jenis skrip ini. Jika anda boleh memikirkan penambahbaikan pada skrip ini (atau tutorial), sila kongsikan pendapat anda dalam ulasan di bawah. Terima kasih kerana membaca! 🎜

Atas ialah kandungan terperinci Ubah suai siaran anda dengan petisyen yang cantik. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!