読者です 読者をやめる 読者になる 読者になる

TRANS

神戸のNPOやソーシャルビジネスの創業・起業のお手伝い

WordPressで動画サイトを作る。

WordPress

動画で学ぶWebアクセシビリティ Open Accessibility Library ProjectWordPressで制作しています。これを例にWordPressでどのように動画サイトを作るのかを紹介します。

記事ページ

パソコンに習熟した視覚障害者のインターネットの使い方などのシングルページ(single.php)がこのサイトのメインコンテンツです。

YouTubeプレーヤーはURLを、右側のサマリーはテキストを、直接カスタムフィールドに入力しています。例えば、こんな感じですね。

<h1><?php the_title(); ?></h1>
<?php echo post_custom('embed'); ?>
<h2>サマリー</h2>
<p><?php echo post_custom('sum'); ?></p>

また、サマリー下のカテゴリ(the_category(' ');)とタグ(the_tags('', ' ');)はテンプレートタグでそのまま出力しています。

YouTubeプレーヤーの下に位置するキャプションはWordPressの記事として扱っています。すべてdl要素でマークアップしています。

その下に、Twitter、Tumblr、はてなブックマークDeliciousのボタンがあります。方法は次のブログをそれぞれ参考にしました。

右側のサブメニューに関連動画があります。どのように動画を選ぶのかについてはいろんな方法が考えられますが、今回はWordPress Related Post for Japanese (関連投稿表示プラグイン)を使っています。

このプラグインで記事の本文(=キャプション)を分析し、関連記事を集めます。同時にカスタムフィールドに入力した動画のURLからYouTubeにあるサムネールを取得。記事とサムネールをli要素でマークアップし、出力するようにしています。やり方は、WP ニコニコ動画とYouTubeの動画のサムネイルを記事リストに表示する - ヒロカワズタイプ。あたりを参考にしてください。

動画一覧のページなどもこの方法を応用し、動画のタイトル(つまり記事のタイトルですね)とサムネールを出力しています。

フッターは、

  • テキストを直に打ち込んだり、
  • ページを出力したり(wp_list_pages('title_li=');)、
  • カテゴリを出力したり(wp_list_categories('orderby=ID&title_li=');)、
  • タグを出力したり(wp_tag_cloud('smallest=100&largest=231&unit=%&number=0');

というように対応しています。

ちなみに、右側でウロチョロしているTwitterのバッジは、有名どころですが、Twitter "Follow" Badge for your site / blogで生成しています。

トップページ

Introduction Movieの右側に人気記事というセクションがあり、これはWP-PostViewsというプラグインで実現しています。

テンプレートには、

<?php if (function_exists('get_most_viewed')): ?>
<ul>
<?php get_most_viewed('post',5); ?>
</ul>
<?php endif; ?>

こんな感じで。

また、お知らせ欄はTwitterを使っています。実はほぼすべて実装し終わったあとに、「あ、やべ、お知らせのこと考えてなかった」ということに気づき、仕方がなくTwitterを使った次第です(アーカイブの機能や更新性を考えると、手打ちするよりはマシだろうということで)。

Twitterのフィードをsimplexml_load_file関数で読み込み、substr関数やstrtotime関数で整形してやり、li要素として出力しています。やり方は、WebTecNote - [WP]wordpressでRSSを取得して表示を参考にしました。

まとめ

WordPressCMSとして使うときの心構えは「WordPressはブログではなく、フレームワークである」ということかなと最近思っています。とりあえず管理画面からデータを何らかの形で入力し、データベースに入れておけば、あとは何とかして引っ張ってこれる。加えて、楽をしたければ、プラグインを使えばなおよし。

そういう視点でWordPressを見てみると、便利な関数がいっぱいあり、データベースをGUIでいじれる面白いフレームワークだと思えるかもしれません。