WordPressの投稿をグリッドレイアウトで表示したいですか？
グリッドレイアウトは、WordPressで投稿を表示する際の柔軟性を高めます。これはカスタムページを作成する際に役立ちます。
この投稿では、WordPressの投稿をサイトのどこにでも簡単にグリッドレイアウトで表示する方法を紹介します。
WordPressにグリッドレイアウトが必要な時とは？
どのWordPressテーマも、ブログ投稿の伝統的な縦型レイアウトをサポートしており、これはほとんどの種類のサイトでうまく機能します。しかし、このレイアウトは、特に投稿数が多い場合、多くのスペースを取ることがあります。
サイトのカスタムホームページを作成している場合、最近の投稿を表示するためにグリッドレイアウトを使用したい場合があります。
そうすることで、ホームページに他の要素を追加するスペースが増える。
さらに、投稿グリッドはおすすめ投稿画像を強調表示するため、視覚的にアピールでき、クリックしやすくなります。 また、投稿グリッドを使用して、クリエイティブ・ポートフォリオやその他のタイプのカスタムコンテンツをアピールすることもできます。
多くの雑誌テーマや 写真テーマは、すでに投稿を表示するためにグリッドベースのレイアウトを使用しています。しかし、あなたのテーマがこの機能をサポートしていない場合は、追加する必要があります。
それでは、WordPressの投稿をグリッドレイアウトで表示する方法をご紹介しましょう。以下のクイックリンクから、お好きな方法にジャンプしてください。
- WordPressのブロックエディターでグリッドレイアウトを作る
- Post Gridプラグインを使ってグリッドレイアウトを作成する
- SeedProdページビルダーを使ってグリッドレイアウトを作成する
- WordPressにコードを追加してグリッドレイアウトを作成する
動画チュートリアル
文章での説明がお望みなら、このまま読み進めてほしい。
方法1.ブロックエディターでWordPressの投稿グリッドレイアウトを作成する。
この方法では、WordPressのブロックエディターを使って、投稿とサムネイルを投稿グリッドレイアウトでシンプルに表示することができます。独自のグリッドを作成できる投稿グリッドブロックがビルトインされています。
これを行うには、編集したいページを開き、「プラス」ブロック追加ボタンをクリックして「クエリーループ」を検索し、ブロックをクリックして追加する。
このブロックは投稿ループをページに追加します。
次に、ブロックの上部にある「Start Blank」オプションをクリックして投稿グリッドを作成する。
投稿グリッドで表示したい情報のタイプに応じて、いくつかの異なる選択肢があります。
ここでは「画像、日付、タイトル」を設定しますが、お好きなものを選んでください。
その後、画像にマウスオーバーし、「グリッド表示」オプションを選択します。
これでリストが投稿グリッドになる。
次に、表示したい情報をカスタマイズすることができます。
まず、ブロックの一番下にあるページ送りを削除します。これを行うには、単にそれをクリックし、「3つの点」オプションメニューをクリックします。
次に、「ページ送りを削除」をクリックします。
これで自動的にブロックから要素が削除される。
同じように投稿から日付を削除することもできるし、訪問者のために投稿情報を残すこともできる。
次に、投稿サムネイルと投稿タイトルの両方にリンクを追加します。
投稿サムネイルをクリックし、右側のオプションパネルにある「投稿日へのリンク」トグルをオンにするだけです。
次に、投稿タイトルも同じようにします。
完了したら、「更新」または「公開」ボタンをクリックして、投稿グリッドをライブにします。
これで、WordPressサイトにアクセスして、新しいWordPress投稿グリッドを見ることができます。
このブロックはどのページや投稿にも追加することができます。これをブログのアーカイブページとして使いたい場合は、WordPressでブログ投稿用の区切りページを作成する方法をご覧ください。
方法2.Post Gridプラグインを使ってWordPressの投稿グリッドレイアウトを作成する。
この方法は、カスタマイズ可能な投稿グリッドを追加する簡単な方法を提供します。
まず最初に、Post Gridプラグインをインストールして有効化します。詳しくはWordPressプラグインのインストール方法をご覧ください。
有効化したら、投稿グリッド ” 新規追加にアクセスして、最初の投稿グリッドを作成する必要があります。
次に、投稿グリッドにタイトルを付けます。これはページのどこにも表示されません。
この下には、投稿グリッドの設定が複数のタブで異なるセクションに区切られています。
まず、「クエリー投稿」タブをクリックします。ここで「投稿タイプ」ボックスに表示したい投稿タイプを定義します。
初期設定では投稿のみが表示されるが、ページやカスタム投稿タイプも追加できる。
その後、「レイアウト」タブをクリックします。
次に、「レイアウトを作成」ボタンをクリックします。新しいウィンドウが開きます。
レイアウトに名前をつける必要があります。次に、’General’オプションをクリックすると、タグのリストが開きます。
これらのタグは投稿グリッドに表示される情報です。
リンク付きサムネイル」オプションと「リンク付き投稿タイトル」オプションを設定します。
その後、「公開する」または「更新」をクリックしてレイアウトを保存します。
さて、過去の投稿グリッドエディターに戻ると、新しいレイアウト設定が選択できるようになっています。
画面下部の「項目レイアウト」セクションで新規レイアウトをクリックするだけです。
次に、「項目スタイル」タブをクリックします。ここでグリッドのサイズを設定できます。
初期設定はほとんどのサイトで機能するはずだが、そうでない場合はここで変更できる。
ページ上部の「公開する」ボタンをクリックすると、WordPressブログにグリッドを追加する準備が整います。
次に、「ショートコード」タブをクリックし、「投稿グリッドのショートコード」ボックスにショートコードをコピーする必要があります。
その後、投稿リストを表示したいページを開き、「プラス」追加ブロックボタンをクリックする。
次に、「ショートコード」を検索し、「ショートコード」ブロックを選択する。
次に、先ほどコピーしたショートコードをボックスに貼り付けます。
その後、「更新」または「公開する」ボタンをクリックします。
これで、WordPressの投稿グリッドレイアウトをライブで確認するためにページを表示することができます。
方法3.SeedProd Page Builderプラグインを使ってWordPressの投稿グリッドレイアウトを作成する。
投稿グリッドレイアウトを作成するもう一つの方法は、SeedProdページビルダープラグインを使用することです。これは、100万以上のサイトで使用されている市場で最高のドラッグ＆ドロップWordPressページビルダーです。
SeedProdは、コードを書くことなく、カスタムページや完全にカスタムされたWordPressテーマを簡単に作成するのに役立ちます。プラグインを使って、404ページ、近日公開ページ、ランディングページなど、どんな種類のページでも作成できます。
さらに詳しく知りたい方は、WordPressでカスタムページを作成する方法をご覧ください。
SeedProdビルダーで、ページをカスタマイズしているときに、プラス「セクションを追加」ボタンをページの任意の場所でクリックするだけです。
新規ブロックを追加するオプションが表示されます。
次の「投稿」ブロックをページにドラッグすると、投稿リストが自動的に追加されます。
左側のオプションパネルでこのブロックをカスタマイズできる。
まず、「レイアウト」セクションまでスクロールダウンします。ここでは、ブログ投稿グリッドのカラム数を設定し、「おすすめ投稿画像を表示」と「タイトルを表示」のトグルをオンにすることができます。
次の投稿では、「抜粋を表示」トグルと「続きを読むを表示」トグルをスクロールダウンしてオフにし、シンプルなブログ投稿のグリッドレイアウトを作成します。
配色やテキストなどをカスタムしたい場合は、左側の列の一番上にある「詳細設定」タブをクリックしてください。
次に、「テキスト」のドロップダウンをクリックし、変更を加えます。
ページやブログ投稿のグリッドレイアウトは、好きなだけカスタマイズし続けることができる。
完了したら、「保存」ボタンをクリックし、ページ上部の「公開する」ドロップダウンを選択して、変更を公開します。
これで、サイト上で新しい投稿グリッドを表示することができます。
方法4.WordPressにコードを追加して、WordPressの投稿グリッドレイアウトを作成する。
この方法には、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をサイトに追加する必要があります。
まだカスタム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 の投稿をグリッドレイアウトで表示する方法を学ぶのにお役に立てば幸いです。また、最高のウェブデザインソフトウェアを選択する方法についてのガイドと中小企業向けの最高のライブチャットソフトウェアの専門家の選択もご覧ください。
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Rachel
I tried to do this under ‘posts’ for my blog that has already been created. It didn’t work.
WPBeginner Support
You would want to ensure you have multiple blog posts published live on your site for them to be visible as the most common reason for that issue.
管理者
julie
Hi
I have tried this on my static homepage but it is not working.
Do I just add the one shortcode or both ( ie the php code also?)
using make theme.
do i just add it to the page as a paragraph and shortcode?
thanks
julie
WPBeginner Support
You should only need to add the shortcode to the page, if you reach out to the plugin’s support they should be able to let you know why it is not displaying properly
管理者
Paige
Is there a way to customize the thumbnails? I have mine set to the featured image, however some are different sizes and are cut off in the wrong areas.
WPBeginner Support
In the layout settings, you should be able to customize the display of the featured iamges
管理者
Lisa
I’m following all the steps to set this grid up on my homepage but it’s not displaying. I created a page, added the short code, and under settings–>reading I set my homepage to static with that page. What am I doing wrong?
p.s. I purchased a child theme (Foodie Pro), could that be my issue? Thanks!
WPBeginner Support
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
管理者
Jess
This was GREAT!!! Thankyou! I was able to apply this for my main blog page however I also have navigation for the different categories within my blog. How can I make it so that each of these category pages also displays as a grid?
Lu
I installed this plugin but my Wordpress site have been automatically updated to Gutenberg and now a box appears in all my Wordpress Post pages, covering the content so I can’t see it! The only way I can get rid of it is to de-install Post Grid. Anyone have any other ideas so I can use the Post Grid? Thanks for any help! L
Robert
I have the page set up but I have 5 posts that I did before that are not showing up on the new Post Grid.
How do I get the posts to show up on the grid?
Travenjo
Can anyone help me to have page grid and (not post grid) for my pages. How ro customize?
Hector
I’m using the Twenty Fourteen theme and this only gave me one option for layout instead of what you are showing and the one they let me use is a double but it just doesn’t work even the pagination got stuck on me so I don’t know what to do,is there a better plugin for my theme?
Aurangzaib
What a simple solution, i understand WP and PHP on a good level and this is the smartest and easiest solution to make a grid of posts and fetch them up from the DB, although the need is pretty rare if you are willing to make a different page for any purpose otherwise there are themes that have built-in support of many kinds of grids designs i customized and designed a bit on my web there at simspk.com, also keeping simple and clean content is the simplest way to achieve better ranks, Great post bro, keep them up!
Daniel Grove
What about for blog category pages? They just get listed vertically in my theme and it looks lame and wastes so much space! I want it to grid them just like the home blog page does.
Jess
Meeeee tooooo!!!!! Following to see if there is a response…..
WPBeginner Support
Hey Daniel and Jess,
The plugin’s premium version claims to have the option to create post grid for category archive pages. We didn’t test the premium version for the article. Please check the plugin website to learn more before buying.
管理者
Lori
I have the Dara theme with the Premium plan, and I am VERY NEW. Unfortunately, I just realized that plug-ins are only available with the Business plan, which I cannot afford to invest in at this time since it would triple my cost. Dara has a grid page option, but it only allows child pages to be displayed – I want POSTS to display from a specific category. Looks like I would have to create a static child page every time I want new content to appear in this Premium plan Dara grid page option, right??
WPBeginner Support
Hi Lori,
You can start with a self-hosted WordPress.org website which allows you to install plugins out of the box.
管理者
Carl
This is great but is this same process possible WITHOUT installing a plugin. How do you shows 10 different category separately? How select images for grid?
Brianna
This is awesome! Is there a way to edit from two across ( 2 columns) to three or four? When I change the settings to 20 posts a page, I am getting 2 columns and 10 rows.
Dale Kevin
Hi, I followed all the steps but it doesnt work. The page where I posted the shortcode of postgrid doesnt show up as my how page. Whats wrong? Maybe the Php code is needed?
I need you guidance. Thank you. I appreciate you response
Mr Thanh
Hi, that’s great plugin.
But i can’t creat a grid with three colums, only two colums.
How can i?
Holly
Hi,
I’ve used this plugin on all the sites i’ve created, i love it its so easy to use but im having a problem with the layout a little bit. Im using Layout 1 with 4 Columns and for some reason a row splits into two different rows, how do i stop this from happening?
Dee
Hello there. This was very helpful thank you. It works fine on the front page of my blog but wouldn’t work in the categories. Whenever a category is clicked in the header, the page shows the theme grid and not the Post Grid. How do I go about this? What page do I copy the code into please?
Thank you
DEE
Can anyone help with this please
Liah
My current theme doesn’t have the grid layout for the blog section. I’ve download the plugin and it works great but when I upload a new blog post does it automatically update the grid to include the latest post? Thank you for the super helpful video!
WPBeginner Support
Hi Liah,
Yes it will automatically update the grid.
管理者
Leanne
I’m trying to make the blog section of my site look nicer here – is there a way to automatically style the current blog posts in a grid rather than creating a new page and adding shortcode or editing php files?
WPBeginner Support
Hey Leanne,
You’d need to look for a WordPress theme that automatically displays your blog posts in a grid layout.
管理者
Joseph
Hi Thank you for the nice Article. Is there any way to make the same without plugin. If so how could i ?
Thanks
leighton
I want to use this but i am confused, I follow it but I dont see anything, I copy the shortcode but still nothing, do I have to upload images and text? can someone help?
Shahid
Great Article, just wanted to know if we can add post excerpt length in this plugin?
mike
This is cool for pages only. What if my posts belong under categories only. How do I add the shortcode to category archive. Thanks
Henry
This is just fine for pages! Still can’t figure how it works for posts! Someone help pls.
Dave Parks
I finally found “Taxonomy” setting on the plugin homepage – available if you buy the premium.
Which means the freebee is of zero value.
Dave Parks
The only category setting I see is
“Exclude by post ID
you can exclude post by ID, comma(,) separated”
With all due respect to the creator of this plugin, there’s no way I’m going input all the IDs I do not want to appear. The list is too long, and it will grow as I develop this site.
So is there some place to put in the one ID that I want to appear?
Tina Davidson
Hi – I finally have my blog up and running – yay! But want to add a store element to it. A “Shop Now” page. Do you think this its the best type of plug-in to use or is the one more efficient for a store set-up? Thanks so much! Tina
hasan
thanks for good knowledge
my website has two kinds of contents : post and pages.
can i add my new pages on homepage automatically without using widgets?
thanks again
Karthik
hi thanks for kind info,
please help me how to filter post by categories
hasan
thank you for good knowledge
i use a theme support magazine template on my site but it includes only posts .
how can i use this template for pages also not only posts ?
thanks again
WPBeginner Support
Please contact theme developer they will be able to help you better.
管理者
anil singh
thanks who do not know php and how to cutomize homepage this article will be helpful. i have one question which i searched all the web but not find any article. quetion is how can custmize homepage with category list without showing post area in homepage please make article for it . you can see example on freejobalert.in
judit
Will this pluggin work on wordpress.com?
WPBeginner Support
Please see our guide on the difference between self hosted WordPress.org vs free WordPress.com blog.
管理者
Tonia
Hi – i see an image in your blog article, does this support featured content image ?
natalie james
Thank you so much for this article, it is as though you were reading my mind and my wish list for my blog. I was easily able to follow your step by step instructions until the very end. Im not sure how to put my query correctly, I think what Im trying to say is that I would like the grid page to be my landing page of my blog. At the moment it is inside a post with a post heading. You do mention at the end that I can past the code into my themes file but unfortunately I dont know where that is. Hope this makes sense and I look forward to your reply.
thanks
Natalie
Paul Wandason
Hi Natalie,
I maybe wrong here – but I think you need to create a *page* with the grid on it, then if you go to “settings” then “reading” in the wordpress admin dashboard, you can set “Front page displays” to a static page, and select the page you’ve just created with the grid on it under the “front page” drop down menu.
Hope this helps, and good luck!
Paul