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

リファクタリングした結果functions.phpとstyle.cssだけになって、「これ公式テーマ申請無理だよな?」って気がしたので蹴られる前にコードを公開してみようかとおもいます。 何はともあれ完成品 カラム数を2つ […]

広告ここから
広告ここまで

目次

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

    何はともあれ完成品

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

    screenshot

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

    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」。

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

    広告ここから
    広告ここまで
    Home
    Search
    Bookmark