成功设置特色图像后运行javascrip

时间:2015-06-20 作者:INT

我正在考虑跑步Color Thief 无论何时设置或更新特征图像,都会对其进行更改。我似乎找不到任何方法来牵扯到这件事上。

目前我正在做我觉得有点不对劲的事

jQuery(document).on(\'click\', \'#__wp-uploader-id-2 .media-toolbar-primary\', function(event){

  setTimeout(function() {

    var image = new Image();
    image.src = \'image.jpg\';

    var colorThief = new ColorThief();
    var dominantColor = colorThief.getColor(image);

    console.log(dominantColor);
  }, 100);

});
一定有更好的办法?

我一直在考虑制作一个特色图像元框的副本,但感觉很麻烦。

function pom_image_box() {
  remove_meta_box(\'postimagediv\', \'artist\', \'side\');
  add_meta_box(\'postimagediv\', __(\'POM Image\'), __NAMESPACE__ .\'\\\\pom_post_thumbnail_meta_box\', \'artist\', \'normal\', \'high\');
}
add_action(\'do_meta_boxes\', __NAMESPACE__ .\'\\\\pom_image_box\');


function pom_post_thumbnail_meta_box( $post ) {
  $thumbnail_id = get_post_meta( $post->ID, \'_thumbnail_id\', true );
  echo _pom_wp_post_thumbnail_html( $thumbnail_id, $post->ID );
}



function _pom_wp_post_thumbnail_html( $thumbnail_id = null, $post = null ) {
  global $content_width, $_wp_additional_image_sizes;

  $post = get_post( $post );

  $upload_iframe_src = esc_url( get_upload_iframe_src(\'image\', $post->ID ) );
  $set_thumbnail_link = \'<p class="hide-if-no-js"><a title="\' . esc_attr__( \'Set featured image\' ) . \'" href="%s" id="set-post-thumbnail" class="thickbox">%s</a></p>\';
  $content = sprintf( $set_thumbnail_link, $upload_iframe_src, esc_html__( \'Set featured image\' ) );

  if ( $thumbnail_id && get_post( $thumbnail_id ) ) {
    $old_content_width = $content_width;
    $content_width = 266;
    if ( !isset( $_wp_additional_image_sizes[\'post-thumbnail\'] ) )
      $thumbnail_html = wp_get_attachment_image( $thumbnail_id, array( $content_width, $content_width ) );
    else
      $thumbnail_html = wp_get_attachment_image( $thumbnail_id, \'post-thumbnail\' );
    if ( !empty( $thumbnail_html ) ) {
      $ajax_nonce = wp_create_nonce( \'set_post_thumbnail-\' . $post->ID );
      $content = sprintf( $set_thumbnail_link, $upload_iframe_src, $thumbnail_html );
      $content .= \'<p class="hide-if-no-js"><a href="#" id="remove-post-thumbnail" onclick="WPRemoveThumbnail(\\\'\' . $ajax_nonce . \'\\\');return false;">\' . esc_html__( \'Remove featured image\' ) . \'</a></p>\';
    }
    $content_width = $old_content_width;
  }

  /**
   * Filter the admin post thumbnail HTML markup to return.
   *
   * @since 2.9.0
   *
   * @param string $content Admin post thumbnail HTML markup.
   * @param int    $post_id Post ID.
   */
  return apply_filters( \'admin_post_thumbnail_html\', $content, $post->ID );
}
不知道我能从这里走到哪里,我还没有找到确切的位置wpsetAsThumbnail 被调用。即使我这样做了。我尝试修改了设置后期缩略图。js,但我的console.log\'s没有出现。

我也试过了https://wordpress.stackexchange.com/a/74596/2830 (自2012年更改后,更新了代码),但这完全破坏了特色图像功能。

1 个回复
SO网友:bonger

你可以使用.ajaxComplete, 正如@onetrickpony在https://wordpress.stackexchange.com/a/36597/57034, 除非在文档上全局执行,如中所述http://api.jquery.com/ajaxcomplete/, 然后根据操作进行筛选:

add_action( \'admin_print_footer_scripts\', function () {
    ?>
    <script type="text/javascript">
    jQuery(function ($) {
        $(document).ajaxComplete(function (event, xhr, settings) {
            var match;
            if (typeof settings.data === \'string\'
            && /action=set-post-thumbnail/.test(settings.data)
            && xhr.responseJSON && typeof xhr.responseJSON.data === \'string\') {
                match = /<img[^>]+src="([^"]+)"/.exec(xhr.responseJSON.data);
                if (match !== null) {
                    var image = new Image();
                    $(image).load(function () {
                        var colorThief = new ColorThief();
                        var dominantColor = colorThief.getColor(image);

                        console.log(dominantColor);
                    });
                    image.src = match[1];
                }
            }
        });
    });
    </script>
    <?php
} );

结束