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を書き換える。

[php]

ここに下記のテーブルタグのコードを追加する。

[/php]

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


【選手データ】

選手データ用のタグ記述


【コンサドーレ札幌での成績】

必要な年度分のタグ記述

※(不参加)は、コンサドーレ札幌がその大会に参加していないことを意味します。


(注意事項)このページに掲載の内容は公式のものではありませんので、間違って入力しているものがあるかもしれません。あしからず。



[/php]

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

[php]

[/php]

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

[php]


【他のサイトで検索してみる】


Google


※うまく検索できない場合は、名字と名前を分けてみるなど工夫して見て下さい。



[/php]

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

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

縦線を描くためには、style.cssの下記のところを書き換える。
[php]
.entry-content td,
.comment-content td {
border-top:1px solid #ddd;
padding: 6px 10px 6px 0px;
}
[/php]

下記の様に書き換える。

[php]
.entry-content td,
.comment-content td {
border:1px solid #ddd;
padding: 5px 5px 5px 5px;
}
[/php]

Twenty Elevenのth、tdタグ内は、デフォルトでは、左揃えになっている。試合出場データは、中央揃えにしたいので、classを追加する。
以下のソースコードの後ろにコードを追加する。
[php]
caption, th, td {
font-weight: normal;
text-align: left;
}
[/php]

[php]
caption, th, td {
font-weight: normal;
text-align: left;
}
.tableplayer01 td {
font-weight: normal;
text-align: center;
}
[/php]
tabelタグ内で、class=”tableplayer01″指定すると、th、tdタグ内の表示を中央揃えに出来る。

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

記事の共有: