WordPressのバージョンが4.8になり、色々と新しい機能や関数が追加されました。
最近のバージョンアップでは、目に見える変化はあまりありませんでしたが、今回の4.8では「ウィジェット」が劇的に変化しています。
ウィジェットが劇的に使いやすくなった
これまでのテキストウィジェットは、デフォルトでは「ただの箱」という感じで、その性質から、
- Googleアドセンスのコードをコピペ
- アフィリエイトのコードをコピペ
など、基本的にはコピペありきで使っていたと思います。
なぜなら、画像や動画のアップロードをしたり、他の記事へリンクする場合は、HTMLコードを入力する必要があったからです。
そこで、そういった機能をテーマに追加してくれるプラグインを使っていた方も多いと思いますが、WordPress4.8からはそのプラグインを使う必要はありません。
- 画像
- 動画
- 音楽
などのメディアを直接追加できるウィジェットアイテムがデフォルトで用意されているからです。
メディアをウィジェットに追加する方法
では、一体どのようにメディアを追加するのか、それぞれ確認してみましょう。
画像ウィジェット
左側にある「画像」という名前のウィジェットアイテムを、ウィジェットにドラッグ・アンド・ドロップし、「画像を追加」をクリック。
すでに保存されている画像か、新規で画像をアップロードし、保存。画像のリサイズや置き換えも可能です。
表示サンプル
追加した画像はこのように表示されます。（デザインはテーマによります）
指定されているCSS
画像ウィジェットには、下記の要素が直接指定されているので、親要素からはみ出すことなく、高さと横幅がレスポンシブに切り替わります。
element.style {
max-width: 100%;
height: auto;
}動画ウィジェット
左側にある「動画」という名前のウィジェットアイテムを、ウィジェットにドラッグ・アンド・ドロップし、「動画を追加」をクリック。
すでにアップしている動画、これからアップする動画はもちろんのこと、URLを入力するだけでYouTubeやVimeoなどの動画を埋め込むことができます。
後は「保存」をクリックするだけ。
表示サンプル
画像と同じく、動画もレスポンシブに埋め込まれます。もちろん、その場で視聴することも可能。
指定されているCSS
サイズは読み込み時に動的に切り替わり、親要素にはwp-videoというクラスと下記のCSSが指定されます。
.wp-video {
max-width: 100%;
height: auto;
}また、要素に直接width:100%;が指定されています。
音声ウィジェット
左側にある「音声」という名前のウィジェットアイテムを、ウィジェットにドラッグ・アンド・ドロップし、「音声ファイルを追加」をクリック。
音声ファイル（mp3など）を追加し、「保存」をクリック。
表示サンプル
音楽プレイヤーとして埋め込まれます。
指定されているCSS
指定されているCSSはこちら。
element.style {
width: 100%;
height: 30px;
}高さは30px固定で、横幅いっぱいに表示されます。
活用例
- 画像タイトルを「新曲配信のお知らせ」に
- 音声ファイルのタイトルは未入力
のようにすると、このように1つのセクションとして表示することができます。
配置はドラッグ・アンド・ドロップで直感的に変更できますし、画像や音声ファイルを別のファイルに差し替えることもできます。
複数のウィジェットに画像と音楽プレイヤーをセットで表示させて、日替わりで場所を変更したり、ABテストをしても面白いかもしれませんね。
以上、ご参考までに！(｀･ω･´)ゞ
