Cocoonで左にリンクメニューを表示して右に投稿を表示するwiki風レイアウト
一度設定したら終わりなのでやり方思い出せるようにの覚書きです
準備
以下のプラグインを導入します
・Hide Page And Post Title
タイトルを非表示にできます
・Insert Pages
固定ページを埋め込みで使いまわしできます
主にリンクメニューを投稿などに共通で表示させるために使用します
・WP Page Post Widget Clone
投稿の複製が作れます
リンクメニュー
固定ページでリンクメニューを作成
折りたたみはとりあえずCocoonのアコーディオン(トグル)を使用
Cocoon Childのスタイルシートをカスタマイズ
見出しのタイトルの文字色の変更が不明なので文字に直接属性を与える方法で運用しています…
/* アコーディオン カスタマイズ */
/* 全体枠 */
.toggle-wrap {
border: 0;
background: transparent;
}
.toggle-wrap .toggle-content {
transition: all 0.1s ease; /* 展開スピード */
}
/* 見出し */
.toggle-button {
text-align: left;
padding: 0 4px;
margin: 0;
border: 0;
background: transparent;
}
.toggle-button::before {
content: '\f196';
opacity: 1.0;
}
.toggle-checkbox:checked ~ .toggle-button::before {
content: '\f147';
opacity: 1.0;
}
/* 内容 */
.toggle-checkbox:checked ~ .toggle-content {
padding: 0 4px;
margin: 0;
border: 0;
transition: all 0.1s ease; /* 展開スピード */
}トグルを開いた状態で表示するため以下を追加
追加 CSS クラスにopen-toggleを入力で開いた状態で表示されます
/* デフォルトでトグルボックスを開いた状態にする */
$(document).ready(function () {
$('.open-toggle > input').prop('checked', true);
});メニューを白抜きボックスで囲う場合のカスタマイズ
/* 白抜きボックス カスタマイズ */
.blank-box {
border-width: 1px;
padding: 8px 4px;
margin: 0px;
border-radius: 0px;
}レイアウト
投稿などのレイアウトは画面全体をカラムで左右で分割して左にInsert Pagesの機能でリンクメニューを埋め込み左の幅を固定で220pxとかに設定する
これをテンプレートとしてWP Page Post Widget Cloneで複製を作成して使いまわします
たいした内容でもないので都度手動で設定でもよいかもです
