WordPress サイトでポストをグリッドレイアウトまたはピンターレストスタイルのレイアウト(Masonry)で表示したい場合は、複数の方法で可能です。 テーマで全体文または特定のカテゴリをグリッドレイアウトで表示する機能を提供する場合、テーマのポストグリッド機能を使用することができます。
たとえば、このブログで使用されているマガジンのテーマである Newspaperは、さまざまなレイアウトでカテゴリー文を一覧表示することができます。 多目的テーマである Avadaナ Enfold などでは限定的ですが、マガジン要素を提供します。 (「WordPress Enfold テーマが提供するブログ/マガジンエレメント「注)
テーマでポストグリッドレイアウトを提供していない場合には、プラグインを使用することができます。 これに関連し、様々な無料と有料のプラグインがあります。 数年前に比べてまともな無料のプラグインも目立つね。 プラグインを使用する場合、サイトの速度に影響を及ぼさないことを観察して、適切なものを選択すればいいようです。
エレメンページビルダーを使用している場合には、 ポストグリッド Elementor Addonプラグイン(無料)を利用することができます。
WordPress ポストグリッドのプラグイン
Stackable - Page Builder Gutenberg Blocks(無料)
積み重ね可能なブロックエディタ(Gutenberg)をページビルダーとして活用できるように、さまざまなブロックライブラリを提供する WordPress プラグインです。
このプラグインは、ポストグリッドブロックをはじめ、様々な Gutenberg ブロックを提供しています。 ポストグリッドブロックの場合には、無料版では、レイアウトが制限されているが、シンプルなポストグリッドを希望する場合は、無料版でも大丈夫な結果を示しています。
Postsブロックの場合は無料版では、デフォルト(グリッド)のレイアウトとリストのレイアウト、二つのレイアウトが提供され、 プレミアムバージョンで、より多様なレイアウトと機能が提供されます。
エレメン などのページビルダーを使用せずに WordPress 独自のエディタであるブロックエディタのみを使用してサイトを作成する場合は、このプラグインをページビルダーの代用として活用できるようです(」WordPress ブロックエディタ(Gutenberg)をページビルダーで作ってくれるStackableプラグイン"参照)。
Gutenberg Post Blocks(無料)
Gutenberg Post Blocksは素晴らしい Gutenberg ポストグリッドブロック、ポストリストブロック、動的なポストスライダーブロックとポストカルーセルブロックを作ることができる Gutenberg ポストブロックプラグです。
このプラグインを使用すると、ページビルダーを使用していなくても、 Newspaper テーマで提供されるものと同じ似たようなレイアウトのサイトを作成することができそうです。 無料版をテストしてみると提供されているレイアウトが プレミアムバージョンに比べて制限されており、いくつかの機能が有料版のみ提供されますが、下の図のようなレイアウトのサイトを作りたい場合は、無料版を利用してテストすることができます。
Content Views - Post Grid&List for WordPress (無料)
コンテンツビューは、簡単にポストグリッド/リストを作成することができるプラグインです。 このプラグインは、現在の10万以上のサイトに設置されて使用されており、無料版とPROバージョンがあります。
Content Views機能
- 100%反応型とモバイルフレンドリー
- SEOフレンドリーであり、速度の最適化
- ページネーション(ページネーション)をサポート
- WordPress ページ、ウィジェット、テーマにショートコードを使用して、簡単にポストグリッド表示
- 最新の記事を表示
- 特定のカテゴリ、タグ、作成者(ライター)、IDの書き込みを表示
- 特定のキーワードが含まれている文章を表示
- 親ページのサブページを表示
- グリッドギャラリーにポストの特性画像を表示
- タイトル、要約、全体の内容は、サムネイル、発行日、投稿者、カテゴリ、、コメント数を表示
- 日付、タイトルベースでポストソート
- グリッドに表示するポスト数制限
- 折りたたみリストにポスト表示します。 シンプルなポストスライダー
- 多くのカスタムaction、filterフックで簡単にカスタマイズおよび拡張
- PHP 7サポート
- GDPR準拠(Content Viewsは、個人情報を収集したり、保存しない)
Post Grid(無料)
Post Gridプラグインを使用してすべてのポストタイプのポストグリッドを作成することができ、数回のクリックでブログポスト、商品のショーケース、チームメンバーの紹介、ポートフォリオ、ギャラリー、アーカイブポスト表示、カテゴリ、ポスト表示、タグポストを表示するためのグリッドを作成することができます。 ユーザー定義の分類と用語ポストもポストグリッドを使用して表示することができます。 CSSの知識がつなぐ場合、レイアウトエディタを使用して、自分だけでスタイルを作成することができます。
グリッド
The Grid(よりグリッド)は、すべてのタイプのポストタイプを完全にカスタマイズが可能で、反応型グリッド(ポートフォリオ)システムで表示してくれる有料のプラグインです。 ブログ、ポートフォリオ、電子商取引、その他のすべてのタイプの WordPress ポストタイプを表示するために適しており、標準的な、ビデオ、オーディオ、ギャラリー、リンク、引用(quote)などの文の形式もサポートします。
The Gridの詳細については、次の記事を参考にしてください。
Elementor Post Grid Builder - Frontend Sort and Filter (エレメントポストグリッドビルダー)
Elementor ポストグリッドビルダーは Elementor Page Builder用のアドオンです。 Elementor ページビルダーは無料で利用できる素晴らしいページビルダーですが、無料版ではマガジン関連要素(エレメント)は提供されません。 Elementorを使用してポストをグリッドレイアウトで表示したい場合は、このプラグインを検討してください。
このプラグインを使用して、次の項目を表示することができます。
- ポスト(文)
- ポートフォリオ
- 서비스
- カスタムポストタイプ(ユーザー定義文のタイプ)
- WooCommerce 商品(WooCommerce Products)
- リスト(Listings)
- グリッドにACFフィールドを表示
- フロントエンドフィルタ(Frontend filtering)
- その他!
詳細情報とデモは、 Elementor Post Grid Builderプラグインページを参考にしてみてください。
Post Layouts Pro for Gutenberg(Gutenberg用ポストレイアウトのプラグイン)
Post Layouts Pro for Gutenbergは、追加のポストレイアウトスタイルが追加された Gutenberg アドオンです。 WordPressでページビルダーを使用せずに、ブログ/マガジンサイトを作成する場合は、このプラグインを利用してみることができるようになります。
主な機能
- 10種類のグリッドテンプレート
- 5つのリストのテンプレート
- グリッドレイアウトで最大4列のサポート
- 様々なポストメタ情報の表示/非表示]オプション
- 簡単なインストール、使用、カスタム
- すっきりとしたコード、レイアウト、デザイン
- 反応型
- 選択および変更可能な「Read More」テキストオプション
- 並べ替え - 最新順、古い投稿の最初、A→Z、Z→A
- 特性の画像スタイル - Landscape、Square
- ソーシャルメディアの共有ボタンのスタイル
- コーディングの知識は不要!
- 簡単な設定
- 文書化がうまくされている
- より多くの機能とオプションを追加する予定...
詳細情報とデモは、 Post Layouts Pro for Gutenbergプラグインのページを参考にしてみてください。
Posts Table Proプラグイン
投稿テーブルプロはポスト、ページ、カスタムポストタイプ、カスタムフィールド、分類などを表(テーブル)の形式で一覧表示することができるプラグインです。
WooCommerce 商品を表形式で一覧表示する Product Tableというプラグインもあります。
Content Viewsプラグインはどのように適用しますか?
テストしてから古くて正確な使い方は覚えていませんね。
次のビデオを確認してください。
https://youtu.be/2vVqoBJA9K8?si=zVoSu8QHDCVV299G
Viewを作成し、ショートコードを使って好きな場所に追加する方法ですね。
メインページのレイアウトに適用するには、ショートコードをどこに追加すればよいですか?
ショートコードは好きな場所に追加してください。たとえば、Homeページを1つ作成し、ショートコードを適切な場所に追加してから、Homeページを設定→読み取りでホームページ(前面ページ)として指定できます。
リンクされたビデオを参照してください。
こんにちは。 おかげで良い情報をたくさん知っています。 ありがとうございます。
もしこのサイトのメイン画面に投稿した投稿はどんなプラグインを書いたのでしょうか?
GeneratePress テーマの機能を使ったものです。
設定方法は次の記事で確認できます。
https://avada.tistory.com/2299
こんにちは。 良い文章よく見ています。 ワープを見ながら気になることできてコメントをつけてください。
もしかしたら私の上にベストセラー人気 WordPress テーマとなっている長いバナーはどのように入れるか気になります。 関連記事があれば教えてください^^
バナーは、いくつかの方法で表示が可能です。 このブログでは、 GeneratePress テーマで提供されるフックを使用してバナーを表示しました。
https://www.thewordcracker.com/basic/generatepress-%ED%85%8C%EB%A7%88-%EC%83%81%EB%8B%A8-%EB%B0%B0%EB%84%88-%ED%91%9C%EC%8B%9C%ED%95%98%EA%B8%B0-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-%EB%AF%B8%EC%82%AC%EC%9A%A9/
テーマで機能をサポートしていない場合、Top Barプラグインを使用することができます。
https://www.thewordcracker.com/basic/%EC%9B%8C%EB%93%9C%ED%94%84%EB%A0%88%EC%8A%A4-%ED%83%91-%EB%B0%94-%ED%94%8C%EB%9F%AC%EA%B7%B8%EC%9D%B8-top-bar-pro/
Braveポップアップビルダープラグインを使用してもTop Barを表示することができます。
https://www.thewordcracker.com/basic/%ec%82%ac%ec%9a%a9%ec%9d%b4-%ec%89%ac%ec%9a%b4-%ec%9b%8c%eb%93%9c%ed%94%84%eb%a0%88%ec%8a%a4-%ed%8c%9d%ec%97%85-%ed%94%8c%eb%9f%ac%ea%b7%b8%ec%9d%b8/
うわ、本当にありがとうございます。 WordPress 難しすぎて何度あきらめたんですけれど。 ここで多くの情報得ながら再度試してみます。 いつもありがとうございます^^
まず、基本的な使い方を習得ば助けになるでしょう。 また、初心者の状態では、目の高さを下げて実装することができることを先に実装して、うまくいかない部分は、後で試してみることができます。 最初はうまくいかなかっも時間の経過とともに知識が蓄積容易に解決される場合もあります。 基本的な WordPress 使い方は次の記事を参照してください。
https://www.thewordcracker.com/basic/how-to-start-wordpress/
こんにちは?
素敵な文章よく見ました。 グリッドのプラグインに対して関心があり、色々な資料をルックアップと多くの助けを受けました。
私は、グリッドのプラグインに対して要件がカーソル無料バージョンでは対応することが困難主プレミアムバージョンを中心に探して見先週次第整理をすることができました。
検討の結果その個人的には写真利用可能ではEssential Gridを使用すると、良いという考えをしており、多くのコンテンツを持って広告などを考慮すれば、Content Views Proが良いという考えをしました。
簡単に悩んだことまとめてみました。 こぶ参照してください
https://happist.com/570973/
こんにちは、Happist様。
Essential Gridプラグインは、いくつかの有料テーマにバンドルされてことを知っています。
数年前にだけでいい無料ポストグリッドのプラグインがあまりなかったが、最近では、プレミアム(Freemium)モデルで無料で提供されているプラグインが目立つね。
Newspaperのようにテーマ内でこのような機能を提供する場合、テーマ機能を使用することが望まれ見えます。 プラグインを使用すると、どうしてもサイトの速度に影響を与えるしかないようです。
一方では、シンプルですっきりと文を一覧表示することが良いかもしれないという気がしたりします。 特に、このような個人的なブログの場合、単純にリストのレイアウトでブログ記事を表示することも悪くないようです。
あなたの速度については、多くの悩みをしたんです。 どうしてもある程度の高度な機能を有効にする速度を犠牲にすることが必要になるようです。
私は他のプラグインを購入していなくて、テストしてみなかったが、Content Viewプラグインを適用する際GeneratPressテーマでオプション調整をうまくいけば速度低下は大きくないとみました。
- GeneratPressテーマインフィニットスクロール適用+ 450x250画像適用時ロード時間1.7秒
- GeneratPressテーマインフィニットスクロール適用+ 650x300画像適用時ロード時間2.1秒
- GeneratPressテーマ+ Content Viewプラグインのページネーション機能適用時2.2秒
そして Newspaperも良い代替とはいえ機能が多くの代わりに、その分遅くなります。 テーマに基本的に含まれていると、必ず速いのはなさそうですどうせデータロードして、これをデザインに合わせてプリョジュに時間がかかるでしょう。
私の経験では、グーテンベルクエディタに組み込まれてpost viewが最も早かった。 stackableのようなプラグインがデザインも流麗ながらもグリッドフォーマットをサポートしてそれでいてスピードも速いです。 ただし、このプラグインは、IEをサポートしていない。捨てられたIE笑
このブログでも最近 GeneratePress テーマに変更しました。
私はシンプルなサイトを好むため、あえてポストグリッドのプラグインの使用を試してみていない。
(まだサイトリニューアルが完了したわけではない、最近時間がないまま放置しています。ㅠ)
個人のブログならIEは今それほど考慮しなくてもなるようです。
私IE 11を昨年末までに使用したが、寀ーの多くのブログがIEで正しく表示されませんでした。
いくつかの記事のブログにこの問題を伝えると、「IEは捨てるべきもの」と数年前に聞いたことがあります。
Windows 7のサポート終了にIEのシェアは急下落すると見えます。