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

   

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

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

   

こんにちは、管理人@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ファイル改造が必要になります。

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

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

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

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

*お問い合わせフォームページに移動します。webリニューアル・ロゴ・記事・wordpress化などでお力添えできます。

■LINEできいてみる(アカウントがある方)

(タップ・またはqrでアプリを起動してください。回答できる内容には限りがありますが、なにか課題解決のきっかけができるかもしれません。)


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

Message

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

  関連記事

bootstrapのcolクラスをとphp関数を使って、3列レイアウトとブログ2カラムを切り替える

今回は、1ドメイン・1サイトで『トップページやコーポレート部分は1カラム …

【CSS3でおしゃれなサイトに】画像(星空)をくるくる回す(キーフレーム・transform:rotateなど)

今回は、CSSを使って、動きのあるサイトを作ってみたいと思います。 絵は …

ワードプレスじゃない通常サイトをSSL(暗号化通信)化するときの、htmlソース編集方法

今回はプラグインで一発SSL化ができるワードプレスではなく、通常のweb …

オウンドメディア&コーポレートサイトを、1サーバー1ドメインで構築する手順

今回は、ワードプレスなどを使って、汎用性のある複数サイト組み合わせを行い …

【ワードプレスサイトで更新情報表示】phpで取得と、プラグインで表示どちらが良い?

今回は、ワードプレス系のサイトで、トップページとか任意の部分に『ブログ部 …

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

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

【PHPで条件分岐】wordpressのサイトで、ページごと(固定・記事・カテゴリ・複数ページ)に、表示される内容を変えたいっ!

今回は、wordpressのサイトで使われるPHPプログラムの条件分岐で …

【セキュリティ・脆弱性対策2018】wordpressでサイバー攻撃されやすいファイルってどんなのがあるの?

今回は、wordpress利用者にも気になる『サイバー攻撃』についてです …

ワードプレス派が覚えると便利なPHP~投稿記事・固定ページ指定して表示/非表示

今回はワードプレスサイト制作で使えるテクニックです。 PHPで使う条件分 …

ワードプレス・手動インストールってどうやるの?(自動インストールがない、あるいはエラーの場合)

今回は、サーバーの簡単インストールなどで、エラーになって入らない場合の対 …