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

blog

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

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

*子テーマ使用を前提にしています。
*function.phpを編集しますので、バックアップを忘れずに。

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

カラム1

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

カラム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>

こんな感じになります。

*「左側に入力する内容」は、従来の<main~>~</main>の中身をそのまま書きます。これは、「tmp/body-top.php」と「footer.php」の、2つの.phpファイルにまたがっています。

*「右側に入力する内容」には、上の「新サイドバー用にウィジェットエリアを追加」の項目の、出力させる方のコードを書きます。

 
他には、1:1、3:1、1:2などの分割比率が搭載されています。
 
*その他の分割比率用コードの確認方法。
新規投稿ページで「ビジュアルエディタ」の「タグ」からプルダウンで分割の比率を選択すると、「テキストエディタ」の方にコードが表示されます。

ビジュアルエディタカラム分割

テキストエディタカラム分割コード

コード記述

では、実際に.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にも追加します。

 

wordpressの管理画面から、function.phpなどの.phpファイルを編集した場合、うまく動作しない時があります。

その際は、ftpソフトなどでいったん該当ファイルをローカルに保存して、そこで編集を行います。

編集した.phpを、ftpソフトなどで再度アップロードする事で正常動作する場合があります。

.phpを編集する際は、サクラエディタ が、エラーが少ないのではないかと思います。

上のエディタで保存する場合は、文字コード「UTF-8」、BOM「チェック無し」がエラーが少ないのでは無いかと思います。

sakuraediter