WordPress wiki風レイアウト

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で複製を作成して使いまわします

たいした内容でもないので都度手動で設定でもよいかもです