Cocoon本体を3カラムレイアウトにします。ネットで「Cocoon 3カラム」と検索してよく出てくる情報はブロックを使って本文を3カラムレイアウトにするというもの。しかし、Cocoonテーマ本体を3カラムレイアウトにする方法はネットで調べても出てきません。（ほんとにでてきません。）
Cocoonを3カラムにする設定はあるのか
Cocoonを3カラムにする設定は結論からいうとありません。開発者からもないと発表されています。
残念ながら、Cocoonに3カラム機能はありません。
3カラムについて | Cocoonテーマに関する質問 | Cocoon フォーラム
というのも、3カラム機能を付けることで、動作チェックする必要がある設定が大幅に増えて、開発コスト（主に労力）が段違いにかかるからです。
Cocoonは、なるべくシンプルな実装にして手軽に機能追加できるようにしたいので、2カラムしかない仕様をとっています。
3カラムにする機能がないので自作する必要あります。これより以下からCocoonテーマ本体を3カラムにする方法を解説します。
Cocoonを自力で3カラムレイアウトにする方法
完成のイメージ
イメージとしては以下のようにする予定です
<div id="content-in" class="content-in wrap">
<main id="main" class="main" itemscope="" itemtype="https://schema.org/Blog"></main>
<div id="sidebar" class="sidebar nwa cf" role="complementary"></div>
<div id="sidebar2"></div>
</div>sidebar2を追加します。気になるのはこのhtml構造が正しいかどうかということだと思いますが、個人的には問題ないと思います。問題ないと思う理由は記事のコンテンツがmain内にあればいいという考え方です。それさえ守っていればあとは好きにしていいと思います。この考え方があっているかどうかはわかりませんがわたしはそれでよしと判断しました。
1.ウィジェットエリアを追加する
サイドバー2のウィジェットエリアを追加します。
以下のコードをfunctioons.phpに追加します。
add_action('widgets_init', function ()
{
register_sidebar(array(
'name' => 'サイドバー2',
'id' => 'sidebar2',
'description' => 'サイドバー2のウィジットエリアです。',
'class' => 'your_class_name',
'before_widget' => '<aside id="%1$s" class="widget widget-sidebar widget-sidebar-standard %2$s">',
'after_widget' => '</aside>',
'before_title' => '<h3 class="widget-sidebar-title widget-title">',
'after_title' => '</h3>',
));
});このコードを記述するとWordPressのウィジェット管理画面で「サイドバー2」というウィジェットエリアが出来ているのが確認できると思います。
2.親テーマのsidebar.phpを子テーマにコピーしてサイドバー2エリアを追加するためのコードを追記
/wp-content/themes/cocoon-master/sidebar.php
上記ファイルを子テーマにコピーします↓
/wp-content/themes/cocoon-child-master/sidebar.php
コピーしたsidebar.phpに1番目の見出しで作成したサイドバー2のウィジェットエリアを設置するためにコードを追記します↓
<!-- 省略しています -->
<?php
////////////////////////////
//サイドバー追従領域
////////////////////////////
if ( is_active_sidebar( 'sidebar-scroll' ) ) : ?>
<div id="sidebar-scroll" class="sidebar-scroll">
<?php dynamic_sidebar( 'sidebar-scroll' ); ?>
</div>
<?php endif; ?>
</div>
<div id="sidebar2">
<?php
dynamic_sidebar('sidebar2');
?>
</div>
<?php endif; ?>どれを追記したのかというと<div id=”sidebar2″><?php dynamic_sidebar(‘sidebar2’); ?></div>を追記しています。追記するところはsidebar.phpの最後の閉じタグのあとです。
3.CSSの調整
Cocoonはメインカラムの幅とサイドバーの幅を決めると自動的にコンテイナーの幅が変更されるような仕組みになっていますが3カラムレイアウトにする場合にはそのスタイルを無視する必要がありますのでカラム関係のCSSは子テーマのスタイルで上書きする必要があります。
以下はCSSの例です。
#content-in{
display: grid;
grid-template-columns: 250px minmax(508px, 788px) 340px;
grid-template-areas: "left main right";
gap: 20px;
}
#sidebar2{
grid-area: left;
}
#main{
grid-area: main;
width: auto;
}
#sidebar{
grid-area: right;
width: auto;
}
#sidebar2 aside {
background: #fff;
padding: 20px;
}
@media screen and (max-width: 1200px){
#content-in{
grid-template-columns: minmax(508px, 1fr) 340px;
grid-template-areas: "main right" "left left";
}
}
@media screen and (max-width: 992px){
#content-in{
grid-template-columns: 100%;
grid-template-areas: "main" "left" "right";
}
}CSSのグリッドを使ってレスポンシブに対応させています。サイドバー２は左に配置されるようにしています。ただこちらのCSSは基本的な枠組みのみ定義しているので自分が目指しているものに近づけるためにはさらなる調整が必要です。さらなる調整とはCSSもそうですが「Cocoon設定」の「カラム」タブにある幅も調整します。つまりもともとの設定とうまく適合するように「カラム」の値とCSSを調整する必要があるということです。
Cocoonテーマ本体を3カラムにする方法まとめ
Cocoonテーマ本体を3カラムにするにはfunctions.phpでサイドバー2のウィジェットエリアを定義して、sidebar.phpにウィジェットエリアを追加するコードを追記します。そのあとはCocoon設定ではカラム制御できないので子テーマのスタイルシートでカラムのスタイルを上書きします。
このほかにもやり方はあるかもしれませんが、わたしとしてはこのやり方が一番簡単なのかなーと思いました。CSSに関してはもう少し煮詰める必用があるかなーという印象です。Cocoon本体の3カラムに関しては情報が全くないのでこの記事が参考になればなと思います。
コメント