Aggiunta post a un sito front-end utilizzando AJAX

Italian (Italiano) translation by Mirko Pizii (you can also view the original English article)

WordPress si divide fondamentalmente in due parti, la sezione di front-end dove le persone possono venire e leggere i messaggi o articoli sul sito. L'altra è la sezione di admin di WordPress da cui si possono creare post e pagine. Questo funziona molto bene se WordPress è usato come un sito di blogging generale. Ma come WordPress viene utilizzato per diversi tipi di siti a volte diventa necessario dare all'utente un modo per creare post dal front-end del sito senza costringendolo ad andare nella sezione admin di WordPress.

In questo tutorial che ci accingiamo a vedere come creare un widget per consentire agli utenti di creare i post dal front-end. Questo aiuterà gli utenti del sito per creare il contenuto.

Fase 1 creazione del Plugin

Per creare un plugin, è possibile creare un file ajaxpostfromfront.php nella cartella wp-content/plugins/ajaxpostfromfront. Per creare un plugin in WordPress dobbiamo aggiungere l'intestazione plugin come segue:

/*
Plugin Name: Ajax post from front
Plugin URI: 
Description:Allows to post from front end
Author: Abbas Suterwala
Version: 
Author URI: 
*/

Si definirà anche alcune costanti denominate per nostro plugin base URL e il percorso di plugin come segue:

define('APFSURL', WP_PLUGIN_URL."/".dirname( plugin_basename( __FILE__ ) ) );
define('APFPATH', WP_PLUGIN_DIR."/".dirname( plugin_basename( __FILE__ ) ) );

Questo ci aiuterà a utilizzarli facilmente dove serve nel plugin. Anche creare una cartella js nella cartella ajaxpostfromfront e aggiungere un file apf.js in esso. Così la struttura della cartella del plugin sarebbe come segue:

Ci sarà ora accodare gli script di aggancio al gancio di azione 'wp_enqueue_scripts' e accodare i nostri file javascript e localizzarlo per memorizzare l'URL di WordPress ajax che useremo per le nostre chiamate ajax.

function apf_enqueuescripts()
{
  wp_enqueue_script('apf', APFSURL.'/js/apf.js', array('jquery'));
	wp_localize_script( 'apf', 'apfajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );
}
add_action('wp_enqueue_scripts', apf_enqueuescripts);

Se tutto è andato bene fino ad ora saremo in grado di vedere il nostro plugin nell'elenco plugin e noi dovremmo attivarlo.

Fase 2 la comprensione delle funzioni di WordPress per creare un nuovo Post

WordPress ha un ricco set di API o funzioni che sono esposte per eseguire attività di plugin. Ha funzioni per tutti i tipi di attività quali la creazione di un post, creazione di una pagina, commenti ecc. In questo plugin, ci accingiamo a utilizzare il wp_insert_post di funzione di WordPress.

wp_insert_post prende in una matrice delle diverse informazioni necessarie per creare un post in WordPress. Si impiegano in diversi parametri come il titolo del post, post contenuto, stato post, ecc. Ci vuole anche nella matrice di categorie che devono essere associati con il post. Esso contiene inoltre alcuni altri parametri come password di post e post di Estratto ecc.

Per un elenco completo dei parametri, visitate la pagina wp_insert_post nel WordPress Codex.

Fase 3 creazione dell'interfaccia utente per creare Post da Front-End

Avanti che ci accingiamo a creare l'interfaccia utente per il nostro post da front-end plugin. Per questo ci accingiamo a scrivere la seguente funzione:

function apf_post_form()
{
	?>

	<form id="apfform" action="" method="post"enctype="multipart/form-data">

		<div id="apf-text">

			<div id="apf-response" style="background-color:#E6E6FA"></div>

			<strong>Title </strong> <br/>
			<input type="text" id="apftitle" name="apftitle"/><br />
			<br/>

			<strong>Contents </strong> <br/>
			<textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />
			<br/>

			<a onclick="apfaddpost(apftitle.value,apfcontents.value);" style="cursor: pointer"><b>Create Post</b></a>

		</div>
	</form>

	<?php
}

Nella funzione prima creiamo un modulo tramite il <form> Tag. In questo creeremo un div con ID apf-response che verrà aggiornato con il messaggio che viene dalla risposta AJAX che otterremo. Quindi abbiamo creato una casella di testo per il titolo e un'area di testo per il contenuto del post.

Quindi cerchiamo di creare un link chiamato 'Crea messaggio' che chiama un apfaddpost di funzione javascript che farà una chiamata AJAX per creare il post. Vedremo l'implementazione dell'AJAX chiamare passaggi qui sotto.

Nel caso in cui noi chiamiamo la funzione apf_post_form nei file del tema, si vedrà come segue. Nel mio tema mi hanno appena chiamato prima del ciclo principale.

Passo 4 creazione di un Widget per visualizzare l'interfaccia utente sul Front-End

Ora ci accingiamo a creare un widget per il nostro post da plugin anteriore. Questo widget visualizzerà l'interfaccia utente per la pubblicazione dalla parte anteriore che abbiamo creato. Di seguito è riportato il codice per il widget.

class AjaxPostFromFrontWidget extends WP_Widget {
	function AjaxPostFromFrontWidget() {
		// widget actual processes
		$widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );
		$this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);
	}

	function form($instance) {
		// outputs the options form on admin
		$defaults = array( 'title' => 'Ajax Post From Front' );
		$instance = wp_parse_args( (array) $instance, $defaults );

		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo 'Title:'; ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
		</p>
		<?php
	}

	function update($new_instance, $old_instance) {
		// processes widget options to be saved
		$instance = $old_instance;
		$instance['title'] = strip_tags( $new_instance['title'] );

		return $instance;
	}
	
	function widget($args, $instance) {
		// outputs the content of the widget
		extract( $args );

		$title = apply_filters('widget_title', $instance['title'] );
		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
		echo '<ul>';
		echo apf_post_form();
		echo '</ul>';
		echo $after_widget;
	}
}

Nel costruttore diamo il nome di classe e la descrizione del widget. Nel modulo funzione attualmente che visualizziamo solo uno campo che è il titolo da visualizzare per il widget. Aggiorniamo il campo titolo nella funzione di aggiornamento.

Nella funzione widget otteniamo il titolo salvato nell'istanza della widget e visualizzare che. Poi chiamiamo la funzione apf_post_form che consente di visualizzare il modulo che abbiamo creato nel passaggio precedente.

Registreremo il widget come segue:

function apf_widget_init() {
	// Check for the required API functions
	if ( !function_exists('register_widget') )
		return;

	register_widget('AjaxPostFromFrontWidget');
}
add_action('widgets_init', 'apf_widget_init');

Ora possiamo trascinare e rilasciare il nostro nuovo widget nella barra laterale.

Una volta che il widget è caduto sulla barra laterale dovrebbe essere in grado di vedere il modulo nella home page nella barra laterale come segue:

Passo 5 Creazione di un Post tramite AJAX dal Front-End

Ora andiamo a creare una funzione per gestire la richiesta AJAX di creare il post. La funzione di gestire la richiesta AJAX è come segue:

function apf_addpost() {
	$results = '';

	$title = $_POST['apftitle'];
	$content =	$_POST['apfcontents'];

	$post_id = wp_insert_post( array(
		'post_title'		=> $title,
		'post_content'		=> $content,
		'post_status'		=> 'publish',
		'post_author'       => '1'
	) );

	if ( $post_id != 0 )
	{
		$results = '*Post Added';
	}
	else {
		$results = '*Error occurred while adding the post';
	}
	// Return the String
	die($results);
}

In questa funzione si ottiene i valori del titolo e il contenuto dalla variabile $_POST. Con tali valori utilizzando la funzione wp_insert_post di WordPress per creare il post. La funzione wp_insert_post restituisce l'id del post appena creato se ha esito positivo e zero se non è riuscita. Così utilizzando tale valore abbiamo inviato un successo oppure un messaggio di errore di ritorno da l'AJAX.

Per registrare questa funzione con il sistema WordPress AJAX chiameremo le seguenti operazioni:

// creating Ajax call for WordPress
add_action( 'wp_ajax_nopriv_apf_addpost', 'apf_addpost' );
add_action( 'wp_ajax_apf_addpost', 'apf_addpost' );

Una volta fatto il nostro gestore di AJAX abbiamo solo bisogno di fare la richiesta AJAX dal nostro codice javascript come segue:

function apfaddpost(posttitle,postcontent) {

	jQuery.ajax({

		type: 'POST',

		url: apfajax.ajaxurl,

		data: {
			action: 'apf_addpost',
			apftitle: posttitle,
			apfcontents: postcontent
		},

		success: function(data, textStatus, XMLHttpRequest) {
			var id = '#apf-response';
			jQuery(id).html('');
			jQuery(id).append(data);

			resetvalues();
		},

		error: function(MLHttpRequest, textStatus, errorThrown) {
			alert(errorThrown);
		}

	});
}

function resetvalues() {

	var title = document.getElementById("apftitle");
	title.value = '';

	var content = document.getElementById("apfcontents");
	content.value = '';

}

In apfaddpost la funzione facciamo solo una richiesta AJAX, passando il titolo del post e il contenuto del post. Una volta ricevuta la risposta visualizziamo solo il messaggio restituito dal gestore AJAX nella div apf-response. Dopo che abbiamo reimpostare i valori nel modulo.

Dopo aver cliccato su Crea post che il post verrà creato e il messaggio sarà visto come segue:

Passo 6 aggiungendo l'opzione di locazione registrato solo nel Post di utenti

Ora aggiungiamo la funzionalità per consentire l'amministratore scegliere se non vogliono che gli utenti non connessi per creare post.

Per questo aggiorniamo i apf_post_form come segue per prendere un argomento $allowNotLoggedInuser. In tal caso quando l'utente non è connesso, non verrà visualizzato il modulo ma visualizzerà un messaggio per effettuare il login.

function apf_post_form($allowNotLoggedInuser='yes') {
	if ( $allowNotLoggedInuser == 'no' &&  !is_user_logged_in() ) {
		echo "Please Login to create new post";
		return;
	}
	?>

	<form id="apfform" action="" method="post"enctype="multipart/form-data">

		<div id="apf-text">

			<div id="apf-response" style="background-color:#E6E6FA ;color:blue;"></div>

			<strong>Title </strong> <br/>
			<input type="text" id="apftitle" name="apftitle"/><br />
			<br/>

			<strong>Contents </strong> <br/>
			<textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />

			<br/>

			<a onclick="apfaddpost(apftitle.value,apfcontents.value);" style="cursor: pointer"><b>Create Post</b></a>

		</div>
	</form>

	<?php
}

Aggiorneremo anche il widget per visualizzare un'altra opzione in funzione del form per visualizzare un campo Seleziona chiedendo se è permesso per non loggato agli utenti di pubblicare. Aggiorneremo anche i valori della funzione di aggiornamento. Nella funzione widget ora abbiamo letto il valore che è stato impostato nel widget e quindi passarla alla funzione apf_post_form.

Il codice del widget aggiornato dovrebbe assomigliare a questo:

class AjaxPostFromFrontWidget extends WP_Widget {
	function AjaxPostFromFrontWidget() {
		// widget actual processes
		$widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );
		$this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);
	}

	function form($instance) {
		// outputs the options form on admin
		$defaults = array( 'title' => 'Ajax Post From Front','allow_not_logged_users' => 'no' );
		$instance = wp_parse_args( (array) $instance, $defaults );

		?>
		<p>
			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo 'Title:'; ?></label>
			<input id="<?php echo $this->get_field_id( 'title' ); ?>" name="<?php echo $this->get_field_name( 'title' ); ?>" value="<?php echo $instance['title']; ?>" class="widefat" />
		</p>

		<p>
			<label for="<?php echo $this->get_field_id( 'allow_not_logged_users' ); ?>">allow_not_logged_users:</label>
			<select id="<?php echo $this->get_field_id( 'allow_not_logged_users' ); ?>" name="<?php echo $this->get_field_name( 'allow_not_logged_users' ); ?>" class="widefat" style="width:100%;">
				<option <?php if ( 'no' == $instance['allow_not_logged_users'] ) echo 'selected="selected"'; ?>>no</option>
				<option <?php if ( 'yes' == $instance['allow_not_logged_users'] ) echo 'selected="selected"'; ?>>yes</option>
			</select>
		</p>

		<?php
	}

	function update($new_instance, $old_instance) {
		// processes widget options to be saved
		$instance = $old_instance;

		$instance['title'] = strip_tags( $new_instance['title'] );
		$instance['allow_not_logged_users'] = $new_instance['allow_not_logged_users'];
		return $instance;
	}

	function widget($args, $instance) {
		// outputs the content of the widget
		extract( $args );
		$allow_not_logged_users = isset( $instance['allow_not_logged_users'] ) ? $instance['allow_not_logged_users'] : 'no';

		$title = apply_filters('widget_title', $instance['title'] );
		echo $before_widget;
		if ( $title )
			echo $before_title . $title . $after_title;
		echo '<ul>';
		echo apf_post_form($allow_not_logged_users);
		echo '</ul>';
		echo $after_widget;
	}
}

Ora dal widget sono possiamo scegliere l'opzione per consentire se loggato utenti o no come indicato di seguito.

Ora, nel caso in cui l'opzione è impostata su no e qualcuno visita la home page senza effettuare il login vedranno il messaggio riportato di seguito per effettuare il login da inserire.

Passo 7 aggiungendo la possibilità di aggiungere categorie a Post tramite Widget di Front-End

Ora aggiungiamo la funzionalità per aggiungere categorie al post che stiamo creando dal front-end. Per raggiungere questo obiettivo in primo luogo sarà ottenere l'elenco di tutte le categorie e li Visualizza come caselle di controllo nell'interfaccia utente.

Per questo, aggiungiamo il seguente codice per la funzione apf_post_form.

<strong>Contents </strong> <br/>
<textarea id="apfcontents" name="apfcontents"  rows="10" cols="20"></textarea><br />

<?php
	$categories = get_categories(array('hide_empty'=> 0));
	foreach ( $categories as $category ) {
		echo "<input type='checkbox' name='apfcategorycheck' id='apfcategorycheck' value='$category->term_id' />";
		echo $category->cat_name;
		echo '<br>';
	}
?>
<br/>

<a onclick="apfaddpost(apftitle.value,apfcontents.value,apfcategorycheck);" style="cursor: pointer"><b>Create Post</b></a>

Il codice sopra riportato solo ottiene l'elenco di tutte le categorie e li Visualizza come caselle di controllo. Tale valore viene passato al nostro apfaddpost di funzione javascript come parametro aggiuntivo.

La funzione apfaddpost otteniamo i valori che vengono controllati e passano nella chiamata AJAX come segue:

function apfaddpost ( posttitle,postcontent,postcategory ) {

	var postCatergoryArray = new Array();

	for ( var i=0; i < postcategory.length; i++ ) {
		if ( postcategory[i].checked ) {
			postCatergoryArray[postCatergoryArray.length] = postcategory[i].value;
		}
	}

	jQuery.ajax({

		type: 'POST',

		url: apfajax.ajaxurl,

		data: {
			action: 'apf_addpost',
			apftitle: posttitle,
			apfcontents: postcontent,
			apfcategory:postCatergoryArray
		}
	});

Dobbiamo aggiornare il gestore di AJAX come segue per prendere la matrice degli ID delle categorie e poi si passa alla funzione wp_insert_post, in modo che il post appena creato dispongono delle categorie in modo appropriato.

function apf_addpost() {
	$results = '';

	$title = $_POST['apftitle'];
	$content =	$_POST['apfcontents'];
	$category = $_POST['apfcategory'];

	$post_id = wp_insert_post( array(
		'post_title'		=> $title,
		'post_content'		=> $content,
		'post_status'		=> 'publish',
		'post_category'		=> $category,
		'post_author'       => '1'
	) );

	if ( $post_id != 0 ) {
		$results = '*Post Added';
	}
	else {
		$results = '*Error occured while adding the post';
	}
	// Return the String
	die($results);
}

Ora se vediamo il widget si vedrà come segue:

E il messaggio creato eseguirà tali categorie selezionate associate con esso, come mostrato qui sotto.

Conclusione

WordPress è una piattaforma estendibile. Possiamo estendere WordPress per aggiungere funzionalità diverse a modo la piattaforma WordPress può essere utilizzata per diversi tipi di siti, anziché solo Blog. Come abbiamo aggiunto la funzionalità di creazione di post da front-end in questo plugin, WordPress può essere esteso in diversi modi. Così felice WordPress codifica!