Cocoonのプロフィールでtwitter(X) を目立たせるカスタマイズ

アイキャッチ画像の通り、

• 目立つTwitter(X)ボタン

• 「＞詳しく」のリンク

設置していきます。

Cocoonプロフィール カスタマイズ準備

以下のコード、

remove_filter('pre_user_description', 'wp_filter_kses');

を子テーマのfunctions.phpに追記します。
これで、プロフィールボックスにHTMLを追加できるようになります。

子テーマやfunctions.phpが不明の場合は以下の記事で大丈夫なはずです。

【Cocoon】子テーマの全内容と使い方（カスタマイズに便利なPHPファイルも解説） | ツッチーブログ

cocoonプロフィールにTwitter(X)ボタン設置

自分が設定しているプロフィール文面が以下です。

<br><p>週休3日制を強行した元モンスター社員。絶対定時退社の末、セミリタイア。<a href="http://baacash.com/profile/">>詳しく</a></p>
<p><a class="btn btn-blue" href="https://twitter.com/n_fx">Twitter (X)</a></p>

ダッシュボード＞ユーザー＞プロフィール＞プロフィール編集

ボタンの部分は、

<a class="btn btn-blue" href="https://twitter.com/n_fx">Twitter (X)</a>

です。
通常のTwitterボタンは「プロフィール」の画面でURL入力をやめることで消します。

Cocoonに設定されているボタンを設置しています。
「btn btn-grey」とか好きな色設定できます。

記事作成に使える拡張スタイル。ボタン編。

cocoonプロフィールにリンク設置

ついでに「詳しく」リンクも入れます。

<a href="http://baacash.com/profile/">>詳しく</a></p>

ですね。
詳しいプロフィールのページに飛ばしています。

cocoonプロフィール CSSで中央寄せ

デフォルトは多分、文章が左に寄ってるはずです。

/サイドバープロフィール中央寄せ/
.sidebar .author-box .author-description {
text-align:center;
}

style.cssに上記を追加すると、中央寄せになるはずです。