wordpressスマホ対応サイト・wpプラグイン・検索体験最適化・SNS・ 動画・bgmやテーマ曲を駆使して、リアルビジネスへの集客を達成するためのコラム!

   

wordpress屋のマルチメディアコンテンツ制作読んどけ☆コラム

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

      2018/06/12

こんにちは、管理人@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化などでお力添えできます。

【カテゴリ】 - webサイト制作 【タグ】 - , ,

Message

メールアドレスが公開されることはありません。

  関連記事

【マテリアルデザインCSSフレームワーク】Materializeで、カッコいいビジネスサイト(静的HTML)を作る

今回は、フレームワークを使ったサイト制作を行ってみます。 利用するのは『 …

【別に止めなくてOK】wordpressサイトなどに、アメブロ・fc2など無料ブログの更新情報を表示して連携する方法

今回は、『無料ブログにすべきかwordpressにすべきか』という疑問に …

ワードプレス記事一覧ページの『本文からの抜粋』を表示する関数と、その文字数の調整方法をチェックする

今回は、ワードプレスの文字を出力する関数についてです。 レイアウトをいじ …

【html5 videoとcss】ヘッダーやメインビジュアル背景に動画を使ってインパクトを与える方法

今回は、サイト閲覧者にインパクトを与えやすい・最近のトレンドになっている …

【ワードプレステーマカスタマイズ】勝手にヘッダーの追加CSSで入ってくるマージンを消したいんですけど

今回は、ワードプレスのテーマカスタマイズしてオリジナルデザインにするとき …

自社サイト(wpホームページ制作請負)のプチリニューアルしました(ヒーローヘッダー風&重なるメニュー)

今回は、ちょっと時間があったので、管理人のお仕事用サイト(wpホームペー …

wordpress構成ファイルのxmlrpc.phpを無効化する方法【実は攻撃されやすい】

今回は、wordpressの構成ファイルで、ちょっとクセのある『xmlr …

ワードプレスの子テーマって、なぜ必要なの?

今回は、ワードプレスサイトを作るときにたまに話題になる『子テーマ』につい …

ワードプレスサイトを独自ドメインで公開するまでの流れや注意点

今回は、最近何件か対応させていただいている、ワードプレスサイト制作につい …

ワードプレスCSSで色が変わらない時『functions.phpやテーマカスタマイザー』もチェック

今回は、ワードプレスのサイト制作をするとき、ひっかかりそうなポイントにつ …