WordPress Hestia テーマのカスタマイズ・フロントページセクション(その2) | そう備忘録

WordPress Hestia テーマのカスタマイズ・フロントページセクション(その2)

Hestia(テーマ)の続き

WordPressのテーマのHestiaのカスタマイズについての記事。

インストールから外観設定までについては前回の記事を参照

今回はフロントページセクションについての記事とする。

Hestiaではフロントページに複数のセクションの配置が出来て予め用途に応じた様々なセクションが用意されている。

フロントページセクション一覧

大見出しセクション

フロントページ(ホームページ)の一番先頭の大見出しについて設定をするセクション

Featuresセクション

ホームページの特徴をアピールするセクション

「私たちについて」セクション

「私たちについて」記述するセクション

Teamセクション

自分たちのチーム、メンバーについて紹介するセクション

Ribbonセクション

リボン(横帯)のセクション

ボタンも配置可能

Testimonialsセクション

お客様の声を紹介するセクション

Clients Barセクション

取引先を紹介するセクション

購読セクション

ニュースレターの購読を促す為のセクション

ブログセクション

ブログページへのリンクセクション

連絡先セクション

お問い合わせ用、連絡先のセクション

ショップセクション

ECサイトへのセクション

プラグインのインストールが必要

フロントページセクション

大見出しセクション

フロントページ(ホームページ)の一番先頭の大見出しについて設定をするセクション。

トップ画像やタイトル、ボタン、ウィジェットなどを表示・設定する事ができる。

Hestia 大見出し

大見出しセクション 設定

大見出しの背景

フロントページの最上部の背景画像を設定する

  • 画像
  • Parallax

の2パターンが選択できる

Parallaxを選択した場合、レイヤー1(後方)とレイヤー2(前方)の2つの画像が設定できる様になり、マウスオーバーの動きに合わせて前後の画像がズレて動くパララックス背景画像となる

レイヤー1:白ブロック壁

レイヤー2:水玉(透過)

パララックス背景

タイトル

大見出しのタイトル

テキスト

大見出しのテキスト

ボタンの文字列

大見出しにボタン(リンク)を表示することができる

その時のボタンの文字列。未入力の時はボタンは表示されない

ボタンのリンク

上記ボタンをクリックした時のリンク先

大見出しセクション、+追加

タイトルやテキストの配置を3パターンから選択できる。

大見出しセクション +追加

大見出しレイアウト 左

タイトルやテキストを左寄せで表示する

右側にはウィジェットを表示させる事ができる

下記はカレンダーウィジェットを表示させた例

大見出し カレンダーウィジェットの表示

レイアウトを選んだ後、大見出しセクションサイドバーでウィジェットを追加する

ウィジェット追加画面

大見出しレイアウト 中央

タイトルやテキストを中央に表示する(デフォルト)

ウィジェットは表示できない

大見出しレイアウト 右

タイトルやテキストを右寄せで表示する

左側には左寄せの時と同様にウィジェットを表示させる事ができる

Featuresセクション

ホームページの特徴をアピールするセクション。

タイトルと説明文の他に他のページへリンクするアイコンが表示ができる。

Featuresセクション 設定

Featuresセクション

Disable section

チェックをするとこのセクションが非表示となる

Section Title

セクションのタイトル

Section Subtitle

サブタイトル

タイトルの下に表示される説明文

Features Content

コンテンツ

下記の例では3つだが追加、削除する事ができる

コンテンツの設定については下記参照

Features Contentの追加・設定

1.「Add New Feature」ボタンでFeatureを追加

2.追加されたFeatureをクリック

3.Featureの設定

Featureコンテンツ

Feature設定

アイコン

プルダウンの中からアイコンを選択する

アイコン

色を設定する

色の選択

タイトル

アイコンに対するタイトルを記述する

テキスト

テキストを記述する

リンク

アイコンをクリックした時のリンク先

「私たちについて」セクション

「私たちについて」記述するセクション。

背景画像と文章でセクションが構成される。

「私たちについて」セクション

「私たちについて」セクション 設定

セクションを無効にする

チェックをするとこのセクションが非表示となる

「私たちについて」の内容

「編集」ボタンを押すと内容の編集が可能

WordPressのメニューから固定ページー>ホームページで編集しても良い

「私たちについて」セクションの背景

このセクションの背景画像

Teamセクション

自分たちのチーム、メンバーについて紹介するセクション。

メンバーの写真、紹介文、SNSなどを表示する事ができる。

チームセクション

Teamセクション

Disable section

チェックをするとこのセクションが非表示となる

Section Title

セクションのタイトル

Section Subtitle

セクションの説明文

Team Content

チームのメンバー

「Add New Team Member」ボタンでメンバーの追加が可能

メンバーの追加については下記参照

Team Memberの追加・設定

1.「Add New Team Member」ボタンでTeam Memberを追加

2.追加されたTeam Memberをクリック

3.Team Memberの設定

Team Memberの設定

Team Memberの設定

画像

メンバーの画像を指定する

タイトル

メンバーの名前を指定する(のがおすすめ)

サブタイトル

メンバーの役職を指定する(のがおすすめ)

テキスト

メンバー紹介文

リンク

メンバー(画像)をクリックした時のリンク先

ソーシャルアイコン

SNSのアイコンとリンク先を複数指定する事ができる

Ribbonセクション

リボン(横帯)のセクション。

リボンの様に横長の領域で背景画像、テキスト、ボタンを配置することができる。

リボンセクション

リボンセクションの設定

Disable section

チェックをするとこのセクションが非表示となる

Background Image

このセクションの背景画像

Text

テキスト

Button Text

ボタンの文字列

Link

上記ボタンをクリックした時のリンク先

Testimonialsセクション

Testimonials(お客様の声)を紹介するセクション。

お客様の声セクション

お客様の声 設定

Disable section

チェックをするとこのセクションが非表示となる

Section Title

セクションのタイトル

Section Subtitle

サブタイトル

Testimonials Content

お客様の声

「Add New Testimonial」ボタンでお客様の声の追加が可能

お客様の声の追加については下記参照

Testimonial(お客様の声)の追加・設定

1.「Add New Testimonial」ボタンでTestimonialを追加

2.追加されたTestimonialをクリック

3.Testimonialの設定

Hestia Testimonialの追加

Hestia Testimonialの設定

画像

お客様の画像

タイトル

セクションのタイトル

サブタイトル

サブタイトル

テキスト

テキスト

リンク

お客様の画像をクリックした時のリンク先

Clients Barセクション

Client(取引先)を紹介するセクション。

ロゴ(とリンク)で紹介をするので関連会社などの紹介にも使える。

Clientセクション

Client Bar セクション

Disable section

チェックをするとこのセクションが非表示となる

Clients Bar Content

取引先

「Add New Client」ボタンで取引先の追加が可能

取引先の追加については下記参照

Client(取引先)の追加・設定

1.「Add New Client」ボタンでClientsを追加

2.追加されたClientsをクリック

3.Clientsの設定

Clientの追加

Clientsの設定

画像

Clientのロゴ

リンク

ロゴ(画像)をクリックした時のリンク先

購読セクション

ニュースレターの購読を促す為のセクション。

購読セクション

メールアドレスの収集、SMTPを使ったメールの送信を行うにはSendingBlueプラグインをインストール&有効化した後、アカウント(無料)を取得して設定を行う必要がある。

SendingBlueプラグインの設定については別記事とする。

購読セクション

セクションを無効にする

チェックをするとこのセクションが非表示となる。

背景画像

このセクションの背景画像

セクションタイトル

セクションのタイトル

セクションサブタイトル

サブタイトル

ウィジェットを追加

購読セクションにウィジェットを追加する。

試しにカレンダーウィジェットを追加してみた。

カレンダーウィジェットの追加

購読セクションにカレンダーウィジェットの追加

ブログセクション

ブログページのセクション。

フロントページからブログへ行く導線はメニューからと、このセクションからの2通り作成可能。

ブログセクション

ブログセクション 設定

セクションを無効にする

チェックをするとこのセクションが非表示となる。

セクションタイトル

セクションのタイトル

セクションサブタイトル

サブタイトル

項目数

最新記事の抜粋を表示する数

連絡先セクション

お問い合わせ用、連絡先のセクション。

お問い合わせフォームで入力されたメッセージが設定されたメールアドレスに飛んでくる。

メールアドレスやSMTPなどの設定はPiarte Formsプラグインにて行う。

プラグインの設定については別記事とする。

連絡先セクション

連絡先セクション 設定

セクションを無効にする

チェックをするとこのセクションが非表示となる。

背景画像

このセクションの背景画像

セクションタイトル

セクションのタイトル

セクションサブタイトル

サブタイトル

フォームのタイトル

問い合わせフォームのタイト

ショップセクション

ショップセクション(ECサイト)を利用するにはWooCommerceプラグインを有効にする必要がある。

そのうち試してみるつもり。

つづく

フロントページセクションについては以上で終了。

「ブログ設定」以降については次の記事に続く

souichirou

やった事を忘れない為の備忘録 同じような事をやりたい人の参考になればと思ってブログにしてます。 主にレゴ、AWS(Amazon Web Services)、WordPress、Deep Learning、RaspberryPiに関するブログを書いています。 仕事では工場に協働ロボットの導入や中小企業へのAI/IoT導入のアドバイザーをやっています。 2019年7月にJDLA(一般社団法人 日本デイープラーニング協会)Deep Learning for GENERALに合格しました。 質問は記事一番下にあるコメントかメニュー上部の問い合わせからお願いします。

おすすめ

2件のフィードバック

  1. 吉田 より:

    私はワードプレス初心者なのですが、テーマを探す際に、毎回インストールしないと中身が分からないことに困っておりましたので、このように解説してくださって非常に助かります。ご質問ですが、Hestiaのように無料テーマでトップページに様々なセクションを設定できるテーマを他にご存知でしたら教えてください。特に「おすすめ記事セクション」「featureセクション」が知りたいです。

    • souichirou より:

      吉田さん
      こんにちは、コメントありがとうございます。
      それ程多くのテーマを試した訳では無いのですが、無料テーマで一番簡単にトップページに様々なセクションを設定出来たのはHestiaでした。
      自分が試した範囲の中ですのでよく探せば他にもあるとは思いますが。
      有料やウィジェットを使えば他のテーマでもおすすめ記事セクションやfeatureセクションは実現できると思います。

質問やコメントや励ましの言葉などを残す

名前、メール、サイト欄は任意です。
またメールアドレスは公開されません。