wordpressでのスマホ対応webサイト制作・wpプラグイン・PHPプログラム・SNS活用・ 動画・bgmやテーマ曲アレンジまで考えるコラム!

【wordpressカスタマイズ】llorix_oneなどビジネストップ1カラムテーマで、カスタマイザーで入らない動画・オーディオを入れる

      2020/09/17

こんにちは、管理人@SS_mshpです。

今回は、人気の海外ディベロッパーのwordpressテーマで、動画やオーディオをトップに入れてみます。

ちょっと管理画面のカスタマイザーで対応できなかった点がありましたが、phpファイルを改造して対応できました。さっそく概要をみていきましょう。

トップ1カラムテーマってどんなのがあるの?

WPの管理画面からテーマを探すとき、『公式人気テーマ』みたいなのがあります。そこに最近では『トップ1カラムテーマ』みたいなのがあります。ビジネスサイトなどにやよく使われるレイアウト(トップページが幅広く一列)で


当サイトでも取り上げたHestia(当サイト内Hestia記事)


wallstreet(当サイト内wallstreet記事)


ビジネス向きなSydneyなど。他にもいろいろあります。これらは、無料版では多少制限されているとはいえ『管理画面カスタマイザーから、トップの1カラムレイアウトを作り込める』という特徴があります

トップページに入るパーツを、ディベロッパー側では『セクション』と呼んでいます(例・会社についてセクション、問い合わせセクションなど)。

トップ1ページレイアウトでの難点~オーディオや動画がカスタマイザーから入らない場合

サイトにオーディオや動画を入れて、コンテンツをリッチにすることがあると思います。その場合、サイトのトップページにあると『1クリックで見たり聴いたりできる』というメリットがあります。しかし・・

カスタマイザーを使って、トップページのセクションにオーディオを入れようとしたところ、音が出ません。


プレイヤーは表示されますが、ボタンやシークバーみたいなのが出てきません。

このカスタマイザーからは、YouTubeの埋め込みタグ(iframe)を入れても作動しないようでした。
(画像は、管理人が作ったフリー音楽素材サイトです。これはthemeisle系のテーマ(llorix-one)を親テーマに持ちます。フリー音楽素材サイトなら、トップページから1クリックで聴けるようにする点にはこだわりたいです。)

カスタマイザーから入らない動画・オーディオを1ページレイアウトのトップページに入れる方法

まずは、トップページのセクションを出力しているPHPファイルを探す

テーマ(llorix-one)の構成ファイルを調べて、『トップページのセクションを出力しているPHPファイル』を探します。

構成ファイルが多めのテーマでしたが、調査の結果『llorix_one_lite_our_story_section.php』というファイルが、『管理人がオーディオやYouTubeを入れようとしている、このサイトについてセクションを出力している』とわかりました。

セクションの本文後にあたる部分に、オーディオやYouTube動画のタグを記載する


あとは、divの閉じる位置に気をつけて(位置を間違うと表示されない)、『このサイトについてセクションを出力している関数の後』にオーディオタグを入れます。
ポイントはショートコードでない点です(ショートコードを使う場合は、PHPファイルに書いても大丈夫なように細工をします)。


このように、ボタンなどがアクティブになって、オーディオを再生できるようになりました

YouTube動画を埋め込む場合も

先ほどの位置にタグを入れます。


このように、管理画面のカスタマイザーからだと表示されなかったYouTube動画が表示されました。

その他のテーマでの対応方法

themeisle系新しめ(HestiaやSydneyなど)


『トップページに固定ページ』を指定した場合、セクションの他に固定ページが出ます。この固定ページに、オーディオや動画タグを入れる事により対応可能です。

wallstreet(トップページを記事一覧にすると、特殊セクションを表示)


こちらは、トップ1カラムは、『トップページを記事一覧』にしたときに出ました。『固定ページをトップページにしたときは2カラム』みたいな感じになり、themeisle系とは逆なので注意が必要です。
このテーマも、トップページのサービスセクションに、カスタマイザーからオーディオや動画のタグを入れても入らないので、PHPファイル改造が必要になります。

ポイント・あとがき・まとめ

  • カスタマイザーは操作が簡単だが、オーディオや動画が入らないことがある(トップのセクション)
  • トップのセクションを出力しているファイルを探す
  • そのファイル内にオーディオタグや動画タグを入れると、きちんと再生される形で出る
  • 固定ページ・記事ページを出している場合はそこに入れる

ポイントをまとめると、このような形になります。ちょっとテーマのファイル構造が複雑でしたが、無事にトップページのセクションにオーディオを埋め込むことができました。なるべくユーザーに余計なクリックをさせずにコンテンツを届けることができたと思います。

構成ファイルさえ把握できれば、テーマカスタマイザーでどうにもできない部分も改造できるという点を押さえていただけると思います。

*アトリエSS・web制作サービスページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

【カテゴリ】 - wordpressテーマ情報
【タグ】 - , ,

  関連記事

【お洒落1ページ型無料WPテーマ】onepressを使ってみてレビュー・特徴やカスタマイズ時のポイント

今回は、WPテーマを調査していて見つけた、良い感じの1ページ型テ ...

【WordPress2019公式テーマ】Twenty Nineteenってどう?→文字デカすぎ&PCも1カラムは難点・ブロックエディタとの親和性はok

今回は、WordPressバージョン5以上に更新したら勝手につい ...

WordPressでヒーローヘッダーを実装できる、カッコいいテーマ・Exoplanet(無料版・有料pro版あり)レビュー・カスタマイザー設定のしかた

今回は、テーマを使って、WordPressでヒーローヘッダーを取 ...

【おすすめWordPressテーマ】Maxwell~シンプル・洗練されたブログメディア向きテーマ・スライダーやレイアウト変更も簡単

今回は、管理人も別サイトで使ってみた、無料WordPressテー ...

【音楽サービス・バンド向けwpテーマ】元バンドマンのweb開発者が、WordPressテーマ『Rock Star』をレビュー

今回は、ネーミング的に音楽サービス・バンドなどに使えそうなWor ...

【WPカスタマイズ】子テーマさえ入れとけば大丈夫?なわけねーだろ!(親テーマに手を入れる・ファイルコピー適応させる羽目になる事例)

今回は、推奨されてるWPの子テーマについてですが、『結局親テーマ ...

【企業コーポレートサイト向けwpテーマ】Llorix One Liteが会社サイトに使える、4つの理由

今回は、海外wordpressのテーマで『企業コーポレートサイト ...