WordPress Hestia テーマのカスタマイズ・フロントページセクション（その２）
Hestia（テーマ）の続き
WordPressのテーマのHestiaのカスタマイズについての記事。
今回はフロントページセクションについての記事とする。
Hestiaではフロントページに複数のセクションの配置が出来て予め用途に応じた様々なセクションが用意されている。
大見出しセクション | フロントページ（ホームページ）の一番先頭の大見出しについて設定をするセクション |
Featuresセクション | ホームページの特徴をアピールするセクション |
「私たちについて」セクション | 「私たちについて」記述するセクション |
Teamセクション | 自分たちのチーム、メンバーについて紹介するセクション |
Ribbonセクション | リボン（横帯）のセクション ボタンも配置可能 |
Testimonialsセクション | お客様の声を紹介するセクション |
Clients Barセクション | 取引先を紹介するセクション |
購読セクション | ニュースレターの購読を促す為のセクション |
ブログセクション | ブログページへのリンクセクション |
連絡先セクション | お問い合わせ用、連絡先のセクション |
ショップセクション | ECサイトへのセクション プラグインのインストールが必要 |
フロントページセクション
大見出しセクション
フロントページ（ホームページ）の一番先頭の大見出しについて設定をするセクション。
トップ画像やタイトル、ボタン、ウィジェットなどを表示・設定する事ができる。
フロントページの最上部の背景画像を設定する
の２パターンが選択できる Parallaxを選択した場合、レイヤー１（後方）とレイヤー２（前方）の２つの画像が設定できる様になり、マウスオーバーの動きに合わせて前後の画像がズレて動くパララックス背景画像となる レイヤー１：白ブロック壁 レイヤー２：水玉（透過）
| |
タイトル | 大見出しのタイトル |
テキスト | 大見出しのテキスト |
ボタンの文字列 | 大見出しにボタン（リンク）を表示することができる その時のボタンの文字列。未入力の時はボタンは表示されない |
ボタンのリンク | 上記ボタンをクリックした時のリンク先 |
大見出しセクション、＋追加
タイトルやテキストの配置を３パターンから選択できる。
| タイトルやテキストを左寄せで表示する 右側にはウィジェットを表示させる事ができる 下記はカレンダーウィジェットを表示させた例
レイアウトを選んだ後、大見出しセクションサイドバーでウィジェットを追加する
|
| タイトルやテキストを中央に表示する（デフォルト） ウィジェットは表示できない |
| タイトルやテキストを右寄せで表示する 左側には左寄せの時と同様にウィジェットを表示させる事ができる |
Featuresセクション
ホームページの特徴をアピールするセクション。
タイトルと説明文の他に他のページへリンクするアイコンが表示ができる。
Disable section | チェックをするとこのセクションが非表示となる |
Section Title | セクションのタイトル |
Section Subtitle | サブタイトル タイトルの下に表示される説明文 |
Features Content | コンテンツ 下記の例では３つだが追加、削除する事ができる コンテンツの設定については下記参照 |
Features Contentの追加・設定
１．「Add New Feature」ボタンでFeatureを追加
２．追加されたFeatureをクリック
３．Featureの設定
アイコン | プルダウンの中からアイコンを選択する
|
色 | 色を設定する
|
タイトル | アイコンに対するタイトルを記述する |
テキスト | テキストを記述する |
リンク | アイコンをクリックした時のリンク先 |
「私たちについて」セクション
「私たちについて」記述するセクション。
背景画像と文章でセクションが構成される。
セクションを無効にする | チェックをするとこのセクションが非表示となる |
「私たちについて」の内容 | 「編集」ボタンを押すと内容の編集が可能 WordPressのメニューから固定ページー＞ホームページで編集しても良い |
「私たちについて」セクションの背景 | このセクションの背景画像 |
Teamセクション
自分たちのチーム、メンバーについて紹介するセクション。
メンバーの写真、紹介文、SNSなどを表示する事ができる。
Disable section | チェックをするとこのセクションが非表示となる |
Section Title | セクションのタイトル |
Section Subtitle | セクションの説明文 |
Team Content | チームのメンバー 「Add New Team Member」ボタンでメンバーの追加が可能 メンバーの追加については下記参照 |
Team Memberの追加・設定
１．「Add New Team Member」ボタンで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（お客様の声）の追加・設定
１．「Add New Testimonial」ボタンでTestimonialを追加
２．追加されたTestimonialをクリック
３．Testimonialの設定
画像 | お客様の画像 |
タイトル | セクションのタイトル |
サブタイトル | サブタイトル |
テキスト | テキスト |
リンク | お客様の画像をクリックした時のリンク先 |
Clients Barセクション
Client（取引先）を紹介するセクション。
ロゴ（とリンク）で紹介をするので関連会社などの紹介にも使える。
Disable section | チェックをするとこのセクションが非表示となる |
Clients Bar Content | 取引先 「Add New Client」ボタンで取引先の追加が可能 取引先の追加については下記参照 |
Client（取引先）の追加・設定
１．「Add New Client」ボタンでClientsを追加
２．追加されたClientsをクリック
３．Clientsの設定
画像 | Clientのロゴ |
リンク | ロゴ（画像）をクリックした時のリンク先 |
購読セクション
ニュースレターの購読を促す為のセクション。
メールアドレスの収集、SMTPを使ったメールの送信を行うにはSendingBlueプラグインをインストール＆有効化した後、アカウント（無料）を取得して設定を行う必要がある。
SendingBlueプラグインの設定については別記事とする。
セクションを無効にする | チェックをするとこのセクションが非表示となる。 |
背景画像 | このセクションの背景画像 |
セクションタイトル | セクションのタイトル |
セクションサブタイトル | サブタイトル |
ウィジェットを追加 | 購読セクションにウィジェットを追加する。 試しにカレンダーウィジェットを追加してみた。
|
ブログセクション
ブログページのセクション。
フロントページからブログへ行く導線はメニューからと、このセクションからの２通り作成可能。
セクションを無効にする | チェックをするとこのセクションが非表示となる。 |
セクションタイトル | セクションのタイトル |
セクションサブタイトル | サブタイトル |
項目数 | 最新記事の抜粋を表示する数 |
連絡先セクション
お問い合わせ用、連絡先のセクション。
お問い合わせフォームで入力されたメッセージが設定されたメールアドレスに飛んでくる。
メールアドレスやSMTPなどの設定はPiarte Formsプラグインにて行う。
プラグインの設定については別記事とする。
セクションを無効にする | チェックをするとこのセクションが非表示となる。 |
背景画像 | このセクションの背景画像 |
セクションタイトル | セクションのタイトル |
セクションサブタイトル | サブタイトル |
フォームのタイトル | 問い合わせフォームのタイト |
ショップセクション
ショップセクション（ECサイト）を利用するにはWooCommerceプラグインを有効にする必要がある。
そのうち試してみるつもり。
つづく
フロントページセクションについては以上で終了。
私はワードプレス初心者なのですが、テーマを探す際に、毎回インストールしないと中身が分からないことに困っておりましたので、このように解説してくださって非常に助かります。ご質問ですが、Hestiaのように無料テーマでトップページに様々なセクションを設定できるテーマを他にご存知でしたら教えてください。特に「おすすめ記事セクション」「featureセクション」が知りたいです。
吉田さん
こんにちは、コメントありがとうございます。
それ程多くのテーマを試した訳では無いのですが、無料テーマで一番簡単にトップページに様々なセクションを設定出来たのはHestiaでした。
自分が試した範囲の中ですのでよく探せば他にもあるとは思いますが。
有料やウィジェットを使えば他のテーマでもおすすめ記事セクションやfeatureセクションは実現できると思います。