普段からWordPressを使っていますがSWELLを使うのは初めて！
このブログはWordPressテーマのSWELLを使っていますが、ブログを始めたばかりのブログ初心者ですしSWEL使い始めたばかりのSWELL初心者なので、全く使い方がわかりません。
今から SWELLを学んでいく過程をブログに残していこうと思います。SWELLのカスタマイズについて網羅していくぞー！
理想のSWELLサイドバーを決める
まずは私が理想とするサイドバーを決めて、それに向かってSWELLをカスタマイズしていきたいと思います。
ブログ初心者の私のとっての理想といえば「ザ・ブログサイドバー」です！
以下の5点が入っていることが理想です。
- 写真やイラストのアイコンがある
- 名前と簡単な経歴等を書ける
- SNSのリンクが並んでいる
- バナーがいっぱい並んでる
- おすすめの記事とかがある
ザ・ブログですね。めっちゃ楽しみ。
この記事は実際に作る途中に加筆して行っていますので、リアルタイムの興奮をお伝えします。
SWELLのサイドバー編集場所
SWELLをインストールした状態だと共通サイドバーの中のブロック、それらを開くと以下のようなものが入っています。
- サイト内検索窓
- 最近の投稿
- 最近のコメント
- アーカイブ
- カテゴリ
一旦全部削除します。
プロフィール情報を追加
最初に出した理想のうち3つはプロフィール情報って形で解決できました。
この3つ。
- 写真やイラストのアイコンがある
- 名前と簡単な経歴等を書ける
- SNSのリンクが並んでいる
SWELLプロフィールをドラックアンドドロップで共通サイドバーに追加。
追加したものを開くと、名前や役職、プロフィール画像等を設定できます。
SNSアイコンリストがでない
SWELLプロフィールからサイドバーに追加しましたが、SNSリストを表示のチェックをしても表示されません。
最初はWordPressのプロフィールにあるTwitter URL等にいれてみたのですが、出ない….
色々いじってるとわかりました。
左サイドバーから、外観 > カスタマイズを開いて、下記の画像のようにSNS情報を開きます。SNSのURL入力欄が並んでいるので、入れたものだけがサイドバーに追加したプロフィールに表示されるようになります。
人気の記事を入れる
SWELLってめちゃくちゃ便利ですね。
シンプルなのに高機能って意味を実感してます。
人気記事もわかりやすくあったので、ドラックアンドドロップでサイドバーに入れるだけでカスタマイズ完了です！
バナーを並べる
バナーって項目はなかったので少しトリッキーな方法を取りました。もっと良い方法があれば知りたい….!!
ウィジェットの「ブロック」をサイドバーに追加します。
追加したブロックには、以下のHTMLを追加します。
<p></p>
<a href="" target="_blank"><img src="" alt=""></a>次に、バナーに使う画像を登録します。
管理画面の左サイドバーから、メディアを開いて画像を追加します。
追加した画像をクリックすると、詳細が確認できるのでURLをコピーします。
URLをHTMLに追加して、その他の部分を整えます。
今回は特にリンク先がなかったので、自分のツイッターにリンクしてみました笑
<p>SWELLのウィジェットでバナーっぽい感じを追加してみた</p>
<a href="https://twitter.com/comet_cat_13" target="_blank">
<img src="https://comet-cat.com/wp-content/uploads/2023/02/L1001329.jpeg" alt="ツイッターへのリンクです">
</a>これでバナーっぽい感じにできました！
サイドバーカスタマイズ完了！
自分のやりたかったカスタマイズは一通りできました。
最後のバナーは悩みましたね…バナーを出すものが全くなかったので何を追加すれば良いかわかりませんでした笑
…とりあえず趣味で撮った写真にしました。
普段こういった形でWordPressのテーマを触ることが少ないので楽しい時間になりました。
ブログって楽しいなー！
以上、SWELLのサイドバーカスタマイズでした。