※本記事で使用している環境
＜パソコン＞
機種：MacBook Air（13inch）
OS：macOS Sonoma（ver.14.5）
サイドバーにSWELLボタンを設置する
みなさんは、「ブログのサイドバーに他サイトへ誘導するボタンを設置したい」と思ったことはないでしょうか。
僕は、サイトを2つ運営しているのですが、特定のサイトからもう一つのサイトへ誘導するためのURLをサイドバーに設置したいと考えました。
以下の画面のように、ボタンをクリックすると、
別のサイトへ飛ぶことができます。
手順
手順としては、大きく2つに分かれます。
- ブログパーツを作成する
- ウィジェットにブログパーツを表示させる
ブログパーツの作成
まず、WordPressの管理画面を開きます。
1: 管理メニューにある ブログパーツ をクリック
2: さらにその中の ブログパーツ をクリック
1: 新規投稿を追加 をクリック
1: ブログパーツのタイトル（名前）を入力
2: ブロックの追加マーク「＋」 をクリック
3: 検索ボックスで「ボタン」と検索し、SWELLボタン をクリック
1: サイドバーにあるブロック設定から、ボタンブロックの設定を行う
2: 枠で囲まれた部分をクリックし、遷移先のリンクを入力
1: 今回は「ブックレコード」というサイトに飛ばしたいので、そのURL
「https://bookrecord.online」を検索ボックスに入力
1: 公開 をクリック
作成したブログパーツをウィジェットに設置する
ブログパーツページのトップ画面に戻ります。
1: 呼び出しコードを選択しコピー
1: 管理メニューにある 外観 をクリック
2: さらにその中の ウィジェット をクリック
1: カスタムHTML ブロックをクリックし、プルダウンメニューを開く
1: 共通サイドバー を選択
2: ウィジェットを追加 をクリック
共通サイドバーブロックを開くと、追加した カスタムHTMLブロック が表示されています。
カスタムHTML をクリックし、プルダウンメニューを開きます。
1: 先ほどコピーした 呼び出しコード をペースト
2: 保存 をクリック
これにて、サイトのサイドバーにSWELLボタンを設置することができました。
コメント