Cocoonカスタマイズ 〜HARU channelを作ってみよう〜【その5:サイドバー(ウィジェット)・プロフィール】

アイキャッチ画像 Cocoonカスタマイズ

WordPressの無料テーマ「Cocoon(コクーン)」。

それを使って、私が当サイト「HARU channel」をどのようにカスタマイズしてきたのか、その過程をご紹介しています。


前回は、固定ページをフッター部分に表示させたところまで進みました。

HARU channelトップページ

これを最終的に、以下の状態にまでカスタマイズしていきます。

HARU channel トップページ

今回は、

  • サイドバー(ウィジェット)
  • プロフィール

について、説明していきます。

サイドバー(ウィジェット)

サイドバーとは

サイドバー

サイドバーとは、上の画像の赤線で囲っている縦長の領域のことです。

Cocoonでは、デフォルトでサイドバーが設定されており、管理画面の「ウィジェット」というページでサイドバーに設定する項目を編集できます。


では、そのウィジェットの編集方法について説明しましょう。

ウィジェットの編集方法

  • STEP1
    ウィジェットの編集画面へ
    外観→ウィジェット

    外観→ウィジェット」をクリックします。


    ウィジェットの編集

    デフォルトでは、このようにいくつかのブロックが設定されています。


  • STEP2
    不要なブロックを削除
    ウィジェットの編集
    1. ブロック右側の「▼」をクリックして設定画面を開く
    2. 「削除」をクリック

    これで、ブロックを削除できます。

    (ブロックの内容を確認して、残したいものがあれば残せばいいのですが、パッと見で何のブロックなのか分かりにくいので、私は全て削除しました。)


  • STEP3
    必要なウィジェットを挿入
    ウィジェットの編集

    左側の「利用できるウィジェット」のエリアから、必要な項目をドラッグします。


  • STEP4
    「完了」をクリックし、ウィジェットを設置
    ウィジェットの編集

    例えば、「[C] 新着記事」を右側のサイドバーのボックスの中にドラッグすると…
    詳細の設定画面が開きますが、何もせずに「完了」をクリックすることで使用することができます。

    (設定次第で見た目も変わるので、興味のある方は色々といじってみてください。)


    ウィジェットの編集

    今回は、上の画像のようにウィジェットを設置しました。
    これで、サイドバーは完成です。



当サイトで実際に使用しているウィジェット一覧は以下のようになっています(2022/01時点)。

ウィジェット

【サイドバー】

検索ボックス
プロフィール
人気記事…この項目は、アクセス数のデータが反映しないと表示されないので、本記事のサンプルサイトでは代わりに「新着記事」を設定しています。
カスタムHTML…アドセンス広告を設定しており、詳細に関しては別記事で解説しています。

【サイドバースクロール追従】

目次…記事をスクロールしていくと、途中から目次が固定され、記事を読み進めながらも目次を常にクリックできる状態になります。

プロフィール

ここからは、サイドバーに設置したプロフィール欄の、管理画面での設定方法をご紹介します。

プロフィールの設定

管理画面の「プロフィール」ページでの設定方法を説明します。

  • STEP1
    プロフィールの編集画面へ
    ユーザー→プロフィール

    管理画面の「ユーザー→プロフィール」をクリックし、プロフィールの編集画面に移動します。

    以下、大まかな記入・設定箇所を説明していきます。



  • STEP2
    名前
    プロフィールの編集

    ニックネーム(必須)
    …任意の名前を入力します。今回は、「はるか」と入力します。

    ブログ上の表示名
    …サイドバーに設定したプロフィール欄などで、実際に表示される名前を選択します。
    ユーザー名か、ニックネームに入力した名前を選択できます。
    ユーザー名はWordPressにログインする時などに使用しますので、セキュリティの観点からもニックネームを選択した方がいいでしょう。



  • STEP3
    ◯◯◯ URL
    プロフィールの編集

    プロフィール欄に載せたいSNSがあれば、URLを記載しましょう。
    自動的にSNSのアイコンが出てきます。
    今回は、私のTwitterのURLを記載します。



  • STEP4
    プロフィール情報
    プロフィールの編集

    任意の自己紹介文を記載します。



  • STEP5
    プロフィール画像
    プロフィールの編集

    選択」をクリックして、プロフィール画像をアップロードしましょう。
    240×240pxの正方形の画像がお勧めです。

    必要事項を入力したら、「プロフィールを更新」をクリックします。
    (他にも入力事項はありますので、興味のある方は色々と触ってみてください。)




ウィジェットの設定

管理画面のウィジェットのページにて、プロフィール写真を丸くする設定を行うことができます。

  • STEP1
    ウィジェットの編集画面へ
    外観→ウィジェット

    外観→ウィジェット」をクリックします。


    ウィジェットの編集

    先ほどのウィジェットの編集画面より、「[C]プロフィール」の部分を編集します。


  • STEP2
    プロフィールのウィジェットを編集
    ウィジェットの編集
    1. ブロック右側の「▼」をクリックして設定画面を開く
    2. 「画像を円形にする」にチェックを入れる
    3. 「保存」をクリック



【参考】「未登録のユーザーさん」と表示される場合

以上の設定をして、トップページを見てみると…

HARU channelトップページ

このように、プロフィール写真などが反映されていると思います。
しかし、ログアウトしてトップページを見てみると…↓↓


HARU channelトップページ

なぜかプロフィール欄が「未登録のユーザーさん」となる場合がしばしばあるようです。
スマホなどで見ても同じ。


こうなった場合の対処方法をご紹介しますので、よければ参考にしてください。

プロフィール欄の表示
  1. Cocoon設定」→「投稿」タブに移動
  2. 関連記事設定→投稿関連情報の表示」の「投稿者名の表示」にチェック
  3. 変更をまとめて保存」をクリック

これで、ログアウトしてもきちんとプロフィール欄が表示されます。
(ちなみに、チェックを入れてなくてもプロフィール欄がきちんと表示される場合もありますので、原因は謎です…。笑)


以上のカスタマイズをして、サイトは以下のような状態になりました。

HARU channelトップページ

プロフィール写真も設定して、よりブログサイトらしくなりましたね。


次回は、

  • Cocoon設定

について解説します!

コメント

タイトルとURLをコピーしました