【WordPress】Lightningテーマでヘッダーのスライドを他のページにも表示する方法

Wordpress,開発

 

アイキャッチ

おはようございます。

また今日から一週間頑張りましょう。

今日は WordPress の無料テーマ「Lightning」で、

基本機能のスライドショーをトップページ以外にも表示する方法を紹介。

※公式的に紹介されている方法ではなく、自己責任となります。

ちょっと調べてみると、需要はありそうなものの

Lightning Advanced Sliderを利用する方法（今は非推奨）や、

Pro版で利用できる スライダーブロックを使う方法などしかヒットしなくて、

微妙に実現したいことと違うんですよね。

ということでテーマをちょっと弄って対応。

スポンサーリンク

子テーマの適用

WordPressテーマで共通して必要なのが、子テーマを使うことですね。

テーマを直接編集していってしまうと、

バージョンアップした際に変更した内容が元に戻ってしまうので、基本的には子テーマを使って変更をしていきます。

Lightning も 公式から子テーマが提供されているので、ひとまずそれを適用してから作業をしてください。

こちら からダウンロードして説明通りにサーバーにアップします。

投稿、固定ページにスライドショーを表示する

子テーマをサーバーにアップしたら、親テーマのディレクトリから「singular.php」をコピーして、次のように修正します。

singular.php

<?php get_header(); ?>

<!-- スライドショーを呼び出し -->
<?php 
get_template_part( 'template-parts/slide-bs4' );
?>


---
省略

簡単ですね。

ヘッダーを呼び出しているすぐ後に、スライドショーのテンプレートファイルを差し込むだけでOKです。

カスタム投稿など自作している場合

カスタム投稿なども同様で、自分で作成したファイルにもスライドショーのテンプレートファイルを差し込むだけです。

先日 krc-cast-manager で作成したページでやってみると次のようになります。

archive-cast.php

<?php get_header(); ?>

<!-- スライドショーを呼び出し -->
<?php 
get_template_part( 'template-parts/slide-bs4' );
?>

<!-- ヘッダとパンくず無理やり変更 -->
<div class="section page-header">
	<div class="container">
		<div class="row">
			<div class="col-md-12">
				<h1 class="page-header_pageTitle">セラピスト一覧</h1>
			</div>
		</div>
	</div>
	<script>
		document.title= document.title.replace('キャスト管理','セラピスト一覧');
	</script>
</div>
<div class="section breadSection">
	<div class="container">
		<div class="row">
			<ol class="breadcrumb" itemtype="http://schema.org/BreadcrumbList">
				<li id="panHome" itemprop="itemListElement" itemscope="" itemtype="http://schema.org/ListItem">
					<a itemprop="item" href="https://sample.oilnoko.com/"><span itemprop="name"><i class="fa fa-home"></i> HOME</span></a>
				</li>
				<li>
					<span>セラピスト一覧</span></li>
				</ol>
		</div>
	</div>
</div>

<?php
// Dealing with old files.
// Actually, it's ok to only use get_template_part().
/*
 Page Header
/*-------------------------------------------*/
$old_file_name[] = 'module_pageTit.php';
if ( locate_template( $old_file_name, false, false ) ) {
	locate_template( $old_file_name, true, false );
} else {
	//get_template_part( 'template-parts/page-header' );
}

/*
 BreadCrumb
/*-------------------------------------------*/
do_action( 'lightning_breadcrumb_before' );
$old_file_name[] = 'module_panList.php';
if ( locate_template( $old_file_name, false, false ) ) {
	locate_template( $old_file_name, true, false );
} else {
	//get_template_part( 'template-parts/breadcrumb' );
}
do_action( 'lightning_breadcrumb_after' );
?>

<div class="<?php lightning_the_class_name( 'siteContent' ); ?>">
<?php do_action( 'lightning_siteContent_prepend' ); ?>
<div class="container">
<?php do_action( 'lightning_siteContent_container_prepend' ); ?>
<div class="row">
<div class="<?php lightning_the_class_name( 'mainSection' ); ?>" id="main" role="main">
<?php do_action( 'lightning_mainSection_prepend' ); ?>

	<?php
	/*
		Archive title
	/*-------------------------------------------*/
	$archiveTitle_html = '';
	$page_for_posts		= lightning_get_page_for_posts();
	// Use post top page（ Archive title wrap to div ）.
	if ( $page_for_posts['post_top_use'] || get_post_type() !== 'post' ) {
		if ( is_year() || is_month() || is_day() || is_tag() || is_author() || is_tax() || is_category() ) {
			$archiveTitle			= get_the_archive_title();
			$archiveTitle_html = '<header class="archive-header"><h1>' . $archiveTitle . '</h1></header>';
		}
	}
	echo wp_kses_post( apply_filters( 'lightning_mainSection_archiveTitle', $archiveTitle_html ) );

	/*
		Archive description
	/*-------------------------------------------*/
	$archiveDescription_html = '';
	if ( is_category() || is_tax() || is_tag() ) {
		$archiveDescription = term_description();
		$page_number				= get_query_var( 'paged', 0 );
		if ( ! empty( $archiveDescription ) && $page_number == 0 ) {
			$archiveDescription_html = '<div class="archive-meta">' . $archiveDescription . '</div>';
		}
	}
	echo wp_kses_post( apply_filters( 'lightning_mainSection_archiveDescription', $archiveDescription_html ) );

	$postType = lightning_get_post_type();

	do_action( 'lightning_loop_before' );
	?>

<div class="<?php lightning_the_class_name( 'postList' ); ?>">

<?php if ( have_posts() ) : ?>
	<!-- セラピスト一覧 -->
	<div class="cast-wrapper">
		<div class="box-title"></div>
		<div class="box-body">
		<?php while (have_posts()):the_post();?>
			<?php get_template_part('content',('castlist'));?>
		<?php endwhile;?>
		</div>
	</div>

	<?php
	the_posts_pagination(
		array(
			'mid_size'					 => 1,
			'prev_text'					=> '&laquo;',
			'next_text'					=> '&raquo;',
			'type'							 => 'list',
			'before_page_number' => '<span class="meta-nav screen-reader-text">' . __( 'Page', 'lightning' ) . ' </span>',
		)
	);
	?>

	<?php else : // hove_posts() ?>

	<div class="well"><p><?php echo wp_kses_post( apply_filters( 'lightning_no_posts_text', __( 'No posts.', 'lightning' ) ) ); ?></p></div>

<?php endif; // have_post() ?>

</div><!-- [ /.postList ] -->

<?php do_action( 'lightning_loop_after' ); ?>
<?php do_action( 'lightning_mainSection_append' ); ?>
</div><!-- [ /.mainSection ] -->



<?php if ( lightning_is_subsection_display() ){ ?>
	<div class="<?php lightning_the_class_name( 'sideSection' ); ?>">
	<?php get_sidebar( get_post_type() ); ?>
	</div><!-- [ /.subSection ] -->
<?php } ?>

<?php do_action( 'lightning_additional_section' ); ?>

</div><!-- [ /.row ] -->
<?php do_action( 'lightning_siteContent_container_apepend' ); ?>
</div><!-- [ /.container ] -->
<?php do_action( 'lightning_siteContent_apepend' ); ?>
</div><!-- [ /.siteContent ] -->
<?php get_footer(); ?>

まとめ

まだまだ WordPress（PHP）は、分からないことも多いですが色々分かってくると楽しくなってきますね。

今後も少しづつ勉強していきます。

何かのお役に立てれば。

ではでは。

スポンサーリンク


関連するコンテンツ

Wordpress,開発PHP,WordPressテーマ

Posted by doradora