※当サイトではアフィリエイト広告を利用しています。
初心者きつねサイドバーにおしゃれなプログパーツを設置したいけど、やり方がわからないよ。。
今回は、SWELLでブログパーツを利用してサイドバーにボックスメニューをつける方法をご紹介します。
このサイトにも、ブログパーツで作ったボックスメニューをサイドバーで表示させています。
今回は、ブログパーツを利用してこのようなオシャレなボックスメニューの作り方と
サイドバーに設置するところまでを解説したいと思います。
ブログパーツとは？
ブログパーツとは、SWELLに搭載されている機能の1つでブログやWebサイトに使用するパーツを登録することができます。
主にブロックメニューを登録する際に使用されます。
例えば、複数の記事で多用する3つのブロックからなる組み合わせをブログパーツとして登録しておけば
ショートコードを貼り付けるだけでその組み合わせを表示できるので、効率が良く便利です。
ブログパーツの登録方法
ブログパーツを登録する方法は、以下の通りです。
ブログパーツを登録するには、ダッシュボード内にある「ブログパーツ」から「新しい投稿」を選択します。
投稿内でブロックエディターの+マークを押し、ボックスメニューを挿入します。
ボックスメニューを表示させることができたら、各ボックスに当てはめたい画像やテキスト、リンクなどを設定しましょう。
ボックスを追加したい場合は、外枠をクリックするとボックスを追加できるボタンが表示されます。
これでブログパーツの登録ができました。
登録したブログパーツを呼び出す方法
登録したブログパーツを呼び出すには、作成時に表示される「呼び出しコード」を利用します。
この呼び出しコードを、ショートコードとして貼り付ければ登録したブログパーツが表示されます。
SWELLでブログパーツを利用してサイドバーにボックスメニューをつける方法
SWELLのテーマで利用できるボックスメニューを、サイドバーに設置するには
以下の手順で実現できます。
- ブログパーツでボックスメニューを設定
- ウィジェット内で設置
①ブログパーツでボックスメニューを設定
まずは、ブログパーツでボックスメニューを設定しましょう。
投稿を新しく設定する際は、管理画面の「ブログパーツ」を選択し「投稿を追加」します。
そうしたらブロックエディターの+マークを押し、ボックスメニューを選択します。
②ウィジェット内で設置
①でボックスメニューが作成できたら「外観 > ウィジェット」でウィジェット編集画面に行き
「共通サイドバー」の中を編集していきます。
カスタムできる項目の中に「カスタムHTML」があるのでそれをクリックすると、挿入する箇所を選べるので「共通サイドバー」を選択します。
カスタムHTMLに①で作成したブログパーツのショートコードを貼り付け、保存を押します。
これでブログパーツに登録したボックスメニューが、サイドバーに表示されているはずです。
【結論】カテゴリーやタグなどのまとまった表示を出したい場合、ブロックテーマはおすすめ
ということで、今回はブログパーツの使い方について紹介してきましたが、カテゴリーやタグなどのまとまった表示の一部、あるいは全てを出したいときにはおすすめの機能になりますのでぜひ利用してみてください！
このブログでは、Web制作に関する話題やコーディング、WordPressなどに役立つ情報を発信しているので
次回の記事もぜひ見てくださいね。
コメント