再生バーが表示されない!!! WordPressのメディアプレーヤーよ動け!
WordPressのメディアプレーヤーが表示されない
先日WordPress（ 4.4.1 ）で、記事に音声を埋め込もうとしたんです。
mp3とか、wavとか、再生したいな、と。
ところが「メディアを追加」ボタンからファイルアップロードをして、
記事プレビュー見たら、メディアプレーヤーが表示されない！
Firebugで見ると
Visibility: hidden;
とかいってる！！
原因はテンプレートにありました。*1
詳しく書くと
</head>を閉じる前に、
<?php wp_head(); ?> を記述してるか？
</body>を閉じる前に、
<?php wp_footer(); ?> を記述してるか？
ここが抜けてなければ、hiddenにならないようです。
hidden解決 ＼(^o^)／
しかし、また別の問題が。
↓
メディアプレーヤーの再生ボタンが無いよ！！！
何も無いところを押せば、一応動作はします。
でもこんなもの公開できません。
ということで解決策を見つけました。
まじめに.htaccess
どうやら、使用しているサーバーの設定で、SVGを無視されてしまっていたようです。
以下の2行を.htaccessに追加したら、いいとのこと。*2
ばっちり表示してくれました。
WordPressへの音声掲載がうまくいかない方は、
ケロログという日本語のサービスがあるようですので、こちらを利用してもいいかもしれません。
英語でよければSoundcloudもいいかも。
今ドキのHTML改行コードならLF!!! 有名サイトの使用改行コードをプチ調査【LF vs CR vs CRLF】
新しいプロジェクトを始めるにあたって、 どの改行コードにすればいいのか気になったので、動向を調べてみました。
改行コードの種類
主な改行コードはこんなかんじですね。*1
改行コードってなに？おいしいの？という方はwikipediaの記事
をご参照ください。
調べてみた
右にならえ・多数派絶対正義が好きな大日本の国民として、有名サイトのトップページのソースを見てみました。
2016年3月4日現時点で、Alexaで日本からのアクセス上位のものなど雑に集めましたよ。
LF
グーグル先生と仲間たち http://google.com http://youtube.com http://blogger.com
アマゾンさん http://amazon.co.jp
Facebook http://facebook.com
ウィキペディア http://wikipedia.org
DMM （URL自重）
アメブロ http://ameblo.jp
ツイッター http://twitter.com
XVIDEOS （URL自重）
インプレス http://impress.co.jp
Apple http://apple.com
きーた http://qiita.com
Alexa http://alexa.com
CR
CRLF
FC2 http://fc2.com
ニコニコ動画 http://www.nicovideo.jp
価格.com http://kakaku.com
Microsoft http://microsoft.com
集計結果
集めたサンプル数が少なくてアレですが、
LF圧勝ですね。
AppleはCRかな？と思いきやLFでした。ライブドアはなぜCRにしたんでしょうね。 次からテキストエディタでhtml新規作成する時は迷わずLFで書き出すことにします。
あとがき。
インデントにtab派、スペース派がいるのと同様に、改行コードにもこだわりがあるのかなと思って調べてみました。（タブかスペースか https://qixil.jp/q/790）
案件によっては、改行コードが指定されることもあるよう*2ですが
HTMLでは、基本的にソース内の改行は無視される*3ので
おそらく個人の好みで選んでも大丈夫でしょう。
この記事が何かの助けになれば幸いです。
*1:改行コードの変換 UNIX(LF) Windows(CR+LF) MacOS(CR) | urashita.com http://urashita.com/archives/1296
*3:CSSのwhite-spaceプロパティで指定をする場合には、改行・スペースが表に出ます。 CSSプロパティ【white-space】ソース中の空白・Tab・改行の表示の仕方を指定する | ウェブランサー
