web-dev-qa-db-ja.com

カスタム添付ファイルフィールドからキャプションのショートコードに属性を追加

カスタム添付ファイルフィールドから取得した、キャプションのショートコードにクラスを追加したいです。次のようにしてフィールドを追加します。

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 );

どのように動的に "class"属性をフィールド値と共にキャプションショートコードに追加するのですか？

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

これがshortcode_atts_{shortcode}フィルタを活用する解決策です、ここでcaptionはこの場合のショートコードです。

これは、$out['id']から添付ファイルIDを取得し、get_post_meta( $attachment_id, 'img_class_field', true )を介してクラスの値を取得することで機能します。

この方法では、エディタでキャプションショートコードの出力を変更する必要はありません。カスタムクラスの追加は舞台裏で処理されます。ユーザーが字幕のショートコードにクラス属性を手動で追加した場合も機能します。

/**
 * 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;
}

使用法

添付ファイルのメタデータにカスタムクラスが追加されました（私は2を使っていました）。

some-class another-class

メディアモーダルを介して追加された未修正キャプションショートコードの例：

[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]

出力例1：（ テーマはキャプション用の HTML5をサポートします）。

<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>

出力例2：（テーマはキャプションにHTML5をサポートしていません）：

<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

この背後にある私の考えは、ショートコード自体の中で実際にカスタムフィールド呼び出しを使用し、次にカスタムフィールドを処理するためのフィルタ shortcode_atts _ {$ shortcode} を追加することですそれをクラスに追加して返します。

この場合の{shortcode}はcaptionになります。

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;
}

それで、私たちがしていることは私たちのカスタムフィールド名を渡すために 'custom_field'と呼ばれる別の変数フィールドを利用することです。

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

この関数はcustom_field shortcode属性が空かどうかを調べ、渡されたIDに基づいて投稿メタを取得できるかどうかを調べます。これらの両方が当てはまる場合、$out['class']が空かどうかに応じてスペースを入れて$out['class']に追加します。

私はここで書き始めたのでこの答えを更新する必要があるかもしれません、そして私は実際の環境でそれを試すつもりです。

1
socki03