WordPressの画像・動画・音楽ウィジェットの追加方法。Fantastech(ファンタステック)Fantastech!!WordPressGoogleアドセンスSEO対策サイトマップお仕事のご依頼WordPressの画像・動画・音楽ウィジェットの追加方法。シェフWordPressのバージョンが4.8になり、色々と新しい機能や関数が追加されました。最近のバージョンアップでは、目に見える変化はあまりありませんでしたが、今回の4.8では「ウィジェット」が劇的に変化しています。ウィジェットが劇的に使いやすくなったこれまでのテキストウィジェットは、デフォルトでは「ただの箱」という感じで、その性質から、Googleアドセンスのコードをコピペアフィリエイトのコードをコピペなど、基本的にはコピペありきで使っていたと思います。画像や動画のアップロードをしたり、他の記事へリンクする場合は、HTMLコードを入力する必要があったからです。そこで、そういった機能をテーマに追加してくれるプラグインを使っていた方も多いと思いますが、WordPress4.8からはそのプラグインを使う必要はありません。音楽などのメディアを直接追加できるウィジェットアイテムがデフォルトで用意されているからです。メディアをウィジェットに追加する方法では、一体どのようにメディアを追加するのか、それぞれ確認してみましょう。画像ウィジェット左側にある「画像」という名前のウィジェットアイテムを、ウィジェットにドラッグ・アンド・ドロップし、「画像を追加」をクリック。保存されている画像か、新規で画像をアップロードし、保存。画像のリサイズや置き換えも可能です。表示サンプル追加した画像はこのように表示されます。(デザインはテーマによります)指定されているCSS画像ウィジェットには、下記の要素が直接指定されているので、親要素からはみ出すことなく、高さと横幅がレスポンシブに切り替わります。auto;}動画ウィジェット左側にある「動画」という名前のウィジェットアイテムを、ウィジェットにドラッグ・アンド・ドロップし、「動画を追加」をクリック。アップしている動画、これからアップする動画はもちろんのこと、URLを入力するだけでYouTubeやVimeoなどの動画を埋め込むことができます。後は「保存」をクリックするだけ。表示サンプル画像と同じく、動画もレスポンシブに埋め込まれます。その場で視聴することも可能。指定されているCSSサイズは読み込み時に動的に切り替わり、親要素にはwp-videoというクラスと下記のCSSが指定されます。auto;}また、要素に直接width:100%;が指定されています。音声ウィジェット左側にある「音声」という名前のウィジェットアイテムを、ウィジェットにドラッグ・アンド・ドロップし、「音声ファイルを追加」をクリック。音声ファイル(mp3など)を追加し、「保存」をクリック。表示サンプル音楽プレイヤーとして埋め込まれます。指定されているCSS指定されているCSSはこちら。30px;}高さは30px固定で、横幅いっぱいに表示されます。画像タイトルを「新曲配信のお知らせ」に音声ファイルのタイトルは未入力のようにすると、このように1つのセクションとして表示することができます。配置はドラッグ・アンド・ドロップで直感的に変更できますし、画像や音声ファイルを別のファイルに差し替えることもできます。複数のウィジェットに画像と音楽プレイヤーをセットで表示させて、日替わりで場所を変更したり、ABテストをしても面白いかもしれませんね。́)ゞカテゴリー:豆知識シェフこのサイト「Fantastech」を運営している人。WordPressテーマ「4536」の開発中にインプットした情報などを発信中。気軽にWordPressカスタマイズするために知っておくと良いこと2019/4/1もっと見るWordPressでブログを始める初心者向けノウハウ【保存版】2018/4/23もっと見る予約投稿でカスタムフィールドの値が削除されるのを防ぐ方法2018/1/24もっと見るエラー対策に!アプリーチのダウンロードボタンの変更方法。2017/7/14もっと見る画像にaltは必要?SEO効果は?WordPressの自動挿入方法は?2017/7/11もっと見るAMPページの目次が原因でエラーに!見出しに「AMP」はダメ?2017/7/4もっと見るAMPページの本文が空になる主な原因と効果的な対処法。上に表示された文字を入力してください。Schemaマークアップ(構造化データ)エラーはSEOに不利?AMPページの本文が空になる主な原因と効果的な対処法。「ページを開けません。サーバが見つかりません」の原因は?PHPのstr_replaceとpreg_replace(正規表現)の使い方WordPressで会話風の画像とテキストをコピペで簡単表示!WordPressのユーザー名・パスワードを確認・変更する方法は?Facebookページのユーザーネームが登録・変更できない原因は?ローカル環境のWordPressサイトを本番環境へ移行する方法WordPressオリジナルテーマを管理画面で更新可能にする方法。Jobsの導入方法や注意点などカスタムデータ属性でCSSフレームワークを作ろうきたぞ、国内初の流体シェイプ国内初となる流体シェイプをデザインに取り入れたWordPressテーマ「4536」を公開しました。