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

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

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

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

1 1. functions.php を編集
- 1.1 キャッチコピーのタグを変更する場合
2 2. style.css を編集

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;
    }
}

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

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