WordPressウィジェットを列で表示する方法

ウィジェットを使用すると、標準のWordPressコンテンツエディターでは編集できない領域に動的なコンテンツを追加できます。人々はよくサイドバーにウィジェットを追加しますが、他の領域にも複数の列で表示できます。

このアプローチにより、コンテンツをより効果的に整理および表示できるようになり、ウェブサイトが視覚的に魅力的でナビゲーションしやすくなります。

WPBeginnerでは、ウェブサイトのフッターを使用してユーザーエクスペリエンスを向上させ、エンゲージメントを促進しています。複数のウィジェットを列に戦略的に配置することで、ブランドを宣伝し、無料ツールへの簡単なアクセスを提供し、重要なリソースへのリンクを提供し、ウェブサイトのさらなる探索を奨励することができます。

この記事では、WordPressウィジェットを簡単に列表示する方法を説明します。

WordPressウィジェットを列で表示する理由

ウィジェットは、画像ギャラリー、ソーシャルメディアフィード、カレンダー、ランダムな引用、人気の投稿、その他の動的なコンテンツをWordPressウェブサイトに追加するのに役立ちます。

ただし、多くのウィジェットを追加すると、混乱して散らかったように見え始める可能性があります。

このような場合は、ウィジェットを列に整理することをお勧めします。これにより、多くのコンテンツを構造化された方法で表示できます。列に小見出しを追加して、訪問者が探しているものをより速く見つけられるようにすることもできます。

これを踏まえて、カラムにウィジェットを表示する方法を見てみましょう。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。

• 方法1：WordPressテーマにウィジェット対応のフッターがあるか確認する
• 方法2：ページおよび投稿エディターを使用する（すべてのテーマで動作します）
• 方法3：カスタムWordPressテーマを作成する（完全にカスタマイズ可能）
• 方法4：フルサイトエディターを使用する（ブロックベースのテーマのみ）
• ボーナス：WordPressの写真を列で表示する

方法1：WordPressテーマにウィジェット対応のフッターがあるか確認する

一部のWordPressテーマでは、フッターに複数のウィジェット対応エリアがあります。この場合、各エリアは別々のカラムとして表示されます。

ウェブサイトのフッターに情報やリンクを一覧表示したい場合に最適です。例えば、連絡先情報、WooCommerceストアの全商品リスト、またはウェブサイトの最も重要なリンクなどを表示できます。

その他のアイデアについては、WordPressサイトのフッターエリアに追加すべきことのチェックリストをご覧ください。

テーマにフッターの複数のウィジェット対応エリアがあるかどうかを確認するには、WordPressダッシュボードで外観 » ウィジェットに移動します。

ここで、「フッター」またはそれに類するラベルの付いたエリアを探します。

上記のテーマには2つのウィジェット対応エリアがあるため、それらを使用してウィジェットを列で表示できます。

これらの領域のいずれかをクリックして展開し、表示したいウィジェットの追加を開始します。詳細な手順については、WordPressでウィジェットを追加して使用する方法に関するガイドをご覧ください。

それが完了したら、次のウィジェット対応フッターエリアをクリックして展開し、その列に表示したいウィジェットを追加します。

各フッター領域でこれらの手順を繰り返すだけです。

ウィジェットの追加が完了したら、「更新」ボタンをクリックして変更を保存することを忘れないでください。これで、WordPressウェブサイトにアクセスし、フッターまでスクロールすると、ウィジェットが列に整理されているのがわかります。

方法2：ページおよび投稿エディターを使用する（すべてのテーマで動作します）

もう1つのオプションは、デフォルトのWordPressブロックエディターを使用して、ページや投稿に列を追加することです。これにより、投稿コンテンツ内を含む、サイト上のウィジェットの表示場所を正確に制御できます。

各ページにユニークなウィジェットを表示したい場合にも良い選択肢です。

ただし、ウィジェットは各ページや投稿に手動で追加する必要があります。とはいえ、この方法は、特にすべてのページに同じウィジェットを表示したい場合、時間がかかることがあります。

この方法を使用するには、ウィジェットを列に追加したいページまたは投稿を開きます。次に、「+」ボタンをクリックして「Columns」と入力します。

右側のブロックが表示されたら、それをレイアウトにドラッグアンドドロップします。

表示したいカラムの数と、各カラムが占めるスペースの量をここで選択できます。

たとえば、次の画像では、利用可能なスペースの33％を占める3つの列を作成しています。

これが完了したら、最初 のカラムの「+」アイコンをクリックします。

表示されるポップアップで、この列に追加したいウィジェットを選択します。

右側のメニューの設定を使用してウィジェットをカスタマイズできます。たとえば、背景色を変更したり、リンクを追加したり、フォントサイズを変更したりできます。

ブロックを使用して、小見出し、リスト、その他のコンテンツを作成することもできます。これにより、ウィジェットに余分な構造とコンテキストを追加できます。

これらの手順を繰り返すだけで、カラムにさらにウィジェットを追加できます。

列の設定に満足したら、「更新」または「公開」をクリックして、列とウィジェットを有効にします。

方法3：カスタムWordPressテーマを作成する（完全にカスタマイズ可能）

WordPressの組み込みツールを使用してウィジェットを複数の列に整理して表示することは可能ですが、レイアウトをより細かく制御する必要がある場合もあります。

美しいランディングページや、完全にカスタムデザインされたセールスページにカラムを追加したい場合もあります。

その場合は、SeedProd の使用をお勧めします。

SeedProdは、市場で最高のWordPressページビルダープラグインであり、コードを一行も書かずにテーマをデザインできます。これにより、ウェブサイトの任意の領域に好きなだけ多くのカラムとウィジェットを追加できます。

SeedProdには、プロフェッショナルなテンプレートサイトキットのライブラリも増え続けており、ワンクリックでサイトに追加できます。

まず、SeedProdプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するステップバイステップガイドをご覧ください。

注意: SeedProd の無料バージョンでは、予算に関係なく、メンテナンスページや近日公開ページを含むカスタムページを作成できます。ただし、このガイドでは、テーマビルダーが付属しているため、プレミアムプラグインを使用します。テーマビルダーを使用するには、SeedProd Pro 以上のアカウントが必要になることに注意してください。

有効化したら、SeedProd » 設定に移動してライセンスキーを入力してください。

この情報はSeedProdウェブサイトのアカウントで見つけることができます。その後、「キーを検証」ボタンをクリックします。

これが完了したら、SeedProd » Theme Builder ページに移動し、「Theme Template Kits」ボタンをクリックします。

SeedProdのウェブサイトキットライブラリが表示されます。

テンプレートを詳しく見るには、マウスカーソルを合わせ、表示される虫眼鏡アイコンをクリックしてください。

これにより、テンプレートキットが新しいタブで開きます。

これは完全なウェブサイトキットなので、さまざまなリンク、ボタン、メニュー項目をクリックすることで、より多くのページやデザインを見ることができます。

SeedProdには、 レストランサイト、 旅行ブログ、マーケティングコンサルタントなど、さまざまな業界やニッチ向けのテンプレートキットがあります。

使用したいテンプレートキットを見つけたら、カーソルを合わせ、表示されるチェックマークアイコンをクリックします。

SeedProdは、WordPressダッシュボードにさまざまなテンプレートを追加します。

詳細を確認するには、SeedProd » Theme Builderに移動します。使用しているキットによって、表示されるオプションが若干異なる場合があります。

ウィジェット列を追加したいテンプレートにカーソルを合わせ、「デザインを編集」リンクをクリックするだけです。

例えば、フッターエリアにウィジェット列を表示したい場合は、フッターテンプレートを編集する必要があります。

これにより、画面の右側にテンプレートが表示されたSeedProdエディターが読み込まれます。

左側には、さまざまなオプションが表示されるメニューがあります。

ほとんどのキットには、すでに組み込みブロックが用意されています。ブロックをカスタマイズするには、ページプレビューでクリックして選択し、左側のメニューで変更を行います。

例えば、プレースホルダーを置き換えたい場合は、テキストまたは見出しブロックを選択してから、小さなテキストエディターに入力する必要があります。

左側のメニューの設定を使用して、キットの外観を完全に変更することもできます。これには、配色、フォントの選択、リンクの色、ボタンなどの変更が含まれます。

これらの設定のほとんどは非常にわかりやすいので、レイアウトでさまざまなブロックを選択し、設定を確認する価値があります。

列を作成するには、左側のメニューの「標準」セクションまでスクロールします。

ここで、「カラム」ブロックを見つけ、ウィジェットを列に配置したい領域にドラッグ＆ドロップします。

作成したい列の数と、各列が占めるスペースの量を選択できるようになりました。

これを行うには、使用したいレイアウトをクリックするだけです。

これで、カラムにウィジェットを追加し始めることができます。

左側のメニューで各ウィジェットを見つけ、そのウィジェットを表示したい列にドラッグします。

ウィジェットを追加した後、ライブプレビューで選択するためにクリックします。

次に、左側のメニューの設定を使用してそのウィジェットをカスタマイズできます。さらに多くのカスタマイズ設定を表示するには、「詳細設定」タブをクリックします。

ここでは、CSSアニメーションを追加したり、間隔を変更したり、境界線を追加したりできます。

列にさらにウィジェットを追加するには、これらの手順を繰り返すだけです。ページの見た目に満足したら、「保存」ボタンをクリックして変更を保存します。

これで、WordPressテーマの残りの部分の編集を続けることができます。詳細については、初心者向けのカスタムWordPressテーマの作成方法に関する完全ガイドをご覧ください。

テンプレートの設定方法に満足したら、キットを公開する準備が整いました。

WordPressダッシュボードで、SeedProd » Theme Builder に移動し、「SeedProdテーマを有効化」トグルをクリックして「はい」と表示されるようにします。

カスタムテーマが適用されたWordPressブログまたはウェブサイトにアクセスして、新しいカスタムテーマの効果を確認できるようになりました。

方法4：フルサイトエディターを使用する（ブロックベースのテーマのみ）

ブロック対応WordPressテーマを使用している場合は、フルサイトエディターを使用してウェブサイトの任意のエリアに列を追加できます。

標準のWordPressコンテンツエディターでは変更できない領域も編集できます。たとえば、サイトの404ページテンプレートにウィジェットやカラムを追加できます。

開始するには、WordPressダッシュボードの [外観] » [エディター] に移動してください。

デフォルトでは、フルサイトエディターはテーマのホームページテンプレートを表示しますが、任意の領域にカラムとウィジェットを追加できます。

利用可能なすべてのオプションを表示するには、「テンプレート」または「テンプレートパーツ」のいずれかを選択するだけです。

これで、編集したいテンプレートまたはテンプレートパーツをクリックできるようになりました。

WordPressはデザインのプレビューを表示します。このテンプレートを編集するには、小さな鉛筆アイコンをクリックします。

それが完了したら、青い「+」アイコンをクリックして「Columns」と入力します。

右側のブロックが表示されたら、ページデザインにドラッグアンドドロップします。

使用したいレイアウトを選択できるようになりました。

たとえば、当社の画像では、33/33/33レイアウトを使用しており、これにより、利用可能な幅の33％を占める3つの列が作成されます。

それが完了したら、青い「+」アイコンをクリックし、使用したい最初のウィジェットを見つけます。

その後、このウィジェットを表示したい列にドラッグ＆ドロップするだけです。

必要に応じて、右側のメニューの設定を使用して各ブロックを微調整できます。

これらの手順を繰り返すだけで、カラムにさらにウィジェットを追加できます。

変更に満足したら、「保存」をクリックして公開します。これで、WordPressウェブサイトにアクセスすると、新しいウィジェットと列が機能しているのがわかります。

ボーナス：WordPressの写真を列で表示する

写真サイトをお持ちの場合は、すべての写真を整然とした列と行で表示したい場合もあります。

これを行うには、市場で最高のWordPressギャラリープラグインであるEnvira Galleryを使用できます。これにより、すべての画像が行と列に整理され、視覚的に魅力的に見える魅力的なギャラリーを作成できます。

さらに、ライトボックスポップアップ、ウォーターマーク、代替画像テキストなどの他の機能も提供します。

プラグインを有効にしたら、Envira Gallery » 新規追加ページにアクセスし、「他のソースからファイルを選択」ボタンをクリックして、メディアライブラリからすべての画像をアップロードします。

それが完了したら、「Currently in your Gallery」セクションまでスクロールし、「Configuration」タブに切り替えます。

ここでは、ギャラリー画像のレイアウトやカラム数を好みに合わせて選択できます。

完了したら、上部にある「公開」ボタンをクリックして設定を保存します。次に、画像を縦横に配置したい投稿を開き、「ブロックを追加」（+）ボタンをクリックする必要があります。

これでブロックメニューが開きます。次に、Envira Galleryブロックをドラッグアンドドロップし、ブロック内のドロップダウンメニューから作成した画像ギャラリーを選択します。

最後に、「更新」または「公開」ボタンをクリックして設定を保存します。これでWordPressサイトにアクセスして、画像を縦横に並べて表示できます。

詳細については、WordPressの写真を列と行で表示する方法に関するチュートリアルをご覧ください。

この記事が、WordPressウィジェットを列で表示する方法を学ぶのに役立ったことを願っています。また、WordPressサイドバーでトップコメント投稿者を表示する方法や、WordPress向けの最高のGutenberg対応テーマに関するガイドも参照してください。

この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。