从自定义附件字段向标题快捷方式代码添加属性

时间：2017-06-06 作者：Runnick

我想将类添加到标题快捷码，从自定义附件字段中提取。我通过以下方式添加字段：

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]

2 个回复

最合适的回答,由SO网友:Dave Romsey 整理而成

这是一个利用shortcode_atts_{shortcode} 过滤器，其中caption 是本例中的短代码。

这是通过从$out[\'id\'] 然后通过get_post_meta( $attachment_id, \'img_class_field\', true ).

使用这种方法，无需在编辑器中修改字幕短代码的输出。自定义类的添加是在后台处理的。如果用户手动将class属性添加到标题快捷码中，该方法仍然有效。

/**
 * 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]

Example output 1: (theme supports 标题为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>

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

SO网友:socki03

我的想法是在短代码本身中实际使用自定义字段调用，然后添加一个过滤器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\\u field”的变量字段来传递自定义字段名。

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

该函数检查custom_field shortcode属性是否为空，并检查是否可以根据传递的ID检索任何post meta。如果两者都为真，则将其添加到$out[\'class\'] 是否有空格取决于$out[\'class\'] 为空。

我可能需要更新这个答案，因为我是从这里开始写的，我将在现场环境中尝试。

结束

小码农CODE

从自定义附件字段向标题快捷方式代码添加属性

用法

相关推荐

Issue uploading images