{"id":24806,"date":"2021-05-25T18:13:00","date_gmt":"2021-05-25T15:13:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=24806"},"modified":"2021-10-18T02:39:01","modified_gmt":"2021-10-17T23:39:01","slug":"hinzufugen-einer-benutzerdefinierten-bildschaltflache-mit-media-uploader-in-wordpress","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/de\/hinzufugen-einer-benutzerdefinierten-bildschaltflache-mit-media-uploader-in-wordpress\/","title":{"rendered":"Hinzuf\u00fcgen einer benutzerdefinierten Bildschaltfl\u00e4che mit Media Uploader in WordPress"},"content":{"rendered":"

K\u00fcrzlich habe ich an einem Plugin gearbeitet, bei dem wir den Standard-Medien-Uploader von WordPress f\u00fcr unsere Anforderung verwenden wollten. Wir hatten eine benutzerdefinierte Bildschaltfl\u00e4che und wollten ein Bild \u00fcber den Medien-Uploader hochladen. WordPress hat einen sch\u00f6nen Medien-Uploader erstellt, der es einem Benutzer erm\u00f6glicht, ein neues Bild hochzuladen oder ein vorhandenes Bild aus der Medienbibliothek zu verwenden.<\/p>\n

Es wird immer empfohlen, den integrierten Medien-Uploader zu verwenden, wenn Sie nach einer benutzerdefinierten L\u00f6sung suchen, um ein Bild im Backend hochzuladen. Dabei folgst du den WordPress-Standards. Die Implementierung eines Medien-Uploaders erfordert nur wenige Codezeilen. Lassen Sie uns also ohne weitere Diskussion damit beginnen.<\/p>\n

F\u00fcr dieses Tutorial f\u00fcge ich eine benutzerdefinierte Bildschaltfl\u00e4che f\u00fcr den Beitrag und die Seite hinzu. Wenn Sie auf diese Schaltfl\u00e4che klicken, wird der Medien-Uploader ge\u00f6ffnet, in dem der Benutzer das Bild hochladen kann. Die hochgeladene Bild-URL wird in einem benutzerdefinierten Metafeld festgelegt und als Beitrags-Meta f\u00fcr den jeweiligen Beitrag oder die Seite gespeichert.<\/p>\n

Benutzerdefinierte Metabox in WordPress hinzuf\u00fcgen Add<\/h3>\n

Metabox ist nichts anderes als ein Block auf einem Beitrag oder einer Seite. Kategorien, Tags, Featured Image, Excerpt, Discussion, etc. sind Beispiele f\u00fcr Metaboxen. \u00dcber die Meta-Box k\u00f6nnen Sie zus\u00e4tzliche Informationen f\u00fcr den Beitrag und die Seite hinzuf\u00fcgen.<\/p>\n

Wir ben\u00f6tigen eine Metabox, die die Schaltfl\u00e4che zum Hochladen des Bildes und ein Textfeld enth\u00e4lt. Wenn ein Benutzer auf die Schaltfl\u00e4che klickt, l\u00e4dt er das Bild hoch und die endg\u00fcltige Bild-URL wird im Textfeld festgelegt.<\/p>\n

Das Hinzuf\u00fcgen einer Metabox<\/a> ist einfach und unkompliziert. Schreiben Sie den folgenden Code in die functions.php<\/code>Datei oder in Ihr Plugin.<\/p>\n

function aw_custom_meta_boxes( $post_type, $post) {\n\u00a0\u00a0\u00a0\u00a0add_meta_box(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'aw-meta-box',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0__( 'Custom Image' ),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'render_aw_meta_box',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0array('post', 'page'), \/\/post types here\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'normal',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'high'\n\u00a0\u00a0\u00a0\u00a0);\n}\nadd_action( 'add_meta_boxes', 'aw_custom_meta_boxes', 10, 2 );\n\u00a0\nfunction render_aw_meta_box($post) {\n\u00a0\u00a0\u00a0\u00a0$image = get_post_meta($post->ID, 'aw_custom_image', true);\n\u00a0\u00a0\u00a0\u00a0?>\n\u00a0\u00a0\u00a0\u00a0<table>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<tr>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><a href=\"#\" class=\"aw_upload_image_button button button-secondary\"><?php _e('Upload Image'); ?><\/a><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<td><input type=\"text\" name=\"aw_custom_image\" id=\"aw_custom_image\" value=\"<?php echo $image; ?>\" style=\"width:500px;\" \/><\/td>\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0<\/tr>\n\u00a0\u00a0\u00a0\u00a0<\/table>\n\u00a0\u00a0\u00a0\u00a0<?php\n}<\/code><\/pre>\n
Nachdem Sie den obigen Code hinzugef\u00fcgt haben, gehen Sie zu Ihrem Beitrag oder Ihrer Seite und Sie sollten die neue Meta-Box zusammen mit ihren Feldern sehen k\u00f6nnen.<\/p>\n
\"Hinzuf\u00fcgen<\/a><\/p>\n
WordPress Media Uploader anpassen<\/h3>\n
Sie sind jetzt mit Ihrer Meta-Box fertig. Als n\u00e4chstes klicken Sie auf die Schaltfl\u00e4che ‚Bild hochladen‘, \u00f6ffnen den Medien-Uploader und geben die hochgeladene Bild-URL in das Textfeld ein. Zuerst m\u00fcssen Sie also eine js-Datei erstellen und<\/a> in eine WordPress-Umgebung einreihen<\/a>.<\/p>\n
Lassen Sie uns eine js-Datei erstellen awscript.js<\/code>und sie wie folgt in die Warteschlange einreihen:<\/p>\n
function aw_include_script() {\n\u00a0\n\u00a0\u00a0\u00a0\u00a0if (! did_action( 'wp_enqueue_media')) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0wp_enqueue_media();\n\u00a0\u00a0\u00a0\u00a0}\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0wp_enqueue_script( 'awscript', get_stylesheet_directory_uri(). '\/js\/awscript.js', array('jquery'), null, false );\n}\nadd_action( 'admin_enqueue_scripts', 'aw_include_script' );<\/code><\/pre>\n
Hier habe ich den Theme-Pfad angegeben, vorausgesetzt, Sie f\u00fcgen dem Theme einen ganzen Code hinzu. Wenn Sie dies \u00fcber ein Plugin tun, m\u00fcssen Sie den Pfad gem\u00e4\u00df Ihrem Plugin anpassen.<\/p>\n
Um diese Aufgabe auszuf\u00fchren, habe ich eine Referenz von Javascript Reference\/wp.media genommen<\/a> und den jQuery-Code geschrieben. In der werden awscript.js<\/code>wir einen Medien-Uploader-Code wie folgt schreiben.<\/p>\n
jQuery(function($){\n\u00a0\u00a0\u00a0\u00a0$('body').on('click', '.aw_upload_image_button', function(e){\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0e.preventDefault();\n\u00a0\u00a0\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var button = $(this),\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0aw_uploader = wp.media({\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0title: 'Custom image',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0library: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0uploadedTo: wp.media.view.settings.post.id,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0type: 'image'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0button: {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0text: 'Use this image'\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0},\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0multiple: false\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0}).on('select', function() {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0var attachment = aw_uploader.state().get('selection').first().toJSON();\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$('#aw_custom_image').val(attachment.url);\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0})\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0.open();\n\u00a0\u00a0\u00a0\u00a0});\n});<\/code><\/pre>\n
Fahren Sie nun fort und klicken Sie auf die Schaltfl\u00e4che "Bild hochladen". Dadurch wird der Medien-Uploader ge\u00f6ffnet, das Bild ausgew\u00e4hlt \/ hochgeladen und Sie sollten die Bild-URL im Textfeld hinzugef\u00fcgt sehen. Abschlie\u00dfend speichere ich diese URL in der ‚postmeta‘-Tabelle mit dem Schl\u00fcssel ‚aw_custom_image‘. Nat\u00fcrlich k\u00f6nnen Sie dem Schl\u00fcssel einen beliebigen Namen geben.<\/p>\n
function aw_save_postdata($post_id)\n{\n\u00a0\u00a0\u00a0\u00a0if (array_key_exists('aw_custom_image', $_POST)) {\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0update_post_meta(\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$post_id,\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0'aw_custom_image',\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0$_POST['aw_custom_image']\n\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0);\n\u00a0\u00a0\u00a0\u00a0}\n}\nadd_action('save_post', 'aw_save_postdata');<\/code><\/pre>\n
Der save_post ist eine Aktion, die immer dann ausgel\u00f6st wird, wenn ein Beitrag oder eine Seite erstellt oder aktualisiert wird. Mit dieser Aktion k\u00f6nnen Sie Ihren Code in das System einschleusen. Sie k\u00f6nnen mehr \u00fcber diesen Hook in der WordPress-Dokumentation lesen<\/a>.<\/p>\n
Ich hoffe, Sie haben sich mit dem Hinzuf\u00fcgen eines benutzerdefinierten Medien-Uploaders in WordPress vertraut gemacht. Probieren Sie es in Ihrem Plugin oder Theme aus und teilen Sie mir Ihre Meinung im Kommentarbereich unten mit.<\/p>\n
Zum Thema passende Artikel<\/h4>\n