SWELLでプロフィールの作成と表示方法を教えてほしいです。
こういった悩みにお答えします。
今回の記事を読むことで以下のようなプロフィールを表示できるようになります。
- サイドバーにプロフィールを表示させる方法が分かる
- 記事下部にプロフィールを表示させる方法が分かる
- 著者アーカイブページにブログパーツで作成したコンテンツを表示させる方法が分かる
本記事の内容
【SWELL】プロフィールの作成・表示方法【リスクについても話す】
SWELLで用意されているプロフィールエリア
- [SWELL]プロフィール
- この記事を書いた人
- 著者アーカイブページ
[SWELL]プロフィール
以下のようにサイドバーにプロフィールを表示できます。
ウィジェットを使用しているのでサイドバー以外にも表示できます。
あわせて読みたい
【SWELL】ウィジェットを設置できる場所一覧【全20エリア】
SWELLでウィジェットを設置できる場所を知りたいですか?本記事では、ウィジェットを設置できる全20エリアの紹介から、追従ヘッダーと追尾サイドバーの仕様(動画付き)、PCとスマホでの表示の違いまで解説しています。SWELLでウィジェットを利用したい方は是非ご覧ください。
作成前の準備
管理画面メニューから、「外観」>「カスタマイズ」を選択します。
サイドバーから、「ウィジェット」を選択します。
ウィジェットから、「共通サイドバー」を選択します。
共通サイドバーから、「ウィジェットを追加」>「[SWELL]プロフィール」を選択します。
サイドバーの表示させたい位置にドラッグ&ドロップで移動させます。
作成
以下の設定を行います。
- アイコン画像
- プロフィール背景画像
- ボタンリンク先
- ボタンテキスト ※ボタンリンク先が入力されていないと表示されません。
- ボタンの色
- SNSアイコンリストを表示する ※SNSのページURLが入力されていないと表示されません。
- アイコンを丸枠で囲む
SNSリンク設定
SNSのページURLを入力することで[SWELL]プロフィールにリンクを表示させることができます。
サイドバーから、「SNS情報」を選択します。
SNS情報から、[SWELL]プロフィールに表示させたいSNSのページURLを入力します。
参考:画像サイズ
アイコン:240 x 240px
プロフィール背景画像:768 x 285px
この記事を書いた人
以下のように記事下部に表示されます。
作成前の準備
管理画面メニューから、「ユーザー」>「プロフィール」を選択します。
プロフィール画面が表示されました。
作成
プロフィール画面から、以下の設定を行っていきます。
- 役職・肩書き
- SNSページURL
- カスタムアバター
著者情報エリアの設定
以下の設定が行えます。
- 著者情報の表示・非表示設定
- 著者ページへのリンクを表示・非表示設定
- 著者情報エリアのタイトル設定
サイドバーから、「投稿・固定ページ」を選択します。
投稿・固定ページから、「記事下エリア」を選択します。
著者情報エリアの設定が表示されました。
参考:画像サイズ
カスタムアバター:200 x 200px
リスクについて
※「著者名」や「この著者の記事一覧へ」にカーソルを乗せるとユーザーIDが表示されます(ユーザーIDがバレると不正ログインの可能性も😱)。
以下の記事では、ユーザーIDがバレることなく、「この記事を書いた人」をブログパーツで作成して、呼び出しコードやウィジェットを用いて好きな場所に表示させることができます。
あわせて読みたい
【SWELL】「この記事を書いた人」をカスタマイズ【コピペコード付】
WordPressテーマ「SWELL」で用意されている「この記事を書いた人」をカスタマイズする方法を知りたいですか?本記事では、カスタマイズ方法とコピペ用コードの用意からデフォルトの設定方法まで解説しています。SWELLの「この記事を書いた人」をカスタマイズしたい方は是非ご覧ください。
著者アーカイブページ
以下が著者アーカイブページです。
この記事を書いた人から、「この著者の記事一覧へ」をクリックすると著者アーカイブページへ移動します。
アーカイブページに表示させるコンテンツ
この記事を書いた人の下にブログパーツで作成したコンテンツを表示させることができます。
- 呼び出すブログパーツのID:IDを入力またはブログパーツを選択します。
あわせて読みたい
【SWELL】ブログパーツの使い方【確実に出来ることの幅が広がる】
SWELLのブログパーツの使い方を知りたいですか?本記事では、ブログパーツを使った実装例の紹介から実装例を元にブログパーツの登録方法や使い方の解説までしています。SWELLのブログパーツの使い方を知って出来ることの幅を広げたい方は是非ご覧ください。
今回は以上です。