WordPressでヘッダーを挿入するプラグインは何？

ウェブページのデザインでヘッダーは非常に重要です。ページを人間の体にたとえると、ヘッダーは顔にあたります。サイトを訪問したユーザーは、まずヘッダーに視線が行きます。素晴らしいコンテンツを持っていたとしても、その魅力を伝えきれないヘッダーでは、十分にユーザーの興味を引くことができないのです。WordPressサイトの運営者のなかには、ヘッダーのカスタマイズ方法を知りたい人もいるでしょう。この記事ではヘッダーを自在にカスタマイズするプラグインなどを紹介していきます。

初心者にとってヘッダーのカスタマイズは難しい

WordPressには管理画面（ダッシュボード）から、ページのヘッダーを編集する機能が実装されています。これを「カスタムヘッダー」と呼んでいます。ヘッダーに使用する画像を変更したり、動画を読み込んだり、テキストの表示をコントロールできる便利な機能です。ただし、ヘッダーのカスタマイズは難しいといわれています。とくに初心者にとってハードルが高いのには3つの理由があります。1つ目は、テーマの「カスタムヘッダー」機能では編集項目に限度があることです。また、テーマによって編集できる項目が一定ではないため、異なるテーマで複数のサイトを運営管理している場合、編集に時間がかかることもあります。2つ目は、カスタマイズをするには、phpやCSSの知識が必要になる点です。

WordPressは主にphpファイルで構成されています。ヘッダーに限らず、コードを編集してカスタマイズするにはphpのスキルは必須です。phpはHypertext Preprocessorの略称で、ウェブページでインタラクティブ処理を可能にする言語です。ウェブサーバーとの情報のやり取りを担っています。また、ページのレイアウトはCSSがコントロールしているため、その知識も不可欠です。CSSとはCascading Style Sheetsの略で、スタイルシートとも呼びます。

ウェブページの全体の構成を指定するHTMLに対して、CSSは構成要素の位置関係など実際の見た目を決めています。ちなみに、HTMLはHyper Text Markup Languageの略です。3つ目は、外注するにしても、お金も時間もかかってしまう点です。コーディングをエンジニアに頼むと、細かいデザインまで希望どおりになるのですが、それなりの出費を覚悟しなければなりません。ヘッダーをカスタマイズする最もリーズナブルな方法は、WordPressのプラグインを使う方法といえます。

【おすすめプラグイン】1.Elementor Header Footer

ページビルダー系プラグインで注目されているものがElementorです。その機能を拡張するプラグインが多数公開されています。なかでも、ヘッダー・フッターのデザインを容易にするのがElementor Header Footerです。このプラグインは、どのようなテーマでもカスタマイズされたレイアウトのヘッダー・フッターが作成可能な点に特徴があります。操作の手順としては、まずページやテンプレートを作成して、それをヘッダー・フッターとして表示します。また、作成したヘッダー・フッターは他のサイトで再利用もできるのです。なお、このプラグインを動作させるには、Elementorの本体をインストール・有効化しておく必要があります。

【おすすめプラグイン】2.Anywhere Elementor Pro

Anywhere Elementor Proは、Elementorに機能を追加するプラグインです。Elementorを使って作成されたテンプレートと関連付けられた、どのようなページにも挿入できるショートコードを生成します。ヘッダーのデザインに使う場合、テンプレートに背景画像や背景動画などを設定しておけば、視覚効果の高いヘッダーを作ることができるのです。Anywhere Elementor Proの関連情報は「WordPress 背景画像 プラグイン」または「WordPress 背景 動画」の記事を参照してください。なお、このプラグインはElementor本体のインストール・有効化が必須となっています。

プラグインを組み合わせる

上記2つのElementor用の機能拡張プラグインを組み合わせることで、ヘッダーのカスタマイズの幅が広がります。たとえば、投稿ごとのアイキャッチ画像をヘッダー画像に流用することもできるのです。WordPressでのアイキャッチ画像は、投稿された記事の最初に表示されるイメージ画像と、記事一覧のサムネイル画像としても使われます。テーマにより表示される画像の大きさや位置が異なりますが、アイキャッチ画像の設定を忘れると、背景がグレーの「No Image」というイメージが表示されてしまうのです。ユーザーはアイキャッチ画像を見て、内容を予想してから読み始めるかどうかを決める傾向が見られます。

そのため、離脱を防ぐためには、アイキャッチ画像の設定は欠かせないのです。この画像をヘッダーに使うには、まず、Elementor Header Footerを使ってヘッダーのテンプレートを作成します。その際、アイキャッチ画像としてメディアライブラリに保存してある画像ファイルをヘッダーに読み込むのです。Elementorの編集画面での操作は、画像要素ブロックをドラッグ＆ドロップで、ヘッダーのテンプレートに挿入します。挿入すると左コラムに編集画面が開くので、画像の大きさやその他の項目を調整しましょう。

また、投稿のカテゴリーによってヘッダーに表示する内容を変更することもできます。まず、カテゴリー別のヘッダーのテンプレートを必要な数だけ作成します。基本的に同じデザインであれば、コピーすると良いでしょう。管理画面の左コラムにあるElementorメニューにある「My Template」をクリックします。右側に作成したテンプレートが一覧表示されるので、「Header」タブをクリックして、作成したヘッダー用のテンプレートを確認します。必要な数をコピーしたら、それぞれのテンプレートの編集を行うのです。

色やタイトルを編集して「publish（公開）」ボタンをクリックすると「Display conditon（表示条件）」設定ポップアップが開きます。ここで、特定のカテゴリーの場合のみ表示するように条件を追加するのです。この操作をカテゴリーの数だけ繰り返します。カテゴリー全体などではなく、特定のページのヘッダーをカスタマイズしたい時には、Anywhere Elementor Proで生成したショートコードを使います。表示させたいページのエディタを開いて、ショートコードをコードに追加するのです。

【おすすめテーマ】3.Strok

WordPressテーマである「Stork」は、「お知らせテキスト」を表示することができます。お知らせテキストとは、ヘッダー部分に表示される編集可能なテキストのことです。ユーザーはまずヘッダーに注目する傾向があるので、重要なお知らせや最新情報を掲載するには最適な場所です。上手に活用すると、ヘッダーの魅力を高めることができます。Storkをインストール・有効化した後に、管理画面の左コラムの「外観」から「カスタマイズ」に入ると、テーマカスタマイザーと呼ばれる編集画面が表示されます。

その「グローバル設定」の項目でお知らせ記事の設定が可能です。表示するテキストとリンク先を入力します。なお、表示する文字サイズや色、フォントなどはCSSのコードを編集することで対応できますが、Storkの「子テーマ」の購入が必要です。子テーマとは、テーマを編集する際に作っておくテーマのコピーのことです。テーマのアップデートがあっても、親テーマが対象になり、カスタマイズした子テーマの変更箇所は保存されたままになります。テーマのコードを編集したい時によく使われる手法です。

注1.ヘッダーの高さをカスタマイズする方法

WordPressサイトでヘッダーの高さをカスタマイズするにはCSSのコードを編集する必要があります。管理画面左コラムの「外観」から「テーマの編集」を選択すると、テーマファイルの編集画面が開きます。右側に表示されているテーマファイルのリストから「スタイルシート（style.css）」を選択しましょう。ブラウザの検索機能を使って、ヘッダーのセレクタ「#header」を検索します。そこに高さのプロパティ「height」とその値を追記するのです。

完了したら、下に表示されている「ファイルを更新」ボタンをクリックします。これを忘れると、追記内容が保存されないので注意しましょう。なお、CSSのコードを編集すると予期せぬ不具合が起きて、ページがうまく表示できなくなることがあります。よくある現象は、ブラウザの画面が真っ白になるというものです。対策としては、バックアップを忘れないようにとっておくことがおすすめです。最低でも、編集作業前にCSSファイルのコピーを保存しておきましょう。バックアップがあれば、不具合が起きる前の正常に表示されていた状態に戻せます。

注2.ヘッダーに画像を挿入する方法

WordPressのテーマにより異なりますが、ヘッダーに画像の挿入が可能な場合があります。ヘッダーのカスタマイズは、管理画面から設定します。まず、左コラムの「外観」から「ヘッダー」を開いて、ヘッダー管理画面に移行しましょう。次に、ヘッダーに挿入する画像を用意します。サイズはアップロード後に調整可能ですが、横960px、縦250pxにしておくとそのまま表示されます。さらに、ヘッダー管理画面に戻り、画像をアップロードしましょう。

画像の選択には2つの方法があります。PC上にある画像を選ぶなら「ファイルを選択」ボタンを使いましょう。メディアライブラリにすでにアップロード済みの画像から選ぶなら「画像の選択」ボタンを押します。選択が完了したら「アップロード」ボタンを押して、画像を表示し、一部を使う場合はトリミング作業に移ります。そのまま使うのであれば、何もする必要はありません。最後に「変更を保存」ボタンで確定すると、サイトに公開されるのです。なお、ヘッダー画像を複数アップロードすると、ランダム表示が選択できるようになります。ヘッダー画像をランダムに表示させて変化をつけたいときには有効な方法です。

注3.ヘッダー画像を挿入するメリット

ウェブサイトではヘッダー画像を挿入することでサイトの独自性が高まります。文字やロゴのみのヘッダーにはシンプルさはありますが、画像と比べるとインパクトに欠けるのです。また、画像のイメージは空間を想起させることもあります。たとえば、美しい風景が表示されていれば、本来は平面のはずのモニター画面に奥行きが出てくるのです。さらに、その画像のイメージがサイトの提供する商品やサービスに一致していれば、相乗効果でサイトのポジティブな印象がユーザーの記憶に残るはずです。ネットショップなどの場合は、商品画像や、その商品を使ったライフスタイルを想像させる画層を使うと、売上向上にも効果があります。

もし、同じ商品を他のネットショップでも販売していたとすると、価格が同じなら、ポジティブイメージが強いサイトから購入したいと思うでしょう。なぜなら、人は商品やサービスを通して、理想や夢を追い求めるものだからです。たとえば、ファッション系サイトでは、商品だけではなく、どのようなモデルが身につけているのか、どのような場所で撮影されたのかがわかる画像が掲載されています。ユーザーはその全体を見て、イメージをふくらませることで、購入意欲が高められるのです。ヘッダー画像についても、理想や夢をイメージさせるようなものを使えば、同じような効果が期待できるといえます。

注4.おしゃれなヘッダー画像を作る方法

ヘッダーに使う画像は、さまざまな方法で作成することができます。業務用サイトであれば、まず豊富な画像が選べるShutterstockやgettyimagesなどのストック素材販売サイトから画像を購入します。次に、Photoshopなどの写真や画像のレタッチ用アプリケーションで加工して、魅力的な画像を編集するのです。個人のサイトであれば、自分で撮った写真なども個性的でよいのですが、クオリティという面では、プロが撮った写真にはかなわないことが多いようです。おしゃれなヘッダー画像をコストを抑えて制作したい場合には、編集アプリケーションも素材もフリーのものを使うとよいでしょう。

たとえば、フリーの画像加工アプリケーションPhoto Scapeはシンプルな操作で、編集機能も充実しています。また、フリーのデザインテンプレートが揃っているCanvaを探せば、ヘッダー向きの素材がすぐに見つかることでしょう。この他にもおしゃれな画像がフリーで入手できるサイトが多数あります。上手に活用して、究極の低コストでヘッダー画像を手に入れましょう。なお、Photo Scapeは文字の挿入もできます。フォントの種類を工夫したり、無料のフォントをダウンロードして使ったりすれば、さらに魅力的なヘッダーになることでしょう。

まとめ

魅力的なサイトには、魅力的なヘッダーが欠かせません。可能であれば、画像つきにするとインパクトのあるヘッダーになります。Elementorやその関連プラグインなどを利用して、コーディングの手間をかけずにヘッダーのカスタマイズに挑戦してみましょう。