WordPressにはいろいろなテーマがあって、画像中心のテーマなどではスタイリッシュなスライダーがタイトルの下にボーーンと表示されたりするものもあって格好いいですね。実はこれ、専用のテーマでなくても簡単に実装できるんです。今回は初心者向けにWordpressテーマのヘッダー部分に写真スライダーなどを挿入する方法を紹介します。構造さえ分かればスライダーだけでなくさまざまな要素をヘッダーに表示できるようになりますから覚えておくと便利です。
ほとんどの画像スライダープラグインでも使える
画像を一定時間で切り替える「スライダー」系のプラグインのほとんどは、メディアに取り込まれた画像を登録しておいてショートコードなどで表示するようになっています。有名なのは「MetaSlider」というプラグインです。スライダー系のプラグインは画像切替の方法がいろいろとあったり、画像の隅を透明化したり額縁のように表現したりする特別なエフェクト機能を備えたものなど多数ありますから、気に入ったものを探してください。
まずはこれらのプラグインを使ってスライダー表示する素材をつくりましょう。
サイトヘッダー部分にスライダーを挿入する方法
サイト内共通のタイトルやメニューを表示しているのは、「header.php」というファイルです（中には違うテーマもあるかもしれません）。このファイルは
- ホームページであることを明示する
- アクセス解析などのコードを記述する
- CSSファイルの読み込み先を明示する
- サイト内で共通して使う（どんなページや投稿でも使う）一番先頭（上）部分の表示内容も記述する
というような要素で作られています。
その中で
</head>この要素には
<div id=””>～</div><div id=””>～</div>ただし、header.phpなどphpファイルの中に直接ショートコードを入れても動作しませんから
を参考にしてphpとして動作する形にして挿入するようにしましょう。
いい大きさでスライダーを挿入するためには作成しているサイトの幅を調べてスライダーの幅をそれに合わせることがポイントです。
スライダーの挿入例
という私が管理しているサイトは「Simplicity」というテーマを使用しています。このテーマで上記サイトと同様の位置にスライダーを入れるためには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 –>