WordPress – Deinen Benutzerprofilen eigene Felder hinzufügen

In diesem Artikel erfährst Du, wie Du in WordPress mit ein paar Zeilen PHP-Code Deinen Benutzerprofilen eigene Felder hinzufügen kannst.

Das Benutzerprofil unter WordPress ist, was die Informationen, die sich für einen Nutzer hinterlegen lassen, recht übersichtlich ausgestattet. Bei einigen Anwendungsfällen, wie beispielsweise einer Autorenbox, möchte man aber vielleicht doch noch mehr Informationen zu einem Autor anzeigen als die Standard-Profilseite hergibt.

In diesem Fall kann man sich entweder ein entsprechendes Plugin installieren oder man erweitere das Benutzerprofil um die benötigten Feldern einfach selbst.

Und wie diese Erweiterung der Profilseite genau funktioniert, zeige ich Dir im nachfolgenden Artikel.

Was werde ich tun?

Um das Ganze etwas anschaulicher zu machen, nehme ich als Use Case für diese WordPress-Anpassung meine selbst erstellte Autorenbox.

Die Autorenbox auf BLOGGERWISSEN soll neben den bereits vorhandenen Social Media-Profilen auch Links zu Instagram, Pinterest, Xing und zu LinkedIn ermöglichen. Außerdem möchte ich einen Unternehmensnamen sowie einen persönlichen Slogan angeben können.

Die Kontaktdaten der Profilseite erweitern

Für die weiteren Social Media-Links bietet sich der Bereich Kontaktinfo auf der Profilseite fast zwingend an, denn dieser enthält ja bereits Möglichkeiten zur Verlinkung von Facebook, Twitter und Google Plus.

Letztere dürfte übrigens mit einem der nächsten WordPress-Updates verschwinden, da Google den Betrieb der Plattform einstellen wird. Voraussichtlich Ende August 2019. Das aber nur am Rande.

Das Erweitern dieser Kontaktdaten ist denkbar einfach, denn WordPress stellt hierfür eigens einen Filter-Hook zur Verfügung: user_contactmethods.

Alles was ich jetzt noch machen muss, ist, diesem Filter über eine PHP-Funktion meine neuen Eingabefelder mitzuteilen. In meinem Code-Beispiel führe ich dazu die Funktion extendProfileContactMethods($user_contact) ein.

Wichtig ist hier, dass diese Funktion mit der Variablen $user_contact (oder einer Variablen anderen Namens) versehen wird. Dieser Variable wird in der Funktion dann als assoziatives Array genutzt, in die ich die Namen Deiner neuen Felder schreibe.

add_filter('user_contactmethods','extendProfileContactMethods');

function extendProfileContactMethods($user_contact) {
		$user_contact['instagram']  	= 'Instagram Profil';
        $user_contact['pinterest']  	= 'Pinterest Profil';
        $user_contact['xing']	 		= 'Xing Profil';
        $user_contact['linkedin']   	= 'LinkedIn Profil';

        return $user_contact;
    }

Das Schöne an user_contactmethods ist, dass diese Funktion alles andere für mich übernimmt. Daher benötige ich weder HTML für die Ausgabe der neuen Felder, noch muss ich mir Gedanken über den Speicherprozess machen.

Die kleine Unschönheit dieser Methode ist allerdings, dass ich keine weiteren Parameter mitgeben kann, beispielsweise den Tag required für Pflichtfelder. Außerdem werden alle neuen Felder generell als input-Element vom Typ text erzeugt.

Im konkreten Anwendungsfall der Social Media-Links werde ich aber nur URLs in diesen Feldern verwenden. Daher wäre es hier praktischer, wenn ich das input-Element url verwenden könnte.

Das hat konkret zur Folge, dass die automatische Validierung des Eingabefeldes auf eine eine ordnungsgemäß formatierte URL entfällt.

Um sogenannte Broken Links zu vermeiden, werde ich auch noch eine eigene Validerung für diese Felder schreiben.

WordPress-Profileseite mit den neuen Feldern unter Kontaktinfo

Eigene Eingabefelder anlegen

Bevor es aber an die Validierung geht, lege ich mit einem weiteren Skript zunächst noch die neuen Eingabefelder für Unternehmen und Slogan an.

Das Erstellen dieser Felder ist deutlich aufwendiger als das Erweitern der Kontaktinformationen, denn hierfür werde ich eine Reihe von action-Hooks verwenden:

  • show_user_profile wird verwendet, um neue Felder oder Daten am Ende der Profilseite auszugeben und wird ausgeführt, wenn ein Benutzer seine eigene Profilseite aufruft.
  • edit_user_profile wird verwendet, um neue Felder oder Daten am Ende der Profilseite auszugeben wird ausgeführt, wenn ein Benutzer die Profilseite eines anderen Benutzers aufruft.
  • personal_options_update wird verwendet, um benutzerdefinierte Felder zu speichern, die der Profilseite hinzugefügt wurden und wird ausgeführt, wenn ein Benutzer seine eigene Profilseite aufruft.
  • edit_user_profile_update wird verwendet, um benutzerdefinierte Felder zu speichern, die der Profilseite hinzugefügt wurden und wird ausgeführt, wenn ein Benutzer die Profilseite eines anderen Benutzers aufruft.

Wie Du an den Definitionen dieser action-Hooks erkennen kannst, richtet sich deren Ausführung danach, von welchem Benutzer eine Profilseite aufgerufen wird.

Um sowohl mir als Admin, aber auch meinen Nutzern die Möglichkeit zu geben, die Eingabefelder zu sehen und zu bearbeiten, sind alle vier action-Hooks notwendig.

Dazu verknüpfe ich jetzt die action-Hooks show_user_profile und edit_user_profile mit Funktion show_custom_profile_fields und die action-Hooks personal_option_update und edit_user_profile_update mit der Funktion update_custom_profile_fields.

add_action('show_user_profile','show_custom_profile_fields');
add_action('edit_user_profile','show_custom_profile_fields');
add_action('personal_options_update','update_custom_profile_fields');
add_action('edit_user_profile_update','update_custom_profile_fields');

Die Eingabefelder auf der Profilseite anzeigen

Um meine neuen Eingabefelder auf der Profilseite nutzbar zu machen, verwende ich die Funktion show_custom_profile_fields($user).

Als erstes prüfe ich in dieser Funktion, ob für das Feld Unternehmen oder das Feld Slogan bereits Werte gespeichert wurden. Dazu verwende ich die WordPress-Funktion get_the_author_meta(), die ich um den jeweiligen Feldnamen erweitere.

Falls für dieser Felder bereits Werte gespeichert sind, speichere ich den jeweiligen Wert in der Variable $personal_company beziehungsweise $personal_slogan, um sie später in den Eingabefeldern anzeigen zu lassen.

$personal_company = get_the_author_meta('company',$user->ID);
$personal_slogan = get_the_author_meta('personal_slogan',$user->ID);

Im nächsten Schritt erstelle ich die dann den Bereich für meine Eingabefelder auf der Profilseite. Dazu braucht es lediglich ein wenig HTML und die zuvor erzeugten Variablen $personal_company beziehungsweise $personal_slogan.

echo('
	<h3>' . esc_html('Meine eigenen Benutzerfelder') . '</h3>
	<table class="form-table">
	<tr>
		<th><label for="personal_slogan">' . esc_html('Unternehmen') . '</label></th>
		<td>
			<input 	type="text"
					id="company"
					name="company"
					maxlength="100"
					value="' . esc_attr($personal_company) . '"
					class="regular-text"
			/>
		</td>
	</tr>
	<tr>
		<th><label for="personal_slogan">' . esc_html('Dein Slogan') . '</label></th>
		<td>
			<input	type="text"
					id="personal_slogan"
					name="personal_slogan"
					maxlength="100"
					value="' . esc_attr($personal_slogan) . '"
					class="regular-text"
			/>
		</td>
	</tr>
	</table>'
	);
WordPress-Profilseite mit einem eigenem Bereich für eigene Meta-Felder.

Die Daten speichern

Zwar kann ich jetzt meine neuen Eingabefelder anzeigen und auch editieren. Würde ich jetzt etwas in einem der Eingabefelder hinterlegen und anschließend auf Profil aktualisieren klicken, würde nichts passieren. Die Felder waren nach dem neuen Aufruf der Profilseite wieder leer.

Denn mir fehlt noch ein Prozess zur Speicherung meiner Eingabefelder.

Um Eingaben auch in der Datenbank speichern, benötige ich also noch ein weiteres Skript. Hierzu bediene ich mich der schon erwähnten action-Hooks personal_options_update und edit_user_profile_update.

Diese beiden Hooks verknüpfe ich nun mit der Funktion update_profile_custom_fields, in der sich die Anweisungen befinden, um meine Datenfelder zu speichern.

Bevor die Änderungen eines Nutzers gespeichert werden, prüfe ich mit current_user_can zunächst, ob die Rolle dieses Nutzer überhaupt zum Speichern von Änderungen berechtigt ist. In diesem Fall muss er berechtigt sein, Benutzerprofile zu bearbeiten (edit_users).

Ist der Nutzer berechtigt, Benutzerprofile zu ändern, werden die Werte aus den Eingabefeldern mittels update_user_meta() in der Datenbank gespeichert. Sollte dieses Meta-Feld für diesen Benutzer noch nicht in der Datenbank vorhanden sein, wird es automatisch hinzugefügt.

add_action('personal_options_update','update_profile_custom_fields');
add_action('edit_user_profile_update','update_profile_custom_fields');

function update_profile_custom_fields($user_id){
	if (!current_user_can('edit_user',$user_id)){
		return false;
	}

	if (!empty($_POST['personal_slogan'])){
		update_user_meta($user_id,'personal_slogan',$_POST['personal_slogan']);
	}
	
	if (!empty($_POST['company'])){
		update_user_meta($user_id,'company',$_POST['company']);
	}
} // close function

Jetzt noch die Eingabefelder validieren

Bevor die neuen Daten allerdings tatsächlich in der Datenbank gespeichert werden, lasse ich sie noch auf Richtigkeit prüfen. Auch hierfür stellt mir WordPress einen action-Hook namens user_profile_update_errors zur Verfügung.

add_action('user_profile_update_errors','user_profile_update_errors',10,3);
function user_profile_update_errors($errors,$update,$user){
	if (!empty($_POST['personal_slogan'] ) &amp;&amp; strlen( $_POST['personal_slogan'] ) > 100 &amp;&amp; !empty( $_POST['personal_slogan'] )){
			$errors->add( 'personal_slogan', '<strong>FEHLER</strong>: Die maximale Textlänge beträgt 100 Zeichen. ');
	}
	if(!empty($_POST['instagram'] ) &amp;&amp; !empty( $_POST['instagram'])){
		if (filter_var($_POST['instagram'], FILTER_VALIDATE_URL) == false){
			$errors->add( 'instagram', '<strong>FEHLER</strong>: Bitte gib eine gültige Instagram-URL ein. ');
		}
	}
}

In meiner Funktion user_profile_update_errors validiere ich zum einen die Textlänge der Textfelder, zum anderen integriere ich hier nun auch die URL-Prüfung der neuen Felder, die ich unter Kontoinfo hinzugefügt habe. Und da ich schon dabei bin, habe ich hier auch gleich noch eine Validierung der bereits bestehenden Felder für Facebook, Twitter und Website hinterlegt.

Kommt es dabei zu einem Fehler innerhalb der Validierung, wird über $errors->add() der Variablen $error eine entsprechende Fehlermeldung zugewiesen. Sobald diese Variable einen Fehler enthält, wird das Speichern abgebrochen und der Fehler werden dem Benutzer angezeigt.

WordPress-Profilseite mit Beispiel für eine Fehlermeldung.

Die neuen Felder im Frontend ausgeben

Um die neuen wie auch die alten Felder anschließend im Frontend zu verwenden, verwende ich die gleiche Funktion wie schon auf der Profilseite: get_the_author_meta().

$jyy_currentAuthorID = get_the_author_meta('ID');
$jyy_currentAuthorName = get_the_author_meta('display_name',$jyy_currentAuthorID);
$jyy_currentAuthorEmail = get_the_author_meta('user_email',$jyy_currentAuthorID);
$jyy_currentAuthorDescription = wpautop(get_the_author_meta('description',$jyy_currentAuthorID));
$jyy_currentAuthorTwitter = get_the_author_meta('twitter',$jyy_currentAuthorID);
$jyy_currentAuthorFacebook = get_the_author_meta('facebook',$jyy_currentAuthorID);
$jyy_currentAuthorLinkedin = get_the_author_meta('linkedin',$jyy_currentAuthorID);
$jyy_currentAuthorWebsite =  get_the_author_meta('url',$jyy_currentAuthorID);

Ich gehe gerne den Weg über zusätzliche Variablen, weil ich aus der Praxis gelernt habe, dass manche Inhalte noch „nachbearbeiten“ werden müssen. Dies ist mit dem Zwischenspeichern in Variablen deutlich einfacher.

Möchtest Du die Werte aber doch direkt ausgeben, kannst Du stattdessen die Funktion the_author_meta() verwenden.

Der vollständige Code

add_filter('user_contactmethods','extendProfileContactMethods');
add_action('show_user_profile','show_custom_profile_fields');
add_action('edit_user_profile','show_custom_profile_fields');
add_action('personal_options_update','update_custom_profile_fields');
add_action('edit_user_profile_update','update_custom_profile_fields');
add_action('user_profile_update_errors','user_profile_update_errors',10,3 );

function extendProfileContactMethods($contactmethods) {
		$contactmethods['instagram']  	= 'Instagram Profil';
        $contactmethods['pinterest']  	= 'Pinterest Profil';
        $contactmethods['xing'] 		= 'Xing Profil';
        $contactmethods['linkedin']   	= 'LinkedIn Profil';

        return $contactmethods;
    } // close function
	
function show_custom_profile_fields($user) {
	$personal_company = get_the_author_meta('company',$user->ID);
	$personal_slogan = get_the_author_meta('slogan',$user->ID);
	echo('
	<h3>' . esc_html('Meine eigenen Benutzerfelder') . '</h3>
	<table class="form-table">
	<tr>
			<th><label for="company">' . esc_html('Unternehmen') . '</label></th>
			<td>
				<input type="text"
			       id="company"
			       name="company"
				   maxlength="100"
			       value="' . esc_attr($personal_company) . '"
			       class="regular-text"
				/>
			</td>
		</tr>
		<tr>
			<th><label for="slogan">' . esc_html('Dein Slogan') . '</label></th>
			<td>
				<input type="text"
			       id="slogan"
			       name="slogan"
				   maxlength="100"
			       value="' . esc_attr($personal_slogan) . '"
			       class="regular-text"
				/>
			</td>
		</tr>
	</table>');
} //close function

function update_custom_profile_fields($user_id){
	if (!current_user_can('edit_user',$user_id)){
		return false;
	}

	if (!empty($_POST['slogan'])){
		update_user_meta($user_id,'slogan',$_POST['slogan']);
	}
	
	if (!empty($_POST['company'])){
		update_user_meta($user_id,'company',$_POST['company']);
	}
} // close function

function user_profile_update_errors($errors,$update,$user){
	/* validate WordPress standard contact information */
	
	if(!empty($_POST['url'] ) &amp;&amp; !empty( $_POST['url'])){
		if (filter_var($_POST['url'], FILTER_VALIDATE_URL) == false){
			$errors->add( 'url','<strong>FEHLER</strong>: Bitte gib eine gültige URL für Deine Website ein.');
		}
	}
	
	if(!empty($_POST['facebook'] ) &amp;&amp; !empty( $_POST['facebook'])){
		if (filter_var($_POST['facebook'], FILTER_VALIDATE_URL) == false){
			$errors->add( 'facebook','<strong>FEHLER</strong>: Bitte gib eine gültige Facebook-URL ein.');
		}
	}
	
	/* validate custom profile fields */	
	if(!empty($_POST['instagram'] ) &amp;&amp; !empty( $_POST['instagram'])){
		if (filter_var($_POST['instagram'], FILTER_VALIDATE_URL) == false){
			$errors->add( 'instagram','<strong>FEHLER</strong>: Bitte gib eine gültige Instagram-URL ein.');
		}
	}
	
	if(!empty($_POST['pinterest'] ) &amp;&amp; !empty( $_POST['pinterest'])){
		if (filter_var($_POST['pinterest'], FILTER_VALIDATE_URL) == false){
			$errors->add( 'pinterest','<strong>FEHLER</strong>: Bitte gib eine gültige Pinterest-URL ein.');
		}
	}
	
	if(!empty($_POST['xing'] ) &amp;&amp; !empty( $_POST['xing'])){
		if (filter_var($_POST['xing'], FILTER_VALIDATE_URL) == false){
			$errors->add( 'xing', '<strong>FEHLER</strong>: Bitte gib eine gültige Xing-URL ein.');
		}
	}
		
	if(!empty($_POST['linkedin'] ) &amp;&amp; !empty( $_POST['linkedin'])){
		if (filter_var($_POST['linkedin'], FILTER_VALIDATE_URL) == false){
			$errors->add( 'linkedin', '<strong>FEHLER</strong>: Bitte gib eine gültige LinkedIn-URL ein.');
		}
	}
	
	if (!empty($_POST['company'] ) &amp;&amp; strlen( $_POST['company'] ) > 100 &amp;&amp; !empty( $_POST['company'] )){
			$errors->add( 'company', '<strong>FEHLER</strong>: Die maximale Textlänge beträgt 100 Zeichen.');
		}

	if (!empty($_POST['slogan'] ) &amp;&amp; strlen( $_POST['slogan'] ) > 100 &amp;&amp; !empty( $_POST['slogan'] )){
			$errors->add( 'slogan', '<strong>FEHLER</strong>: Die maximale Textlänge beträgt 100 Zeichen.');
		}		

} // close function

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.