この間ブログのヘッダーやランダム記事紹介に『MetaSlider』を導入しました。他サイト様でも数え切れないほど紹介されている有名プラグインですが、少々バージョンが古かったり説明不足な感じが否めませんでしたので、補足的な意味合いも兼ねて書かせていただきました。
ランダム記事紹介にも〜と書きましたけれど、やりかたはヘッダーのものと一緒なので、同じように考えてください。
アップデートで管理画面の配置、やり方が変わる可能性があります
掲載当時の『MetaSlider』バージョンは3.6.7。Wordpressバージョンは4.9.1です。
ヘッダー画像を制作する
当ブログはイラストがメインなので、ヘッダーも大きめにして2000px × 500pxのサイズに設定し、オブジェクトはイラストレーターで作り、配置と仕上げをフォトショップで作りました。なぜこのサイズなのかと言えば、ツイッターやタンブラーなどのサービスではこの大きさが推奨されていることや、スマホ表示したときにヘッダーが小さくなりすぎません。
一枚絵ヘッダーならいいですが、もしオブジェクトを配置するレイアウトにする場合、個人的なコツとして、大きすぎるオブジェクトは極力使わないことです。何度か試行錯誤しましたが、大きめのオブジェクトだとPCで見たときに引き伸ばされてチープに感じましたので、小さいオブジェクトを散りばめる感じにしました。
なおMetaSliderは画像ごとにリンクを設定ができるので、このヘッダーの時は感想カテゴリーに飛び、このヘッダーの時はお問い合わせ専用の記事に飛ばして……といった具合で作ってみると面白いかもですね。
プラグインをインストールする
Wordpressの管理画面から「プラグイン」→「新規追加」で検索フォームに「MetaSlider」を入力してインストール。その後「有効化」を押してください。
ここまでは通常のWordpressプラグインのインストールと大差ないですよね。
そうしたら左のメニューバー下に「MetaSlider」の項目ができているはずなので、クリックしてください。
ヘッダー画像・表示方法を設定する
「スライドを追加」から「メディアライブラリ」を開き、作ったヘッダー画像を入れ込んでいきます。まとめて入れれば自動的に選択されますので、入れ終わったら右下の「Add to slideshow」を押してください。ヘッダー画像は総じて容量が重いでしょうから、反映されるまでじっくり待ちましょう。
ここで勘違いされやすい（というか自分が大いに勘違いした）のは、画面右側の幅指定。
「幅と高さのピクセルが指定されている？ パーセントで書けない？ これじゃあリキッドレイアウト できないじゃん！」ってなるかもしれませんが、ご安心を。幅と高さのピクセル指定はあくまでも縦横比の設定なので、MetaSliderを配置している親要素のcssに「width:100%」を指定すれば、ウインドウ幅によってヘッダー画像も自動的に縮小してくれます。また先に言ったように画像のリンク指定もできるので、設定しておきましょう。
なおスライダーの表示形式などを色々と設定ができるのですが数え切れないほど多いので、試行錯誤しては「Preview」を押して、試していってください。なおいじくる際は、初期設定の情報をあらかじめメモしておいたほうがいいです（新しく作っても、その設定は直前に設定した同じものが複製され、反映されているため）。
このブログで使っているヘッダーの設定です。ご参考程度に。
保存、そしてサイトに反映
最後に左上の「保存」を押せば完了です（流れで管理画面右下のボタンを押しそうになりますが、押してしまうとデータが消されてしまうので、間違えないように）。そして作ったスライダーをヘッダーとして反映させるには、
<?php echo do_shortcode('[metaslider id="スライダーのIDをここに記入"]'); ?>
これを希望する場所に貼り付けるだけ。バージョンによってはこのコードが出力されない場合があるので、その場合は上のコードをコピペしてください。スライダーのIDはバージョンによって画面上部にあったり、コードと一緒に書かれていたりとまちまちなので、とりあえず画面内の「id=〇〇〇〇」を探してください。
なお書き方の例はこのような感じ。
「外観」→「テーマの編集」→「header.php」を開いて記入します。
最後に：動作確認用ミラーサイトがあると楽
どのプラグインでも言えることですが、できることなら運用しているサイトそっくりのミラーサイトを作って、そちらでまず動作確認をするのをオススメします。実際に実装してから確かめないと感覚がわからなかったりすることもありますし、万が一動作不良になったら、元のサイトのソースコードをコピペしての復旧も容易ですからね。なお自分はメンドくさがりな人間なので、ごくたまにウィジェット に実装し、記事の数が必要なプラグインの場合に限り、メインサイトで動作確認とかしちゃったりしますけどね。ただ今回のようなソースコードをいじくるタイプのプラグインは、重大なエラーで復旧できなくなるリスクを考えて、ミラーサイトで導入テストをしたほうが無難。
自分もそうだったけど、「優しいいい人」「親切な人」になる（演じる）のは、「不幸になるから絶対やめておけ」と経験者は定期的に語る。
犯罪肯定や困っている人は見捨てろ……という意味ではなく、優しさを見せれば、「頼っても構っても甘えてもいい人」みたいに、過剰干渉や粘着、付きまとう人間が一定数いて、情緒不安定や発達障害系、孤立中高年、認知症の人がほとんど。
色々要求ふっかけられ、断ると嫌味や逆ギレされる「悪意のないタチの悪さ」には幾多も遭遇したから、ジーザスやブッダ並の鋼の心を持つ聖人でなければ、いい人ぶるのは精神すり減って不幸にしかならない。
犯罪肯定や困っている人は見捨てろ……という意味ではなく、優しさを見せれば、「頼っても構っても甘えてもいい人」みたいに、過剰干渉や粘着、付きまとう人間が一定数いて、情緒不安定や発達障害系、孤立中高年、認知症の人がほとんど。
色々要求ふっかけられ、断ると嫌味や逆ギレされる「悪意のないタチの悪さ」には幾多も遭遇したから、ジーザスやブッダ並の鋼の心を持つ聖人でなければ、いい人ぶるのは精神すり減って不幸にしかならない。
絵描き・物書き・Webデザイナー・HTML/CSSコーダーの京都生まれなウサギ好き。「ネチケット（ネットマナー）やネット・情報リテラシーの扱い」「批判と批難（非難）の混同・誤用」には少々シビアで、性別問わず好きなタイプは「反省と改善の努力を惜しまない人」。長文や理論を分析し、簡潔に分かりやすくまとめるのが得意なため、リアル・ネットを問わず、各所からご好評をいただいております。