You can use the get_custom_logo filter to customize the HTML of the custom logo to whatever you want. For instance, you can do something like so:
You can further use the wp_get_attachment_image_attributes filter to get the image src of the logo. The problem is using it. The example code below uses a class to store the image source as a property so it can be used in a different filter.
namespace WordPress\StackExchange;
class logo {
protected $src="";
public function init() {
\add_filter( 'wp_get_attachment_image_attributes', [ $this, 'img_atts' ] , 10, 3 );
\add_filter( 'get_custom_logo', [ $this, 'wpse_custom_logo' ], 10, 2 );
}
public function image_atts( $attr, $attachment, $size ) {
if( 'custom-logo' ]=== $attr[ 'class' ] ) {
$this->src = $attr[ 'src' ];
}
return $attr;
}
public function wpse_custom_logo( $html, $blog_id ) {
return sprintf( '
<div class="logo">
<a id="logo" href="#" data-height="110" data-padding="0">
<img class="logo-main scale-with-grid" src="%1$s" data-retina="%2$s" data-height="209" alt="animals2">
<img class="logo-sticky scale-with-grid" src="%1$s" data-retina="%2$s" data-height="209" alt="animals2">
<img class="logo-mobile scale-with-grid" src="%1$s" data-retina="%2$s" data-height="209" alt="animals2">
<img class="logo-mobile-sticky scale-with-grid" src="%1$s" data-retina="%2$s" data-height="209" alt="animals2">
</a>
</div>',
\esc_url( $this->src ),
\esc_url( get_template_directory_uri() . '/content/animals2/images/retina-animals2.png )'
);
}
}
\add_action( 'init', [ new logo(), 'init' ] );
This would go in your functions.php. Although, since the 4 images are all the same, there’s probably a better way to do this.