Xeory Extensionトップページのメインビジュアルを画像に変更する方法

Xeory Extensionトップページのメインビジュアルを画像に変更する方法知りたいですか？

 

ワードプレスでテンプレートと呼ばれるテーマは無数にあり、有料のものから無料のものまでたくさんあります。

無料でも優れたものもたくさんありますが、SEOにとても強いあの有名なバズ部さんが出している無料テンプレート「Xeory Extension」を他のサイトで使用させて頂いており、非常に素敵なテンプレートですがカスタムについて少し難しく、調べながら模索しながらやっている状態です。

そこで、Xeory Extensionのトップページのメインビジュアルを画像に変更出来たので、その方法について書いておきたいと思います。

 

ワードプレス無料テンプレート「Xeory Extension」

まずバズ部さんといえば、SEOに非常に強くワードプレスのカスタマイズややり方など、ワードプレスについて検索した時によく出てくるのでかなり有名です。

まさにワードプレスのスペシャリスト！

そんなバズ部さんが無料テンプレートを出してて気になったので僕が作ってる他のサイトでテンプレートを探している時に「これにしよう！」と決めました！

 

Xeoryのテンプレートは二種類。

 

こちらはブログ型テーマの「Xeory Base」

 

 

こちらはサイト型テーマの「Xeory Extension」

 

企業型のホームページが作りたかったので、こちらのXeory Extensionに決めました。

トップのメインビジュアルはバンっととても大きく、インパクトがありとても良いのですが、このままだとシンプルすぎるというか写真を入れたかったので、その写真を入れる方法を説明します。

 

Xeory Extensionのメインビジュアルを画像にする

無料写真素材のPixabayの画像を入れてみます。

 

テーマの編集ファイルは2つです。

 

front-page.php

 

ワードプレス編集画面の外観→テーマの編集→front-page.php

<div id="main_visual">
<img src="http://ここに画像のURL" />
<div class="wrap">
<h2><?php echo nl2br(get_option('top_catchcopy'));?></h2>
<p><?php echo nl2br(get_option('top_description'));?></p>
</div><!-- .wrap -->
</div>

 

ワードプレス編集画面の外観→テーマの編集→テーマフッター（footer.php）

「トップページメインビジュアル」から下のfunction2つ（#main_visualが関わるところ）を両方コメントアウトします。
これをしないと、スマホ幅になったときに画像下に余分すぎる余白が入ります。
デフォルトのメインテキストを利用するときのみに必要なものなので、画像にする場合は必要ない。

// トップページメインビジュアル

/*

$(function(){

  h = $(window).height();

 // hp = h * .3;

 hp = h;

  $('#main_visual').css('height', h + 'px');

  $('#main_visual .wrap').css('padding-top', hp + 'px');

});

$(function(){

 if(window.innerWidth < 768) {

  h = $(window).height();

  hp = h * .2;

  $('#main_visual').css('height', h + 'px');

  $('#main_visual .wrap').css('padding-top', hp + 'px');

 }

});

*/