WEB制作者向けWordPressテーマ「Arkhe」にアクションフックでスライダーを設置

<?php
/**
 * Arkhe用子テーマ用 function.php
 */
defined( 'ABSPATH' ) || exit;


/**
 * 子テーマのパス, URI
 */
define( 'ARKHE_CHILD_PATH', get_stylesheet_directory() );
define( 'ARKHE_CHILD_URI', get_stylesheet_directory_uri() );


/**
 * style.css 読み込み時にswiper関連ファイルを読み込む
 */
add_action( 'wp_enqueue_scripts', function() {
	if ( is_front_page() ) :
        wp_enqueue_style( 'swiper-style', get_stylesheet_directory_uri() . '/css/swiper.min.css' );
        wp_enqueue_script( 'jscript-swiper', get_stylesheet_directory_uri() . '/js/swiper.min.js', array(), '', true );
        wp_enqueue_script( 'jscript-child', get_stylesheet_directory_uri() . '/js/functions.js', array(), '', true );
    endif;
	// 開発時にブラウザキャッシュされないように、最終変更日時をクエリとして付与
	$time_stamp = date( 'Ymdgis', filemtime( ARKHE_CHILD_PATH . '/style.css' ) );
	wp_enqueue_style( 'arkhe-child-style', ARKHE_CHILD_URI . '/style.css', [], $time_stamp );
} );


/**
 * スライダーのHTMLを「arkhe_start_content」にフック
 */
add_action( 'arkhe_start_content', function() {
	
	if(is_front_page()) {
	?>
	
	<div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide" style="background-image:url('https://demo.slashd.com/demo01/wp-content/uploads/2022/12/img01.jpg')">
                <div class="home-header-overlay">
                    <div class="home-header-content">
                        <h2 class="home-header-title">
                            WEBマーケティングへ
                            <br/>
                            最初の一歩を踏み出す
                        </h2>
                        <div class="home-header-text">
                            シンプルで機能的。事業に併せたカスタマイズが可能。
                            <br class="smanon"/>
                            事業紹介、SNSとの連携など、CMSで実現。
                        </div>
                        <div class="home-header-button">
                            <a href="https://demo.slashd.com/demo01/inquiry/" class="home-header-button-main">お問い合わせ</a>
                        </div>
                    </div>
                    <!-- .home-header-content -->
                </div>
                <!-- .home-header-overlay -->
            </div>
            <!-- .swiper-slide -->
			<div class="swiper-slide" style="background-image:url('https://demo.slashd.com/demo01/wp-content/uploads/2022/12/img02-3.jpg')">
                <div class="home-header-overlay">
                    <div class="home-header-content">
                        <h2 class="home-header-title">
                            あらゆるビジネスの
                        <br/>
                            情報発信を促進する
                        </h2>
                        <div class="home-header-text">
                            情報発信には即時性が必要です。
                            <br class="smanon"/>
                            簡単に公開できるニュースとブログでを使いましょう。
                        </div>
                        <div class="home-header-button">
                            <a href="https://demo.slashd.com/demo01/inquiry/" class="home-header-button-main">お問い合わせ</a>
                        </div>
                    </div>
                    <!-- .home-header-content -->
                </div>
                <!-- .home-header-overlay -->
            </div>
            <!-- .swiper-slide -->
			<div class="swiper-slide" style="background-image:url('https://demo.slashd.com/demo01/wp-content/uploads/2022/12/img03-1.jpg')">
				<div class="home-header-overlay">
                    <div class="home-header-content">
                        <h2 class="home-header-title">
                            多種多様なサイトを
							<br/>
                            低コストで実現する
                        </h2>
                        <div class="home-header-text">
                            デザインがシンプルで、どんなサイトにもマッチ。
                            <br class="smanon"/>
                            デザインのカスタマイズも可能なブロックエディタ対応。
                        </div>
						<div class="home-header-button">
                            <a href="https://demo.slashd.com/demo01/inquiry/" class="home-header-button-main">お問い合わせ</a>
                        </div>
                    </div>
                    <!-- .home-header-content -->
                </div>
                <!-- .home-header-overlay -->
            </div>
            <!-- .swiper-slide -->
		</div>
        <!-- .swiper-wrapper -->
        <div class="swiper-pagination"></div>
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>
    </div>	
	
	<?php
	}	
});

.l-footer .-widget1 {
	width: 67% !important;
}
.l-footer .-widget2 {
	width: 33% !important;
}
.l-footer__widgets .w-footer {
    flex-basis: auto;
}