「cocoon」で3カラムっぽく見えるようにしてみた

「cocoon」で、3カラムは標準装備されていません。

今回は、3カラムに変更できるかどうか挑戦してみました。

イメージとしては、左サイドバーのものを、

メインカラムを2分割する感じにします。

タブレットでは（1023px以下）

スマホでは（768p以下）

こんな感じになります。

新サイドバー用にウィジェットエリアを追加

ウィジェットエリアを追加するにはいくつか方法があるかと思いますが、今回は以下のサイトを参考にさせて頂きました。

＊ウィジェットエリアを追加する方法

function.phpに以下のコードを追記します。

add_action(
'widgets_init', 
function(){
register_sidebar(array(
'id' => 'widget_id001',
'name' => 'ウィジェットのエリア名',
'description' => 'ウィジェットエリアについての説明を書きます',
'before_widget' => '',
'before_title' => '<h3 class="new_widget">',
'after_title' => '</h3>',
));
}
);

＊見出しタイトルカスタマイズ用に、class「.new_widget」を付けています。

ウィジェットエリアを出力させる位置には、以下のコードを記述する必要があります。下の方であらためて説明します。

<aside>
<?php
if(is_active_sidebar('widget_id001')){
dynamic_sidebar('widget_id001');
}
?>
</aside>

メインカラムを2分割する

準備設定

「cocoon設定」→「全体」で、サイドバーの位置を「サイドバー左」に設定します。

「cocoon設定」→「カラム」のコンテンツ幅は、例えば「1000px」とか大きめに設定します。

「cocoon設定」→「カラム」のサイドバー幅は任意で。最少は「300px」です。

2分割のためのコード

「cocoon」には、メインカラムを2カラム3カラムに分割する機能が備わっています。これを使います。

例えば、メインカラムを2カラム（2:1）に分割したい時は

<div class="column-wrap column-2 column-2-3-2-1">
<div class="column-left">
<p>左側に入力する内容</p>
</div>
<div class="column-right">
<p>右側に入力する内容</p>
</div>
</div>

こんな感じになります。

ビジュアルエディタ

テキストエディタ

コード記述

では、実際に.phpファイルにコードを追加していきます。

使用するファイルは、「tmp/body-top.php」と「footer.php」なので、これらを子テーマにコピーします。

「tmp/body-top.php」の一番最後に<main　～>タグがありますので、その真下に

<div class="column-wrap column-2 column-2-3-2-1">
<div class="column-left">

を追加します。

「footer.php」の一番上に「</main>」の閉じタグがありますので、その真上に

</div>
<div class="column-right">
<aside>
<?php
if(is_active_sidebar('widget_id001')){
dynamic_sidebar('widget_id001');
}
?>
</aside>
</div>
</div>

を追加します。

これで、元々のメインカラムが、2分割されます。

全体を整える

この辺は、ご自身で行ったカスタマイズや、使用しているスキンによって変わってくるかと思います。

ここでは、「cocoon」デフォルトの場合を例に取ります。

cssの一例。

.column-wrap .column-left{
margin-left: -10px;
margin-right:15px;
margin-top: -39px;
padding-left: 15px;
padding-top: 25px;
}
.column-wrap .column-right{
 margin-left: 0px;
margin-right:-10px;
margin-top: -39px;
padding-right: 10px;
padding-top: 15px;
}
.new_widget{
background-color: #f3f4f5;
padding: 16px 10px;
margin: 16px 0;
}
#main{
margin-left: 0px;
}

@media screen and (max-width: 1023px) {
#main{margin-left: 10px;}
}

@media screen and (max-width: 768px) {
#main{padding: 0px;}
}

これが実行例です。→テスト

＊上の実行例では、「.blank-box」を使って枠線を追加しています。 その場合は、上の2分割のコードを

<div class="column-wrap column-2 column-2-3-2-1">
<div class="column-left blank-box bb-tab">
<p>左側に入力する内容</p>
</div>
<div class="column-right blank-box bb-tab">
<p>右側に入力する内容</p>
</div>
</div>

などにします。

合わせてcssにも追加します。