Q&A

Stinger plus2で、ヘッダー画像を下層ページにも表示させる方法…Q&A002/043

投稿日:

Stinger plus2で、ヘッダー画像を下層ページにも表示させる

  1. プラグイン「One-Click Child Theme」がインストールされていなかったら、インストール⇒有効化する。
  2. 「左サイドメニュー」⇒「外観」⇒「Child Thema」で、子テーマに親テーマの該当phpファイル「st-header-image.php」をコピーさせる。
  3. 「外観」⇒「テーマの編集」⇒(編集中になっているテーマが子テーマだと確認してから)⇒「st-header-image.php」を選択。
  4. コードが記述してあるどの部分でもいいので、クリックして、キーボード左下の「Ctrl」キーを押しながら「A」を押して、全文を選択⇒キーボードの「Delete」キーを押して全文削除。
  5. 下のコードを下のコードをマウスドラッグで全文選択して、全文削除して空白となった4のスペースに、貼り付け、「ファイルを更新」ボタンを押す

ちなみにこのサイトも無料バージョンのStinger Plus2ですので、そのままですとヘッダー画像の表示はトップページのみで下層ページには表示されないのですが、子テーマで表示するように編集して表示するようにしてあります。

ヘッダー画像が見えないのは、背景画像を見せたくて、透過(透けて見えない)画像を、ヘッダー画像として登録してあります。
ご希望でしたら、ヘッダー画像の上でマウス右クリック、名前をつけて保存で、お持ち帰り下さい。

もちろん、ヘッダー画像はトップページのみで下層ページでの表示はいらない方は、この面倒な(苦笑)作業をする必要はありません

コピーするコード

<?php

// 直接アクセスを禁止
if ( !defined( 'ABSPATH' ) ) {
     exit;
}?>

<?php
$show_on_all_pages = ( isset( $GLOBALS['stdata18'] ) && $GLOBALS['stdata18'] === 'yes' );
$show_as_slides    = ( isset( $GLOBALS['stdata30'] ) && $GLOBALS['stdata30'] === 'yes' );
//$could_be_shown    = ( is_home() or is_front_page() || ( !is_home() && $show_on_all_pages ) );
$could_be_shown    = ( is_home() || is_single()|| is_page() || is_archive() ); //if文変更

if ( trim($GLOBALS['stdata72']) !== '') {
	$header_img_link = esc_url($GLOBALS['stdata72']);
}else{
	$header_img_link = '';
}

if ( !$could_be_shown || ( !has_header_image() && !is_active_sidebar( 14 ) ) ) { //全て非表示の場合かヘッダーが無い且つウィジェットが無い場合
?>
<div id="gazou-wide">
	<?php get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー ?>
</div>
<?php
	return;
}

$header_images = get_uploaded_header_images();

shuffle($header_images);

$speed_ms    = (int) $GLOBALS['stdata32'];
$is_fade     = ($GLOBALS['stdata31'] === 'fade');
$is_rtl_lang = ($GLOBALS['stdata31'] === 'ltr');
$dir         = $is_rtl_lang ? ' dir="rtl"' : '';

$options = array(
	'slidesToShow'   => 1,
	'slidesToScroll' => 1,
	'autoplay'       => true,
	'autoplaySpeed'  => $speed_ms,
	'fade'           => $is_fade,
	'rtl'            => $is_rtl_lang,
);
?>

<?php if ( $show_as_slides ) : // スライドショーがONの場合 ?>
	<div id="gazou-wide">
		<?php if ( isset($GLOBALS['stdata35']) && $GLOBALS['stdata35'] === 'on' ) { //メニューを上に設定している場合
			get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
		} ?>

		<?php if ( trim($GLOBALS['stdata76']) === '' ) { //ヘッダー非表示に値がなければ ?>
			<?php if( st_is_mobile() && trim($GLOBALS['stdata71']) !== '' ) { //スマホで且つ非表示にチェックがある場合 ?>
			<?php }else{ ?>
				<?php if ( is_active_sidebar( 14 ) ) : //ウィジェットが設定されている場合?>
					<div id="st-headerbox"><div id="st-header">
						<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 14 ) ) : else : //トップ下部のウィジェット ?>
						<?php endif; ?>
					</div></div>
				<?php else: ?>
					<div id="st-headerbox"><div id="st-header">
						<?php if($header_img_link){ //リンクが設定されている場合 ?>
							<div id="header-slides"<?php echo $dir; ?> data-slick='<?php echo json_encode( $options, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ); ?>'>
								<?php foreach ($header_images as $header) : ?>
									<div class="header-slides-slide">
										<a href="<?php echo $header_img_link; ?>">
										<img src="<?php echo esc_url($header['url']); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
										</a>
									</div>
								<?php endforeach; ?>
							</div>
						<?php }else{ //リンクが設定されていない場合 ?>
							<div id="header-slides"<?php echo $dir; ?> data-slick='<?php echo json_encode( $options, JSON_HEX_TAG | JSON_HEX_APOS | JSON_HEX_QUOT | JSON_HEX_AMP ); ?>'>
								<?php foreach ($header_images as $header) : ?>
									<div class="header-slides-slide">
										<img src="<?php echo esc_url($header['url']); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" >
									</div>
								<?php endforeach; ?>
							</div>
						<?php } ?>
					</div></div>
				<?php endif; ?>
			<?php } ?>
		<?php } ?>

		<?php if ( trim($GLOBALS['stdata35']) === '' ) { //メニューを下に設定している場合
			get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
		} ?>
	</div>

<?php else : // スライド設定していないヘッダー画像 ?>

	<div id="gazou-wide">
		<?php if ( isset($GLOBALS['stdata35']) && $GLOBALS['stdata35'] === 'on' ) { //メニューを上に設定している場合
			get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
		} ?>

		<?php if ( trim($GLOBALS['stdata76']) === '' ) { //ヘッダー非表示に値がなければ ?>
			<?php if( st_is_mobile() && trim($GLOBALS['stdata71']) !== '' ) { //スマホで且つ非表示にチェックがある場合 ?>
			<?php }else{ ?>
				
				<?php if ( is_active_sidebar( 14 ) ) : //ウィジェットが設定されている場合?>
					<div id="st-headerbox"><div id="st-header">
						<?php if ( function_exists( 'dynamic_sidebar' ) && dynamic_sidebar( 14 ) ) : else : //トップ下部のウィジェット ?>
						<?php endif; ?>
					</div></div>
				<?php else: ?>
					<?php if($header_img_link){ //リンクが設定されている場合 ?>
						<div id="st-headerbox">
							<a href="<?php echo $header_img_link; ?>">
								<div id="st-header"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" ></div>
							</a>
						</div>
					<?php }else{ //リンクが設定されていない場合 ?>
						<div id="st-headerbox">
							<div id="st-header"><img src="<?php header_image(); ?>" alt="*" width="<?php echo HEADER_IMAGE_WIDTH; ?>" height="<?php echo HEADER_IMAGE_HEIGHT; ?>" ></div>
						</div>
					<?php } ?>
				<?php endif; ?>


			<?php } ?>
		<?php } ?>

		<?php if ( trim($GLOBALS['stdata35']) === '' ) { //メニューを下に設定している場合
			get_template_part( 'st-header-menu' ); //カスタムヘッダーメニュー 
		} ?>
	</div>
<?php endif; ?>
<!-- /gazou -->

質問などありましたら、下のコメント欄にお書きください。

目次へ

【動画で説明、おばあちゃんのホームページ作成手順・WordPress指南書】目次はここをクリック♪

※疑問点、ご質問等ございましたら、下のコメント欄にお書きください、
ありがとうございます。m(__)m

※用語・解説コーナー※

※用語・解説コーナー※

記事の文章中または動画内で分からない、ご存じなかった言葉、単語などありましたら、是非お聞かせ下さい。
コメント欄に書いてくださると私も勉強になりますので助かります。
どうぞよろしくお願い致します。m(__)m
あなたとのご縁に感謝です。(^^)/

  1. デフォルト… 最初から、既存の
  2. ウィジェット… 便利なツールの総称です。そのまま名称として覚えてくださると助かります。
  3. カスタマイズ… 好みに合わせて何かを設定、変更・修正、整備などをすることです。ここの場合は、サイトのデザインや文字色背景などを設定・変更することです。

-Q&A

Copyright© 動画で説明、おばあちゃんのホームページ作成手順・WordPress指南書 , 2019 All Rights Reserved Powered by STINGER.