it-swarm.com.de

Hinzufügen eines Attributs zum Untertitel-Shortcode aus dem Feld für benutzerdefinierte Anhänge

Ich möchte eine Klasse zum Untertitel-Shortcode hinzufügen, der aus dem Feld für benutzerdefinierte Anhänge gezogen wurde. Ich füge das Feld hinzu über:

function add_img_class( $form_fields, $post ) {
    $form_fields['img_class_field'] = array(
        'label' => __( 'Image class', 'text-domain' ),
        'input' => 'text',
        'value' => get_post_meta( $post->ID, 'img_class_field', true )
    );
    return $form_fields;
}

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


function save_img_class( $post, $attachment ) {
    if( isset( $attachment['img_class_field'] ) )
        update_post_meta( $post['ID'], 'img_class_field', $attachment['img_class_field']);
    return $post;
}

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

Wie füge ich jetzt dynamisch das Attribut "class" mit dem Feldwert zum Untertitel-Shortcode hinzu?

[caption ... class="img_class_field"]<img src...>[/caption]
1
Runnick

Hier ist eine Lösung, die den shortcode_atts_{shortcode}-Filter nutzt, wobei caption in diesem Fall der Shortcode ist.

Dies funktioniert, indem Sie die Anhangs-ID aus $out['id'] ziehen und dann den Wert der Klasse über get_post_meta( $attachment_id, 'img_class_field', true ) abrufen.

Bei diesem Ansatz ist es nicht erforderlich, die Ausgabe des Untertitel-Shortcodes im Editor zu ändern. Das Hinzufügen der benutzerdefinierten Klasse erfolgt hinter den Kulissen. Es funktioniert auch weiterhin, wenn ein Benutzer dem Untertitel-Shortcode manuell ein Klassenattribut hinzugefügt hat.

/**
 * Adds class to caption shortcode output via img_class_field attachment meta.
 *
 * @param array  $out       The output array of shortcode attributes.
 * @param array  $pairs     The supported attributes and their defaults.
 * @param array  $atts      The user defined shortcode attributes.
 * @param string $shortcode The shortcode name.
 */
add_filter( 'shortcode_atts_caption', 'wpse_shortcode_atts_caption', 10, 4 );
function wpse_shortcode_atts_caption( $out, $pairs, $atts, $shortcode ) {
    // Get the attachment id. It should be available via $out['id'], but
    // it will be in the format 'attachment_xxxx' where xxxx is the id.
    // We'll try to get the id portion and we'll bail if this doesn't work.
    $attachment_id = isset( $out['id'] ) && ( $out['id'] ) ? $out['id'] : false;
    $attachment_id = (int) preg_replace( '/^attachment_/', '', $attachment_id );
    if ( ! $attachment_id ) {
        return $out;
    }

    // Get the custom image class and add it to the existing classes
    $extra_image_class = get_post_meta( $attachment_id, 'img_class_field', true );
    if ( $extra_image_class ) {
        $spacer = isset( $out['class'] ) && ( $out['class'] ) ? ' ' : '';
        $out['class'] .= esc_attr( $spacer . $extra_image_class );
    }

    return $out;
}

Verwendungszweck

Benutzerdefinierte Klassen zu Anhang-Metadaten hinzugefügt (ich habe 2 aus gutem Grund verwendet):

some-class another-class

Beispiel für einen nicht geänderten Untertitel-Shortcode, der über Media Modal hinzugefügt wurde:

[caption id="attachment_2397" align="alignnone" width="480"]<a href="http://example.com/wp-content/uploads/2017/05/image.jpg"><img src="http://example.com/wp-content/uploads/2017/05/image.jpg" alt="" width="480" height="360" class="size-full wp-image-2397" /></a> This is the caption![/caption]

Beispiel Ausgabe 1:( Theme unterstützt HTML5 für Untertitel):

<figure id="attachment_2397" style="width: 480px" class="wp-caption alignnone some-class another-class">
    <a href="http://example.com/">
        <img src="http://example.com/wp-content/uploads/2017/05/image.jpg" alt="" width="480" height="360" class="size-full wp-image-2397" srcset="http://example.com/wp-content/uploads/2017/05/image.jpg 480w, http://example.com/wp-content/uploads/2017/05/image-300x225.jpg 300w" sizes="(max-width: 480px) 100vw, 480px">
    </a>
    <figcaption class="wp-caption-text">This is the caption!</figcaption>
</figure>

Beispielausgabe 2:(Thema unterstützt kein HTML5 für Untertitel):

<div id="attachment_2397" style="width: 490px" class="wp-caption alignnone some-class another-class">
    <a href="http://example.com/wp-content/uploads/2017/05/image.jpg">
        <img src="http://example.com/wp-content/uploads/2017/05/image.jpg" alt="" width="480" height="360" class="size-full wp-image-2397" srcset="http://example.com/wp-content/uploads/2017/05/image.jpg 480w, http://example.com/wp-content/uploads/2017/05/image-300x225.jpg 300w" sizes="(max-width: 480px) 100vw, 480px">
    </a>
    <p class="wp-caption-text">This is the caption!</p>
</div>
1
Dave Romsey

Meine Idee dahinter wäre, tatsächlich einen benutzerdefinierten Feldaufruf innerhalb des Shortcodes selbst zu verwenden und dann einen Filter shortcode_atts _ {$ shortcode} hinzuzufügen, um das benutzerdefinierte Feld zu verarbeiten und es der Klasse hinzuzufügen, um es zurückzugeben.

{shortcode} wäre in diesem Fall caption, da wir genau darauf aufbauen.

add_filter( 'shortcode_atts_caption', 'caption_custom_field_class' );

function caption_custom_field_class( $out, $pairs, $atts, $shortcode ) {
    if ( !empty( $atts['custom_field'] ) && get_post_meta( sanitize_text( $atts['custom_field'] ), $atts['id'], true ) ) {
             $out['class'] .= ( !empty( $out['class'] ) ? ' ' : '' ) . get_post_meta( sanitize_text( $atts['custom_field'] ), $atts['id'], true );
        }
    }
    return $out;
}

Wir verwenden also ein anderes variables Feld namens 'custom_field', um unseren benutzerdefinierten Feldnamen zu übergeben.

[caption custom_field="mycustomfieldname"]<img src=".... />[/caption]

Die Funktion prüft, ob das Attribut custom_field shortcode leer ist oder nicht und ob Sie basierend auf der übergebenen ID Post-Meta abrufen können. Wenn beides zutrifft, wird es dem $out['class'] mit einem Leerzeichen hinzugefügt, je nachdem, ob der $out['class'] leer ist oder nicht.

Möglicherweise muss ich diese Antwort aktualisieren, da ich angefangen habe, hier zu schreiben, und ich werde es in einer Live-Umgebung versuchen.

1
socki03