WordPressの投稿をカスタムフィールドで並べ替える方法
ウェブサイトのブログページでWordPressの投稿の順番を変更したいですか?それなら、この機能を学んで、投稿の順番を変更するのに適した場所にいるのです。そこで今回は、カスタムフィールドを使って投稿の順番を変更する方法を紹介します。
WordPressのデフォルトの投稿順は、公開日を基準として、逆時系列で表示されます。つまり、最新の投稿が一番上に表示されます。
WordPressにカスタムフィールドを追加することで、そのカスタムフィールドに基づいた順序を変更することができます。
カスタムフィールドを作成して、ブログページの投稿順を変更する方法を、以下の手順で説明します。
WordPressの投稿をカスタムフィールドで並べ替える
さっそく投稿にカスタムフィールドを作成し、投稿IDを使って値の保存と表示をしてみましょう。
投稿メタボックスでカスタムフィールドを作成する
投稿編集ページの右サイドバーにある投稿メタボックスに、数値のカスタムフィールドを作成することにします。このフィールドの値はpost metaテーブルに保存され、後で記事の順番を変更するために使用されます。
投稿メタボックスのカスタムフィールドについては、以下のコードを参照してください。
add_action('post_submitbox_misc_actions', 'add_publish_meta_custom_field');
function add_publish_meta_custom_field($post_obj) {
global $post;
$post_type = 'post';
$value = get_post_meta($post_obj-> ID, 'post_order', true);
$val = ($value) ? $value : "0";
if($post_type==$post->post_type) {
echo '<div class="misc-pub-section misc-pub-section-last">'
.' <label>Post Order <input name="post_order" type="number" step="1" min="0" id="post_order" value="post order" value="'. $val.'" class="small-text"></label>'
.' </div>';
}
}
上記により、公開メタボックスにカスタムフィールドが作成され、以下のようなフィールドが表示されます。
メタボックスでカスタムフィールドを公開する
カスタムフィールドの値を保存する
さて、Post Orderフィールドの値を保存する必要があります。そこで、次のようにします。
save_post
アクションフックを投稿を保存する前に実行し
update_post_meta()
は対応する記事のフィールドの値を保存するために使われます。
update_post_meta()
このアクションは、投稿IDとともにwp_postmetaテーブルに値を保存します。
OKです。このカスタムフィールドの値を保存するコードを参照してください。
add_action( 'save_post', 'save_publish_meta_custom_field', 10 , 3);
function save_publish_meta_custom_field($post_id, $post, $update) {
$post_type = 'post';
if ( $post_type ! = $post->post_type ) {
return;
}
if ( wp_is_post_revision( $post_id ) ) {
return;
}
if(isset($_POST['post_order'])) {
update_post_meta($post_id, 'post_order', $_POST['post_order']);
}
}
上記のコードは、カスタムフィールドの値をデータベースに保存し、その入力数値フィールドに表示されます。
カスタムフィールドに保存された値
WordPressの投稿順をカスタムフィールドで変更する
では、独自のオーダー値を使ってWordPressの投稿のデフォルトの順番を変更してみましょう。結果を表示する前に、以下のコードを実行します。
pre_get_posts
アクションフックを使って、既存のWP_Query投稿を変更します。
pre_get_posts
を変更するための解決策をいくつか教えてください。
wp_query
WP_Queryのカスタムを書く必要がない。
function pre_custom_post_order_sort( $query ){
if ( is_home() && $query->is_main_query() ){
$query->set( 'orderby', 'meta_value' );
$query->set( 'meta_key', 'post_order' );
$query->set( 'order' , 'ASC' );
}
}
add_action( 'pre_get_posts' , 'pre_custom_post_order_sort' );
上記のコード例では、ブログページまたはトップページのWordPressの投稿の順番を変更します。
この記事ではプライマリークエリとホームページをチェックし、メタ値 meta_key を使ってクエリの順序を設定しました。投稿にカスタムフィールドの値があるかどうかをチェックし、フィールドの値に基づいて一番上に配置します。
WordPressの投稿をテンプレートファイル内のカスタムフィールドでソートする
また、独自のカスタムWP_Queryを作成することで、投稿を順番に表示することも可能です。
WordPressのカスタムテンプレートページを作成し、そのテンプレートに独自のクエリを記述する必要があります。
WordPressでカスタムページテンプレートを作成する方法については、こちらのステップバイステップをご覧ください。
OKです。これで、カスタムテンプレートファイルができました。では、そのテンプレートに以下のコードを記述してください。
$args = array(
'post_type' => 'post',
'meta_key' => 'post_order',
'orderby' => 'meta_value',
'order' => 'ASC'
);
$query = new WP_query ( $args );
if ( $query-> have_posts() ) {
while ($query->have_posts() ) {
$query->the_post();
if ( !empty(get_post_meta( $post->ID, 'post_order', true )) ) {
the_title();
}
wp_reset_postdata();
}
上記のコードは、カスタムフィールドの値によって記事のタイトルを順番に表示し、カスタムフィールドの値に基づいて記事を一番上に配置します。
また、上記のコードのショートコードを functions.php ファイルに作成し、そのショートコードをウィジェットやページなど、記事を表示させたい場所で使用することもできます。
これで終わりです。WordPressの投稿をカスタムフィールドの値順に表示するのはこれで完了です。
さて、これでWordPressの投稿をカスタムフィールドで並べ替える方法は終わりですが、もっとWordPressのTipsを知りたい方は以下の関連記事をご覧ください。
関連
-
ラストオペレーターを語る
-
CookieのSameSiteプロパティの概要
-
ゲーム開発Unity2D画像任意の形状壊れたローブ効果ショー
-
コンピュータネットワークの毎日の練習問題、毎日少しずつ進歩する
-
ApacheJMeter ストレステストツール使用 インストールチュートリアル
-
Unityプロジェクトの最適化に関するヒント
-
Unity webglガイド 落雷回避エレメント使用法
-
0から1へのバックエンドアーキテクチャ構築の進化(MVC、サービス分割、マイクロサービス、ドメインドリブン)
-
WordPressメディアライブラリのカテゴリ/フォルダ管理プラグインのおすすめをいくつか紹介します。
-
Unityアニメーションについて ステートマシン アニメーター活用術 チュートリアル
最新
-
nginxです。[emerg] 0.0.0.0:80 への bind() に失敗しました (98: アドレスは既に使用中です)
-
htmlページでギリシャ文字を使うには
-
ピュアhtml+cssでの要素読み込み効果
-
純粋なhtml + cssで五輪を実現するサンプルコード
-
ナビゲーションバー・ドロップダウンメニューのHTML+CSSサンプルコード
-
タイピング効果を実現するピュアhtml+css
-
htmlの選択ボックスのプレースホルダー作成に関する質問
-
html css3 伸縮しない 画像表示効果
-
トップナビゲーションバーメニュー作成用HTML+CSS
-
html+css 実装 サイバーパンク風ボタン
おすすめ
-
Rust関数の説明
-
WordPressのカスタムページテンプレートの作成について解説
-
Gaussdb 200インストールデータスタジオjdbcアイデアリンクナニーレベルのインストール手順
-
Scratch 3.0の初期化でSeven Cows Cloudにsbsファイルを読み込む方法
-
Scratch3.0 sb3ファイル読み込み時のページ初期化 操作コード
-
SonarQubeの自動コードスキャン用インストールと統合方法
-
VS Nugetの実践的な使い方
-
パフォーマンステストによるネットワークスループット監視プロセスの説明
-
HTTP3の解析
-
IntelliJ IDEA/Android Studioベースプラグイン開発ガイド(推奨)