WordPressサイトに投稿フィルターを簡単に追加する方法
公開: 2015-01-25私がよく遭遇するリクエストは、ユーザーが自分のWebサイトのフロントエンドで投稿をフィルタリングまたは並べ替えることができるようにする機能です。
おそらく、ユーザーは投稿をアルファベット順に表示したいのでしょうか、それともサムネイル付きの投稿のみを表示したいのでしょうか。 これは通常の投稿にはすでに意味がありますが、製品、写真、またはその他のコンテンツタイプの場合はさらに意味があります。
今日の週末のWordPressプロジェクトでは、このような機能をTwentyFifteenテーマに実装する方法について簡単に説明します。 クラッキングしましょう！
- 子テーマの作成
- コントロールの作成
- クエリの変更
- よりスマートなフォーム
- WordPressの動作
- 結論
子テーマの作成
いつものように、子テーマが必要です。 WPMU DEVには、子テーマのガイドがあります。子テーマに慣れていない場合は、ぜひお読みください。
コントロールの作成
3つのコントロールを追加しましょう。1つは投稿の順序付け、1つは並べ替えの方向の設定、もう1つはサムネイル付きの投稿のみを表示するためのものです。
最初のステップは、親テーマのindex.phpを子テーマにコピーすることです。
子テーマでindex.phpファイルを開き、メインコンテナ（20行目にあるはずです）の下に次のHTMLを貼り付けます。
フロントエンドでは次のようになります。
ご覧のとおり、スタイリングが少し不足しています。 スタイルシートにいくつかのスタイルを追加して、それを解決しましょう。
プログラミングに対する新参者からよく耳にする反応は、「これらがテーマに溶け込むスタイルであることをどうやって知ったのか」というものです。
解決策は非常に簡単です：私はごまかします。 Chromeの開発ツールを使用して、通常の記事の要素を調べています。 この場合、要素がどのようにボックスシャドウとマージンを取得するかを確認でき、これらのルールを自分の要素に適用しただけです。
クエリの変更
「タイトル順」、「昇順」、「サムネイル付き投稿」を選択してフォームを送信しましょう。 コードに何もしなくても、実際に変更が表示されるはずです。
理由を確認するために、URLを調べてみましょう。 次のようになります。
http://yourdomain.com/?orderby=post_title&order=DESC&thumbnail=only_thumbnailed
ちょっとした情報は、 $_GET変数を使用してPHPスクリプトで呼び出すことができます。 WordPressは、orderパラメーターとorderbyパラメーターの意味をすでに認識しており、デフォルトのクエリでそれらを使用します。 結果として、注文と注文の方向性だけが必要な場合は、実際にはすべて完了です。
それはすべて素晴らしいことですが、繰り返しになりますが、どうやってこれを知ったのですか？ 「orderby」の代わりに「order_by」をパラメーターとして使用することもできます。 この場合、WordPressは私たちの意図を理解しません。 WordPress CodexのWP_Queryドキュメントを見てみました。そこにはたくさんのパラメーターがあり、その多くはURLで使用できます。
それでは、投稿サムネイルパラメータを実装しましょう。 キー_thumbnail_id関連付けられたメタデータがある投稿には、サムネイルがあります。 これが考慮されるように、クエリを変更する必要があります。 これをquery_posts()で実行してみましょう。
次のコードをファイルの先頭にあるget_header()関数の上に貼り付けます。
元のクエリのパラメータを独自の新しいパラメータとマージします。これにより、異なる投稿のセットが作成されます。 フォームは機能するようになりましたが、選択内容が記憶されていません。 フォームを書き直し、PHPを使用して修正しましょう。
よりスマートなフォーム
セレクターごとに注文のすべてのオプションを一覧表示することに加えて、どのオプションが選択されているかを示す方法が必要です。 ループなしでこれを行うと、次のようになります。
分かりますか？ 私はあなたを責めません！ 各オプション内で、現在選択されている値がオプションの値と等しいかどうかを確認しています。 そうである場合は、選択したプロパティを出力します。 ループを使ってこれをもっときれいにしましょう：
これは少し長くなりますが、3つのオプションがあるためです。 これは、あらゆる種類の選択を管理するためのより良い形式です。 これをフォーム全体に拡張してみましょう。
全部終わった。 これで、フォームはURLの$_GET変数に基づく選択を記憶するはずです。
WordPressの動作
WP_Queryのドキュメントを見たので、「order」と「orderby」を使用することを知っていると言ったことを覚えていますか？ これは良い習慣ですが、予期しない結果につながる可能性があります。 あなたが持っているカテゴリーのスラッグを見つけてください、このカテゴリーが「ワードプレス」であると言ってください。
次のURLを使用します：http：//yourwebsite.com/？category_name=wordpress。 すべてのWordPress投稿を一覧表示したカテゴリアーカイブが表示されます。 これは問題ありませんが、2つの問題があります。
かなりのパーマリンクをオンにしている場合（そうする必要があります）、ページは新しいURL（おそらくhttp://yourwebsite.com/category/wordpress）にリダイレクトされています。 archive.phpファイルがindex.phpではなくこのビューを処理するため、フィルターは表示されません。 さらに、カテゴリ名はURLパラメータとして渡されないため、フィルタを機能させるためにいくつかの追加のトリックを使用する必要があります。
これを機能させるための簡単な方法は、WordPressが使用するのと同じパラメーターを意図的に使用しないことです。 WordPressはこれを取得しないため、URLのcatnameパラメーターを使用してカテゴリー名を渡すことができます。 次に、正しいパラメータ名を使用してこれをクエリにフィードできます。 このようなもの：
別の方法は、 index.phpにフォームをそのまま出力する代わりに関数を使用することです。 WordPressクエリ自体からカテゴリを検出し、それに基づいて現在の選択を表示する必要があります。
結論
独自のフィルターを追加することはそれほど難しいことではありませんが、少し手を加える必要があります。 私たちの場合、順序がランダムに設定されているときにページネーションが削除されていることを確認することをお勧めします。 これは、ページをリロードするだけの「ランダム性を表示」ボタンに置き換えることができます。
この記事で、これを自分で実現する方法の基本がわかり、必要なフィルターを作成できるようになることを願っています。
タグ：