2020年4月31日更新

Genesisサイトのトップページにメインビジュアルとキャッチコピーを追加する方法【WordPress】

Thumbnail

今回はStudioPressというアメリカの会社が販売しているGenesisフレームワークというテーマをカスタマイズする方法について書いていきたいと思います。

Genesisフレームワークでは色々なGenesis子テーマがありますが、今回はGenesis Sampleというテーマを使って、トップページにメインビジュアルとキャッチコピーを表示します。

※ 今回はPHPファイルを編集します。管理画面に入れなくなることもあるので、PHPコードは注意して編集して下さい。

1. functions.php を編集

それでは、まずはキャッチコピーを表示させましょう。

functions.php ファイルの一番下に以下のコードを追加します。

PHP
コピーする
add_action('genesis_after_header', function () {
if (!is_front_page()) {
return;
}
echo '<div class="main-visual"><div class="wrap">';
echo '<h1>キャッチコピー</h1>';
echo '</div></div>';
});

これでトップページに「キャッチコピー」という文章が追加されました。

トップページ以外は表示されてないですね。

キャッチコピーのタグを変更する場合

今回はトップページのメインビジュアルなのでh1タグを使用してみましたが、お好みで変更して下さい。

例えばh1 という箇所をpのように変更すれば、キャッチコピーはpタグで囲まれます。

2. style.css を編集

次に、CSSコードを追加して見た目を調整します。

style.css ファイルの一番下に、以下のコードを追加します。

以下のコードの {画像のパス} という箇所には、表示したい画像へのパス(URL)を入力します。

CSS
コピーする
.main-visual {
height: calc(25vh - 70px);
background: url("{画像のパス}")
no-repeat;
background-size: cover;
background-position: 50% 30%;
color: white;
}
.main-visual .wrap {
display: flex;
justify-content: center;
align-items: center;
height: 100%;
}
.main-visual h1 {
margin: 0;
font-size: 1.5em;
}
@media (min-width: 480px) {
.main-visual {
height: calc(40vh - 70px);
}
.main-visual h1 {
font-size: 3em;
}
}

これで指定した画像の上に、キャッチコピーが表示されました。

今回は以上になります。最後まで閲覧ありがとうございました。

Copyrights © WebCraftLogAll Rights Reserved.