Unser Affiliate Theme ist da! Spare 10% mit dem Gutschein DRWP10 - mehr erfahren!
Achtung! Dieser Artikel wurde nach dem Relaunch von wpsnippets.de noch nicht überarbeitet und kann fehlerhaft in der Formatierungen sein.

Custom Fields in WordPress erstellen 1 von 2

Custom Fields in WordPress erstellen Custom Fields sind eine starke Funktion in WordPress und bieten dem Entwickler viele Funktionen um z.B.: ein Theme perfekt an Kundenwünsche anzupassen. Seiten, Beiträge oder sogar Post Types können anhand von Custom Fields enorm um diverse Informationen erweitert werden.

WordPress hat bereits „benutzerdefinierte Felder (Custom Fields)“ von Haus aus implementiert. Ich finde allerdings den Umgang umständlich und weniger Übersichtlich – viele Kunden sind bereits daran gescheitert. Um Custom Fields Übersichtlicher darzustellen, nutze ich gerne eigene Custom Fields – die Ausgabe kann auf die eigenen Bedürfnisse, oder die des Kunden, angepasst werden.

Denkbarer Einsatz von Custom Fields

Als Beispiel nehmen wir ein Firmenverzeichnis. Für ein Firmenverzeichnis wird ein Post Type erstellt um Firmen in die Datenbank abzulegen, nennen wir Ihn „Firmen“. Natürlich benötigt jeder Eintrag eine Vielzahl von Informationen – da wird der normale Editor nicht ausreichen. Denkbare Felder wären: Anschrift (Straße, PLZ, Ort), Kontaktdaten (Telefon, Fax, Mobil, E-Mail, Webseite). Für diese Felder eignen sich Custom Fields und könnten in der Praxis folgendermaßen aussehen:

Übersicht von versch. Custom Fields

Übersicht von versch. Custom Fields

Diese Ansicht erscheint nach Erstellen der Custom Fields im gewünschten Post Type (Page, Post, Custom) unterhalb des Editor, kann aber via Drag & Drop an die gewünschte Position verschoben werden.

Im Umfang der Custom Fields sind keine Grenzen gesetzt. Es können z.B.: Textfelder, Textareas, Auswahllisten und Checkboxen erstellt werden – im Prinzip ist jedes HTML-Element denkbar. Auch in der Positionierung und Gestaltung ist man völlig frei.

Die Funktion für eigene Custom Fields integrieren

Hierfür kommt wieder die functions.php zum Einsatz. Damit diese nicht unübersichtlich wird, lege ich gerne neue .php-Dateien an und include diese in die eigentliche functions.php. So baue ich mir meine eigene „Library“ und behalte Übersicht über meine Funktionen.

Ordnerstruktur der Library

In meinen Scripts verwende ich stets eine geordnete Ordnerstruktur, ich empfehle euch das genauso zu tun. Falls nicht, müsst Ihr die unten stehenden Dateien geringfügig anpassen. Die Struktur ist wie folgt:

  • functions.php
  • librarycustom-fields.php
  • libraryadmin (Alle nötigen CSS- und JavaScript-Dateien. Hier herunterladen: DOWNLOAD)

functions.php

In dieser Datei müssen Konstanten erstellt werden, welche uns später helfen auf die wichtigen Admin-Dateien (CSS und JavaScript) zuzugreifen. Diese Codezeilen am besten an den Anfang der Datei kopieren:

define( 'MY_LIBRARY', TEMPLATEPATH . '/library' );
define( 'MY_ADMIN_CSS', get_bloginfo( 'template_url' ) . '/library/admin/css', true );
define( 'MY_ADMIN_JS', get_bloginfo( 'template_url' ) . '/library/admin/js', true );

require_once(MY_LIBRARY . '/custom-fields.php');

In der letzten Zeile wird die custom-fields.php geladen, natürlich könnt ihr viele weitere PHP-Dateien mit Funktionen auf diese Art laden – ich empfehle dies sogar um die Übersicht über eure Funktionen zu behalten – eine functions.php mit ~300 Zeilen wird schnell unübersichtlich.

custom-fields.php

Zunächst muss das Grundgerüst der Custom Fields erzeugt werden. Dazu wird eine custom-fields.php angelegt mit folgendem Inhalt:

<?php
/**
* Custom Fields
*/
global $new_meta_boxes;

// Custom Fields anlegen
$new_meta_boxes =
array(
"_lorem_ipsum" => array(
"name" => "_lorem_ipsum",
"std" => "",
"title" => "Lorem ipsum",
"description" => "",
"type" => "text",
"location" => "Post"),
);

function new_meta_boxes_post() {
new_meta_boxes('Post');
}

// Ausgabe der Custom Fields
function new_meta_boxes( $type ) {
global $post, $new_meta_boxes;

echo '<input type="hidden" name="my_meta_box_nonce" value="', wp_create_nonce(basename(__FILE__)), '" />';
echo '<div class="form-wrap">';

foreach($new_meta_boxes as $meta_box) {
if( $meta_box['location'] == $type) {

if ( $meta_box['type'] == 'title' ) {
echo '<p style="font-size: 18px; font-weight: bold; font-style: normal; color: #e5e5e5; text-shadow: 0 1px 0 #111; line-height: 40px; background-color: #464646; border: 1px solid #111; padding: 0 10px; -moz-border-radius: 6px;">' . $meta_box[ 'title' ] . '</p>';
} else {
$meta_box_value = get_post_meta($post->ID, $meta_box['name'], true);

if($meta_box_value == "")
$meta_box_value = $meta_box['std'];

switch ( $meta_box['type'] ) {
case 'headline':
echo '<h2 style="margin:0;padding:0;">' . $meta_box[ 'title' ] .'</h2>';
break;

case 'text':
echo '<div class="form-field form-required">';
echo '<label for="' . $meta_box&#91; 'name' &#93; .'"><strong>' . $meta_box[ 'title' ] . '</strong></label>';
echo '<input id="' . $meta_box&#91; 'name' &#93; . '" type="text" name="' . $meta_box&#91; 'name' &#93; . '" value="' . htmlspecialchars( $meta_box_value ) . '" style="border-color: #ccc;" />';
echo '<p>' . $meta_box[ 'description' ] . '</p>';
echo '</div>';
break;

case 'textarea':
echo '<div class="form-field form-required">';
echo '<label for="' . $meta_box&#91; 'name' &#93; .'"><strong>' . $meta_box[ 'title' ] . '</strong></label>';
echo '<textarea name="' . $meta_box&#91; 'name' &#93; . '" style="border-color: #ccc;" rows="10">' . htmlspecialchars( $meta_box_value ) . '</textarea>';
echo '<p>' . $meta_box[ 'description' ] . '</p>';
echo '</div>';
break;

case 'checkbox':
echo '<div class="form-field form-required">';
if($meta_box_value == '1'){ $checked = "checked="checked""; }else{ $checked = "";}
echo '<label for="' . $meta_box&#91; 'name' &#93; .'"><strong>' . $meta_box[ 'title' ] . '</strong>&amp;nbsp;<input style="width: 20px;" type="checkbox" name="' . $meta_box&#91; 'name' &#93; . '" value="1" ' . $checked . ' /></label>';
echo '<p>' . $meta_box[ 'description' ] . '</p>';
echo '</div>';
break;

case 'select':
echo '<div class="form-field form-required">';
echo '<label for="' . $meta_box&#91; 'name' &#93; .'"><strong>' . $meta_box[ 'title' ] . '</strong></label>';

echo '<select name="' . $meta_box&#91; 'name' &#93; . '">';

foreach ($meta_box[ 'options' ] as $option) {
if(is_array($option)) {
echo '<option ' . ( $meta_box_value == $option&#91;'value'&#93; ? 'selected="selected"' : '' ) . ' value="' . $option&#91;'value'&#93; . '">' . $option['text'] . '</option>';
} else {
echo '<option ' . ( $meta_box_value == $option ? 'selected="selected"' : '' ) . ' value="' . $option&#91;'value'&#93; . '">' . $option['text'] . '</option>';
}
}

echo '</select>';
echo '<p>' . $meta_box[ 'description' ] . '</p>';
echo '</div>';
break;

case 'image':
echo '<div class="form-field form-required">';
echo '<label for="' . $meta_box&#91; 'name' &#93; .'"><strong>' . $meta_box[ 'title' ] . '</strong></label>';
echo '<input type="text" name="' . $meta_box&#91; 'name' &#93; . '" id="' . $meta_box&#91; 'name' &#93; . '" value="' . htmlspecialchars( $meta_box_value ) . '" style="width: 400px; border-color: #ccc;" />';
echo '<input type="button" id="button' . $meta_box&#91; 'name' &#93; . '" value="Browse" style="width: 60px;" class="button button-upload" rel="' . $post->ID . '" />';
echo '&amp;nbsp;<a href="#" style="color: red;" class="remove-upload">remove</a>';
echo '<p>' . $meta_box[ 'description' ] . '</p>';
echo '</div>';
break;
}
}
}
}
echo '</div>';
}

// "meta-box" fr das Backend anlegen
function create_meta_box() {
global $theme_name;
if ( function_exists('add_meta_box') ) {
add_meta_box( 'new_meta_boxes_post', 'Erweiterte Einstellungen f&amp;uuml;r diesen Beitrag', 'new_meta_boxes_post', 'post', 'normal', 'high' );
}
}

function save_postdata( $post_id ) {
if ( !wp_verify_nonce( $_POST['my_meta_box_nonce'], basename(__FILE__)) ) {
return $post_id;
}

if ( wp_is_post_revision( $post_id ) or wp_is_post_autosave( $post_id ) )
return $post_id;

global $post, $new_meta_boxes;

foreach($new_meta_boxes as $meta_box) {
if ( $meta_box['type'] != 'title)' ) {

if ( 'page' == $_POST['post_type'] ) {
if ( !current_user_can( 'edit_page', $post_id ))
return $post_id;
} else {
if ( !current_user_can( 'edit_post', $post_id ))
return $post_id;
}

if ( is_array($_POST[$meta_box['name']]) ) {

foreach($_POST[$meta_box['name']] as $cat){
$cats .= $cat . ",";
}
$data = substr($cats, 0, -1);
}
else { $data = $_POST[$meta_box['name']]; }

if(get_post_meta($post_id, $meta_box['name']) == "")
add_post_meta($post_id, $meta_box['name'], $data, true);
elseif($data != get_post_meta($post_id, $meta_box['name'], true))
update_post_meta($post_id, $meta_box['name'], $data);
elseif($data == "")
delete_post_meta($post_id, $meta_box['name'], get_post_meta($post_id, $meta_box['name'], true));
}
}
}

add_action('admin_menu', 'create_meta_box');
add_action('save_post', 'save_postdata');

function my_admin_scripts() {
wp_enqueue_script('media-upload');
wp_enqueue_script('thickbox');
wp_register_script('upload-js', MY_ADMIN_JS . '/upload.js', array('jquery','media-upload','thickbox'));
wp_enqueue_script('upload-js');

global $post;

if($post->post_type == 'page') {
wp_enqueue_script('admin_js', MY_ADMIN_JS . '/admin.js', array('jquery'));
}
}

function my_admin_styles() {
wp_enqueue_style('thickbox');
}

add_action('admin_print_scripts', 'my_admin_scripts');
add_action('admin_print_styles', 'my_admin_styles');
?>

In dieser Datei werden Custom FIelds erzeugt, die Ausgabe bestimmt und eingegebene Daten gespeichert. Jetzt im Detail erklärt:

// Custom Fields anlegen
$new_meta_boxes =
array(
"_lorem_ipsum" => array(
"name" => "_lorem_ipsum",
"std" => "",
"title" => "Lorem ipsum",
"description" => "",
"type" => "text",
"location" => "Post"),
);

In diesem Array werden die Custom Fields angelegt. Zunächst muss der „Array“-Name festgelegt werden, dieser sollte mit dem Namen des Custom Fields übereinstimmen.

  • „name“ => Name des Custom Fields
  • „std“ => Hier kann ein Standardwert festgelegt werden
  • „title“ => Titel des Customfields
  • „description“ => Eine Beschreibung des Custom Fields
  • „type“ => Legt den Typ des Custom Fields fest. Text, Textarea, Checkbox, Select und Image stehen zur Verfügung
  • „location“ => Legt fest, zu welchem Post Type dieses Custom Field zugeordnet wird

Möchte man mehrere Custom Fields anlegen, müsste das Array so aussehen:

// Custom Fields anlegen
$new_meta_boxes =
array(
"_lorem_ipsum" => array(
"name" => "_lorem_ipsum",
"std" => "",
"title" => "Lorem ipsum",
"description" => "",
"type" => "text",
"location" => "Post"),

"_dolor_akismet" => array(
"name" => "_dolor_akismet",
"std" => "",
"title" => "Dolor akismet",
"description" => "",
"type" => "text",
"location" => "Post"),
);

Es können auf diese Art und Weise unendlich viele Custom Fields angelegt werden.

Custom Fields im Template ausgeben

Um Custom Fields auszugeben, gibt es ein kleines Snippet. Ihr müsst dieses einfach in eurer Loop an der gewünschten Stelle platzieren:

<?php echo get_post_meta($post->ID, '_lorem_ipsum', true); ?>

Fazit

Das Anlegen von Custom Fields ist kein Hexenwerk, selbst wenn Ihr keine PHP-Profis seid, könnt Ihr Anhand dieser Anleitung eigene Custom Fields erzeugen und so wertvolle Informationen zu euren Beiträgen hinzufügen. Ich werde euch im Teil 2 dieser Artikelserie erklären, wie Ihr Custom Fields auch für Post Types einsetzen könnt und die Ausgabe der Textfelder, Textareas oder anderen Ausgabetypen anpassen könnt.

Über Christian

Die Webentwicklung ist seit 2006 ein großer Teil meines Lebens und seit 2010 kann ich damit auch meine Brötchen verdienen. Ich beschäftige mich speziell mit WordPress und entwickle auch eigene Themes. Die Anpassungsfähigkeit von Wordpress begeistert mich immer wieder, daher möchte ich euch interessante Snippets und Plugins nicht vorenthalten.

WordPress Affiliate ThemeAnzeige

7 Kommentare

Avatar von Pascal

Pascal 6. August 2013 um 13:08

Hi, der Code ist ja ganz cool und einfach, aber beim Speichern werden die Felder nicht gespeichert…

Antworten
Avatar von Christian Lang

Christian Lang 8. August 2013 um 12:13

Hallo Pascal,

hast du auch die Funktion „save_postdata“ fehlerfrei übernommen? zusätzlich muss diese Funktion auch via:

[php]add_action(’save_post‘, ’save_postdata‘);[/php]

geladen werden.

Ansonsten schick mir mal deine .php Datei zu, dann schau ich mal. Melde dich einfach übers Kontaktformular bei mir.

Antworten
Avatar von Elvis

Elvis 29. September 2013 um 15:22

Kannst du mal ein Beispelarray für eine Select Box posten? Ich werde nicht recht schlau aus dem Aufruf uin der Funktion new_meta_boxes( $type )

Antworten
Avatar von Elvis

Elvis 29. September 2013 um 15:26

Und wo wir schon mal dabei sind: Vielleicht ließe sich obige Funktion auch noch um radio buttons erweitern. Sollte ja in etwa analog zur select box funktionieren.

Antworten
Avatar von Christian

Christian 16. März 2014 um 18:28

Hallo und danke für das tolle Snippet!
Das Einfügen der neuen Felder funktioniert wunderbar, allerdings kann ich diese nicht mit CSS stylen. Kann man nicht einfach in der admin.css oder functions.css wie von dir geschrieben die Felder anpassen?

Antworten
Avatar von Christian Lang

Christian Lang 17. März 2014 um 19:01

Hallo Christian,

natürlich geht das. Einfach die Felder via CSS Klasse ansprechen und stylen. Zur Not kannst du auch inline CSS verwenden.

Gruß
Christian

Antworten
Avatar von mike Lager

mike Lager 4. Mai 2016 um 13:55

Hi !
Leider bin ich was WordPress angeht noch ein halber noob ! Allerdings benötige ich gerade fast genau das was du hier gepostet hast…..
Um genau zu sein:
Ich benötige ein Benutzerdefiniertes Feld in jeder Seite und in jedem Beitrag den ich schreibe…..
Nur bei soooo vielen Seiten und beiträgen ist es sehr mühsam jedes mal auf Feld erstellen klicken, name des feldes, inhalt des feldes an zu geben …. Besteht die möglichkeit in der Datenbank direkt irgendwo den namen des feldes zu schreiben und wenn ich dann auf „Neuer Beitrag“ klicke das dieses feld mir dann direkt angezeigt wird wo ich den neuen Beitrag bzw. Seite schreibe ?

Danke im voraus
Mike

Antworten

Hinterlasse eine Antwort

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

Du kannst folgende HTML-Tags benutzen: <strong>, <em>, <u>, <a href="">, <del>, <ul>, <ol>, <blockquote>. Für Code benutze bitte pastebin.com und kopiere den Link in dein Kommentar.
*
*