Twenty ElevenをCSプレイヤーズ向けに改造

CSオーガナイザーのwordpressテーマにTwenty-Elevenを利用して、調子が良いことから、他の4つのCSシリーズのコンテンツもすべてTwenty-Elevenのテーマに置き換えてユーザーインターフェースを統一することにした。

コンサドーレ札幌の選手記録をとりまとめているCSプレイヤーズに関して、Twenty-Elevenに変更したときの覚え書き。

  1. カスタムフィールドのTwenty-Elevenのレイアウトへの組み込み(テーマファイルの書き換え)。
  2. Twenty-Elevenの Tableタグを用いた表表示は縦線が表示されないようになっているのでCSSの書き換え。
  3. スマホ表示に対応。
  4. Disqusの導入
  5. JetPackの導入(SNSボタンの設置)

【手順】

(1) CSプレイヤーズの肝は、選手データをカスタムフィールドに格納して管理しているところ。このデータをちゃんと表示してくれるようにTwenty-Elevenテーマのファイルの書き換えが必要。

Twenty-elevenテーマの場合、single.phpを書き換えるのではなく、content-single.phpを書き換える。

content-single.phpに、カスタムフィールドを表示するようにしたテーブルタグを記述する。

上記のように書き換えると、ウェブ上で下記の様に表示される。

各ページには、Googleの検索窓が表示されている。

検索窓は、ウェブ上に下記の様に表示される。

(2) Twenty Elevenのテーブルは横線だけで、縦線が表示されない。プレイヤーズの個人データ表示画面では、縦線がないと不便なので、CSSを書き換える。

縦線を描くためには、style.cssの下記のところを書き換える。


下記の様に書き換える。

Twenty Elevenのth、tdタグ内は、デフォルトでは、左揃えになっている。試合出場データは、中央揃えにしたいので、classを追加する。
以下のソースコードの後ろにコードを追加する。

tabelタグ内で、class=”tableplayer01″指定すると、th、tdタグ内の表示を中央揃えに出来る。

(3) twenty-elevenはリキッドタイプのテーマなので、ブラウザの横幅に応じて可変する。そのため、スマホブラウザで見るのに、WPtouchプラグインはいらない。
(4) Disqusの導入は、プラグインをインストールすることにより簡単に導入できた。
(5) JetPackの導入は、プラグインをインストールすることにより簡単に導入できた。SNSボタンにhatenaブックマークを追加するには、sharekoubeプラグインを使用する。