Twentyseventeenで固定ページや個別投稿ページにサイドバーを設置する方法 | :: monologue ::

Twentyseventeenで固定ページや個別投稿ページにサイドバーを設置する方法

Capture single sidebar
個別投稿ページも2カラムに。
このブログの個別投稿ページや固定ページにもようやくサイドバーが表示できるようになった😃
WordpressのテーマをTwentyseventeenに変更してからずっと探していた、サイドバーを表示するわかりやすい方法がやっと見つかったのでメモ。

子テーマでブログの固定ページを表示した状態でブログのカスタマイズにアクセス。

テーマオプション
カスタマイズ > テーマオプションを選択
1カラムを選択
1カラムを選択

page.php(固定ページ)やsingle.php(個別投稿ページ)の初めの方の

    get_header(); ?>

の前に以下のように追加。

    
add_filter('body_class','my_body_class');
    function my_body_class($classes){
        $classes[] = 'has-sidebar';
        return $classes;
}
    get_header(); ?>

page.phpの下、

の後に

を追加する。



あとは子テーマのstyle.cssで .has-sidebar #secondary の幅を調整すればOK。
(↓ このブログの場合、こんな設定にしている。)


/* Layout */

.wrap {
    max-width: 1000px;
    padding-left: 2em;
    padding-right: 2em;
}

.has-sidebar:not(.error404) #primary {
    float: left;
    width: 71%;
}

.has-sidebar #secondary {
    float: right;
    padding-top: 0;
    width: 25%;
}

.error404 #primary {
    float: none;
}

↓ 参考にさせていただいたページ:


人気blogランキングへ