Affinger4の「この記事を書いた人」をカスタマイズしてみた。CSS紹介とID1ではない管理者を表示する方法

投稿日:2017年9月18日
更新日:

author

Affinger4にプロフィール紹介機能「この記事を書いた人」が追加されたので、CSSをカスタマイズしてみました。

この記事は、カスタマイズの為にコピペで使えるCSSを4つ公開するのに加えて、Affinger4のサイト管理人紹介ウィジェットで「ID1」ではない管理者を表示する方法についてをご紹介します。

例によって例の自分のサイト用にカスタマイズしたことを公開するだけです

今回カスタマイズする内容

デフォの見た目を次のような感じでCSSカスタマイズ

After 改造後

ちなみに改造前はこちら

before-author

Before 改造前(デフォ)

カスタマイズ内容

  • 枠線を太くして、縁を角丸に変更。
  • 背景に色を付けてみた(分かりづらい)
  • HOMEボタン や SNSボタンが小さかったので、少し大きくした

ちょっとだけ柔らかいイメージになってればマル

【追記】
現在はCSS含めてカスタマイズ内容を変えました。少しだけ複雑なので別途ブログに書きます。

「この記事を書いた人」カスタマイズ用 CSSコード

次のコードを「子テーマの Style.css 」にコピペしたら見た目が変化すると思います。書き込む場所は「最終行」でオッケー

ついでに違うパターンも作ってみたので、宜しければどうぞ

タブだけ吹き出し風になったタイプ

tab-onlyfukidashi

色を変えて、アクティブタブの下線を消したタイプ

non-under

 

ソースコード上でコメント入れてる所を変更して、オリジナル感だしちゃってください。

更新しても見た目が変わらない場合は、キャッシュクリアしたらOKです。

「Ctrl + F5 」など

吹き出しタイプをさらに進化させてみたカスタマイズ

fukidasi-2

 

yotta
リクエストありましたらお気軽にお問合せよりご連絡ください。面倒じゃないタイプで他と被らない感じなら作って公開しますん。

カスタマイズは以上です

サイト管理人の紹介ウィジェットで「ID1」ではない管理者を表示する方法

AFFINGER4の新たなアップデートによって、"サイトの管理者"を表示するプロフィール機能も備わりました。

ウィジェットなので、「11_STINGERサイト管理者紹介」をサイドバーや任意の場所に設置するだけで、ワードプレス内で設定しているプロフィールを表示できます。

stinger11-author

しかし、AFFINGER4公式ページに書いてある通りで「デフォルトの管理者(ID1)のユーザー」しか表示することができません。

そこで ID1ではない、ID2の管理者などをウィジェットに指定する方法を書きます。子テーマに少し手を加える事で対応できました。

「サイト管理者紹介」ウィジェットで、ID2の管理者を表示してみる

手順は次の通り

  1. 表示させたい管理者のID番号を確認する
  2. 親テーマから「st-author-master.php」を子テーマフォルダへコピーする
  3. st-author-master.php内に記載してある数字「1」すべてを「自分が表示させたい管理者ID番号」へ変更する

管理者のユーザーID(番号)を確認する

管理者IDは、確認したいユーザー名の上にマウスオンすると確認できます。

check-author-id

長々とリンク先のアドレス表示された中に「user_id2」や「user_id3」などが出てくると思います。user_idの隣に書いてある数字がそのユーザーのIDです。後で使います。

ID1のまま使用している場合や、何らかの理由によってはuser_idが表示されないかもしれません。その場合は、ID表示するプラグインなどがあると思いますのでそちらをどうぞ。

st-author-master.phpを子テーマフォルダへコピーして、数字変更

まずFTPを使って、AFFINGER4の親テーマから「st-author-master.php」を探します。

続いて「st-author-master.php」を、使用中のAFFINGER4「子テーマフォルダ」へコピーします。st-author-master.phpが親テーマと子テーマそれぞれに存在する状態にします。

FTPソフトか、サーバーで用意されているFTP操作を使えばよろしいかと
yotta

ファイルをコピペする事で、ワードプレスの子テーマ編集でも st-author-master.php が操作できるようになります。読み込みも子テーマフォルダの方を読み込みます。

あとはファイル内に書いてある数字1を「自分が表示させたい管理者ID番号」へすべて変更したらOK!

yotta
一旦メモ帳などへソースをコピペして、任意の番号へすべて置換するのが漏れもありませんし早いと思います

参考:変更箇所は全部で11個

以上で指定した管理者IDのユーザーが表示されるようになります。

この方法の注意点

  1. 使っているAFFINGER4子テーマによっては、仕様が異なる場合があるかもしれません。
  2. 今後のAFFINGER4アップデートなどで、親テーマのst-author-master.phpに変更が加わった場合、子テーマの内容が反映されます。
  3. 使ってないので詳細不明ですが、AFFINGER4で用意されている外注さん用プラグインなどで影響があるかもしれません。

おわり

-Affinger4

関連記事とスポンサーリンク

Copyright© 前略、ヨッタさんへ , 2018 All Rights Reserved.