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ファイル改造が必要になります。

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

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

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

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

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

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

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


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

Message

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

  関連記事

fc2ブログでSSL対応開始!設定方法や注意点をチェック!

今回は、管理人も使っている大手ブログサービス(fc2)で、ブログ本体もS …

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

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

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

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

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

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

ワードプレスサイト高速化失敗例(ページスピードスコア低下)→最後にjsで読み込むCSS

今回は、管理人が重いワードプレスサイトを高速表示しようとして、失敗した事 …

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

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

有名サービス・企業ectで使われる印象的な色を、CSSで使えるカラーコードで覚えよう(色商標についても)

今回は、身近なサービスとかに使われている色って、カラーコードだとどうなっ …

baserCMS(ベーサーシーエムエス)サイト制作2~テーマCSSやパーツPHP編集でデザイン

今回は、前回ちょっとインストールしたbaserCMS(ベーサーシーエムエ …

webサイトがカッコ良くなるCSS~RGBAカラーやグラデーションで微妙な色合いも表現

今回は、webサイトをカッコ良く見せるために必要な基本技術・CSS(スタ …

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

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