WordPressカスタム投稿タイプ–さらに進んで

公開: 2020-12-16

WordPressカスタム投稿タイプに関するシリーズでは、これまでプラグインを使用してカスタム投稿タイプを作成する方法と、独自のカスタムコードスニペットを作成してカスタム投稿タイプを手動で作成する方法について説明してきました。また、WordPress管理者からより簡単に処理できるように、投稿タイプにいくつかの基本的な構成を適用する方法についても説明しました。これらの記事をまだチェックしていない場合は、ぜひご覧ください。

この記事では、以前に作成したカスタム投稿タイプに基づいて、Webサイトでの機能と使いやすさを拡張することにより、さらに一歩進んでいきます。フォローしたい場合は、記事「WordPressカスタム投稿タイプを手動で作成する」で作成したカスタム投稿タイプを作成する必要があります。次の情報が意味をなすように、最初に作成したことを確認してください。

始めましょう！

カスタム投稿タイプをどこにでも表示

ご覧のとおり、以前にカスタム投稿タイプを作成して、Webサイトにレシピを表示しました。これは、カスタム投稿タイプが当社のWebサイトの機能を拡張するための非常に便利な方法である状況の完璧な例です。

この例では、レシピの投稿をメインのWebサイトメニューに追加することで表示できました。また、レシピ関連のすべての投稿を一覧表示するアーカイブビューを設定します。これらは、新しいカスタム投稿タイプを表示するための優れたオプションですが、このコンテンツをWebサイトの他の場所に表示したい場合はどうなりますか？

WP_Query関数を使用したカスタム投稿タイプの表示

Webサイトで選択した場所に新しいレシピの投稿を表示するために、 WP_Query関数を使用します。その引数には、クエリする投稿タイプを定義するため、このインスタンスで使用されるpost_typesを見つけることができます。それに加えて、公開ステータスのレシピ投稿を表示し、日付の降順で並べ替えて最新のものを最初に表示するため、 publishパラメーターとorderbyパラメーターを使用します。

著作権情報の上にあるウェブサイトのフッターにレシピの投稿のリストを表示したいとします。これを行うには、コードのスニペットを使用します。この場合、 <footer>要素の先頭の下にあるsingular.phpファイルに挿入する必要があります。

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?>

この例では、現在のデフォルトのWordPressTwentyTwentyテーマを使用しています。 Twenty Twenty以外のテーマを使用する場合は、テーマのフッターコンテンツを含むファイルを編集する必要があります。

コードを追加すると、Webサイトを開くことができ、フッターにレシピの投稿が表示されます。

フッター内のこれらの投稿のレイアウトと外観は、CSSを使用して希望どおりに見えるようにスタイルを設定できます。 CSSを追加するのに最適な場所は、テーマのメインフォルダーの下にあるstyle.cssファイルです。以下に、使用できる可能性のあるCSSをいくつか示します。

 .recent-recipes h3 { font-size: 18px; margin: 15px 0; } .recipe { float: left; margin: 15px; } .recent-recipes { height: 240px; margin: 0 auto; width: 1190px; }

このCSSが保存され、ページが更新されると、フッターのレシピ投稿のレイアウトが次のように変更されます。

ループをリセットすることの重要性

コードで必要な引数を定義した後、postループがwp_reset_postdata()関数で開始および終了することに気付いたかもしれません。この関数の使用は非常に重要であり、その理由は次のとおりです。

WordPressがページレイアウトを作成するとき、ページにループが1つしかない場合に正常に機能するグローバル$post変数を使用します。カスタムループを追加したので、基本的にグローバル$post変数をオーバーライドし、ループがリセットされることをWordPressに通知しない限り、ループで定義したカスタム投稿タイプを使用してそこから再開します。

上記のコードの下に投稿タイトルを次のようにエコーして、これが実際にどのように機能するかを見てみましょう。

 <?php $args = array( 'post_type' => 'recipes', 'post_status' => 'publish', 'orderby' => array( 'date' => 'DESC' ), ); $recipes = new WP_Query( $args ); if( $recipes->have_posts() ) { ?> <div class="recent-recipes"> <?php while( $recipes->have_posts() ) : $recipes->the_post(); ?> <div class="recipe"> <a href=""><?php get_post_permalink(); ?><h3><?php the_title(); ?></h3> <?php the_post_thumbnail( 'thumbnail' ) ; ?> </a> </div> <?php endwhile; wp_reset_postdata(); ?> </div> <?php } else { esc_html_e( 'No recipes found' ); } ?> <?php the_title(); ?>

ここで、Webサイトのフロントエンドのページを更新すると、最近のレシピの下に「Post1」というタイトルが表示されます。

wp_reset_postdata();を使用して元のループにリセットするため、これは理にかなっています。関数。

ここで、 wp_reset_postdata();をコメントアウトします。あなたのコードから。 the_title();に気付くでしょう。コードは、「投稿1」ではなく「レシピ1」のタイトルをエコーします。

カスタム投稿タイプ–さらなる管理

カスタム投稿の動作と外観をさらにカスタマイズするために、前の記事で「レシピ」投稿タイプを登録するために使用したコードの拡張として追加できるいくつかのオプションを見ていきます。

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, ) ); } add_action( 'init', 'recipes_post_type' );

次の目的で、さらにいくつかの引数を追加します。

レシピのURLスラッグを変更するカスタム投稿タイプ
カスタム投稿タイプ管理メニューの位置を変更します
メニューアイコンを変更する

カスタム投稿タイプのURLスラッグの変更

レシピ投稿を作成して「レシピ1」という名前を付けると、パーマリンクが「」に設定されている場合、「レシピ1」投稿のデフォルトURLはhttps://mycompanyname.com/recipes/recipe-1/のようになります。パーマリンク設定の「投稿名」。

URLでのレシピカスタム投稿タイプの表示方法を変更する場合は、 slugキーでrewrite引数を使用できます。

URLからわかるように、この引数をスキップすると、デフォルト値はカスタム投稿タイプラベル「レシピ」になります。たとえば、これをmy-home-recipesに変更する場合は、コードスニペットを次のように編集して上書きする必要があります。

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), ) ); } add_action( 'init', 'recipes_post_type' );

これで、パーマリンクを保存して（パーマリンクのキャッシュをフラッシュして）レシピをもう一度表示すると、URLはhttps://mycompanyname.com/my-home-recipes/recipe-1/になります。

スラッグを変更する場合は、メインメニューページでアーカイブURLも/recipes/から/my-home-recipes/に変更する必要があることに注意してください。

カスタム投稿タイプメニューの位置を変更する

[レシピ]メニューを別の位置に移動する場合は、次のようにmenu_position引数を使用できます。

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, ) ); } add_action( 'init', 'recipes_post_type' );

この引数に使用できる値は次のとおりです。

0：最上部
5：投稿の下
10：メディアの下
15：以下のリンク
20：ページの下
25：コメントの下
60：メニューの最初のギャップの下
65：プラグインの下
70：ユーザーの下
75：ツールの下
80：以下の設定
100：メニューの2番目のギャップより下

以下のスクリーンショットは、 menu_position引数に値5が追加されたときのメニューの位置を示しています。

カスタム投稿タイプメニューアイコンの変更

現在、[レシピ]メニューはデフォルトの投稿アイコンを使用しています。それはそれがそれ自身のユニークなアイコンを持っていたのはいい感じでしょう。これを実現するために、 menu_icon引数を使用できます。

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'https://mycompanyname.com/wp-content/uploads/2020/10/recipes.svg', ) ); } add_action( 'init', 'recipes_post_type' );

独自のアイコンを表示するには、メニューアイコンの場所の完全なURLを挿入するか（上記のコードに示すように）、アイコンのクラス名を追加してWordPressDashiconsライブラリを使用できます。ここで、対応するクラスのアイコンを確認できます。

たとえば、食べ物のアイコンを選択した場合は、次のようにコードに追加します'menu_icon' => 'dashicons-food' 。

 function recipes_post_type() { register_post_type( 'recipes', array( 'labels' => array( 'name' => __( 'Recipes' ), 'singular_name' => __( 'Recipe' ) ), 'public' => true, 'show_in_rest' => true, 'supports' => array('title', 'editor', 'thumbnail'), 'has_archive' => true, 'rewrite' => array( 'slug' => 'my-home-recipes' ), 'menu_position' => 5, 'menu_icon' => 'dashicons-food', ) ); } add_action( 'init', 'recipes_post_type' );

最終的には、選択したアイコンがカスタム投稿メニューに表示されます。カスタム投稿を本当にカスタムに感じさせるのに役立ちます。

参考文献

プラグインを使用してWordPressカスタム投稿タイプを作成する
WordPressカスタム投稿タイプを手動で作成する
独自のプラグインを使用してWordPressカスタム投稿タイプを作成してください！

結論

うまくいけば、これらのヒントが、独自のカスタム投稿タイプを作成するための探求に本当に役立ち、そうすることで、WordPressWebサイトの機能と使用法をさらに改善できるようになります。すべてのコーディングと同様に、時間をかけて遊んで、新しいコードがWebサイトにどのように影響するかを確認することをお勧めします。これらの基盤の上に構築することで、大幅なカスタマイズが必要なさらに複雑なプロジェクトに取り組むことができます。