Hinzufügen einer benutzerdefinierten Eingabe für Datenattribute in Insert Media Modal

Ich versuche, dem Modal "Medien einfügen" eine Texteingabe hinzuzufügen, in der Hoffnung data-, dem übergeordneten Anker der Bilder ein HTML5- Attribut hinzufügen zu können .

<a class="fancybox" href="..." data-fancybox-group=" "> <- Dieser Teil
<img class="wp-image-871" src="..." alt="..." width="245" height="333" />
</a>

Bisher konnte ich den Eingang zum Modal hinzufügen:

Verwenden Sie den folgenden Code in meiner Datei functions.php:

function add_fancybox_input( $form_fields, $post ) {
$form_fields['fancyboxGroup'] = array(
'label' => 'fancybox group',
'input' => 'text',
'value' => 'testing',
'helps' => 'use this to group images in fancybox',
);
return $form_fields;
}

add_filter( 'attachment_fields_to_edit', 'add_fancybox_input', 10, 2 );

Und ich habe das data-fancybox-group=""dem Anker hinzugefügt mit:

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" data-fancybox-group="" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

Hier stecke ich fest ... Ich habe einen Ort, an dem ich die Daten eingeben kann, und ich habe einen Ort, an dem die Daten gespeichert werden können, aber ich bin mir nicht sicher, wie ich die Daten von der Eingabe in die Daten übertragen kann -fancybox-group Attribut.

Ich habe mir die Quelle angesehen, aber leider habe ich keine gute Möglichkeit gesehen, die Informationen weiterzugeben, ohne sie zu speichern. Was scheiße ist - große Zeit - weil dies wirklich nichts ist, was gerettet werden muss.

Eine Problemumgehung besteht darin, PHP-Sitzungen zu aktivieren, indem Sie Folgendes an den Anfang Ihres Dokuments setzen functions.php:

    if (!session_id()) {
        session_start();
    }

Jetzt können Sie $_SESSIONVariablen wie folgt verwenden:

    $_SESSION[ 'your-key' ] = 'your-value';

Erstellen Sie Ihr Formularfeld folgendermaßen:

    function wpse_154330_attachment_fields_to_edit( $form_fields, $post ) {
        $current_screen = get_current_screen();
        // we are not saving, so no need to show the field on the attachment page
        if ( $current_screen->id == 'attachment' ) {
            return $form_fields;
        }
        $form_fields['fancyboxGroup'] = array(
            'label' => 'fancybox group',
            'input' => 'text',
            'value' => '', // leave the value empty
            'helps' => 'use this to group images in fancybox',
        );
        return $form_fields;
    }
    add_filter(
        'attachment_fields_to_edit',
        'wpse_154330_attachment_fields_to_edit',
        10,
        2
    );

Verwenden Sie die Sitzungsvariable wie folgt:

    function wpse154330_save_attachment_field( $post, $attachment ) {
        // we're only setting up the variable, not changing anything else
        if ( isset( $attachment[ 'fancyboxGroup' ] ) {
            $_SESSION[ 'fancyboxGroup' ] = $attachment[ 'fancyboxGroup' ];
        }
        return $post;
    }
    add_filter(
        'attachment_fields_to_save',
        'wpse154330_save_attachment_field',
        10,
        2
    );

Ändern Sie die Ausgabe entsprechend:

    function wpse154330_image_send_to_editor(
        $html,
        $id,
        $caption,
        $title,
        $align,
        $url,
        $size,
        $alt = ''
    ) {
        // no need to modify the output, if no fancybox group is given
        if (
            empty( $_SESSION[ 'fancyboxGroup' ] )
            || ! isset( $_SESSION[ 'fancyboxGroup' ] )
        ) {
            return $html;
        }
        $classes = 'fancybox';
        if ( preg_match( '/<a.*? class=".*?">/', $html ) ) {
            $html = preg_replace(
                '/(<a.*? class=".*?)(".*?>)/',
                '$1 ' . $classes . '$2',
                $html
            );
        } else {
            $html = preg_replace(
                '/(<a.*?)>/',
                '$1 class="'
                    . $classes
                    . '" data-fancybox-group="'
                    . $_SESSION[ 'fancyboxGroup' ]
                    . '" >',
                $html
            );
        }
        unset( $_SESSION[ 'fancyboxGroup' ] );
        return $html;
    }
    add_filter(
        'image_send_to_editor',
        'wpse154330_image_send_to_editor',
        10,
        8
    );

Das ist alles. Sollte ziemlich selbsterklärend sein, sonst frag einfach.

Sie sollten in der Lage sein, das Feld mit zu ziehen get_post_meta.

function give_linked_images_class($html, $id, $caption, $title, $align, $url, $size, $alt = '' ){
  $classes = 'fancybox'; // separated by spaces, e.g. 'img image-link'

  // check if there are already classes assigned to the anchor
  if ( preg_match('/<a.*? class=".*?">/', $html) ) {
    $html = preg_replace('/(<a.*? class=".*?)(".*?>)/', '$1 ' . $classes . '$2', $html);
  } else {
    $html = preg_replace('/(<a.*?)>/', '$1 class="' . $classes . '" data-fancybox-group="'.get_post_meta($id, 'fancyboxGroup', true).'" >', $html);
  }
  return $html;
}
add_filter('image_send_to_editor','give_linked_images_class',10,8);

Außerdem müssen Sie sich in den attachment_fields_to_saveFilter einbinden, falls Sie dies noch nicht getan haben, um das hinzugefügte Feld zu speichern.

function wpse154330_save_attachment_field($post, $attachment) {
    if( isset($attachment['fancyboxGroup']) ){
            update_post_meta($post['ID'], 'fancyboxGroup', $attachment['fancyboxGroup']);
        }

    return $post;
}

add_filter( 'attachment_fields_to_save','wpse154330_save_attachment_field', 10, 2);

Sie sollten auch Ihre add_fancybox_inputFunktion aktualisieren . Ändern Sie den Wert, um das Fancybox-Feld abzurufen.

function add_fancybox_input( $form_fields, $post ) {
$form_fields['fancyboxGroup'] = array(
'label' => 'fancybox group',
'input' => 'text',
'value' => get_post_meta($post->ID, 'fancyboxGroup', true),
'helps' => 'use this to group images in fancybox',
);
return $form_fields;
}
add_filter( 'attachment_fields_to_edit', 'add_fancybox_input', 10, 2 );

Ich bin mir nicht sicher, ob dies das Beste für Sie ist, aber ich denke, Sie könnten es versuchen.

Holen Sie sich die Daten aus dem Eingabefeld und platzieren Sie sie im Formular auf einer versteckten Eingabe oder etwas anderem. Führen Sie das Datenattribut aus, wenn das Fenster der Medienauswahl geschlossen wird

$inputValue = $('.some_class').val();
$('.fancybox').data('fancybox-group', $inputValue);

Ich weiß, das klingt verrückt, aber es könnte für Sie sehr einfach sein und den Trick machen.