[WordPress]Twenty Fifteenの記事一覧を2カラムにしてみる覚書

リファクタリングした結果functions.phpとstyle.cssだけになって、「これ公式テーマ申請無理だよな？」って気がしたので蹴られる前にコードを公開してみようかとおもいます。

何はともあれ完成品

カラム数を2つに増やしただけのお手軽カスタマイズです。

微妙に最大幅が広がってたりしますが、まぁそこまで気にするほどじゃないかなと思います。

2カラムに変更するためのコード

追加する（編集する）ファイルは

• style.css
• functions.php

の2ファイルだけです。

style.cssに書く内容

※子テーマとして使うことを前提に書いてます。

（オススメしませんが）そのまま使う場合は頭の6行が不要です。
[css]
/*
Theme Name: Kiyomizu
Template: twentyfifteen
Description: This theme has 2column post list. Customized Twenty Fifteen Theme
*/
@import url(‘../twentyfifteen/style.css’);

@media screen and (min-width: 59.6875em){

.blog .hentry,
.archive .hentry {
width: 45%;
display: inline-block;
margin-left: 4%;
margin-right: 4%;
vertical-align: top;
}

.blog .site-main,
.archive .site-main {
padding-left: 8%;
padding-right: 8%;
}

.blog .page-header,
.archive .page-header {
margin-left: 0;
margin-right: 0;
}

.blog .hentry:nth-child(2n+1),
.archive .hentry:nth-child(2n+2) {
margin-left: 0;
}
.blog .hentry:nth-child(2n+2),
.archive .hentry:nth-child(2n+1) {
margin-right: 0;
}
.blog .hentry:nth-child(2) {
margin-top: 0;
}

}
@media screen and (min-width: 87.6875em){
body:before {
width: -wetbkit-calc(50% – 360px);
width: calc(50% – 360px);
}
.site {
max-width: 2000px;
}
.sidebar {
max-width: none;
}
}
[/css]

functions.phpに書く内容

全文掲載している状態で2カラムにすると非常に残念なレイアウトになるので、functions.phpで表示する文字量を削ります。
[php]
add_filter( ‘the_content’, ‘double_column_archive’ );
function double_column_archive( $content ) {
if ( is_home() || is_archive() ){
global $post;
$length = 110;
$content = mb_substr( strip_tags( $post -> post_content ), 0, $length );
$content = $content . "…";
}
return $content;
}
[/php]

以上！

シンプルでいじりがいのありそうな雰囲気の新テーマ「Twenty Fifteen」。

色んな子テーマが登場すると楽しそうですね。