この記事は公開から9年、最終更新日からも6年経過しています。内容が古くなっている可能性があります。

概要、特徴

＜概要＞このたび、とあるクライアント様からのご依頼で、Web制作をさせて頂きました。
　WordPressによる　動画コレクションサイト(メディア系というのかな？)　になります。
　クライアント様は匿名のため、全く同じ構造で立ち上げた(←ほぼ勢いです！)私の動画セレクションサイトで紹介します。
＜特徴＞PC版とスマホ版のトップページの表示コンテンツが異なるなど大幅なカスタマイズを行っています。

サンプルサイト兼実際に運用開始したサイト

Music Video Selection | ユニークな音楽動画を厳選

構築サイトのスクリーンショット

◆PC用サイト(上部のみ)


◆スマホ用サイト(上部のみ)

担当範囲

・コンテンツを除くほぼ全ての枠組み
　テーマ選定、カスタマイズ、各種プラグイン導入、レスポンシブ対応など

構築環境

・私の所有しているサーバ上でサンプルサイト構築後、クライアント様環境に移行

技術的なメモ

・テーマ；Dynamic News Lite　を元に子テーマ化しカスタマイズ。
・PC版とスマホ版のトップページの表示コンテンツを別のものにする。is_match関数の利用(参考サイト；ユーザーエージェントでスマホとタブレットとOSとそれ以外を切り替える方法)
・PC版サイドバーのレイアウトの工夫
　　本テーマだとクライアント様ご要望のサイズの広告が配置できなかったため、CSSでレイアウト工夫(テーマ選定時に考慮すべきでしたが…)
・PC版とスマホ版で異なるサイズの広告を配置、またGoogleの規約(広告の配置に関するポリシー – AdSense ヘルプ)でスマホは１ページあたりの広告数が少ないので、PC版とスマホ版別々に設定可能なようにウィジェットエリアを追加設置
・おすすめ記事はプラグイン「Related Posts by Zemanta」利用
・人気記事ランキングはプラグイン「WordPress Popular Posts」利用
　また、人気記事には順位表示を付与しました。
　参考；[WordPress]記事ランキングをウィジェット部分に順位付きで表示する
・サイドバーの人気記事は「週間」「月間」「総合」の３種類をタブ切り替え表示するプラグイン「Tabber Tabs Widget」を利用
　参考；[WordPress]複数のウィジェットをタブ化するプラグイン「Tabber Tabs Widget」
・最新記事は最初からインストールされたものだとアイキャッチ画像が表示されないので「Newpost Catch」を利用
・「Facebookいいね」、「twitterつぶやく」、「LINEに送る」等のボタンを自作(参考サイト；WordPress : Twitter / Facebook / はてぶ / LINE の大きめシェアボタンを自作する | Hinemosu)
・コンテンツ表示を、個別ページ(is_single()関数で判定)、固定ページ(is_page()関数で判定)か、それ以外(カテゴリ表示等のアーカイブ系)によって変更
・スマホ版トップページでは、おすすめ、人気、新着をタブ切り替え表示、さらに人気記事は、週間、月間、総合をタブ切り替え表示。
　参考；[WordPress/JQuery]2段のタブメニューをプラグインを使用せずに実装する
・アイキャッチ画像のサイズ追加(参考サイト；関数リファレンス/add image size – WordPress Codex 日本語版)　※過去画像のサイズ変更は「AJAX Thumbnail Rebuild」を利用
・グローバルメニューはウインドウ幅が広い時は、１段、狭くなったら、２段表示に切り替え。またPC版とスマホ版で別々のメニューを設定可能。
・最終的に不要となったが、製作途中で、あるボタンを押すと、ある領域が追加表示され、もう一度押すと、その表示がなくなるという方法も使用していました。
・各種レイアウト調整　※プラグインで実現できる機能でもレイアウト制約のため、php直接記述などで対応した箇所多数。
　　コンテンツにより異なる高さとなった要素の高さをそろえる方法なども適用→(参考)[CSS]CSSで高さの異なる要素を同じ高さに揃える方法
・速度調査と改善
　　速度調査サイト１；GTmetrix | Website Speed and Performance Optimization
　　速度調査サイト２；PageSpeed Insights
　　速度改善は、画像圧縮プラグイン(EWWW Image Optimizer)、画像読み込みタイミング変更プラグイン(Lazy Load)、.htaccessファイル変更(参考サイト；WordPressサイト用の.htaccess例 | dogmap.jp)などにより実施。
　　※「WP Super Cache」「DB Cache Reloaded Fix」等のキャッシュ系は今回、PCとスマホ版でコンテンツが異なるため副作用が発生し使用をやめています→良い方法が有るかもしれませんが。
・jetpack利用でtwitter/FB連携実施。

最終的な表示確認端末/OS

・Mac OS 10.10(実機)
　　Safari、Chrome、Firefox
・Windows 7(実機=Mac のBootcampで実現)
　　IE 11、Chrome、Firefox
・iOS8(実機)
　　iPad mini
・iOS8(iOSシミュレータ),Chrome開発者ツールによるエミュレータ
　　iPhone 3GS、iPhone 4、各種Android端末

最後に

今回、WordPressテンプレート内に直接php記述などを行い、特にスマホ版トップページではテンプレートとは全く異なるコンテンツを表示することが出来たのでとても勉強になり自信にもなりました(やれば出来る系の)。
そして、色々な表示形式、コンテンツ切替等とにかく、とにかく、たくさんの試行錯誤を行いました。
有難うございました。
今後とも宜しくお願いします。
//////////