[WordPress] To insert a photo slider etc. in the header part of the theme

【WordPress】テーマのヘッダー部分に写真スライダーなどを挿入するには

公開日：2016年4月15日／最終更新日：2017年10月29日使い方など

WordPressにはいろいろなテーマがあって、画像中心のテーマなどではスタイリッシュなスライダーがタイトルの下にボーーンと表示されたりするものもあって格好いいですね。実はこれ、専用のテーマでなくても簡単に実装できるんです。今回は初心者向けにWordPressテーマのヘッダー部分に写真スライダーなどを挿入する方法を紹介します。構造さえ分かればスライダーだけでなくさまざまな要素をヘッダーに表示できるようになりますから覚えておくと便利です。

ほとんどの画像スライダープラグインでも使える

画像を一定時間で切り替える「スライダー」系のプラグインのほとんどは、メディアに取り込まれた画像を登録しておいてショートコードなどで表示するようになっています。有名なのは「MetaSlider」というプラグインです。スライダー系のプラグインは画像切替の方法がいろいろとあったり、画像の隅を透明化したり額縁のように表現したりする特別なエフェクト機能を備えたものなど多数ありますから、気に入ったものを探してください。

まずはこれらのプラグインを使ってスライダー表示する素材をつくりましょう。

サイトヘッダー部分にスライダーを挿入する方法

サイト内共通のタイトルやメニューを表示しているのは、「header.php」というファイルです（中には違うテーマもあるかもしれません）。このファイルは

ホームページであることを明示する
アクセス解析などのコードを記述する
CSSファイルの読み込み先を明示する
サイト内で共通して使う（どんなページや投稿でも使う）一番先頭（上）部分の表示内容も記述する

というような要素で作られています。その中で

</head>

と書かれているところから上の行は前述した１～３の情報ですからサイトの見た目には何も表示されない領域です。今回行うのはその下にある要素になります。

この要素には

<div id="">～</div>

という要素がたくさん入っていると思います。親切なテーマだと何について書かれているのかがコメントになっているためやりやすいのですが、そうでなければ

<div id="">～</div>

の流れをじーっと見て１つの塊が終わっているところにスライダーのコードを挿入して更新後、サイトを実際に表示して探るのが一番です。

ただし、header.phpなどphpファイルの中に直接ショートコードを入れても動作しませんから

【WordPress】ショートコードをPHPプログラムとして動作させる方法

を参考にしてphpとして動作する形にして挿入するようにしましょう。

いい大きさでスライダーを挿入するためには作成しているサイトの幅を調べてスライダーの幅をそれに合わせることがポイントです。

スライダーの挿入例

Ordinary Lifeという私が管理しているサイトは「Simplicity2」というテーマを使用しています。このテーマで上記サイトと同様の位置にスライダーを入れるためにはheader.phpの

<div class="alignright top-sns-follows">
<?php if ( is_top_follows_visible() ): //トップのフォローボタンを表示するか?>
<?php get_template_part('sns-pages'); //SNSフォローボタンの呼び出し?>
<?php endif; ?>
</div>

－－－ここにスライダーのショートコードをphpとして動作するようにしたコード－－－

</div><!-- /#h-top -->
</div><!-- /#header-in -->
</div><!-- /#header -->

「－－－ここにスライダーのショートコードをphpとして動作するようにしたコード－－－」へコード挿入すればOKです。ちなみにスライダーは「Slideshow」というプラグインを使用しています。