WordPress Cocoon

【Cocoon】プロフィールボックスをJIN風にカスタマイズ

WordPressテーマ「Cocoon」のカスタマイズ備忘録です。以前にプロフィールボックスの「SANGO」風カスタマイズの記事を書きましたが、今回は「JIN」風のカスタマイズをやってみたいと思います。

サイドバーではこんな感じ↓

記事下メインカラムでの表示↓

記事下メインカラムのスマホ表示↓

「JIN」と全く同じではなくて少しアレンジも加えています。CSSのコードは以下の3つに分けて紹介します。

  • サイドバーのみに表示する場合
  • 記事下のみに表示する場合
  • サイドバーと記事下の両方に表示する場合

それではいってみましょう〜!

プロフィール欄を表示するための準備

カスタマイズの前にプロフィール情報を設定しておいてください。まだ設定していない場合はSANGO編の記事で手順を紹介しているので参考にどうぞ↓

functions.phpの編集

「JIN」風にカスタマイズするためには、プロフィールボックスを表示しているテンプレートを修正する必要があります。

Cocoonの親テーマの「lib」フォルダ内にある「html-forms.php」というファイルにプロフィールボックスを表示させるためのコードがありますが、そのコードを子テーマで修正するには「functions.php」で上書きします

functions.phpは少しでもコードが間違っているとサイトが真っ白になります。編集は慎重にやりましょう。

以下のコードをそのまま子テーマの「functions.php」にコピペしてください↓

少し長いですがコピペするだけなので、ちゃんと1文字残らず選択できているかだけ気を付けてください。

サイドバーだけにプロフィールボックスを表示する場合

サイドバーだけに表示する時は、以下のコードをCSSに追加してください↓

各部のカラーなどはコード内に記載したコメントを参考にお好みで変更してください。

「SANGO」風の時と同様に、アイコンはCocoonのデフォルトだと大きさにバラつきがあるので「Font Awesome」で代用できるものは変更しています。

プロフィールのウィジェットの設定

CSSを追加したらウィジェットを設定すればプロフィールが表示されます。

管理画面のメニューから「ウィジェット」のページを開いて「サイドバー」に「[c]プロフィール」を追加します↓

タイトルは未入力のままで、「肩書きラベル」だけ入力します。あと「画像を円形にする」のチェックを入れて「保存」ボタンを押せば完了です。

 

サイドバーを確認してみると、こんな感じで表示されていると思います。

 

FeedlyとRSSボタンを非表示にしたい場合

FeedlyとRSSのボタンはプロフィール設定に関係なく表示されるので、消したい場合は下記のCSSを追記すればオッケーです。

記事下だけにプロフィールボックスを表示する場合

次は記事下のメインカラムだけに表示する場合です。以下のコードをCSSにコピペしてください↓

記事下のウィジェットを設定する

管理画面のメニューから「ウィジェット」のページを開いて「投稿本文下」に「[c]プロフィール」を追加します↓

サイドバーの時と内容は同じですが、ウィジェットを置く場所は「投稿SNSボタン下」や「投稿コメントフォーム下」など好きな場所で大丈夫です。

「保存」ボタンを押したら適当なページを開いてちゃんと表示されているか確認してみてください↓

サイドバーと記事下の両方に表示する場合

両方に表示する場合は、以下のコードを使用してください。

プロフィール詳細のボタンを表示する場合

こんな感じにプロフィールページへ飛ばすリンクをボタンにすることもできます。

やり方は「SANGO」風カスタマイズ記事の最後の部分で紹介していますので参考にしてみてください↓

まとめ

今回は「JIN」風のカスタマイズ方法のご紹介でした。「SANGO」風のカスタマイズと混ぜたりしてもオリジナリティが出て面白いかと思います。

皆さんも挑戦してみてくださいね!ではまた〜♪

WordPress
\記事が役に立ったらシェアしてね/
うぇぶあしび

comment

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