[Elementor]固定ページでカテゴリー、タグが一覧で表示されるページを作成しよう[その6]

今回はヘッダーメニューにある「WEBサイトを探す」のページを制作したいと思います。

こちらのページは検索枠、カテゴリー、タグ一覧が表示される予定です。

すでに作業自体は終わらせているんで、結果報告になってしますが…やはり無料版では思ったレイアウトにはなりませんでしたが、なんとか形にはしましたので、そちらご紹介させて頂きたいと思います！

ヘッダーに関する記事はこちら！

Elementorでのレイアウト制作

まずは、編集する固定ページをElementorで開きましょう。
例のごとく「Elementorで編集」をクリックして編集画面を開きます。

表示させたいのは検索枠、カテゴリー、タグです。
左メニューから該当のウィジェットを挿入します。

ELEMENTOR HEADER & FOOTER BUILDERから「Search」を挿入。

WORDPRESSから「タグクラウド」を挿入。

まずはこの2つのレイアウトを調整していきましょう。

編集をクリックしSearch BoxのPlaceholderに表示させたい文章を入力します。
ここでは「キーワード」と入力しています。

スタイルタブをクリックし検索枠を下記のように調整しました。

さて、検索枠は一先ずこれでOKですね。
次は、タグクラウドを編集していきます。

「タクソノミー」をカテゴリーに変更し、タグの数を表示させたいので「タグの数を表示」にチェックを入れます。

そしてタグ一覧も表示させたいので、セクションを複製し「タクソノミー」をタグに変更。

これでOK…とはいきませんね。
それぞれのウィジェットの間隔が近すぎるので少し微調整していきます。

セクションを編集をクリックし、高度な設定タブのマージンの上下にそれぞれ数値を入力していきます。

一度「更新（または公開）」をクリックしてページを確認してみましょう

これだけでも問題ないのですが、現在はカテゴリーもタグもそれほど多くないので少し味気ないと思ったので、ついでに最新記事を少し表示させることにしました。

最新記事の表示は以前フロント（ホーム）ページを作成したものを流量するので、固定ページからフロント（ホーム）ページをElementorで開きます。

セクションを選択した状態で右クリックをし表示されたメーニューから「コピー」をします。

その状態のままで、先程編集していた固定ページへ戻り「ウィジェットをここにドラッグ」箇所に右クリックをして「貼り付け」をクリック

すると先程「フロント（ホーム）ページ」からコピーしたセクションが貼り付けられましたので、あとはこちらを掲載するき記事数だったり、マージン（余白）だったり微調整していきます。

フロント（ホーム）ページでの設定ですと記事数が多いので、Posts Per Pageを「4」に。
Show Load Moreに「HIDE」にし表示されないようにします。こちちらのページには必要無いですので。

また他にも微調整をします。
枠線を入れて他との違いを出したので、枠線とのパディングや見出しなどを追加して一旦完了とさせていただきます。

タクソノミーをカスタマイズが出来ないか色々試してみたんですが、どうやらElementorを使うよりも、Word Pressのデフォルトのエディターを使ったほうがイメージ的には近いものがあったので、この際修正することにしました。

新規で固定ページを作成し、タグクラウドのブロックを挿入します。

デザインを修正していきます。
スタイルをデフォルトではなく輪郭に変更しタクソノミーをタグからカテゴリーへ変更。
投稿数を表示させたかったので、チェックを入れ、記事数の数によって文字サイズが異なるのが気になるので、最小サイズと最大サイズを同じ数字に修正。

こんな感じで修正しました。
そして、先程同様にこのブロックを複製しタクソノミーをタグへ変更。

こうなっていればOKです！

あとはこのブロックをElementorの方にコピーして行きます。
ブロックのオプションからコピーをクリックし、先程Elementorで編集した固定ページを開きます。

ブロックのウィジェットをドラッグし、ブロックHTMLにペーストするとHTMLのソースが挿入され、画面上に先程作成したブロックが表示されればOK！

あとはタグの文も同作業を行い、見出しなどを追加し微調整していきましょう。

コピーと微調整。そして位置を調整し終わったのがこちらになります。
Elementorで作成したカテゴリー、タグ一覧は削除しマージンなどを調整し完成となりました。

画面を確認しましたが問題なく表示されていますね！

今回はElementorを利用して、検索枠やカテゴリー・タグ一覧を表示させる方法をご紹介させていただきました。

無料版では機能に限界がありますが、こうやってデフォルトのエディターの機能を利用したりすればイメージに近いページを作ることが出来ると思いますので、Elementor無料版のレイアウトでお困りの方は参考にしていただければ幸いです。