けろら～こんにちは！サイト管理人のけろら～です♪＼(^▽^)／
当記事は、Cocoonスキン「ミックスグリーン」でトップページをカスタマイズした覚え書きです。（ほぼ自分用？）
- ページの表示形式を1カラム
- 新着、人気記事の表示
- 新着、人気記事をタブ切り替えで表示
- タグクラウド一覧を表示
前提
1.固定ページを新規作成し、「フロントページ」に設定
WP管理画面＞設定＞表示設定で固定ページをトップページに設定。
固定ページをトップページに設定する方法については、以下の記事にも書いています。
2.ページの表示形式を1カラム
エディター画面から、ページ設定を「デフォルト」から「1カラム（広い）」に変更。
トップページの構成
- ブログヘッダー（デフォルト）
- メニューバー（デフォルト）
- 通知エリア（Cocoon設定から追加）
- アイキャッチ画像（デフォルト）
- 検索窓（ウィジェットから追加）
- 新着・人気記事5件表示（カスタマイズ）
- メインカテゴリー（カスタマイズ）
- カテゴリー別の新着・人気記事（カスタマイズ）
- タグ一覧
- プロフィール（ウィジェットから追加）
上記パーツの中から、黄色背景でマーキングしている項目をカスタマイズ箇所として詳細をまとめます。
カスタマイズ箇所
人気記事・新着記事の5件表示
Cocoon機能「新着・人気記事」をショートコードで表示。
ブロックメニュー「Cocooレイアウト」の「2カラム」を利用して横並びにしています。
新着記事を5件表示
[[new_list count=5 arrow=1]]count=5（表示させたい記事数）
arrow=1（ボックス枠内に矢印を表示）
人気記事を5件表示
[[popular_list days=all rank=1 count=5 arrow=1]]days=all（全ての期間を集計）
rank=1（ランキングを表示させる）
count=5（表示させたい記事数）
arrow=1（ボックス枠内に矢印を表示）
メインカテゴリー
メインのカテゴリーをCocoon機能「ボックスメニュー」で表示させています。
[[box_menu name="ボックスメニュー"]]デフォルト色のオレンジをグリーン系に変更しました。
/*ボックスメニューの色を変える*/
.box-menu-icon{
color: #89C997;
}
.box-menu:hover {
box-shadow: inset 2px 2px 0 0
#89C997,2px 2px 0 0 #89C997,2px 0 0 0 #89C997,0 2px 0 0
#89C997;
} カテゴリー別新着＆人気記事
2カラムでカテゴリー別に「新着記事」と「人気記事」を表示し、タブで切り替えるカスタマイズで表示しています。
タブ切り替えカスタマイズは、以下の記事からお借りしています。
なお、自サイトに合わせるため、
参考記事のCSSを元に色やタブ部分を変更しています。
本来は、もっとラベルっぽいタブCSSなのですが、
当サイトでは、2カラムで表示にしているため、カテゴリー2列になると本来のラベルっぽさを上手く出せなかったため、四角タブを均等に離すだけのCSSにしました。
タグ一覧
WordPressプラグイン「Tag groups」のショートコードで一覧表示。
「Tag groups」は、タグのグループ分けとプラグイン独自のショートコードで表示も可能なプラグインです。
その他トップページ用のCSS
シェアボタン、フォローボタンを非表示にするCSSを固定ページのエディター画面から追加できる「カスタムCSS」に追加しています。
/*フロント固定ページのシェアボタン、フォローボタンを非表示*/
.sns-share{
display: none;
}
/フロント固定ページの投稿日を非表示/
.post-date{
display: none;
}
/フロント固定ページの更新日を非表示/
.post-update{
display: none;
}
/フロント固定ページの投稿者名を非表示/
.author-info{
display: none;
}
/フロント固定ページのパンくずリストを非表示/
.breadcrumb{
display: none;
}
/フロント固定ページのタイトルを非表示/
.entry-title{
display: none;
}WordPressの外観＞テーマエディターに記述してもいいんですが、フロントページのみのCSSを自分でわかりやすいようにするため、ページに追加しています。
最後に
以上、「Cocoonスキン「ミックスグリーン」でトップページをカスタマイズした覚え書き」でした。
主なカスタマイズは、以下4点
- 新着・人気記事5件表示
- メインカテゴリーをボックスメニューで表示
- カテゴリー別の新着・人気記事をタブで切り替え表示
- WPプラグイン「Tag groups」でタグ一覧を表示
このカスタマイズを行ったのは、この記事を書く2ヶ月ほど前です。
自分としては、思い通りな仕上がりにできたと大満足だったのですが、
つい最近CocoonのバージョンアップでCocoonのフロントページを「タブ切り換え」や「カテゴリごと表示」することが可能になったんですよね。
結構手間暇かけて自分でカスタマイズしたページなので、愛着もありますが新機能が出たなら是非試してみたい！！
その前に、、、やったことのメモしておこう！
と、、、覚え書きとして記事にしてます。完全自分用ですいません。(^_^;
あと、、、
Cocoonの新機能は近いうち試してみる予定ですが、
いつその気になるかはまだわかりません。(-。－;)
もしかしたら、結局そのままってのもアリかも。(￣∇￣;)ハッハッハ
それでは、また！けろら～でした♪＼(^▽^)／