WordPress に全画面スライダーを表示プラグ イン ヘッダーをカスタマイズする

WordPressを利用してホームページを開くと、全画面写真で、勝手にスライドしてくれる方法です。

WordPress上で写真が勝手にスライドショー化するプラグインをスライダープラグイン、もしくはスライダーといいます。
ヘッダー画像をスライダー化する事で、ヘッダー画像が切り替わる。これを利用して、ホームページを立ち上げると全画面で写真が表示され勝手にスライドするおしゃれなホームページを作成する。そのままデジタルサイネージとしても利用できます。

これができると、簡易デジタルサイネージを無料で、自前で作成できます。

Twenty Sixteen

Twenty Sixteen

個別ページごとにサイネージ用のヘッダをカスタマイズする際に、このTwenty Sixteenが問題なく動作しました。

※WordPress公式テーマ
※私のポリシーは、無料で何とかして行く事。変なテーマをダウンロードして、良く分からないコードが仕込まれていたら嫌なので、必ず公式テーマを利用するようにしている。

基本的にスライダープラグインは、どれも使えそう。私はSmart Slider3がお気に入りです。下の説明はSmart Sliderで実現した例を解説しています。

Smart Slider 3

スライドのサイズやエフェクトの強弱など細かく設定できる
レスポンシブ対応、日本語非対応
テーマ埋め込み用のショートコードも作成してくれる。(PHPが分からない人にとって親切)
無料版でも、動画(youtube)を挿入可能
設定は英語だがGUIに優れていて、特に困る事はなさそう。

どういう兼ね合いかはわからないけど、全画面表示をした際に、Smart Slider 3はそのまま自動スライダーになるが、下のMeta Sliderは全画面表示にすると、矢印アイコンが出てきて手動でスライドを送る必要が出てくる。

動画再生をクリックすると、自動スライドには戻らない

Meta Slider

スライドのサイズやエフェクトの強弱など細かく設定できる
レスポンシブ対応、日本語対応
テーマ埋め込み用のショートコードも作成してくれる。(PHPが分からない人にとって親切)

Twenty Seventeenテーマの「テーマの編集」をクリックしheader.phpから、下記のコードを探し

この下にショートコードを配置 ※順番的にはスライダーを作成し、ID取得後行います。

これで、思った通り、全画面表示で勝手に写真がスライドするホームページができた。

スライダーを作成すると、IDが割り当てられます。このIDを変えていく事で、どのスライドを表示するか設定する事も可能です。

必要な枚数のJPEG画像を、新規作成したスライダーに登録します。

自動でスライドするようにします。設定1段目のAUTPLAYメニューから、AutoplayをEnableにし、1枚当たりの表示時間を決めます。このInterval設定により、切り替わりの時間が変わります。キャプチャーではデフォルトの8秒のままですが、サイネージとして8秒はとても短いです。私は60秒設定で利用しています。

指示表示、矢印などを表示したい場合はここで選びますが、自動的に切り替わるサインをイメージしたいのでそのままにしておきます。

ここは用途に応じるべきで、もし、サイネージにマウスをつけておけるのであれば、マウスがホバーした時だけ矢印を出す事も可能です。これができると、自分が説明したい、見せたいスライドに飛ばす事も可能です。

こちらも、完全なサイネージ目的なら必要ありませんが、支社の要望により、写真に説明する際、そのスライドで停止させて説明するシチュエーションがあるとの事でした。以下の設定にすると、マウスホバー時のみ再生・ストップボタンが表示されるので、通常はあまり気になりません。

写真の画素数によって、少し設定を見直さなければなりません。また、表示したい対象のディスプレイも検討する必要があります。最近のディスプレイは16:9が主流ですので、画像自体も16:9サイズで準備するのが良いかと思いますが、4:3でも何とかなります。設定がおかしいと、widthが横画面いっぱいにフィットしてしまい、文字の下が途切れてしまうという事態になります。

スライダー本体のサイズは16:9に設定

この設定にしておくと16:9の写真画像にしようが、4:3を持ってこようが、画面に入った写真が切れることなく表示できます。

結構気に入っているのですが、NEW SLIDEで複数のファイルを選択すると、一気にスライドを追加してくれます。

Create slide から Add Videoを選択

youtube 動画のURLを入力する事で、youtube動画のスライドになります。また張られたyoutube動画は、YouTube layerに格納され、youtube動画をクリックすると、プロパティが表示されます。

映像スタートする時間の調整

自動的に再生するか

ボリュームをどうするかなどが選択できます。映像の音声を流すことが可能です。私はVolumeをmute設定にし、不意に音が流れないようにしています。

できたサイネージをパスワード保護したい場合は、ログインページを作成します。Members OnlyなどでWordPressユーザでなければログインできないようにする事も可能ですが、パスワードだけで簡単に入れるようにしたいと思いました。

また、標準のパスワード保護機能だと、ヘッダに設定したスライドは見えてしまうのでパスワード保護の意味がありません。

そこで利用するプラグインが、

Password Protected

です。手軽にパスワードのみのログイン画面を作成できます。

設定の仕方はこちらに詳しく記載しています。

WordPressでホームページ表示する時に簡単なパスワードをつけたい ログインロゴも変更

注意 各ページごとに違うヘッダーを表示するこの方法はmusoテーマで行うと Server Internal Error 500が出ました。テーマごとに様々なPHPスクリプトが動いているのでそれと当たってしまうのだと思います。

ご自分で使いやすいテーマもあると思いますが、Smart Slider3をheader.phpに設定でき、なおかつ各ページに違うヘッダーを表示できるテーマは

Twenty Sixteen

でした。

上記方法では、header.phpを書き換えて利用するため、全てのページに同じスライダーが表示される事になります。これだと、一つのサイトに、一つのスライダーしか実現できません。これだと効率が悪いです。

そこで、ページごとに違うヘッダーを表示させる方法です。WordPress管理画面では完結できませんでした。サーバにログインする必要があります。

header.phpの場所

wp-content/themes/twentysixteen

ヘッダーをコピーします

テンプレートをコピーし、

ヘッダーに表示したいスライドを設定すれば完成です。

ヘッダーに設定する、ショートコードで、やり方は、header.php(テーマヘッダーに追記)に記載する方法と同じです。

get_header(‘01‘);

と、

header-01.php

が対応する。この文字列は任意。他の文字列でも構わないが網掛けの部分を同じにする事でそのパーツを呼び出す事ができる。

を追記する事で、テンプレートが選択できるようになります。

本社サイネージで作成している本社情報を、支社のサイネージに利用したい。さらに支社は支社で独自サイネージを追加したい場合の方法です。

本社サイネージは有無をいわさずに再生させ、その後支社で設定したサイネージを流しそれをループさせます。

これを実現するのは手間取ったのですが、vimeo(ビデオ投稿サイト)を利用する事で実現できました。

vimeo再生後の終了画面にお勧め動画staff pickupみたいな関係ない画面が表示されるのが問題なければ無料で実現可能です。この終了画面を消すためには月額700円の費用が発生します。

smart slider3 は、youtube動画とともにvimeoも再生可能です。youtube動画は動画をアップロードした時にURLが決まり、そのURLに違う動画を差し替える事は出来ませんが、vimeoなら実現可能です。

https://vimeo.com/

スライドを一枚決まったURLで再生するようにし、その動画が定期的に切り替わるようにしてしまえば、動画を差し替える事で、スライド側では操作なく動画がさし変わる事になります。

つまり、本社用のスライドを一枚準備しておき、指定したURLにする事で、動画は本社側で自由に入れ替える事ができます。

設定方法はほぼyoutube動画の設定と同じです。

youtube動画と同じようにアップロードする事が可能です。また困った事に、動画再生後おすすめ動画みたいなものが表示されるようになりました。これはサイネージ表示目的としては致命的です。

vimeoの無料版では実現不可能ですが、plus(月額700円)にする事で、終了画面をカスタマイズする事ができ、これにより、vimeo再生終了後も変なおすすめ動画が出る事が無くなりました。

動画の管理⇒埋め込み⇒動画の再生後から設定可能です。

動画の再生後、終了画面をカスタマイズする事ができます。

どうせなら、覚えやすいURLにしてしまえればと、カスタムURL設定したのですが、Smart Slider3に設定しようとすると、

This video url is not supported!!

と表示され、設定を完了させる事はできません。

vimeoで有料オプションを利用すると、

プライベートリンクを所有している者のみ

が選択できるようになりましが、これを利用すると、Smart Slider3側でエラーが発生し、利用する事は出来ません。秘匿性の高いものをサイネージ(社内教育用など)に利用する事は出来ませんね。

固定ページを作成、そこにブログパーツを貼り付けて、日々更新される天気予報をスライドに混ぜたいと思います。

Smart Slider3 には、固定ページ・投稿ページをスライドに設定する機能があります。

Create slideから、Add Postを選択します。

固定ページ・投稿ページがSELECT出来ますので、該当のページをSELECTするのみです。

余計なプラグインがあると、不具合を起こしたりセキュリティホールになったりするので、最低限のプラグインで運用しようと思います。Smart Slider3以外のプラグインは全て無効としました。

これにパスワード保護したい場合は、Password Protectedが加わります。

部分的に英語だが、使い初めには次に何の操作をしたらよいかがポップアップされ、初心者に使いやすい内容になっている。

スライドショーをyoutubeに加えるのは有料オプションになる。MetaSlider Proが必要

The MetaSlider Pro includes added support for:

YouTube & Vimeo スライド

スライドショーを複数作成し、それをつなげて再生という事は出来ない。

Youtubeビデオではなく、WordPress内部にアップしたビデオを再生可能

スライドに文字などを埋め込むレイヤー機能がない

スライドショーを複数作成し、それをつなげて再生できる機能はない

 

Responsive Photo Gallery Slider Plugin

複数のスライダを単一のページ/ポストに表示する単一のページまたはポストに、必要な数のスライダを配置する機能はあるけど、それをつなげて再生できる機能はない

ビデオ再生機能はない

SlideDeck

Responsive WordPress Slider Plugin

YoutubeとVimeoを使ってビデオスライダーを作成できる機能あり。

イメージ、ビデオ、およびテキストを含む混合コンテンツスライダを作成できる。

無料で使い始めるのにもメール登録が必要(メール登録して、送られてきたキーを入れても、No Key Foundとなって、使い始める事ができない)

スケジュールを作成する事ができる。スケジュールアドオンがある。

 

プラグインでスライダーを作る方法はこちらを参考にした

ワードプレスのヘッダー画像を超簡単にスライダーにする方法

テーマヘッダーのどこに追記すればよいかはこのサイトが参考になった

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

 

1件のコメント

コメントは停止中です。