WordPressテーマ「ストーク」のトップページのヘッダー画像のみ表示する方法!アメブロから移行した人向け

こんにちは。YOSHITAKA(@YOSHITA19704216)です。

初心者
アメブロで使っていたヘッダーを使うことはできますか?

よしたか
ヘッダーサイズの自動縮小調整をしない方法はありますよ。

ヘッダー画像のサイズを自動縮小をしてしまうと、テキスト文字と被ってしまうので嫌だ

という方がいらっしゃったので

アメブロからのヘッダー画像をそのまま使うように設定する方法をお伝えします。

この記事を読むことで
  • 「ストーク」のトップページのヘッダー画像のみ表示する方法がわかります。
  • テキストや画像の自動縮小機能を停止させる方法がわかります。

「ストーク」のトップページのヘッダー画像のみ表示する方法

parts_homeheader.phpをカスタマイズ

parts_homeheader.phpファイルを編集します。

 

編集するには・・・・

外観⇒テーマエディターを選択します。

 

※ファイルはFTPソフトかプラグインなどでバックアップを取ってください。

phpファイルを変更するのはバグる可能性があるので注意が必要です。

貼り付けする内容

ファイルを開いて既にあるファイルは

全部消してから貼り付けてください

<!doctype html>
<!--[if lt IE 7]><html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8 lt-ie7"><![endif]-->
<!--[if (IE 7)&!(IEMobile)]><html <?php language_attributes(); ?> class="no-js lt-ie9 lt-ie8"><![endif]-->
<!--[if (IE 8)&!(IEMobile)]><html <?php language_attributes(); ?> class="no-js lt-ie9"><![endif]-->
<!--[if gt IE 8]><!--> <html <?php language_attributes(); ?> class="no-js"><!--<![endif]-->

<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title><?php wp_title(''); ?></title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1"/>

<?php if ( get_theme_mod( 'opencage_appleicon' ) ) : ?><link rel="apple-touch-icon" href="<?php echo get_theme_mod( 'opencage_appleicon' ); ?>"><?php endif; ?>
<?php if ( get_theme_mod( 'opencage_favicon' ) ) : ?><link rel="icon" href="<?php echo get_theme_mod( 'opencage_favicon' ); ?>"><?php endif; ?>

<link rel="pingback" href="<?php bloginfo('pingback_url'); ?>">

<!--[if IE]>
<?php if ( get_theme_mod( 'opencage_favicon_ie' ) ) : ?><link rel="shortcut icon" href="<?php echo get_theme_mod( 'opencage_favicon_ie' ); ?>"><?php endif; ?>
<![endif]-->

<?php get_template_part( 'head' ); ?>

<?php wp_head(); ?>
</head>

<body <?php body_class(); ?>>
<div id="container">
<?php if(!is_page_template( 'page-lp.php' ) && !is_singular( 'post_lp' )): ?>

<?php if ( get_option( 'side_options_description' ) ) : ?><p class="site_description"><?php bloginfo('description'); ?></p><?php endif; ?>
<header class="header animated fadeIn <?php if ( wp_is_mobile() ) : ?>headercenter<?php else:?><?php echo get_option( 'side_options_headercenter' ); ?><?php endif; ?>" role="banner">
<div id="inner-header" class="wrap cf">
<div id="logo" class="gf <?php echo esc_html(get_option('opencage_logo_size'));?>">
<?php if ( is_home() || is_front_page() ) : ?>
<?php if ( get_theme_mod( 'opencage_logo' ) ) : ?>
<h1 class="h1 img"><a href="<?php echo esc_url(home_url()); ?>" rel="nofollow"><img src="<?php echo get_theme_mod( 'opencage_logo' ); ?>" alt="<?php bloginfo('name'); ?>"></a></h1>
<?php else : ?>
<h1 class="h1 text"><a href="<?php echo esc_url(home_url()); ?>" rel="nofollow"><?php bloginfo('name'); ?></a></h1>
<?php endif; ?>
<?php else: ?>
<?php if ( get_theme_mod( 'opencage_logo' ) ) : ?>
<p class="h1 img"><a href="<?php echo esc_url(home_url()); ?>"><img src="<?php echo get_theme_mod( 'opencage_logo' ); ?>" alt="<?php bloginfo('name'); ?>"></a></p>
<?php else : ?>
<p class="h1 text"><a href="<?php echo esc_url(home_url()); ?>"><?php bloginfo('name'); ?></a></p>
<?php endif; ?>
<?php endif; ?>
</div>

<?php if(!get_option('side_options_header_search')):?>
<a href="#searchbox" data-remodal-target="searchbox" class="nav_btn search_btn"><span class="text gf">search</span></a>
<?php endif;?>

<?php if (!is_mobile() && has_nav_menu('main-nav')):?>
<nav id="g_nav" role="navigation">
<?php wp_nav_menu(array(
     'container' => false,
     'container_class' => 'menu cf',
     'menu' => __( 'グローバルナビ' ),
     'menu_class' => 'nav top-nav cf',
     'theme_location' => 'main-nav',
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'fallback_cb' => ''
)); ?>
</nav>
<?php endif;?>

<?php if (is_active_sidebar('sidebar-sp') || has_nav_menu('main-nav')) :?>
<a href="#spnavi" data-remodal-target="spnavi" class="nav_btn"><span class="text gf">menu</span></a>
<?php endif;?>

<?php if(is_mobile() && has_nav_menu('main-nav-sp')):?>
<div class="g_nav-sp animated fadeIn">
<?php wp_nav_menu(array(
     'container' => 'nav',
     'container_class' => 'menu-sp cf',
     'menu' => __( 'グローバルナビ(スマートフォン)' ),
     'menu_class' => 'top-nav',
     'theme_location' => 'main-nav-sp',
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'fallback_cb' => ''
)); ?>
</div>
<?php endif;?>


</div>
</header>

<?php if (is_active_sidebar('sidebar-sp')):?>
<div class="remodal" data-remodal-id="spnavi" data-remodal-options="hashTracking:false">
<button data-remodal-action="close" class="remodal-close"><span class="text gf">CLOSE</span></button>
<?php dynamic_sidebar( 'sidebar-sp' ); ?>
<button data-remodal-action="close" class="remodal-close"><span class="text gf">CLOSE</span></button>
</div>

<?php else:?>

<div class="remodal" data-remodal-id="spnavi" data-remodal-options="hashTracking:false">
<button data-remodal-action="close" class="remodal-close"><span class="text gf">CLOSE</span></button>
<?php wp_nav_menu(array(
     'container' => false,
     'container_class' => 'sp_g_nav menu cf',
     'menu' => __( 'グローバルナビ' ),
     'menu_class' => 'sp_g_nav nav top-nav cf',
     'theme_location' => 'main-nav',
     'before' => '',
     'after' => '',
     'link_before' => '',
     'link_after' => '',
     'depth' => 0,
     'fallback_cb' => ''
)); ?>
<button data-remodal-action="close" class="remodal-close"><span class="text gf">CLOSE</span></button>
</div>

<?php endif; ?>



<?php if(!get_option('side_options_header_search')):?>
<div class="remodal searchbox" data-remodal-id="searchbox" data-remodal-options="hashTracking:false">
<div class="search cf"><dl><dt>キーワードで記事を検索</dt><dd><?php get_search_form(); ?></dd></dl></div>
<button data-remodal-action="close" class="remodal-close"><span class="text gf">CLOSE</span></button>
</div>
<?php endif;?>


<?php if ( get_option('other_options_headerunderlink') && get_option('other_options_headerundertext') ) : ?>
<div class="header-info"><a<?php if(get_option('other_options_headerunderlink_target')):?> target="_blank"<?php endif;?>  style="background-color: <?php echo get_theme_mod( 'other_options_headerunderlink_bgcolor'); ?>;" href="<?php echo esc_html(get_option('other_options_headerunderlink'));?>"><?php echo esc_html(get_option('other_options_headerundertext'));?></a></div>
<?php endif;?>


<?php get_template_part( 'parts_homeheader' ); ?>

<?php
	if(get_option('side_options_pannavi', 'pannavi_on') == 'pannavi_on' || !get_option('side_options_pannavi')){
		breadcrumb();
	}
?>
<?php endif; ?>

 

テーマエディターで編集

貼り付けただけでも問題はありませんが・・・・・

画像上部に空白ができることがあります。

 

 

調整のために・・・・・

 

下記CSSを子テーマのstyle.cssに追記してみてください。

 

もちろん気にならなければ入れる必要はありません。

top: -2.7em;  の部分は各自で数字の調整をしてみてください。

#custom_header2{
 margin-bottom:1em;
}
@media only screen and (min-width: 1100px) {
 #custom_header2{
 top: -2.7em;
 position: relative;
 }
}

 

まとめ

今日はSTORKのヘッダー画像をアメブロのヘッダー画像で転用したいという方の為に

記事にしました。

 

OPEN CAGE(オープンケージ)社が作っているテンプレートなので

Hummingbird(ハミングバード)やスワロー、ALBATROS(アルバトロス)でも

応用が利くはずです。

 

ぜひ挑戦してみてください。(^^)

 

バックアップを必ずしながら進めて下さいね(^^)

 

あなたは「Web集客」に限界を感じていませんか?

サイトをただ作るだけで満足ですか?

あなたのサービスやコンテンツはとっても有益なものがたくさんあります。

良いコンテンツも埋もれてしまっては全く意味がありません。

正しい知識と実践で、SEO対策はもちろん、ユーザビリティーを考えたサイトを作りませんか?

私と歩めばWebマーケティング知識とWordPressスキルが定着し、サイト回遊率、再訪問がアップします。

しかも、これだけでは終わりません!!

その先の「攻めのメディア」と組み合わせ、あなたのサービスを広めて売上を伸ばしていきます。

サイトを育てて、長い間愛されることのできるWordPressサイトからの集客導線(ゴールデンルート)を一緒に作りませんか?

↓ ↓ ↓ ↓ ↓ ↓ 

おすすめの記事