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

2020年11月16日Wordpress,開発

おはようございます。

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

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

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

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

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

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

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

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

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

1. 子テーマの適用
2. 投稿、固定ページにスライドショーを表示する
3. カスタム投稿など自作している場合
4. まとめ

子テーマの適用

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

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

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

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

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

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

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

singular.php

<?php get_header(); ?>

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


---
省略

<?phpget_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(); ?>

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

<?phpget_header();?>

<?php

get_template_part('template-parts/slide-bs4');

<h1 class="page-header_pageTitle">セラピスト一覧</h1>

</div>

document.title=document.title.replace('キャスト管理','セラピスト一覧');

</script>

</div>

<aitemprop="item"href="https://sample.oilnoko.com/"><span itemprop="name"><iclass="fa fa-home"></i>HOME</span></a>

</li>

<li>

<span>セラピスト一覧</span></li>

</ol>

</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');

<?phpdo_action('lightning_siteContent_prepend');?>

<?phpdo_action('lightning_siteContent_container_prepend');?>

<?phpdo_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>';

}

echowp_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>';

}

echowp_kses_post(apply_filters('lightning_mainSection_archiveDescription',$archiveDescription_html));

$postType=lightning_get_post_type();

do_action('lightning_loop_before');

<?phpif(have_posts()):?>

<?phpwhile(have_posts()):the_post();?>

<?phpget_template_part('content',('castlist'));?>

<?phpendwhile;?>

</div>

<?php

the_posts_pagination(

array(

'mid_size'=>1,

'prev_text'=>'«',

'next_text'=>'»',

'type'=>'list',

'before_page_number'=>'<span class="meta-nav screen-reader-text">'.__('Page','lightning').' </span>',

)

);

<?phpelse:// hove_posts() ?>

<?phpendif;// have_post() ?>

</div>

<?phpdo_action('lightning_loop_after');?>

<?phpdo_action('lightning_mainSection_append');?>

</div>

<?phpif(lightning_is_subsection_display()){?>

<?phpget_sidebar(get_post_type());?>

</div>

<?php}?>

<?phpdo_action('lightning_additional_section');?>

</div>

<?phpdo_action('lightning_siteContent_container_apepend');?>

</div>

<?phpdo_action('lightning_siteContent_apepend');?>

</div>

<?phpget_footer();?>

まとめ

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

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

何かのお役に立てれば。

ではでは。

2020年11月16日Wordpress,開発PHP,WordPressテーマ

Posted by doradora