悩む人SWELLでプロフィールの作成と表示方法を教えてほしいです。
こういった悩みにお答えします。
今回の記事を読むことで以下のようなプロフィールを表示できるようになります。
サイドバーに表示されています。
本記事で解決できること
- サイドバーにプロフィールを表示させる方法が分かる
- 記事下部にプロフィールを表示させる方法が分かる
- 著者アーカイブページにブログパーツで作成したコンテンツを表示させる方法が分かる
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。
【SWELL】プロフィールの作成・表示方法【リスクについても話す】
SWELLで用意されているプロフィールエリア
- [SWELL]プロフィール
- この記事を書いた人
- 著者アーカイブページ
[SWELL]プロフィール
以下のようにサイドバーにプロフィールを表示できます。 ※ ウィジェットを使用しているのでサイドバー以外にも表示できます。
作成前の準備
管理画面メニューから、「外観」＞「カスタマイズ」を選択します。
サイドバーから、「ウィジェット」を選択します。
ウィジェットから、「共通サイドバー」を選択します。
共通サイドバーから、「ウィジェットを追加」＞「[SWELL]プロフィール」を選択します。
サイドバーの表示させたい位置にドラッグ&ドロップで移動させます。
作成
以下の設定を行います。
- 名前
- 役職（肩書き）
- プロフィール文
- アイコン画像
- プロフィール背景画像
- ボタンリンク先
- ボタンテキスト ※ ボタンリンク先が入力されていないと表示されません。
- ボタンの色
- SNSアイコンリストを表示する ※ SNSのページURLが入力されていないと表示されません。
- アイコンを丸枠で囲む
SNSリンク設定
サイドバーから、「SNS情報」を選択します。
SNS情報から、[SWELL]プロフィールに表示させたいSNSのページURLを入力します。
参考：画像サイズ
アイコン：240 x 240px
プロフィール背景画像：768 x 285px
この記事を書いた人
以下のように記事下部に表示されます。
作成前の準備
管理画面メニューから、「ユーザー」＞「プロフィール」を選択します。
プロフィール画面が表示されました。
作成
プロフィール画面から、以下の設定を行っていきます。
- ブログ上の表示名
- プロフィール情報
- 役職・肩書き
- SNSページURL
- カスタムアバター
著者情報エリアの設定
以下の設定が行えます。
- 著者情報の表示・非表示設定
- 著者ページへのリンクを表示・非表示設定
- 著者情報エリアのタイトル設定
サイドバーから、「投稿・固定ページ」を選択します。
投稿・固定ページから、「記事下エリア」を選択します。
著者情報エリアの設定が表示されました。
参考：画像サイズ
カスタムアバター：200 x 200px
リスクについて
※「著者名」や「この著者の記事一覧へ」にカーソルを乗せるとユーザーIDが表示されます（ユーザーIDがバレると不正ログインの可能性も😱）。
以下の記事では、ユーザーIDがバレることなく、「この記事を書いた人」をブログパーツで作成して、呼び出しコードやウィジェットを用いて好きな場所に表示させることができます。
著者アーカイブページ
以下が著者アーカイブページです。
この記事を書いた人から、「この著者の記事一覧へ」をクリックすると著者アーカイブページへ移動します。
アーカイブページに表示させるコンテンツ
- 呼び出すブログパーツのID：IDを入力またはブログパーツを選択します。
今回は以上です。
News
以下にブロックエディタで使えるSWELL専用機能の記事をまとめていますので、良ければご覧ください。