【ステップ 8】カスタマイザー:ヘッダーメディアの作成

【連載】WordPressでポートフォリオの作り方の【ステップ 8】です。
この記事では、yStandardテーマのヘッダーメディアの設定方法を紹介しています。

ヘッダー(カスタムヘッダー)はWebページの上部に大きく表示される画像です。
そのWebサイトのイメージを伝える大切なデザイン要素となります。

ヘッダーメディアを設定する場所

外観 > カスタマイズ > ヘッダーメディアからヘッダー(カスタムヘッダー)を設定していきます。

外観 > カスタマイズ > ヘッダーメディアからヘッダーを設定

ヘッダーメディアの種類

yStandardのテーマのヘッダーは下記の3種類の設定ができます。

  1. 動画
  2. 画像
  3. ショートコードの利用

ここでは、ショートコードを利用する方法に挑戦してみましょう。

ショートコードとは?

ショートコードとは投稿や固定ページ、指定された箇所などに短いコードを記述することでプログラムの機能が使えるようになるWordPressの仕組みです。

ヘッダーメディアの種類

ショートコードでヘッダーメディアを設定する手順

  1. ヘッダーのデザインをysパーツで作成する。
  2. ysパーツのショートコードをコピーする。
  3. ヘッダーメディア設定個所にショートコードをペーストする。
STEP.1

ヘッダーのデザインをysパーツで作成する。

ysパーツ > 新規追加からysパーツ作成画面を開き、ヘッダーのデザインをブロックエディターで作成します。
※ ysパーツはyStandardテーマの拡張機能です。

ysパーツ・ブロックエディターでヘッダーをデザインする

STEP.1
STEP.2

ysパーツのショートコードをコピーする。

デザインができたらショートコードをコピーします。

ヘッダーデザインが完成したらショートコードをコピーする

STEP.2
STEP.3

ヘッダーメディア設定個所にショートコードをペーストする

外観 > カスタマイズ > ヘッダーメディア の設定個所にショートコードをペーストします。
プレビューを確認して公開したら完成です。

ヘッダーメディア設定個所にショートコードをペーストする

STEP.3

作成したヘッダーデザイン(ysパーツ)の管理・編集方法

作成したヘッダーデザインはysパーツ一覧から編集画面に入ることができます。
削除下書きへ変更などもここでできます。

作成したヘッダーデザイン(ysパーツ)の編集方法

内容を変更して更新すると変更が反映されます。
ショートコードを貼り付けなおす必要はありません。

ヘッダーデザインの編集画面
ヘッダーデザインの編集後のトップページ

完成形・ブログ型トップページの表示

ここまでの完成形・トップページの表示です。
ヘッダーメディアの下に投稿が新着順で並んでいる「ブログ型」と呼ばれるトップページとなっています。

この時点で完成!という方もいらっしゃるでしょう。

デモサイトはこちらから確認できます。

WordPressの固定ページの機能を使うことで、トップページと記事一覧ページを分けて表示させる、いわゆる「Webサイト型」に変更することもできます。

次回【ステップ 9】では「Webサイト型」への変更方法を紹介しています。
トップページに表示する内容を自由にレイアウトしたい方は、ぜひ、お付き合いください。

\ 記事がお役に立ったらシェア /

関連記事

ポートフォリオの作り方動画講座

ポートフォリオの作り方とWordPressが学べる動画講座

おすすめ動画