WordPressのテーマ「xeory_extension」をカスタム。


基本的に素晴らしいテンプレートである。マーケティングメディアで有名な『バズ部』がリリースしている無料テーマである。デモページはこちら。
これを、視覚的に好みにするために一部手を加える。
既存のPHPを複製したり、簡単なPHPを数行記述、またプラグインを追加するだけでイメチェン出来る部分からカスタムしていく。

とても実用性の高いテンプレートということで、現時点で採用してみた。
しかし、あくまでも趣味のサイトであったりの場合、トップのヘッダーにスライダーを使いたいな…的な欲求が生まれたりする。

さしあたってトップページのメインビジュアルをスライダー構築プラグインで管理できるように変更する。併せて、個別投稿ページのヘッダー部分にアイキャッチに登録した画像を印象的に全幅で表示させる。

    1. プラグイン【Smart Slider 3】をインストールし有効化する。
    2. ＣテーマにＰテーマのheader.phpをコピーしheader-smartslider.phpとする。
    3. header-smartslider.phpの末尾にSmartSliderが生成するPHPをコピーペーストする。
生成されたPHP
<?php 
echo do_shortcode('








        

            

                                                


                    
                    

                        
Slide One
サービス障害に関するご案内
Trouble Information
Slide One
Slide One
サービス障害に関するご案内
Trouble Information
Slide One
                    


                                    

            

        

        
previous arrow
next arrow
');
?>
新たに作成したheader-smartslider.phpの末尾
・
・
・
  <div class="breadcrumb-area">
    <div class="wrap">
      <?php bzb_breadcrumb(); ?>
    </div>
  </div>
	<?php 
	echo do_shortcode('








        

            

                                                


                    
                    

                        
Slide One
サービス障害に関するご案内
Trouble Information
Slide One
Slide One
サービス障害に関するご案内
Trouble Information
Slide One
                    


                                    

            

        

        
previous arrow
next arrow
');
	?>
<?php } ?>
    1. このテーマが管理する固定フロントページの為のPHP「front-page.php」のトップにあるGet Headerコードに先に作成したheader-smartslider.phpを指定するため以下の様に記述する。
変更前
<?php get_header( ); ?>
変更後
<?php get_header('smartslider'); ?>
    1. 以上でトップページのスライダーイメージをプラグインで操作できる様になった。デフォルトデザインでは基調色のグリーンをバックに大々的にサイトのメインコピー（テキスト）が表示されるデザインとなっている。それらテキストはダッシュボードの「テーマ設定」内にあるファーストビュー設定に入力したテキストをPHPで呼び出している。せっかくの機能なのでCSSでデザインし直し、スライダーの下に表示されるようにする。
ファーストビュー設定を呼び出している（front-page.php/デフォルト）
<div id="main_visual">
  <div class="wrap">
    <h2><?php echo nl2br(get_option('top_catchcopy'));?></h2>
    <p><?php echo nl2br(get_option('top_description'));?></p>
  </div><!-- .wrap -->
</div>
    1. ヘッダーのバックグラウンドカラーやその他の要素を好みにあわせCSSでデザインする。
    2. 投稿ページ用にヘッダーとなるPHPを作成する。先のheader-smartslider.phpを複製しheader-eyecatch-image.phpとする。もとなるXeoryは、デフォルトでアイキャッチが有効化されたテーマ※なので、先ほどSmartSliderのPHPを記述した部分を以下のPHPと差し替える。
      ※アイキャッチが有効化されていない場合はfunctionに有効化を記述しなければならない。
アイキャッチ画像をヘッダーに表示させる（header-eyecatch-image.phpに記述）
	<?php $featured_image = wp_get_attachment_url(get_post_thumbnail_id($post->ID)); ?>
	<div class="header-image single-header-image" style="background-image:url('<?php echo $featured_image; ?>');">
		<img class="header-inner" src="<?php echo $featured_image; ?>"/>
	</div>
アイキャッチ画像を全幅デザインに指定（CSS）
	.header-image {
		display: none;
		position: relative;
		height: 300px;
		background-position: center;
		background-size: cover;	
		background-repeat: no-repeat;	
	}
	.header-inner { 
		display: none; 
	}	
	.single-header-image {
		display: block;
	}
    1. 先に行ったように、single.phpのGet Headerコード部分に「eyecatch-image」を指定し、投稿ページでは個々のアイキャッチ画像をヘッダーに表示させるようにする。
    2. もとなるXeoryでは、アイキャッチ画像は投稿記事の最上部に表示される設定となっている。その為、このままでは同じ画像が２つ表示されてしまう。そこで、記事の最上部に表示させる以下のコード（single.php内）を削除する。
記事の最上部に表示させているデフォルトのコード
<?php if( get_the_post_thumbnail() ) : ?>
<div class="post-thumbnail">
<?php the_post_thumbnail(array(1200, 630, true)); ?>
</div>
<?php endif; ?>
  1. ついでにアバター部分を消してしまう…
  2. single.phpの下部に記述された以下のコードを削除。
     <?php bzb_show_avatar();?>

ここまでカスタムしてみたら…

個別投稿ページを確認。
そもそもヘッダーエリアに色がのるデザインだったものをCSSで白い背景にしてみたら、「パンくずリストのエリア」と「ロゴやグローバルメニューのあるヘッダーエリア」の境界線が無いので何となくしまらない。
そこで、HeaderテーマだけPHPに直書きで境界線をいれてみた。

<?php }else{ ?>
<div style="border-bottom:1px solid #dcdcdc;">
<header id="header" role="banner" itemscope="itemscope" itemtype="http://schema.org/WPHeader">
  <div class="wrap clearfix">
・
・
・

「div style=”border-」〜のCSSがそれ。
結果、いまいちだったので「パンくずリストのエリア」に背景色を追加。

  <div class="breadcrumb-area">
   <div style="background-color: #f5f5f5 !important;">  
    <div class="wrap">
      <?php bzb_breadcrumb(); ?>
    </div>
   </div>
 </div>

こんな感じでbackground-colorで色づけ。ヘッダーエリアのborder-bottomは却下。

参考URL