こんにちは、ゆるミニマリスト主婦のくうかです。
WordPressテーマ「SWELL」を使っているなら、ぜひとも覚えておきたい機能がブログパーツ。
とっても便利なんですよ！
使い回したいパーツを自分で作成することができ、それを自由に呼び出すことができます。
回遊率を高めるためや、この場所でこんなリンクを入れたいという希望がうまいこと実現できるので、当ブログでも多く利用しています。
くうかこの記事では、当ブログ内で利用しているブログパーツをいくつかご紹介していくので、参考になったら嬉しいです！
SWELLブログパーツと再利用ブロックの違い
「ブログパーツ」とはSWELL独自のブロックで、似たような機能にWordPress標準の「再利用ブロック」があります。
再利用ブロックは記事内のみで利用できることに対し、ブログパーツは記事内のほか、ウィジェットでも使えるというところが大きな違いとなっています。
ブログパーツの詳しい機能は公式マニュアルをご覧ください。
くうか当ブログでは、ブログ内の回遊率を高めるためのパーツや、使い回したいパーツなどに使っています。
ブログパーツで回遊率を高めたい
主に記事下へ配置して他の記事も読んでいってくれたら…という希望で作ってみました。
1. ピックアップバナーを記事下にも表示させたい
ブログのヘッダー下にバナーが４つ並んでいる部分を「ピックアップバナー」といいます。
特に読んでほしいページをリンクさせることによって、読者にアピールすることができます。
アクセスも上がるので気に入っているのですが、これがどうもブログのヘッダーにしか表示できなくて。
くうか記事下にも出せたらいいのに…！
記事を読み終わったあとにバナーがあると、見てほしい記事をついでに見てくれる人もいるかもしれないし。
と思い、四苦八苦してみるもカスタマイザーでの設定はできなさそう…。
そこで思いついたのが「バナーリンク」＋「ブログパーツ」。
記事下にバナーを毎回表示させるには”ブログパーツ”で作成し、記事下ウィジェットから呼び出す必要があります。
SWELLブロック内にあります。
画像の上にテキストを配置でき、画像自体をリンクにすることができます。
記事下にバナーリンクを４つ並べる方法
ブログパーツで新規作成を行う。
４コのマスを入れたいので、はじめは横並びカラムブロック３で作成し、
あとから編集画面でカラム数を４にする。（最初から４マスで作れない仕様のため）
SWELLブロックからバナーリンクを挿入
各項目の設定
- 画像設定（さらにタイトル・テキスト・リンク先URLも設定）
- ブラー・影・丸みの効果、テキストカラー等の細かい設定
完成したら保存し、ブログパーツIDをコピーしておく。
外観→ウィジェット。
私の場合は”関連記事下”ウィジェットに、「テキスト」を挿入。
先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。
これで関連記事の下にピックアップバナーが４つ並びます
場所はご自分のお好みで。
くうかフッターなどに配置しても良いと思います♪
2. タブブロックでカテゴリー別記事を表示させたい
カテゴリー別にいくつかの記事を表示させたい。
そんな時、SWELLのアップデートで「タブブロック」が追加されたということで、使ってみました。
先程と同じく、ブログパーツで新規作成を行う。
SWELLブロックから「タブ」を追加する。
タブブロックのタブ部分に名称を入れたり、増やす場合は「＋」で追加していく。
（あまり多いとモバイルでは２段表示になるので注意）
タブの中身にはSWELLブロック内の「投稿リスト」ブロックを追加
カテゴリー別の人気記事を表示させたいので、該当カテゴリーに絞る設定をする
保存し、ブログパーツIDをコピーしておく。
今回は”関連記事下”ウィジェットに、「テキスト」を挿入。
先程コピーしたブログパーツIDを貼り付けて、タイトルを決めて保存する。
ウィジェット以外で呼び出したい場合は、「ブログパーツ」ブロックから呼び出すことができます。
3. ブログパーツでカテゴリーごとのCTAを設定する
SWELLのアップデートにて、記事下に配置できるCTAをカテゴリーやタグごとに設置できるようになりました。
私も使ってみた
このように記事下に、該当カテゴリー内の「新着／人気記事」を表示することもできました。
方法はいたって簡単。
ブログパーツを好きなように作成し、設定項目にある「用途」を「CTA]にチェックし、保存します。
そしてカテゴリー（またはタグ）編集ページにて、
先ほど作成したブログパーツを選択すれば完了です！
くうかカテゴリーごとに全然違うパーツを作ってもいいですね！
広告へ促すのも良いかも。
使い回せるブログパーツ
1. 記事の最後にブログ村へのリンク
記事の最後にこのようなリンクを貼っています
ブログパーツで、段落にメッセージ・カスタムHTMLブロックにリンクのhtmlを貼ります。
ショートコードでアイコンも付けたり。
出来上がったら、ウィジェットの”記事下部”にブログパーツIDを入れます。
くうかリンクだけならウィジェットにhtmlをそのまま書けば良いけど、ちょっと装飾したいな…というところにはブログパーツが使えますね！
2. フッターに他サイトへのリンク
フッター２にランキングサイトへのリンク
フッター２にランキングサイトや楽天ROOMへのリンクを貼っています。
こちらは「SWELLボタン」ブロックを使用。
ウィジェット内に直接ボタンを配置することはできないので、ブログパーツを使いました。
くうかボタンサイズに「大」を選択すると、ボタンサイズが揃いますよ♪
3. サイトのあいさつ文
トップページに、このようなあいさつ文を入れています。
ブログパーツにて、
「カラム」ブロックを２カラムで設置し、プロフィール画像とあいさつ文をそれぞれのカラムに入れています。
トップページ以外にも使えるかもしれないと思い、ブログパーツで作成しておきました。
4. サイドバーのおすすめ記事リスト
サイドバーにおすすめの記事をリスト表示させています。
こちらは「リスト」ブロックで、テキストに記事へのリンクを貼っています。
「投稿リスト」ブロックを多用すると重くなるかもしれない、と多少気にした結果こうなりました。
実はこのブログパーツはかなり使いまわしています！笑
下記画像はサイトマップでの使用例です。
くうかまとめ記事をリストで作っておくとこんな使い方もできて便利ですね！
最後に
当ブログで利用しているブログパーツの例をご紹介しました。
ブログパーツを使えば、使い回しもできるし、ウィジェットや記事内にも呼ぶことができます。
くうかとても便利なので、色んな使い方ができることを覚えておくといいですね…！
SWELLのカスタマイズ記事も書いてます！
コメント