WordPressの投稿をグリッドレイアウトで表示しますか？
グリッドレイアウトを使用すると、WordPressで投稿を表示する際の柔軟性が高まります。これは、カスタムページを作成する際に役立ちます。
この記事では、WordPressの投稿をサイトのどこにでもグリッドレイアウトで簡単に表示する方法を紹介します。
WordPressでグリッドレイアウトが必要なのはいつですか？
どのWordPressテーマでも、ブログ投稿の従来の縦型レイアウトをサポートしており、ほとんどの種類のウェブサイトでうまく機能します。しかし、このレイアウトは、特に投稿が多い場合、多くのスペースを占める可能性があります。
サイトのカスタムホームページを作成している場合は、グリッドレイアウトを使用して最新の投稿を表示したい場合があります。
これにより、ホームページに他の要素を追加するためのスペースが増えます。
さらに、投稿グリッドはアイキャッチ画像を強調表示するため、視覚的に魅力的でクリック可能になります。投稿グリッドを使用して、クリエイティブなポートフォリオやその他のカスタムコンテンツを表示することもできます。
多くのマガジンテーマや写真テーマは、すでにグリッドベースのレイアウトを使用して投稿を表示しています。ただし、お使いのテーマがこの機能に対応していない場合は、追加する必要があります。
それでは、WordPressの投稿をグリッドレイアウトで表示する方法をご紹介します。使用したい方法に直接ジャンプするには、以下のクイックリンクを使用してください。
- WordPressブロックエディターでグリッドレイアウトを作成する
- Post Gridプラグインでグリッドレイアウトを作成する
- SeedProdページビルダーを使用してグリッドレイアウトを作成する
- WordPressにコードを追加してグリッドレイアウトを作成する
動画チュートリアル
書き言葉での説明をご希望の場合は、そのままお読みください。
方法1.ブロックエディターでWordPress投稿グリッドレイアウトを作成する
この方法では、WordPressブロックエディターを使用して、投稿とサムネイルを投稿グリッドレイアウトに簡単に表示できます。独自のグリッドを作成できる組み込みの投稿グリッドブロックがあります。
これを行うには、編集したいページを開き、「プラス」追加ブロックボタンをクリックして「クエリーループ」を検索し、ブロックをクリックして追加します。
このブロックは、投稿ループをページに追加します。
次に、ブロックの上部にある「空白から開始」オプションをクリックして、投稿グリッドを作成します。
これにより、投稿グリッドに表示したい情報の種類に応じて、いくつかの異なる選択肢が得られます。
「画像、日付、タイトル」オプションを選択しますが、お好きなものを選択できます。
その後、画像にカーソルを合わせ、「グリッド表示」オプションを選択します。
これにより、リストがポストグリッドに変わります。
次に、表示したい情報をカスタマイズできます。
まず、ブロックの下部にあるページネーションを削除します。これを行うには、それをクリックし、「3つのドット」オプションメニューをクリックするだけです。
次に、「ページネーションを削除」をクリックします。
これにより、ブロックから要素が自動的に削除されます。
同様に投稿から日付を削除することも、訪問者のために投稿情報を増やすこともできます。
次に、投稿サムネイルと投稿タイトルの両方にリンクを追加します。
投稿サムネイルをクリックし、右側のオプションパネルにある「投稿へのリンク」トグルをオンにするだけです。
次に、投稿タイトルについても同様のことを行います。
完了したら、「更新」または「公開」ボタンをクリックして、ポストグリッドを公開します。
これで、WordPressウェブサイトにアクセスして、新しいWordPress投稿グリッドを確認できます。
このブロックは、任意のページまたは投稿に追加できます。これをブログアーカイブページとして使用したい場合は、WordPressでブログ投稿用の別個のページを作成する方法のガイドをご覧ください。
WordPress投稿グリッドレイアウトを投稿グリッドプラグインで作成する方法 2
この方法は、ウェブサイトのどこにでも追加できるカスタマイズ可能な投稿グリッドを簡単に追加する方法を提供します。
まず、Post Gridプラグインをインストールして有効化する必要があります。詳細については、WordPressプラグインのインストール方法に関するガイドをご覧ください。
有効化したら、Post Grid » Add New にアクセスして、最初の投稿グリッドを作成する必要があります。
次に、投稿グリッドにタイトルを付けます。これはページには表示されませんが、覚えておくのに役立ちます。
この下に、複数のタブに分かれた投稿グリッド設定が表示されます。
まず、「クエリ投稿」タブをクリックする必要があります。ここで、「投稿タイプ」ボックスに表示したい投稿タイプを定義します。
デフォルトでは投稿のみが表示されますが、ページやカスタム投稿タイプを追加することもできます。
その後、「レイアウト」タブをクリックする必要があります。
次に、「レイアウトを作成」ボタンをクリックします。これは新しいウィンドウで開きます。
レイアウトに名前を付ける必要があります。次に、「一般」オプションをクリックすると、タグのリストが開きます。
これらのタグは、投稿グリッドに表示される情報です。
「サムネイルとリンク」オプションと「投稿タイトルとリンク」オプションを選択します。
次に、「公開」または「更新」をクリックしてレイアウトを保存します。
次に、前のタブの元の投稿グリッドエディタに戻ると、選択できる新しいレイアウトオプションが表示されます。
画面下部の「アイテムレイアウト」セクションで、新しいレイアウトをクリックするだけです。
次に、「アイテムスタイル」タブをクリックします。ここでグリッドのサイズを設定できます。
デフォルト設定でほとんどのサイトに対応できますが、うまくいかない場合はここで変更できます。
完了したら、ページ上部の「公開」ボタンをクリックすると、グリッドをWordPressブログに追加する準備が整います。
次に、「ショートコード」タブをクリックし、「投稿グリッドショートコード」ボックス内のショートコードをコピーします。
その後、投稿リストを表示したいページを開き、「プラス」の追加ブロックボタンをクリックします。
次に、「ショートコード」を検索し、「ショートコード」ブロックを選択します。
次に、先ほどコピーしたショートコードをボックスに貼り付けます。
次に、「更新」または「公開」ボタンをクリックします。
これで、ページを表示してWordPress投稿グリッドレイアウトをライブで確認できます。
方法3. SeedProdページビルダープラグインでWordPress投稿グリッドレイアウトを作成する
投稿グリッドレイアウトを作成する別の方法は、SeedProdページビルダープラグインを使用することです。これは、100万以上のウェブサイトで使用されている、市場で最高のドラッグ＆ドロップWordPressページビルダーです。
SeedProd を使用すると、コードを書かずにカスタムページや、完全にカスタムWordPressテーマを簡単に作成できます。このプラグインを使用して、404ページ、近日公開ページ、ランディングページなど、好きな種類のページを作成できます。
詳細については、WordPressでカスタムページを作成する方法に関するガイドをご覧ください。
SeedProdビルダーでページをカスタマイズしているときに、ページ上の任意の場所にあるプラスの「セクションの追加」ボタンをクリックするだけです。
これにより、新しいブロックを追加するオプションが表示されます。
次に、「投稿」ブロックをページにドラッグすると、自動的に投稿リストがページに追加されます。
これで、左側のオプションパネルでこのブロックをカスタマイズできます。
まず、「レイアウト」セクションまで下にスクロールします。ここで、ブログ投稿グリッドの列数を設定し、「フィーチャー画像を表示」および「タイトルを表示」トグルをオンにすることができます。
次に、「抜粋を表示」トグルと「続きを読む」トグルを下にスクロールしてオフにし、シンプルなブログ投稿グリッドレイアウトを作成します。
カラー スキーム、テキストなどをカスタマイズしたい場合は、左側の列の上部にある「詳細設定」タブをクリックしてください。
次に、「テキスト」ドロップダウンをクリックして変更を行います。
ページとブログ投稿のグリッドレイアウトは、好きなだけカスタマイズを続けることができます。
完了したら、「保存」ボタンをクリックし、ページ上部の「公開」ドロップダウンを選択して変更をライブにします。
これで、ウェブサイトに新しい投稿グリッドが表示されます。
WordPress投稿グリッドレイアウトをWordPressにコードを追加して作成する方法 4
この方法は、WordPressにコードを追加する方法についての基本的な理解が必要です。以前にコードを追加したことがない場合は、WordPressにコードをコピー＆ペーストする方法に関するガイドを参照してください。
コードを追加する前に、投稿グリッドで使用する新しい画像サイズを作成する必要があります。詳細については、WordPressで追加の画像サイズを作成する方法のガイドをご覧ください。
次に、コードスニペットを追加する適切なWordPressテーマファイルを見つける必要があります。たとえば、single.phpに追加すると、すべての投稿の末尾に表示されます。
カスタムページテンプレートを作成して、サムネイル付きのブログ投稿グリッドレイアウトを表示するためにも使用できます。
詳細については、WordPressテンプレート階層チートシートを参照して、適切なテーマテンプレートファイルを見つけてください。
それが完了したら、WordPress にコードを追加し始めることができます。コードスニペットはかなり長いため、セクションごとに分解します。
まず、次のコードスニペットをテーマのテンプレートファイルに追加します。
<?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts*/ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?> このコードスニペットは、投稿ループクエリを設定します。必要に応じて、'posts_per_page'変数を変更して、1ページあたりの投稿数を増やすことができます。
次に、次のコードスニペットをテーマのテンプレートファイルに追加します。
<?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?> このコードスニペットは、投稿用の2つのカラムを作成し、タイトルと投稿画像を表示します。また、後でスタイル設定する方法を示すCSSクラスも作成します。
また、「postimage」も参照しているため、ここで作成した画像サイズの名前に変更する必要があります。
その後、以下のコードスニペットを末尾に追加します。
<?php $counter++; endwhile; //Post Navigation code goes here endif; ?> このコードスニペットはループを単純に閉じます。投稿ナビゲーションを追加するオプションもありますが、ほとんどのウェブサイト所有者はこれに別のプラグインを使用しているため、コードの競合を避けるために含めていません。
ここに、最終的なコードスニペット全体の外観を示します。
<div id="gridcontainer"> <?php $counter = 1; //start counter $grids = 2; //Grids per row global $query_string; //Need this to make pagination work /*Setting up our custom query (In here we are setting it to show 12 posts per page and eliminate all sticky posts) */ query_posts($query_string . '&caller_get_posts=1&posts_per_page=12'); if(have_posts()) : while(have_posts()) : the_post(); ?> <?php //Show the left hand side column if($counter == 1) : ?> <div class="griditemleft"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <?php //Show the right hand side column elseif($counter == $grids) : ?> <div class="griditemright"> <div class="postimage"> <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_post_thumbnail('category-thumbnail'); ?></a> </div> <h2><a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>"><?php the_title(); ?></a></h2> </div> <div class="clear"></div> <?php $counter = 0; endif; ?> <?php $counter++; endwhile; //Pagination can go here if you want it. endif; ?> </div> 次に、投稿グリッドが適切に表示されるように、次のCSSをサイトに追加する必要があります。
これが初めての場合は、WordPressサイトにカスタムCSSを簡単に追加する方法をご覧ください。
#gridcontainer{ margin: 20px 0; width: 100%; } #gridcontainer h2 a{ color: #77787a; font-size: 13px; } #gridcontainer .griditemleft{ float: left; width: 278px; margin: 0 40px 40px 0; } #gridcontainer .griditemright{ float: left; width: 278px; } #gridcontainer .postimage{ margin: 0 0 10px 0; } 異なるCSSセレクターを変更して、投稿ループのさまざまな要素がどのように変化するかを確認できます。
この記事がお役に立ち、WordPressの投稿をグリッドレイアウトで表示する方法を学べたことを願っています。また、最適なWebデザインソフトウェアの選択方法に関するガイドや、中小企業向けの最適なライブチャットソフトウェアの専門家による選び方もご覧ください。
この記事が気に入ったら、WordPressのビデオチュートリアルについては、YouTubeチャンネルを購読してください。 TwitterやFacebookでもフォローできます。
Mrteesurez
ありがとうございます。これは私にとって役立ちました。
私がブログ投稿をグリッドレイアウトで表示するのが好きな主な理由は、それが特徴的な画像を正しく、そしてほとんどの場合大きな形式で表示してくれるからです。これにより、ユーザーはより視覚的に魅力的になり、投稿を探索する際に長く滞在してくれるようになります。
Rachel
ブログは既に作成済みで、「投稿」の下でこれを試しましたが、うまくいきませんでした。
WPBeginnerサポート
これが表示されるためには、サイトに複数のブログ投稿が公開されていることを確認する必要があります。これが最も一般的な問題の原因です。
管理者
ジュリー
こんにちは
静的なホームページで試しましたが、うまくいきません。
ショートコードを1つだけ追加すればよいのでしょうか、それとも両方（PHPコードも）追加すればよいのでしょうか？
make theme を使用しています。
段落とショートコードとしてページに追加するだけでよいですか？
ありがとう
ジュリー
WPBeginnerサポート
ショートコードをページに追加するだけでよいはずです。プラグインのサポートに連絡すれば、なぜ正しく表示されないのかを教えてくれるはずです。
管理者
Paige
サムネイルをカスタマイズする方法はありますか？フィーチャー画像に設定していますが、サイズが異なり、不適切な領域で切り取られています。
WPBeginnerサポート
レイアウト設定で、アイキャッチ画像の表示をカスタマイズできるはずです。
管理者
リサ
ホームページにこのグリッドを設定するためにすべての手順に従っていますが、表示されません。ページを作成し、ショートコードを追加し、設定→表示設定でホームページをそのページに静的に設定しました。何が間違っていますか？
追伸 子供用テーマ（Foodie Pro）を購入しましたが、それが問題でしょうか？ありがとうございます！
WPBeginnerサポート
There may be a page template that could be causing a display issue, if you reach out to Post Grid’s support they should be able to help have it display properly
管理者
ジェス
これは素晴らしかったです!!! ありがとうございます！メインのブログページに適用できましたが、ブログ内のさまざまなカテゴリのナビゲーションもあります。これらの各カテゴリページもグリッドとして表示するにはどうすればよいですか？
Lu
このプラグインをインストールしましたが、Wordpress サイトが自動的に Gutenberg に更新され、すべての Wordpress の投稿ページにボックスが表示され、コンテンツを覆ってしまい見えなくなりました！それをなくす唯一の方法は、Post Grid をアンインストールすることです。他に何かアイデアはありますか？どんな助けでも感謝します！ L
ロバート
ページは設定しましたが、以前に作成した5つの投稿が新しい投稿グリッドに表示されません。
グリッドに投稿を表示するにはどうすればよいですか？
Travenjo
ページグリッド（投稿グリッドではない）をページで表示するにはどうすればよいですか。カスタマイズ方法は？
ヘクター
Twenty Fourteenテーマを使用していますが、表示されているものや使用できるものとは異なり、レイアウトのオプションが1つしかありませんでした。使用できるものはダブルですが、機能しません。ページネーションも詰まってしまったので、どうすればよいかわかりません。テーマに適したプラグインはありますか？
Aurangzaib
なんてシンプルな解決策でしょう。WPとPHPを十分に理解しており、投稿のグリッドを作成し、DBから取得するための最も賢く簡単な解決策です。ただし、目的ごとに別のページを作成する意思がある場合は、このニーズはかなりまれです。そうでなければ、多くの種類のグリッドデザインを組み込みでサポートしているテーマがあり、simspk.comで私のウェブサイトで少しカスタマイズしてデザインしました。また、シンプルでクリーンなコンテンツを維持することは、より良いランクを達成するための最も簡単な方法です。素晴らしい投稿です、ブラザー、続けてください！
ダニエル・グローブ
ブログのカテゴリーページはどうですか？私のテーマでは縦にリスト表示されるだけで、見栄えが悪くスペースが無駄になります！ホームのブログページと同じようにグリッド表示したいです。
ジェス
私もです!!!!!返信があるかフォローしています…。
WPBeginnerサポート
こんにちは、DanielさんとJessさん、
プラグインのプレミアムバージョンには、カテゴリアーカイブページ用の投稿グリッドを作成するオプションがあると主張しています。この記事のためにプレミアムバージョンをテストしませんでした。購入する前に、詳細についてはプラグインのウェブサイトを確認してください。
管理者
Lori
Daraテーマとプレミアムプランを使用しており、全くの初心者です。残念ながら、プラグインはビジネスプランでのみ利用可能であり、現時点では費用が3倍になるため投資できません。Daraにはグリッドページオプションがありますが、子ページのみを表示できます。特定のカテゴリから投稿を表示したいのです。このプレミアムプランのDaraグリッドページオプションで新しいコンテンツを表示したいときは、毎回静的な子ページを作成する必要があるということですか？
WPBeginnerサポート
Lori さん、こんにちは。
最初からプラグインをインストールできる、セルフホスト型のWordPress.orgウェブサイトから始めることができます。
管理者
カール
これは素晴らしいですが、プラグインをインストールせずに同じプロセスが可能ですか？ 10 の異なるカテゴリを個別に表示するにはどうすればよいですか？グリッドの画像を選択するにはどうすればよいですか？
Brianna
これは素晴らしいです！2列から3列または4列に編集する方法はありますか？ページあたりの投稿数を20に設定すると、2列と10行になります。
デール・ケビン
こんにちは、すべての手順に従いましたが、うまくいきません。postgrid のショートコードを投稿したページが、私のホームページとして表示されません。何が間違っていますか？ Php コードが必要ですか？
ご指導をお願いします。ありがとうございます。ご返信に感謝いたします。
タンさん
こんにちは、素晴らしいプラグインですね。
しかし、3列のグリッドを作成できず、2列しか作成できません。
どうすればできますか？
Holly
こんにちは、
作成したすべてのサイトでこのプラグインを使用しています。使いやすくて気に入っていますが、レイアウトに少し問題があります。レイアウト1を4列で使用していますが、ある理由で1行が2つの異なる行に分割されます。これを防ぐにはどうすればよいですか？
ディー
こんにちは。これは非常に役立ちました、ありがとうございます。ブログのフロントページではうまく機能しますが、カテゴリでは機能しません。ヘッダーでカテゴリをクリックすると、テーマのグリッドが表示され、投稿グリッドは表示されません。これをどのように進めればよいですか？コードをどのページにコピーすればよいですか？
ありがとうございます
DEE
どなたか助けていただけますか？
Liah
現在使用しているテーマには、ブログセクションのグリッドレイアウトがありません。プラグインをダウンロードして正常に動作していますが、新しいブログ投稿をアップロードすると、最新の投稿が含まれるようにグリッドが自動的に更新されますか？非常に役立つビデオをありがとうございます！
WPBeginnerサポート
リアさん、こんにちは
はい、グリッドは自動的に更新されます。
管理者
Leanne
ここでサイトのブログセクションをより見栄え良くしたいのですが、新しいページを作成してショートコードを追加したり、phpファイルを編集したりするのではなく、現在のブログ投稿を自動的にグリッドでスタイル設定する方法はありますか？
WPBeginnerサポート
こんにちは、Leanneさん、
ブログ投稿を自動的にグリッドレイアウトで表示するWordPressテーマを探す必要があります。
管理者
ジョセフ
Hi Thank you for the nice Article. Is there any way to make the same without plugin. If so how could i ?
Thanks
leighton
これを使いたいのですが、混乱しています。従っていますが、何も表示されません。ショートコードをコピーしましたが、それでも何も表示されません。画像やテキストをアップロードする必要がありますか？誰か助けてもらえませんか？
Shahid
素晴らしい記事です。このプラグインで投稿抜粋の長さを追加できるかどうかを知りたいだけです。
mike
これはページのみに有効です。投稿がカテゴリのみに属している場合はどうなりますか？カテゴリアーカイブにショートコードを追加するにはどうすればよいですか？ありがとうございます。
ヘンリー
これはページには最適です！投稿でどのように機能するかはまだわかりません！誰か助けてください。
デイブ・パークス
プラグインのホームページで「分類」設定をようやく見つけました。プレミアム版を購入すると利用できます。
つまり、無料版は全く価値がないということです。
デイブ・パークス
表示される唯一のカテゴリ設定は
“投稿IDで除外
投稿IDをカンマ(,)で区切って除外できます”
このプラグインの作成者には敬意を表しますが、表示させたくないIDをすべて入力する方法はありません。リストが長すぎ、サイトを開発するにつれてさらに長くなります。
表示したい1つのIDを入力できる場所はありますか？
ティナ・デイビッドソン
こんにちは。ついにブログが立ち上がり、稼働しました！でも、ストア機能も追加したいと思っています。「今すぐ購入」ページです。このプラグインが最適だと思いますか、それともストア設定には別のものがより効率的でしょうか？どうもありがとうございます！ティナ
hasan
良い知識をありがとうございます。
私のウェブサイトには、投稿とページの2種類のコンテンツがあります。
ウィジェットを使わずに、新しいページをホームページに自動的に追加できますか？
改めて感謝いたします。
カルティク
こんにちは、親切な情報ありがとうございます。
カテゴリで投稿をフィルタリングする方法を教えてください
hasan
貴重な知識をありがとうございます。
私のサイトではテーマサポートのマガジンテンプレートを使用していますが、投稿のみが含まれています。
投稿だけでなく、ページにもこのテンプレートを使用するにはどうすればよいですか？
重ねて感謝いたします。
WPBeginnerサポート
テーマ開発者にお問い合わせください。彼らがより適切にサポートできます。
管理者
anil singh
PHPやホームページのカスタマイズ方法を知らない人にとって、この記事は役立つでしょう。ウェブ全体で検索しましたが、記事が見つからなかった質問が1つあります。質問は、ホームページに投稿エリアを表示せずに、カテゴリリストでホームページをカスタマイズする方法です。それについて記事を作成してください。例はfreejobalert.inで見ることができます。
ジュディット
このプラグインは wordpress.com で動作しますか？
WPBeginnerサポート
セルフホスト型WordPress.orgと無料のWordPress.comブログの違いに関するガイドをご覧ください。
管理者
Tonia
こんにちは。ブログ記事に画像がありますが、これはフィーチャーコンテンツ画像に対応していますか？
natalie james
この記事をありがとうございます。まるで私の心の中やブログのウィッシュリストを読んでいたかのようです。最後の最後まで、あなたのステップバイステップの説明に簡単に従うことができました。質問を正しく表現する方法がわかりませんが、言いたいことは、グリッドページをブログのランディングページにしたいということです。現在、投稿の見出しが付いた投稿の中にあります。最後に、コードをテーマファイルに貼り付けることができると述べていますが、残念ながらどこにあるのかわかりません。これで意味が通じるといいのですが、お返事をお待ちしています。
ありがとうございます。
ナタリー
ポール・ワンダソン
こんにちは、Natalieさん、
私が間違っているかもしれませんが、グリッドのある *ページ* を作成する必要があると思います。その後、WordPress 管理ダッシュボードの「設定」→「表示設定」に移動し、「フロントページ表示」を固定ページに設定し、作成したグリッドのあるページを「フロントページ」ドロップダウンメニューで選択できます。
お役に立てば幸いです。頑張ってください！
ポール