WordPressショートコードの[ video ]〜[ /video ]。

WordPressの投稿で、mp4などの動画を埋め込みたい場合がある。上の猫の動画のように。

ところが、WordPress投稿画面の「メディアを追加」から動画を追加しようとすると[ video ]〜[ /video ]のショートコードが記述がされる。

（※[ video ]と[ /video ]の部分の半角スペースは、このページでショートコードが動作しないように入れているもの。）

例えば…

ショートコード。

[ video width="960" height="540" mp4="https://igawa.co/wp-content/uploads/2022/08/cat.mp4" ][ /video ]

となるが、このショートコードでは自動再生ができない。また、意図しないコントローラーも出てくる。

WordPressショートコードを使わない方法。

HTML

<video src="xxxxx" autoplay="" muted="" playsinline="" loop preload="none"></video>

この記述であれば、ショートコードを使わない、かつWebスタンダードな書き方となる。

オリジナルテーマ、フリーテーマなどに関係なく、動画が反映がされる。

実装の際は、xxxxxの箇所に、動画のパスとファイル名を入れればOK。

例）「〜/cat.mp4」など。

（※wordpress.comの「ブロックエディター」では動作しない。「旧エディター」では反映される。）

ショートコードの場合。

ショートコード。

[ video width="960" height="540" mp4="https://igawa.co/wp-content/uploads/2022/08/cat.mp4" ][ /video ]

（※[ video ]と[ /video ]の部分の半角スペースは、このページでショートコードが動作しないように入れているもの。）

結果。

ショートコードなしのプレーンなHTMLの場合。

HTML

<video src="xxxxx" autoplay="" muted="" playsinline="" loop preload="none"></video>

WordPressのショートコードは非常に便利で、当サイトでもよく使っているが、videoの時だけはちょっと使いにくい。

（無料で使えるWordPressに不満があるということでは決してなく、むしろ感謝の方が遥かに大きい。）

動画圧縮サイトとウィルスチェックサイト。

WordPressのアップロード制限。

また、WordPressやサーバーにはファイルのアップロード制限（5MBなど）があるので、5MB以上の動画の場合はファイルを圧縮し、5MB未満にする必要がある。

動画編集ソフトを使う技術や時間がないという場合は、オンラインでも登録不要かつ無料で利用できるサイトがいくつかある。

サイトによってはファイルの出力サイズも調整できる。

以上、参考になれば幸いです。

※Webデザインは実務数年、職業訓練校講師数年、フリーランス数年、計15年以上のキャリアがありますが、一気にがぁっと書いているので「です・ます調」ではありません。（元々はメモ書きでした。） ※事実や経験、調査や検証を基にしていますが、万一なにかしら不備・不足などがありましたらすみません。お知らせいただければ訂正いたします。 ※写真は主にUnsplashやPixabayのフリー素材を利用させていただいております。その他の写真や動画もフリー素材やパブリックドメイン、もしくは自前のものを使用しております。

WordPress 関連メモ。

• Simple Image XML Sitemapの使い方の例。画像サイトマップをGoogleへ。
• WordPressのリビジョン。正しく表示されないときの復元の例。
• PerplexityとWordPressの名前と意味合い。著作権と知的財産。
• WordPressのセキュリティ対策。脆弱性の疑問と強化設定。
• WordPressのテーマ。有料と無料の違いと、ウェブサイトの例。
• Googleアナリティクスでの自分のアクセスを除外。【WordPress】
• WordPressの不要なメディアファイルを削除する方法。Media Cleaner。
• WordPress 画像のキャプション表示を削除したい場合。

• WordPressのログインパスワードを変更する方法。セキュリティ対策にも。
• WordPressのトップページがindex.phpでもfront-page.phpでもhome.phpでも問題はない。
• reCAPTCHAの導入例と、バッジ（マーク）をCSSで非表示に。
• WordPressから届く「モデレートしてください」を止めたい。
• WordPress投稿の目次が消えたら！Table of Contents Plusの表示方法。
• 「データベース接続確立エラー」の対処。wp-configに問題がないとき。
• WordPressの投稿IDを確認したい時は、ここを見るのが簡単。
• WordPressのセキュリティをオンラインチェック、「Sucuri」。
• WordPress pタグを投稿記事から削除する1行のコード。
• アイキャッチ画像（WordPressのサムネイル画像）がない場合、いらない場合は、これで解決。

• さくらインターネットのコンテンツブーストの設定方法。（数ステップで。）
• さくらのサーバーからさくらのサーバーへの引越しで、「DNSゾーンが既に登録されています」のエラーが出たとき。
• WordPressで動画が再生されない！ときの対処。
• WordPressの投稿とカスタム投稿を振り分けたい時はこれで解決。（条件分岐できない時の対処方法。）
• 辿ったリンクは期限が切れています！？ WordPressテーマのアップロードエラー対処。
• PHPの配列の括弧の違いは？WordPressでよく見るarray()と[]。
• Contact Form 7に確認画面がない！の対処方法。CSSか固定ページで。
• WordPressの引越しは、ささっとAll-in-One WP Migrationで。
• WordPressの検索ハイライト表示の仕方。（functions.phpに追加するだけ。）
• 引越しなどで、WordPressのメディアが消えた場合の、Moving Media Library。