Hinzufügen von Posts zum Front-End einer Site mithilfe von AJAX

WordPress teilt sich grundsätzlich in zwei Teile, den Front-End-Bereich, in dem Leute Beiträge oder Artikel auf der Website lesen können. Der andere ist der WordPress-Administrationsbereich, aus dem Beiträge und Seiten erstellt werden können. Dies funktioniert sehr gut, wenn WordPress als allgemeine Blogging-Site verwendet wird. Da WordPress jedoch für verschiedene Arten von Websites verwendet wird, ist es manchmal erforderlich, dem Benutzer die Möglichkeit zu geben, Beiträge vom Front-End der Website aus zu erstellen, ohne ihn zu zwingen, in den WordPress-Administratorbereich zu wechseln.

In diesem Tutorial erfahren Sie, wie Sie ein Widget erstellen, mit dem Benutzer Beiträge vom Front-End aus erstellen können. Dies hilft den Benutzern der Website beim Erstellen von Inhalten.

Schritt 1 Erstellen des Plugins

Um ein Plugin zu erstellen, erstellen Sie eine Datei ajaxpostfromfront.php in Ihrem Ordner wp-content/plugins/ajaxpostfromfront. Um ein Plugin in WordPress zu erstellen, müssen wir den Plugin-Header wie folgt hinzufügen:

1

/*

2

Plugin Name: Ajax post from front

3

Plugin URI: 

4

Description:Allows to post from front end

5

Author: Abbas Suterwala

6

Version: 

7

Author URI: 

8

*/

Wir werden auch einige benannte Konstanten für unsere Plugin-Basis-URL und den Plugin-Pfad wie folgt definieren:

1

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

2

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

Dies wird uns helfen, sie einfach zu verwenden, wo es im Plugin benötigt wird. Erstellen Sie auch einen js-Ordner in Ihrem ajaxpostfromfront-Ordner und fügen Sie eine Datei apf.js hinzu. Die Ordnerstruktur des Plugins wäre also wie folgt:

Wir werden nun die Skripte in die Warteschlange stellen, indem wir uns an den Aktions-Hook 'wp_enqueue_scripts' anschließen, unsere Javascript-Datei in die Warteschlange stellen und sie lokalisieren, um die WordPress-Ajax-URL zu speichern, die wir für unsere Ajax-Aufrufe verwenden werden.

1

function apf_enqueuescripts()

2

{

3

	wp_enqueue_script('apf', APFSURL.'/js/apf.js', array('jquery'));

4

	wp_localize_script( 'apf', 'apfajax', array( 'ajaxurl' => admin_url( 'admin-ajax.php' ) ) );

5

}

6

add_action('wp_enqueue_scripts', apf_enqueuescripts);

Wenn bis jetzt alles richtig gelaufen ist, können wir unser Plugin in der Plugin-Liste sehen und sollten es aktivieren.

Schritt 2 Grundlegendes zu den WordPress-Funktionen zum Erstellen eines neuen Beitrags

WordPress verfügt über eine Vielzahl von APIs oder Funktionen, mit denen Aufgaben für Plugins ausgeführt werden können. Es hat Funktionen für alle Arten von Aufgaben wie das Erstellen eines Beitrags, das Erstellen einer Seite, Kommentare usw. In diesem Plugin verwenden wir die WordPress-Funktion wp_insert_post.

wp_insert_post nimmt ein Array der verschiedenen Informationen auf, die zum Erstellen eines Posts in WordPress erforderlich sind. Es werden verschiedene Parameter wie Post-Titel, Post-Inhalt, Post-Status usw. berücksichtigt. Es nimmt auch die Reihe von Kategorien auf, die dem Beitrag zugeordnet werden sollen. Es enthält auch einige andere Parameter wie Post-Passwort und Post-Auszug usw.

Eine vollständige Liste der Parameter finden Sie auf der Seite wp_insert_post im WordPress-Codex.

Schritt 3 Erstellen der Benutzeroberfläche zum Erstellen von Posts aus dem Frontend

Als nächstes erstellen wir die Benutzeroberfläche für unseren Beitrag vom Front-End-Plugin. Dazu schreiben wir folgende Funktion:

1

function apf_post_form()

2

{

3

	?>

4

5

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

6

7

		<div id="apf-text">

8

9

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

10

11

			<strong>Title </strong> <br/>

12

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

13

			<br/>

14

15

			<strong>Contents </strong> <br/>

16

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

17

			<br/>

18

19

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

20

21

		</div>

22

	</form>

23

24

	<?php

25

}

In der Funktion erstellen wir zunächst ein Formular mit dem Tag <form>. In diesem Fall erstellen wir ein div mit der ID apf-response, das mit der Nachricht aktualisiert wird, die aus der AJAX-Antwort stammt, die wir erhalten. Dann haben wir ein Textfeld für den Titel und einen Textbereich für den Inhalt des Beitrags erstellt.

Als nächstes erstellen wir einen Link namens 'create post', der eine Javascript-Funktion apfaddpost aufruft, die einen AJAX-Aufruf zum Erstellen des Posts ausführt. Wir werden die Implementierung des AJAX-Aufrufs in den folgenden Schritten sehen.

Wenn wir die Funktion apf_post_form in den Themendateien aufrufen, sehen Sie sie wie folgt. In meinem Thema habe ich es gerade vor der Hauptschleife genannt.

Schritt 4 Erstellen eines Widgets zum Anzeigen der Benutzeroberfläche im Frontend

Jetzt erstellen wir ein Widget für unseren Beitrag vom Front-Plugin. Dieses Widget zeigt die Benutzeroberfläche für das Posten von der Vorderseite an, die wir erstellt haben. Es folgt der Code für das Widget.

1

class AjaxPostFromFrontWidget extends WP_Widget {

2

	function AjaxPostFromFrontWidget() {

3

		// widget actual processes

4

		$widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );

5

		$this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);

6

	}

7

8

	function form($instance) {

9

		// outputs the options form on admin

10

		$defaults = array( 'title' => 'Ajax Post From Front' );

11

		$instance = wp_parse_args( (array) $instance, $defaults );

12

13

		?>

14

		<p>

15

			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo 'Title:'; ?></label>

16

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

17

		</p>

18

		<?php

19

	}

20

21

	function update($new_instance, $old_instance) {

22

		// processes widget options to be saved

23

		$instance = $old_instance;

24

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

25

26

		return $instance;

27

	}

28

29

	function widget($args, $instance) {

30

		// outputs the content of the widget

31

		extract( $args );

32

33

		$title = apply_filters('widget_title', $instance['title'] );

34

		echo $before_widget;

35

		if ( $title )

36

			echo $before_title . $title . $after_title;

37

		echo '<ul>';

38

		echo apf_post_form();

39

		echo '</ul>';

40

		echo $after_widget;

41

	}

42

}

Im Konstruktor geben wir den Klassennamen und die Beschreibung des Widgets an. In der Formularfunktion wird derzeit nur ein Feld angezeigt, das der Titel ist, der für das Widget angezeigt werden soll. Wir aktualisieren das Titelfeld in der Aktualisierungsfunktion.

In der Widget-Funktion wird der Titel in der Widget-Instanz gespeichert und angezeigt. Dann rufen wir die Funktion apf_post_form auf, die das Formular anzeigt, das wir im vorherigen Schritt erstellt haben.

Wir werden das Widget wie folgt registrieren:

1

function apf_widget_init() {

2

	// Check for the required API functions

3

	if ( !function_exists('register_widget') )

4

		return;

5

6

	register_widget('AjaxPostFromFrontWidget');

7

}

8

add_action('widgets_init', 'apf_widget_init');

Jetzt können wir unser neues Widget per Drag & Drop in die Seitenleiste ziehen.

Sobald das Widget in der Seitenleiste abgelegt wurde, sollte das Formular auf der Startseite in der Seitenleiste wie folgt angezeigt werden:

Schritt 5 Erstellen eines Posts über AJAX über das Frontend

Erstellen wir nun eine Funktion, um die AJAX-Anforderung zum Erstellen des Beitrags zu verarbeiten. Die Funktion zum Behandeln der AJAX-Anforderung lautet wie folgt:

1

function apf_addpost() {

2

	$results = '';

3

4

	$title = $_POST['apftitle'];

5

	$content =	$_POST['apfcontents'];

6

7

	$post_id = wp_insert_post( array(

8

		'post_title'		=> $title,

9

		'post_content'		=> $content,

10

		'post_status'		=> 'publish',

11

		'post_author'       => '1'

12

	) );

13

14

	if ( $post_id != 0 )

15

	{

16

		$results = '*Post Added';

17

	}

18

	else {

19

		$results = '*Error occurred while adding the post';

20

	}

21

	// Return the String

22

	die($results);

23

}

In dieser Funktion erhalten wir die Werte des Titels und des Inhalts aus der Variablen $_POST. Mit diesen Werten verwenden Sie die Funktion wp_insert_post von WordPress, um den Beitrag zu erstellen. Die Funktion wp_insert_post gibt die neu erstellte Post-ID zurück, wenn dies erfolgreich war, und Null, wenn dies fehlschlug. Mit diesem Wert haben wir entweder eine Erfolgs- oder eine Fehlermeldung von der AJAX zurückgesendet.

Um diese Funktion beim WordPress AJAX-System zu registrieren, rufen wir Folgendes auf:

1

// creating Ajax call for WordPress

2

add_action( 'wp_ajax_nopriv_apf_addpost', 'apf_addpost' );

3

add_action( 'wp_ajax_apf_addpost', 'apf_addpost' );

Sobald unser AJAX-Handler fertig ist, müssen wir nur noch die AJAX-Anfrage aus unserem Javascript-Code wie folgt stellen:

1

function apfaddpost(posttitle,postcontent) {

2

3

	jQuery.ajax({

4

5

		type: 'POST',

6

7

		url: apfajax.ajaxurl,

8

9

		data: {

10

			action: 'apf_addpost',

11

			apftitle: posttitle,

12

			apfcontents: postcontent

13

		},

14

15

		success: function(data, textStatus, XMLHttpRequest) {

16

			var id = '#apf-response';

17

			jQuery(id).html('');

18

			jQuery(id).append(data);

19

20

			resetvalues();

21

		},

22

23

		error: function(MLHttpRequest, textStatus, errorThrown) {

24

			alert(errorThrown);

25

		}

26

27

	});

28

}

29

30

function resetvalues() {

31

32

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

33

	title.value = '';

34

35

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

36

	content.value = '';

37

38

}

In der Funktion apfaddpost stellen wir einfach eine AJAX-Anfrage, die den Post-Titel und den Post-Inhalt übergibt. Sobald die Antwort empfangen wurde, zeigen wir nur die vom AJAX-Handler zurückgegebene Nachricht in der div apf-response an. Danach setzen wir die Werte im Formular zurück.

Nach dem Klicken auf Beitrag erstellen wird der Beitrag erstellt und die Nachricht wird wie folgt angezeigt:

Schritt 6 Hinzufügen der Option, nur angemeldete Benutzerbeiträge zuzulassen

Jetzt fügen wir die Funktionalität hinzu, mit der der Administrator auswählen kann, ob Benutzer, die nicht angemeldet sind, keine Beiträge erstellen sollen.

Dazu aktualisieren wir die apf_post_form wie folgt, um ein Argument $allowNotLoggedInuser zu verwenden. In diesem Fall wird das Formular nicht angezeigt, wenn der Benutzer nicht angemeldet ist, sondern es wird eine Meldung zum Anmelden angezeigt.

1

function apf_post_form($allowNotLoggedInuser='yes') {

2

	if ( $allowNotLoggedInuser == 'no' &&  !is_user_logged_in() ) {

3

		echo "Please Login to create new post";

4

		return;

5

	}

6

	?>

7

8

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

9

10

		<div id="apf-text">

11

12

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

13

14

			<strong>Title </strong> <br/>

15

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

16

			<br/>

17

18

			<strong>Contents </strong> <br/>

19

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

20

21

			<br/>

22

23

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

24

25

		</div>

26

	</form>

27

28

	<?php

29

}

Wir werden das Widget auch aktualisieren, um eine weitere Option in der Formularfunktion anzuzeigen und ein Auswahlfeld anzuzeigen, in dem gefragt wird, ob nicht angemeldete Benutzer Beiträge veröffentlichen dürfen. Wir werden auch die Werte in der Aktualisierungsfunktion aktualisieren. In der Widget-Funktion lesen wir jetzt den im Widget festgelegten Wert und übergeben ihn dann an die Funktion apf_post_form.

Der aktualisierte Widget-Code sollte folgendermaßen aussehen:

1

class AjaxPostFromFrontWidget extends WP_Widget {

2

	function AjaxPostFromFrontWidget() {

3

		// widget actual processes

4

		$widget_ops = array('classname' => 'AjaxPostFromFrontWidget', 'description' => 'Lets you create post from front end' );

5

		$this->WP_Widget('AjaxPostFromFrontWidget','AjaxPostFromFrontWidget', $widget_ops);

6

	}

7

8

	function form($instance) {

9

		// outputs the options form on admin

10

		$defaults = array( 'title' => 'Ajax Post From Front','allow_not_logged_users' => 'no' );

11

		$instance = wp_parse_args( (array) $instance, $defaults );

12

13

		?>

14

		<p>

15

			<label for="<?php echo $this->get_field_id( 'title' ); ?>"><?php echo 'Title:'; ?></label>

16

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

17

		</p>

18

19

		<p>

20

			<label for="<?php echo $this->get_field_id( 'allow_not_logged_users' ); ?>">allow_not_logged_users:</label>

21

			<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%;">

22

				<option <?php if ( 'no' == $instance['allow_not_logged_users'] ) echo 'selected="selected"'; ?>>no</option>

23

				<option <?php if ( 'yes' == $instance['allow_not_logged_users'] ) echo 'selected="selected"'; ?>>yes</option>

24

			</select>

25

		</p>

26

27

		<?php

28

	}

29

30

	function update($new_instance, $old_instance) {

31

		// processes widget options to be saved

32

		$instance = $old_instance;

33

34

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

35

		$instance['allow_not_logged_users'] = $new_instance['allow_not_logged_users'];

36

		return $instance;

37

	}

38

39

	function widget($args, $instance) {

40

		// outputs the content of the widget

41

		extract( $args );

42

		$allow_not_logged_users = isset( $instance['allow_not_logged_users'] ) ? $instance['allow_not_logged_users'] : 'no';

43

44

		$title = apply_filters('widget_title', $instance['title'] );

45

		echo $before_widget;

46

		if ( $title )

47

			echo $before_title . $title . $after_title;

48

		echo '<ul>';

49

		echo apf_post_form($allow_not_logged_users);

50

		echo '</ul>';

51

		echo $after_widget;

52

	}

53

}

Jetzt können wir im Widget die Option auswählen, ob angemeldete Benutzer zugelassen werden sollen oder nicht (siehe unten).

Wenn die Option auf "Nein" gesetzt ist und jemand die Startseite besucht, ohne sich anzumelden, wird die folgende Meldung angezeigt, dass er sich zum Posten anmelden muss.

Schritt 7 Hinzufügen der Option zum Hinzufügen von Kategorien zum Posten über das Front-End-Widget

Jetzt werden wir die Funktionalität hinzufügen, um dem Beitrag, den wir vom Frontend aus erstellen, Kategorien hinzuzufügen. Um dies zu erreichen, erhalten wir zuerst die Liste aller Kategorien und zeigen sie als Kontrollkästchen auf der Benutzeroberfläche an.

Dazu fügen wir der Funktion apf_post_form folgenden Code hinzu.

1

<strong>Contents </strong> <br/>

2

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

3

4

<?php

5

	$categories = get_categories(array('hide_empty'=> 0));

6

	foreach ( $categories as $category ) {

7

		echo "<input type='checkbox' name='apfcategorycheck' id='apfcategorycheck' value='$category->term_id' />";

8

		echo $category->cat_name;

9

		echo '<br>';

10

	}

11

?>

12

<br/>

13

14

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

Der obige Code ruft nur die Liste aller Kategorien ab und zeigt sie als Kontrollkästchen an. Dieser Wert wird als zusätzlicher Parameter an unsere Javascript-Funktion apfaddpost übergeben.

In der Funktion apfaddpost erhalten wir die geprüften Werte und übergeben sie im AJAX-Aufruf wie folgt:

1

function apfaddpost ( posttitle,postcontent,postcategory ) {

2

3

	var postCatergoryArray = new Array();

4

5

	for ( var i=0; i < postcategory.length; i++ ) {

6

		if ( postcategory[i].checked ) {

7

			postCatergoryArray[postCatergoryArray.length] = postcategory[i].value;

8

		}

9

	}

10

11

	jQuery.ajax({

12

13

		type: 'POST',

14

15

		url: apfajax.ajaxurl,

16

17

		data: {

18

			action: 'apf_addpost',

19

			apftitle: posttitle,

20

			apfcontents: postcontent,

21

			apfcategory:postCatergoryArray

22

		}

23

	});

Wir müssen den AJAX-Handler wie folgt aktualisieren, um das Array von IDs der Kategorien zu übernehmen und es dann an die Funktion wp_insert_post zu übergeben, damit der neu erstellte Beitrag die entsprechenden Kategorien hat.

1

function apf_addpost() {

2

	$results = '';

3

4

	$title = $_POST['apftitle'];

5

	$content =	$_POST['apfcontents'];

6

	$category = $_POST['apfcategory'];

7

8

	$post_id = wp_insert_post( array(

9

		'post_title'		=> $title,

10

		'post_content'		=> $content,

11

		'post_status'		=> 'publish',

12

		'post_category'		=> $category,

13

		'post_author'       => '1'

14

	) );

15

16

	if ( $post_id != 0 ) {

17

		$results = '*Post Added';

18

	}

19

	else {

20

		$results = '*Error occured while adding the post';

21

	}

22

	// Return the String

23

	die($results);

24

}

Wenn wir nun das Widget sehen, wird es wie folgt angezeigt:

Dem erstellten Beitrag sind die ausgewählten Kategorien zugeordnet, wie unten dargestellt.

Abschluss

WordPress ist eine erweiterbare Plattform. Wir können WordPress erweitern, um verschiedene Funktionen hinzuzufügen, sodass die WordPress-Plattform für verschiedene Arten von Websites und nicht nur für Blogs verwendet werden kann. Wie in diesem Plugin haben wir die Funktionalität zum Erstellen von Posts aus dem Frontend hinzugefügt. WordPress kann auf verschiedene Arten erweitert werden. Also fröhliche WordPress-Codierung!