今回は前に宣言しておりました、サイドバーをカスタムしていきたいと思います。
現在のデザインとスキンの比較図を用意しましたのでまずはそちらを確認してみましょう。
左の「検索」「最近の投稿」「アーカイブ」「カテゴリー」があるのが現在のデザインで、右の管理者を紹介しているデザインがスキンのサムネイルになります。
初期状態ですと大分野暮ったいですね。
ですので、現在のスキンに合わせつつ、もう少しおしゃれになるようにカスタムしていこうと思います。
1.プロフィール情報を表示させる
2.検索、アーカイブはとりあえず外す
3.最近の投稿がサムネイルありのデザインに変更する
4.カテゴリーのデザインを変更する
以上4つをスキンに合うようにカスタムしていきたいと思います。
それではレッツ・ゴー！
サイドバーのカスタムがどこで出来るのかを知る
サイドバーの変更は「Cocoon設定」ではなく「外観」の「ウィジェット」で行います。
かなりたくさんの項目がありますね。。。
でも今回はサイドバーだけどカスタマイズするので、今は触れないでOKです。
色々な箇所に、色々なカスタマイズが出来るんだな…という感じで今は覚えていてください。
サイドバーの編集に関してですが、こちらのウィジェット画面でももちろん編集出来ますが、自分のサイトを見ながら編集したいという場合は「ライブプレビュー」が可能ですので、画面上部のウィジェット（タイトル）横の「ライブプレピューで管理」をクリックしてください。
そちらをクリックすると下記の図のように、左にメニュー、右にプレビュー画面が表示されます。
今回はこちらのライブプレビューを利用してカスタマイズしていきましょう。
1.プロフィールを表示させる
まずは左のメニューからサイドバーをクリック
すると、メニュ内容が変わります。試しに一番上の「ブロック▼」をクリックしてみましょう。
「wp:search」と書いてありますね。これは検索窓の事です。
今回はサイドバーの最上段に「プロフィール」を追加したいので、まずは項目下にある「ウィジェットを追加」をクリックします。
すると追加可能なウィジェットの一覧が表示されますので、そこから「プロフィール」を探し出し「+ プロフィール」をクリックします。
プレビュー画面を確認するとプロフィールが追加されているかと思います。
あとは、掲載順を変えるために「並び替え」をクリックし一番上に表示されるようにドラッグし「完了」をクリック。
問題がなければ最上段にある「公開」をクリックして終了となります！
これで画面上部にプロフィールが表示されるようになりました。
ちなみにプロフィールの編集ですが、ダッシュボードの「ユーザー」 > 「ユーザー名」をクリックすると、ユーザー情報を編集することが出来ます。
Twitterやfacebookを追加したい場合は、指定箇所にURLを入力してください。
また、プロフィール情報、プロフィール画像も同ページで編集することが出来ます。
編集後は忘れずに「ユーザー更新」をクリックしてくださいね！
2.検索、アーカイブはとりあえず外す
これはとても簡単ですね。
今あるものを削除すれば良いだけですので。
プロフィール追加と同じように「ウィジェット」の「ライブプレビュー」から該当のプロックを探します。サートはさっき見つけたので今回はアーカイブです。「ブロックHTML」内にアーカイブとしっかり記載されてますね。
あとは、こちらのブロックを削除するだけですので、展開したブロックの下部に「削除」とありますので、そちらをクリックすればOKです。
3.最近の投稿がサムネイルありのデザインに変更する
最近の投稿画像にサムネイルを追加した場合は、プロフィールを追加したようにウィジェットから「新着情報」を追加して上げればOKです。
ウィジェットを追加すると設定画面が表示されますので、お好みの表示数、表示タイプになるように設定をし「完了」をクリック。
あとは、プロフィールを追加した時と同様に掲載順を「並び替え」で変更し「完了」 ⇒ 「公開」をクリクすれば作業終了となります。
おっと、忘れてはいけませんね。前に設定されていたサムネイルなしの「最近の投稿」を削除しなくてはいけませんね。
例によって、「最近の投稿」のHTMLが記載されているブロックを見つけ「削除」します。
4.カテゴリーのデザインを変更する
さて、ここまで来るとカテゴリーのカスタマイズも何をするのか想像がつくかと思います。
はい、そのとおりでございます。
「ウィジェット」から「カテゴリー」のウィジェットを追加し、詳細設定。
順番を入れ替え、不要になった旧デザインのブロックを削除。
そして「公開」の一連の流れでカスタマイズ終了となります。
最後に
どうでしたか？
今回はサイドバーをスキンのサムネイルに近づけられるようにウィジェットにてカスタマイズしてみました。
先にも書きましたが、ウィジェットの編集は基本的に同じ流れになっていますので一度やってみると、初心者でも簡単にカスタマイズ出来るかと思います。
まだ、サイドバーを編集したことが無い方は、これを機に挑戦してみてはいかがでしょうか？
ウィジェットの追加作業は基本的に、サイドバー、フッターなどの掲載箇所に関わらず基本的な作業は変わりませんので、公開前に一度触ってみることをおすすめします。