検索

カテゴリごとに最新の投稿を表示

Aug 31, 2023 am 11:29 AM
キーワード抽出最新の投稿を表示カテゴリ表示

デフォルトでは、メインの WordPress ブログ ページには、最新の投稿が日付の降順で表示されます。ただし、サイトでカテゴリを使用しており、読者が各カテゴリの新しいコンテンツを見たいと考えている場合は、ブログ ページの見た目を変える必要があるかもしれません。

このチュートリアルでは、これを行う方法を説明します。その方法を説明します:

  • ブログ上のすべてのカテゴリを特定する
  • 投稿ごとに最新の投稿を表示するか、投稿に注目の画像がある場合はそれを表示します
  • 複数のカテゴリの投稿が重複していないことを確認してください
  • スタイルを追加して見栄えを良くします
###あなたは何が必要ですか###

このチュートリアルに従うには、次のものが必要です:

WordPress の開発インストール。
  • いくつかの投稿とカテゴリが設定されました。 WordPress テーマの単体テスト データのデータ例を使用しました。
  • ###テーマ。 「Twenty Four」トピックのサブトピックを作成させていただきます。
  • コードエディタ。
  • テーマの設定
最初のステップはテーマを設定することです。

style.css

index.php という 2 つのファイルだけを使用して、Twenty-F​​our テーマの子テーマを作成します。 これは私のスタイルシートです: リーリー

後でこのファイルに戻ってスタイルを追加しますが、今のところ WordPress が子テーマを認識する必要があるだけです。

インデックスファイルの作成

メインのブログ ページに各カテゴリの最新の投稿を表示したいので、子テーマに新しい

index.php

ファイルを作成します。

空のindex.phpファイルを作成します

まず、24 から

index.php

ファイルをコピーし、ループなどを編集して次のようにします。

リーリー 識別カテゴリ

最初のステップは、ブログ内のカテゴリを決定することです。次に、

タグを開き、次のコンテンツを追加します: リーリー <div id="content">これは、get_categories() 関数を使用して、ブログ内のカテゴリのリストを取得します。デフォルトでは、これはアルファベット順に取得され、空のカテゴリは含まれません。これは私にとってはうまくいくので、追加のパラメーターは追加しません。 <p> <code class="inline">次に、 foreach ( $categories as $category ) {}

を使用して、各カテゴリを順番に実行し、中括弧内のコードを実行するように WordPress に指示します。次のステップでは、各カテゴリに対して実行されるクエリを作成します。

クエリパラメータを定義する

次に、クエリのパラメータを定義する必要があります。次の行を中括弧内に追加します:

リーリー

これにより、現在のカテゴリの投稿は 1 つだけ取得されます。

クエリを実行

次に、

WP_Query

クラスを使用してクエリを挿入します。

リーリー これにより、各記事の注目の画像、タイトル、抜粋が出力され、それぞれがリンクに含まれます。

今度はどのようになるか見てみましょう:

ご覧のとおり、問題があります。マイページには各カテゴリの最新の投稿が表示されますが、1 つの投稿が複数のカテゴリの最新の投稿になる場合があるため、重複した投稿となります。この問題を解決しましょう。 カテゴリごとに最新の投稿を表示

重複投稿を避ける

get_categories()

関数を追加する行の上に、次の行を追加します。 リーリー

これにより、$do_not_duplicate という空の配列が作成されます。これを使用して各投稿出力の ID を保存し、後でクエリされる投稿の ID がその配列内にあるかどうかを確認します。

次に、クエリ オプションの下に新しい行を追加します。最初の 2 行は次のようになります。 リーリー これにより、現在の投稿の ID が

$do_not_duplicate

配列に追加されます。

最後に、新しいパラメーターをクエリ パラメーターに追加して、この配列内の投稿が出力されないようにします。あなたの引数は次のようになります: リーリー これは、

'post__not_in'

パラメーターを使用して投稿 ID 配列を検索します。

index.php ファイルを保存し、ブログ ページを再度表示します:

############これの方が良い!これで、あなたの投稿は重複しなくなりました。

スタイルを追加

カテゴリごとに最新の投稿を表示現在、コンテンツは少し広がっており、注目の画像が投稿のタイトルと抜粋の上に表示されます。スタイルを追加して、画像を左に寄せてみましょう。

テーマの

style.css

ファイルに次の内容を追加します:

リーリー

コンテンツがページに適合し、レイアウトが改善されました:

このテクノロジーをさまざまなコンテンツ タイプに適応させる

この手法を応用して、さまざまなコンテンツ タイプや分類を処理できます。例えば:###
  • カテゴリの代わりにカスタム分類用語を使用したい場合は、get_categories()get_terms() に置き換え、'cat' クエリを変更します。分類用語を検索するためのパラメータ。
  • 別の投稿タイプを使用している場合は、同様のコードをテンプレート ファイルに追加して、その投稿タイプを表示できます。 'post_type' => 'post' パラメータをクエリ パラメータに置き換えます。タイプ。
  • メイン ブログ ページ内に別のページを作成して、特定のカテゴリの投稿タイプの最新の投稿を表示する場合は、カテゴリ アーカイブ テンプレートを作成し、このコードの適応バージョンをそれに追加できます。 李>
  • さらに一歩進んで、ネストされた foreach ステートメントを使用して複数のループを実行することで、複数の分類法または複数の投稿タイプでこの手法を使用できます。
  • 上記のコードを single.php ページに追加すると、投稿コンテンツの後に各カテゴリの最新の投稿へのリンクが表示されます。これを行う場合は、現在表示されているページの ID を $do_not_duplicate 配列に追加する必要があります。
###まとめ###

ブログの最新の投稿を別の方法 (単に時系列順ではなく) で表示すると便利な場合があります。ここでは、ブログ上の各カテゴリの最新の投稿を表示し、複数のカテゴリで投稿が重複しないようにする手法を示します。

以上がカテゴリごとに最新の投稿を表示の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
HTML、CSS、およびJavaScriptの未来:Web開発動向HTML、CSS、およびJavaScriptの未来:Web開発動向Apr 19, 2025 am 12:02 AM

HTMLの将来の傾向はセマンティクスとWebコンポーネントであり、CSSの将来の傾向はCSS-in-JSとCSShoudiniであり、JavaScriptの将来の傾向はWebAssemblyとServerLessです。 1。HTMLセマンティクスはアクセシビリティとSEO効果を改善し、Webコンポーネントは開発効率を向上させますが、ブラウザの互換性に注意を払う必要があります。 2。CSS-in-JSは、スタイル管理の柔軟性を高めますが、ファイルサイズを増やす可能性があります。 CSShoudiniは、CSSレンダリングの直接操作を可能にします。 3. Webassemblyブラウザーアプリケーションのパフォーマンスを最適化しますが、急な学習曲線があり、サーバーレスは開発を簡素化しますが、コールドスタートの問題の最適化が必要です。

HTML:構造、CSS:スタイル、JavaScript:動作HTML:構造、CSS:スタイル、JavaScript:動作Apr 18, 2025 am 12:09 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。1。HTMLは、Webページ構造を定義し、2。CSSはWebページスタイルを制御し、3。JavaScriptは動的な動作を追加します。一緒に、彼らは最新のウェブサイトのフレームワーク、美学、および相互作用を構築します。

HTMLの未来:ウェブデザインの進化とトレンドHTMLの未来:ウェブデザインの進化とトレンドApr 17, 2025 am 12:12 AM

HTMLの将来は、無限の可能性に満ちています。 1)新機能と標準には、より多くのセマンティックタグとWebComponentsの人気が含まれます。 2)Webデザインのトレンドは、レスポンシブでアクセス可能なデザインに向けて発展し続けます。 3)パフォーマンスの最適化により、応答性の高い画像読み込みと怠zyなロードテクノロジーを通じてユーザーエクスペリエンスが向上します。

HTML対CSS対JavaScript:比較概要HTML対CSS対JavaScript:比較概要Apr 16, 2025 am 12:04 AM

Web開発におけるHTML、CSS、およびJavaScriptの役割は次のとおりです。HTMLはコンテンツ構造を担当し、CSSはスタイルを担当し、JavaScriptは動的な動作を担当します。 1。HTMLは、セマンティクスを確保するためにタグを使用してWebページの構造とコンテンツを定義します。 2。CSSは、セレクターと属性を介してWebページスタイルを制御して、美しく読みやすくします。 3。JavaScriptは、動的でインタラクティブな関数を実現するために、スクリプトを通じてWebページの動作を制御します。

HTML:それはプログラミング言語か何か他のものですか?HTML:それはプログラミング言語か何か他のものですか?Apr 15, 2025 am 12:13 AM

htmlisnotaprogramminglanguage; itisamarkuplanguage.1)htmlStructuresandformatswebcontentusingtags.2)ItworkswithcsssssssssdjavascriptforInteractivity、強化を促進します。

HTML:Webページの構造の構築HTML:Webページの構造の構築Apr 14, 2025 am 12:14 AM

HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。

テキストからウェブサイトへ:HTMLの力テキストからウェブサイトへ:HTMLの力Apr 13, 2025 am 12:07 AM

HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1)htmlは、などのタグを介してドキュメント構造を整理します。 2)ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3)マルチメディア関数を強化するなど、HTML5の新機能。 4)一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5)最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。

HTML、CSS、およびJavaScriptの理解:初心者向けガイドHTML、CSS、およびJavaScriptの理解:初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript:1)htmlStructuresContent、2)cssStylesit、および3)Javascriptaddsinteractivity、形成、

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

DVWA

DVWA

Damn Vulnerable Web App (DVWA) は、非常に脆弱な PHP/MySQL Web アプリケーションです。その主な目的は、セキュリティ専門家が法的環境でスキルとツールをテストするのに役立ち、Web 開発者が Web アプリケーションを保護するプロセスをより深く理解できるようにし、教師/生徒が教室環境で Web アプリケーションを教え/学習できるようにすることです。安全。 DVWA の目標は、シンプルでわかりやすいインターフェイスを通じて、さまざまな難易度で最も一般的な Web 脆弱性のいくつかを実践することです。このソフトウェアは、

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強力な PHP 統合開発環境

PhpStorm Mac バージョン

PhpStorm Mac バージョン

最新(2018.2.1)のプロフェッショナル向けPHP統合開発ツール