wordpress 記事一覧 カテゴリ 6

// fixed01のWORKSが不定期なため共通処理とする >>本文を出力するthe_content(), これがもしサブループでの実装だった場合、ループするためのコードに少し変更が加わります。, ちょっと記述が加わっていますね。この追加された記述が、サブループ用に取得するデータの指定になります。, このサブループについての解説は、下記の記事で詳しく行なっています。ぜひ併せて読んでみてください！, ここまでの実装方法は汎用性が高いのでぜひ覚えておいて欲しいのですが、いかんせんPHPを必ず使うのでハードルが高いことは否めません。, そんな時の強い味方、プラグイン！　プラグインはWordPressに機能を追加するものですね。ありがたいことに、記事一覧を表示するプラグインも存在しています。, 今回作成したような一覧を、ショートコードを書くだけで実装できるプラグインです。難しいPHPのコードを書く必要はありません。, こちらもショートコードで一覧を実装できるプラグインなのですが、Display Posts Shortcodeと違いカテゴリやタグに特化したプラグインです。, でも大丈夫。なぜなら昔、ノンプログラマーだった私も、いろんな記事を参考に一覧ページの作り方を学んだからです。オリジナルテーマの作成には必須のスキルである記事一覧ページ作成。, 当プログラミングスクール「侍エンジニア塾」では、これまで6000人以上のエンジニアを輩出してきました。 新しい記事を作成し、カテゴリーを設定してみます。画面左側の「投稿」メニューの中にある「新規追加」メニューをクリックして下さい。 「新規投稿を追加」画面が表示されます。タイトルや本文などを入力しました。 今回は記事にカテゴリーを設定してみます。右サイドバーの少し下の方に「カテゴリー」を設定するブロックがあります。 まだ新しいカテゴリーを作成していないので、カテゴリー一覧にはデフォルトカテゴリである「未分類」だけが表示されています。今回は新しいカテゴリーを追加 … トップページなどに、特定のカテゴリやタグの記事一覧を表示させたいときってありますよね。ここでは、投稿ページのカテゴリやタグを指定して記事を一覧表示させる方法（いわゆるサブループ）についてお話します。, $cat_postsという変数名は自由に変更していただいて結構です。上記のコードをご自分の設定に直してテンプレートに貼り付けていただければ指定したカテゴリ記事の一覧が表示されます。ループの内容は記事タイトルとカテゴリ、日付、抜粋という簡単な作りになっているので、いろいろカスタマイズしてください。, コードの解説です。下記のコードの行をクリックするとその行の説明が開きますので、お好きな行をクリックしてみてください。, 「取得する投稿の設定」のところで取得したい投稿の設定を行い、それを「ループで設定した投稿データを出力」のところで出力します。上記の骨組みは公式のようなものなので覚えてしまっても良いかもしれません。, 'category' => 1,という形で予め「1」が入っていますので、これを表示させたいカテゴリIDに入れ替えます。私のPCのみかもしれませんが、「テーマの編集」のところで、「全角入力」でカテゴリIDを書き換えると数字が半角でも、テンプレートでエラーになってしまいます。カテゴリIDの編集は必ず「直接入力」で行いましょう。, もしも、IDではなく下の行のスラッグで指定したいという場合は、この行はまるごと削除してしまいましょう。, ちなみに初期値は、'DESC'になっていますので、デフォルトで良い場合はわざわざ指定せずにまるごと行を削除してしまってもかまいません。, そのため、これを使用する際は前もって宣言が必要になります。テンプレート内で使用する文には宣言は必要がないみたいですが、一応、どこで使用してもトラブルがないよう宣言を入れてあります。, という形でif文になっていますので、カッコの中の変数$cat_postsの中身が空でない場合は「真」とて扱われます。つまり、次のforeach...が実行されるということです。, foreach($cat_posts as $post):は、foreach文といって、, という仕組みになっています。「配列変数」のところに入っている記事の配列（記事のまとまり）が$postという変数として１つずつ取り出されます。, さらに、setup_postdata($post);のところでは、それぞれの記事をページで表示できるように整えて（セットして）います。, $tag_postsという変数名は自由に変更していただいて結構です。ループの中でちゃんと指定したタグが表示されているかが確認できるようにループのタイトルの下にタグを表示させてあります。, 'tag_id' => 1,という形で予め「1」が入っていますので、これを表示させたいタグIDに入れ替えます。私のPCのみかもしれませんが、「テーマの編集」のところで、「全角入力」でカテゴリIDを書き換えると数字が半角でも、テンプレートでエラーになってしまいます。タグIDの編集は必ず「直接入力」で行いましょう。, IDではなく下の行のスラッグで指定したいという場合は、この行はまるごと削除してしまいましょう。, という形でif文になっていますので、カッコの中の変数$tag_postsの中身が空でない場合は「真」とて扱われます。つまり、次のforeach...が実行されるということです。, foreach($tag_posts as $post):は、foreach文といって、, 下記のようにカテゴリを指定する方法と、タグを指定する方法を組み合わせれば、カテゴリとタグを同時に指定した記事の一覧を作ることも可能です。, $my_posts = get_posts(array(...));の間には、下記のようにいろんな条件でタグやカテゴリを指定することができます。, 最後に、いろいろ編集するときの注意点があります。get_postsの中身をいじるときは、各行の最後にあるカンマ「,」に気を付けてください。最後の行以外はカンマが入っていないとエラーになります。ここだけは気をつけて編集してくださいね。, Illustratorで同じ色をいろんなオブジェクトで使用している場合、色の変更…, WordPressは、他人にログイン画面のURLを見つかってしまうと、ログインさ…, ここでは、Illustratorで縦書きのテキストの大きさを異なるサイズにした際…. 侍エンジニア塾は上記3つの成功ポイントを満たすようなサービス設計に磨きをかけております。, 「自分のスタイルや目的に合わせて学習を進めたいな」とお考えの方は、ぜひチェックしてみてください。, 1991年生まれ。 各投稿記事を下記のようにカテゴライズ(グルーピング)することができます。 WordPressの記事一覧ページの作り方がよくわからない方向けに、初心者でも1から理解できるように作り方を解説しています。 WordPressのカテゴリーとは. googletag.pubads().setTargeting('blog_type', 'Tech');

}); WordPressに関わらず、ブログに欠かせないあるページがあります。そう、記事一覧ページです。みなさん、あれってどんな仕組みで作られているかご存知ですか？, そんな意欲的なみなさん必見。WordPressの記事一覧ページの仕組みについて解説していきます。下記の流れで、記事一覧ページを自作できるようになっちゃいましょう。, 記事一覧ページの仕組みがわかれば、WordPressのテーマ作成はできたも当然。しっかり学んじゃいましょう！, 記事一覧ページとは、言葉通り、記事が一覧で並んでいるページですね。 文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。

WordPressには、このループに2つの種類があります。それが、「メインループ」と「サブループ」です。, メインループとは、文字通りメインとなるループのことです。…と言ってもよくわからないですよね。, WordPressのページ表示は、PHPというプログラムのファイルが使われています。さらに、ページを表示する時、そのページの表示に使われるPHPファイルが決まっているのです。, 例えば、カテゴリーの一覧を表示する時にはcategory.phpというファイル名のファイルに書かれているコードが使用されます。固定ページならpage.php、記事の詳細ページならsingle.phpという風に、各ページで決まっているのです。, これを、テンプレート階層と言います。テンプレート階層の詳細は、リファレンスも確認してみてくださいね。, このテンプレート階層により、「このファイル名の時にこのデータを使って処理をする」という決まりが作られているのです。この決まりをそのまま使い、同じ処理を繰り返すことをメインループと言います。 新しい記事にカテゴリーを設定する, 投稿済みの記事のカテゴリーを設定する, カテゴリーを設定しなかった場合の扱い. つまり、元々決まっているデータをそのまま使って繰り返し処理をするということですね。これが、WordPressの基本となっています。, サブループはメインループと違い、テンプレート階層に囚われずに使えるループのことです。なぜなら、サブループを指定する時にどのデータを使うのかを指定するからです。例えば、トップページに最新記事一覧を出したいなんて時がありますよね。トップページとして使えるファイルはindex.phpやhome.phpというファイル名のものです。, 残念ながら、このファイル名には記事のデータを使うことができない時があります。サイトのTOPページとして使用している場合がそのパターンです。, そんな時、記事のデータを使うという条件をつけたサブループを用意することで、データを引っ張ってきて表示することができるのです。



googletag.defineSlot('/21812778492/blog_300x250_common_fixed01', [[300, 250], [336, 280]], 'div-gpt-ad-1559710191960-0').addService(googletag.pubads()); googletag.defineSlot('/21812778492/blog_300x600_common_sidemiddle01_adsense', [300, 600], 'div-gpt-ad-1571293897778-0').addService(googletag.pubads());

googletag.defineSlot('/21812778492/blog_300x250_common_fixed01_adsense', [[300, 250], [336, 280]], 'div-gpt-ad-1565194485392-0').addService(googletag.pubads()); googletag.defineSlot('/21812778492/blog_300x250_common_ctc02_adsence', [300, 250], 'div-gpt-ad-1566564559478-0').addService(googletag.pubads());

WordPressのカテゴリーは投稿の各記事をカテゴライズ・グルーピング化するための機能 です。.

投稿でカテゴリを指定したサブループ

AdminWeb ©2006-2020 Buzzword Inc.. All Rights Reserved. googletag.cmd = googletag.cmd || [];

条件の指定が必要な分ちょっとだけコードが長くなりますが、条件をしっかり指定すればどこでも使える、とても使い勝手のいいループの書き方なのです。, ループについて理解すれば、あとはコードを書くだけ。早速ページを作っていきましょう。, 仕様を決められたら、コードを書くファイルを用意していきます。ファイルは、テンプレート階層に合わせたファイル名である必要があります。全記事一覧ならarchive.php、カテゴリ別記事一覧ならcategory.phpという感じです。, 下記のリファレンスから、どのファイル名が仕様に合っているのかを確認の上、用意しましょう。, ファイルが用意できたら、いよいよコードを書いていきます。下記のコードを書くことで、一覧を出力することができます。, 記事一覧ページに該当するURLにアクセスすれば、準備したコードによる記事一覧の表示が確認できます。

Copyright ©  コトダマウェブ All rights reserved. googletag.pubads().enableSingleRequest(); あとはこれにCSSを指定してあげれば、一覧ページの完成です！, 先ほどファイルに貼り付けたコード、どんな処理をしているのか気になりますよね。そのモヤモヤ、そのままにはしません。この項目でしっかり解説をしていきます。, 処理を理解することで、自分でコードをカスタマイズすることも可能になります。ちょっと難易度が上がりますが、ぜひチャレンジしてみてください。, まず最初に、if ( have_posts() )で記事の有無を判断しています。記事があると判断されると、PHPの繰り返し処理をする関数、whileを使ってのループが始まる仕組みです。, ここでポイントなのが、the_post()です。the_post()は、繰り返し処理が始まった直後、現在見ている記事から次の記事のデータへと移動するWordPress独自の関数です。これが入っていることにより、繰り返し処理でも同じ記事が出力されるのではなく、次の記事が出力されるのです。, ところどころに入っているPHPの記述は、タイトルや本文をデータベースから取得するための記述です。, >>タイトルを出力するthe_title() 体は日本酒でできている。, https://ja.wordpress.org/plugins/display-posts-shortcode/, https://ja.wordpress.org/plugins/list-category-posts/. googletag.defineSlot('/21812778492/blog_300x250_common_ctc01_adsence', [300, 250], 'div-gpt-ad-1566564396953-0').addService(googletag.pubads()); 2017年10月まではウィジェットで使っていましたが、フロントページを抜粋記事一覧に変更したことで、ウィジェットの長さが抜粋記事一覧より かなり長くなったため、リスト一覧は削除しました。 たどり着いた WP Show Posts.



googletag.defineSlot('/21812778492/blog_728x90_common_overlay_adsence', [728, 90], 'div-gpt-ad-1583302554779-0').addService(googletag.pubads());

HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。

googletag.defineSlot('/21812778492/blog_728x90_common_eyecatch01_adsence', [728, 90], 'div-gpt-ad-1566564252373-0').addService(googletag.pubads()); var pbjs=pbjs||{};

googletag.defineSlot('/21812778492/blog_468x60_common_eyecatch02_adsence', [728, 90], 'div-gpt-ad-1567575393317-0').addService(googletag.pubads());

文系大学卒業後、フリーターを経てフロントエンジニアになる。 pbjs.que=pbjs.que||[]; ここではWordPressの投稿や固定ページ、カテゴリのスラッグやIDの確認方法についてお話します。固定ページも投稿ページもカテゴリもその他のタグやカスタム投稿タイプ、タクソノミーなども確認方法は基本的に同じなので、ここでは固定ページとカテゴリを例に見ていきま... ここでは、get_posts関数を使ったいろいろなサブループの作り方をまとめてみます。それぞれのコードの仕組みついては各記事をご参照ください。 PHP

googletag.enableServices();

トップページなどに、特定のカテゴリやタグの記事一覧を表示させたいときってありますよね。ここでは、投稿ページのカテゴリやタグを指定して記事を一覧表示させる方法（いわゆるサブループ）につい …

こんな風に並べることで、目的の記事を探しやすくしています。, 投稿日やタイトルだけでなく、記事のイメージ画像（アイキャッチ）や、冒頭の文章だけ載せているものもありますね。今回は、こんな記事一覧がどのように作られているのかを紐解いていきます。, WordPressでは、記事一覧ページをループという仕組みで実装しています。ループとは何か、WordPressのループの仕組みを理解すると、記事一覧の作成がグッと簡単になります。早速細かく見ていきましょう。, 記事一覧は、各記事のデザインは同じになっていますよね。それは同じコードを必要なだけ繰り返して表示させているからなのです。

pbjs.setConfig({bidderTimeout:2000}); ... 「テーマの編集」のところで、「全角入力」でカテゴリIDを書き換えると数字が半角でも、テンプレートでエラーになってしまいます。カテゴリIDの編集は必ず「直接入力」で行いましょう。, 「テーマの編集」のところで、「全角入力」でカテゴリIDを書き換えると数字が半角でも、テンプレートでエラーになってしまいます。タグIDの編集は必ず「直接入力」で行いましょう。, 各行の最後にあるカンマ「,」に気を付けてください。最後の行以外はカンマが入っていないとエラーになります。, 擬似クラス「:first-child」「:last-child」はどうして効かな…. ¨é›†ã—てデフォルトカテゴリーである「未分類」のチェックを外すと記事にカテゴリーが一つも設定されていない状態にすることはできます( 2020 å¹´ 6 月現在)。, カテゴリーをすべて外して記事を更新したあと、あらためて「投稿」画面を表示して記事の一覧を見てみると、先ほどの記事にはカテゴリーが設定されておらず「－」と表示されていいることが確認できます。, ※ ただこの状態でもパーマリンクにカテゴリーを使うように設定してみると、この記事のパーマリンクには「未分類」と表示されたので、内部的にはデフォルトカテゴリーが設定されている状態かもしれません。, 記事にカテゴリーを設定する方法について解説しました。, 初心者～中級者の方を対象としたプログラミング方法や開発環境の構築の解説を行うサイトの運営を行っています。. googletag.cmd.push(function() {

WordPressのテーマ『Cocoon』で新着記事一覧を表示するショートコードのメモ公式様のページショートコードオプション属性 説明 count アイテムの表示数 （デフォルト：5）