ヘッダー画像をリンク付き画像のスライダー仕様にする方法

Welcartは、外観＞カスタマイズ　より、ヘッダー画像を設定できます。
このヘッダー画像は複数登録しておくことができ、これらをランダムで表示させることができます。

でもランダム表示より、スライダーやカルーセル形式のほうが良いのでは？
と思いました。

「スライダーはあまり見られない」という評価もありますが、
少なくとも私や周囲は、それを見て興味あるスライダー画像をクリックすると言うので
それを実装してみたいと思います。

プラグインが一番簡単

さきに断っておくと、プラグインを使うと簡単にできます。
私も最終的には、トップページ以外にも設置する可能性があるなと思いプラグインで導入しました。
私のおすすめは、「XO Slider」という国産プラグイン！コレ、いいです！

ちなみに、『猫でもわかるWordPress』さんで、いくつかに絞って導入してみて、使いやすいものを選びました。
『猫でもわかるWordPress』のスライダー紹介は、よくあるオススメ投稿のように、ありきたりのことを書いているのではなく、
実際にご自身でインストールしてみて使い勝手を書いてくれていて、素晴らしいレビューです！
https://wp-firststep.com/movie_to_slider/

プラグインなしで実装するカスタマイズ

プラグインなしで、カスタマイズする場合は、「商品ページのサブ画像をFlexslider2でスライドショー化」で導入済みのFlexslider2を使います。

もちろん、参考にしたのは、『Welcartカスタマイズブログ』さんです。
https://welcustom.net/custom-header-flexslider/

function.phpに次のように記述。

/*ヘッダースライドショー用*/
function fjarrett_get_attachment_id_by_url( $url ) {
    $parse_url  = explode( parse_url( WP_CONTENT_URL, PHP_URL_PATH ), $url );
    $this_host = str_ireplace( 'www.', '', parse_url( home_url(), PHP_URL_HOST ) );
    $file_host = str_ireplace( 'www.', '', parse_url( $url, PHP_URL_HOST ) );
    if ( ! isset( $parse_url[1] ) || empty( $parse_url[1] ) || ( $this_host != $file_host ) ) {
        return;
    }
    global $wpdb;
    $attachment = $wpdb->get_col( $wpdb->prepare( "SELECT ID FROM {$wpdb->prefix}posts WHERE guid RLIKE %s;", $parse_url[1] ) );
    return $attachment[0];}
/*ヘッダースライドショー用（終了）*/

続いて、header.phpの一番下の方に、次のような箇所があると思います。

	<?php if ( ( is_front_page() || is_home() ) && get_header_image() ) : ?>
		<div class="main-image">
			<img src="<?php header_image(); ?>" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="<?php bloginfo( 'name' ); ?>">
		</div><!-- main-image -->
	
	<?php endif; ?>

ここを次のように変更するか、最初のヘッダー画像設定も残したい場合は、両方とも記述します。

	<?php if ( is_front_page() || is_home() ) : ?>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/flexslider.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/flexslider/2.6.4/jquery.flexslider.min.js"></script>
	<script type="text/javascript">
        $(window).on("load", function () {
            $('.flexslider').flexslider();
        });
    </script>
	<div class="flexslider">
		<ul class="slides">
			<?php $headers = get_uploaded_header_images(); ?>
			<?php foreach ($headers as $key => $value): ?>
				<?php $img_id = fjarrett_get_attachment_id_by_url($value['url']); ?>
				<?php $img_meta = get_post($img_id); ?>
					<li>
						<a href="<?php echo esc_html($img_meta->post_content); ?>">
							<img src="<?php echo $value['url']; ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>">
							<p><?php echo esc_html($img_meta->post_title); ?></p>
							<p><?php echo esc_html($img_meta->post_excerpt); ?></p>
						</a>
					</li>
			<?php endforeach; ?>
		</ul>
	</div>
	<?php endif; ?>

あとは、＞メディア　の中の、「ヘッダー画像」とマークされている画像を開き、
「タイトル」と「キャプション」が文字として出力され、この文字と画像にリンクを貼りたい場合は、「説明」欄にリンク先アドレスを記述します。

これで、全て出力されているはずなので、お好みでCSSで文字の位置を変えたり、装飾したりすればOKです。