Ich versuche, dynamische Eingabefelder für eine Reihe vordefinierter Beschriftungen in einem benutzerdefinierten Widget für ein Thema zu erstellen, an dem ich arbeite. Ich möchte so etwas erreichen:
wo CourseName ist Chemie, Biologie, Mathematik und Physik (nur vordefinierte Bezeichnungen, max. 4) und FieldONE und FieldTWO sind dynamische Eingaben, bei denen ich für jeden Kurs unterschiedliche Begriffe eingeben möchte.
Also wenn ich auf klicke ( + )zwei Felder FieldOne und FieldTWO werden für dieses Etikett erstellt. Und wenn ich auf die klicke ( - )werden beide Felder gelöscht.
Ich habe versucht zu verwenden dieses Wesentliche was eine ähnliche dynamische Eingabe wie Metabox erzeugt, und bisher habe ich das bekommen:
<?php
/*
Plugin Name: Dynamic Fields Widget
Description: Dynamic Fields
Version: 0.0
Author: Rain Man
*/
// Creating the widget
class dynamic_widget extends WP_Widget
{
public function __construct()
{
parent::__construct(
// Base ID of your widget
'dynamic_widget',
// Widget name will appear in UI
__('Dynamic Widget', 'dynamic_widget_domain'),
// Widget description
array('description' => __('Sample Dynamic Widget', 'dynamic_widget_domain'))
);
}
// widget
public function widget($args, $instance)
{
$title = apply_filters('widget_title', $instance['title']);
// This is where you run the code and display the output
echo __('Hello, World!', 'dynamic_widget_domain');
echo $args['after_widget'];
}
// form
public function form($instance)
{
if (isset($instance[ 'title' ])) {
$title = $instance[ 'title' ];
} else {
$title = __('New title', 'dynamic_widget_domain');
}
// Widget admin form
$repeatable_fields = array();
$courses = array(
'Chemistry' => array(
'coursecode' => 'Chemistry 2059',
'professor' => 'Dr. James Bond',
),
'Biology' => array(
'coursecode' => 'Biology 3029',
'professor' => 'Dr. James Bond',
),
'Math' => array(
'coursecode' => 'Math 2043',
'professor' => 'Dr. James Bond',
),
'Physics' => array(
'coursecode' => 'Physics 2075',
'professor' => 'Dr. James Bond',
)
);
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$( '#add-row' ).on('click', function() {
var row = $( '.empty-row.screen-reader-text' ).clone(true);
row.removeClass( 'empty-row screen-reader-text' );
row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
return false;
});
$( '.remove-row' ).on('click', function() {
$(this).parents('tr').remove();
return false;
});
});
</script>
<?php foreach ($courses as $course_key => $course_info) { ?>
<label><?php echo $course_info['coursecode']; ?></label>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="40%">Fall Term</th>
<th width="40%">Winter Term</th>
<th width="8%"></th>
</tr>
</thead>
<tbody>
<?php
if ($repeatable_fields) :
foreach ($repeatable_fields as $field) {
?>
<tr>
<td><input type="text" class="widefat" name="name[]" value="<?php if ($field['name'] != '') {
echo esc_attr($field['name']);
} ?>" /></td>
<td>
</td>
<td><input type="text" class="widefat" name="url[]" value="<?php if ($field['url'] != '') {
echo esc_attr($field['url']);
} else {
echo '';
} ?>" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a id="add-row" class="button" href="#">Add</a></td>
</tr>
<?php
} else :
// show a blank one
?>
<tr>
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="url[]" value="" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a id="add-row" class="button" href="#">Add</a></td>
</tr>
<?php endif; ?>
<? } ?>
<!-- empty hidden one for jQuery -->
<tr class="empty-row screen-reader-text">
<td><input type="text" class="widefat" name="name[]" /></td>
<td><input type="text" class="widefat" name="url[]" value="" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a id="add-row" class="button" href="#">Add</a></td>
</tr>
</tbody>
</table>
</p>
<?php
}
// update
public function update($new_instance, $old_instance)
{
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
return $instance;
}
} // Class dynamic_widget ends here
// Register and load the widget
function wpb_load_widget()
{
register_widget('dynamic_widget');
}
add_action('widgets_init', 'wpb_load_widget');
und hier ein Screenshot:
es gibt momentan viele Probleme, zuerst funktioniert der Javascript-Button “Hinzufügen” nicht mehr und ich bin mir nicht sicher, wie ich die Daten speichern soll, um später darauf zuzugreifen.
Irgendeine Idee, wie man dynamische Eingabefelder für die Etiketten erstellt? Es muss nicht dem Code aus dem Kernstück ähneln, das ich geteilt habe, aber es wäre am besten, wenn wir meine Änderungen zum Laufen bringen könnten.
Zunächst einmal fügen Sie jQuery (und nicht richtig) hinzu, das normalerweise in WordPress nicht erforderlich ist und Konfliktkopfschmerzen verursachen kann
– Tim Hallmann
13. Dezember 2016 um 22:54 Uhr
@TimHallman ja, das ist nur zum Testen, das Javascript hat nicht funktioniert, also habe ich es getestet, indem ich eine jquery lib hinzugefügt habe.
– Regenmann
13. Dezember 2016 um 23:13 Uhr
Hallo @RainMan, du brauchst dieses Widget, um im Frontend sichtbar zu sein, richtig? und diese Felder sollten Daten von Benutzern sammeln und für Administratorbenutzer zugänglich sein, richtig?
– Kresimir Pendic
16. Dezember 2016 um 12:18 Uhr
@oserk ja das ist richtig
– Regenmann
16. Dezember 2016 um 12:21 Uhr
Probieren Sie diesen Code aus, ich habe ihn getestet und er funktioniert. Der js-Code muss in die Fußzeile und nicht in das Widget eingefügt werden, da sonst der Klick-Button zweimal ausgeführt wird.
Im Funktions-Widget() sehen Sie die Schleife zur Anzeige der Eingabewerte.
<?php
/*
Plugin Name: Dynamic Fields Widget
Description: Dynamic Fields
Version: 0.0
Author: Rain Man
*/
// Creating the widget
class dynamic_widget extends WP_Widget
{
public $courses;
public function __construct()
{
parent::__construct(
// Base ID of your widget
'dynamic_widget',
// Widget name will appear in UI
__('Dynamic Widget', 'dynamic_widget_domain'),
// Widget description
array('description' => __('Sample Dynamic Widget', 'dynamic_widget_domain'))
);
$this->courses = array(
'Chemistry' => array(
'coursecode' => 'Chemistry 2059',
'professor' => 'Dr. James Bond',
),
'Biology' => array(
'coursecode' => 'Biology 3029',
'professor' => 'Dr. James Bond',
),
'Math' => array(
'coursecode' => 'Math 2043',
'professor' => 'Dr. James Bond',
),
'Physics' => array(
'coursecode' => 'Physics 2075',
'professor' => 'Dr. James Bond',
)
);
add_action( 'in_admin_footer',array( $this,'jsfooter'));
}
public function jsfooter() {
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function( $ ){
$(document ).off('click').on('click','div.open .add-row' , function() {
var row = $(this).closest('tr').clone(true);
row.find('input').each(function(){
$(this).val("");
});
// row.insertBefore( '#repeatable-fieldset-one tbody>tr:last' );
$(this).parents('tr').after(row);
return false;
});
$( document).on('click', 'div.open .remove-row',function() {
if ($(this).parents('tbody').find('tr').length >1) {
$(this).parents('tr').remove();
}
return false;
});
});
</script>
<?php
}
// widget
public function widget($args, $instance)
{
$title = apply_filters('widget_title', $instance['title']);
// This is where you run the code and display the output
foreach ($this->courses as $course_key => $course_info) {
echo $course_info['coursecode'] .'<br>';
foreach ($instance['repeat'][$course_key ]["fall"] as $k=>$field) {
echo 'Fall Term ' . $field ."https://stackoverflow.com/";
echo 'Winter Term ' . $instance['repeat'][$course_key ]["winter"][$k] .'<br>';
}
}
echo $args['after_widget'];
}
// form
public function form($instance)
{
if (isset($instance[ 'title' ])) {
$title = $instance[ 'title' ];
} else {
$title = __('New title', 'dynamic_widget_domain');
}
// Widget admin form
$repeatable_fields= isset ( $instance['repeat'] ) ? $instance['repeat'] : array();
?>
<?php foreach ($this->courses as $course_key => $course_info) { ?>
<label><?php echo $course_info['coursecode']; ?></label>
<table id="repeatable-fieldset-one" width="100%">
<thead>
<tr>
<th width="40%">Fall Term</th>
<th width="40%">Winter Term</th>
<th width="8%"></th>
<th width="8%"></th>
</tr>
</thead>
<tbody>
<?php
if ($repeatable_fields[$course_key ]["fall"] || $repeatable_fields[$course_key ]["winter"]) :
foreach ($repeatable_fields[$course_key ]["fall"] as $k=>$field) {
?>
<tr>
<td><input type="text" class="widefat" name="<?php echo $this->get_field_name( 'repeat' )?>[<?php echo $course_key;?>][fall][]" value="<?php echo $field; ?>" /></td>
<td><input type="text" class="widefat" name="<?php echo $this->get_field_name( 'repeat' )?>[<?php echo $course_key;?>][winter][]" value="<?php echo $repeatable_fields[$course_key ]["winter"][$k]; ?>" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a class="button add-row" class="button" href="#">Add</a></td>
</tr>
<?php
} else :
// show a blank one
?>
<tr>
<td><input type="text" class="widefat" name="<?php echo $this->get_field_name( 'repeat' )?>[<?php echo $course_key;?>][fall][]" /></td>
<td><input type="text" class="widefat" name="<?php echo $this->get_field_name( 'repeat' )?>[<?php echo $course_key;?>][winter][]" value="" /></td>
<td><a class="button remove-row" href="#">Remove</a></td>
<td><a class="button add-row" class="button" href="#">Add</a></td>
</tr>
<?php endif; ?>
</tbody>
</table>
<?php } ?>
<!-- empty hidden one for jQuery -->
<?php
}
// update
public function update($new_instance, $old_instance)
{
$instance = array();
$instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
$instance['repeat'] = array();
if ( isset ( $new_instance['repeat'] ) )
{
foreach ( $new_instance['repeat'] as $k =>$value )
{
$instance['repeat'][$k] = $value;
}
}
return $instance;
}
} // Class dynamic_widget ends here
// Register and load the widget
function wpb_load_widget()
{
register_widget('dynamic_widget');
}
add_action('widgets_init', 'wpb_load_widget');
Die Daten werden in $instance gespeichert[‘repeat”] in einem solchen Array (um zu verstehen, wie ich die Schleife gemacht habe)
Mir muss etwas fehlen, wie fügen Sie neue Felder hinzu und rufen get_field_name auf, wenn Sie es mit js tun?
– Niksan
26. April 2018 um 11:44 Uhr
Es funktioniert gut im WordPress-Widget-Bereich. Aber es funktioniert nicht mit dem Elementor-Admin-Panel, weil Javascript nicht auf der Elementor-Admin-Seite geladen wird. Wie kann ich Javascript für Elementor laden?
Ich ziehe es vor, keine zusätzlichen Plugins zu verwenden
– Regenmann
14. Dezember 2016 um 7:38 Uhr
@RainMan Obwohl ich die Notwendigkeit verstehe, zusätzliche Plugins zu vermeiden, ist Advanced Custom Fields ein sehr gut gemachtes, aktiv gepflegtes und im Allgemeinen großartiges Plugin. Wenn Sie benutzerdefinierte Felder schreiben möchten, ist dies der richtige Weg. Es wird Tonnen und Tonnen von Zeit beim Erstellen neuer Felder sparen, was im Allgemeinen mühsam ist, es selbst zu tun, und für meine Zwecke für jedes WordPress-Projekt, das ich mache, absolut notwendig ist. Ich weigere mich grundsätzlich, WordPress ohne ACF zu machen. Die Entwicklerlizenz für die Pro-Version ist eine einmalige Gebühr. Sie würden sich selbst ins Knie schießen, wenn Sie dieses Plugin meiden.
Das Hauptproblem, auf das ich persönlich gestoßen bin, war, dass ich es nicht verwenden konnte $this->get_field_name( '{{field}}' ) beim dynamischen Erstellen von Zeilen mit js. Hier meine Lösung des Problems:
function getFieldName(field){
var pattern = '<?=$this->get_field_name( "{{field}}" )?>';
return pattern.replace('{{field}}', field);
}
Ich weiß, das war nicht deine Frage, aber vielleicht hilft es trotzdem jemandem.
13872400cookie-checkDynamische Eingabefelder in WordPress-Widgetsyes
Zunächst einmal fügen Sie jQuery (und nicht richtig) hinzu, das normalerweise in WordPress nicht erforderlich ist und Konfliktkopfschmerzen verursachen kann
– Tim Hallmann
13. Dezember 2016 um 22:54 Uhr
@TimHallman ja, das ist nur zum Testen, das Javascript hat nicht funktioniert, also habe ich es getestet, indem ich eine jquery lib hinzugefügt habe.
– Regenmann
13. Dezember 2016 um 23:13 Uhr
Hallo @RainMan, du brauchst dieses Widget, um im Frontend sichtbar zu sein, richtig? und diese Felder sollten Daten von Benutzern sammeln und für Administratorbenutzer zugänglich sein, richtig?
– Kresimir Pendic
16. Dezember 2016 um 12:18 Uhr
@oserk ja das ist richtig
– Regenmann
16. Dezember 2016 um 12:21 Uhr