【サンプルサイトあり】wp show postsを使ってみた
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/using-wp-show-posts-768x512.png)
はじめに
先ほどクラウドワークスでこのようなお仕事がありました。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-9.34.33-1024x418.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.40.00.png)
私は「wp show posts」というプラグインを使ったことがなかったので、
使ってみたいと思います。
wp show postsはどんなプラグイン?
記事一覧を作成できるプラグインです(プラグインのページはこちら)。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/newspapers-4565916_640.jpg)
プラグインを有効化してみた
wp show postsを有効化したら、サイドバーに表示されました。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-9.48.11.png)
記事一覧を作成するための流れ
wp show postsで記事一覧を作成する大まかな流れはこちらです。
- どんな記事を表示させるのかを設定する
- どのページに表示させるのかを設定する
- 記事一覧の見た目を調整する
STEP1: どんな記事を表示させるのかを設定する
wp show postsの「リストを編集」で、出力したい記事のカテゴリーなどを設定します。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.00.46-1024x972.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.41.38-305x1024.png)
例として、こちらのサンプルサイトを用意しました(STEP3までの内容が反映されています)。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-10.59.51-1024x559.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.43.04-299x1024.png)
STEP2: どのページに表示させるのかを設定する
記事一覧を表示させたいページの編集画面に、ショートコードを貼り付けます。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.02.54.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.03.52-1024x357.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.45.03.png)
今回の例では、新規の固定ページを作成しました。
study-list-show-postというスラッグを設定しました。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.04.09.png)
page-study-list-show-post.phpというテンプレートファイルを新規作成しました。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.04.35.png)
例として、こちらのサンプルサイトを用意しました(STEP3までの内容が反映されています)。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-10.59.51-1024x559.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.43.04-299x1024.png)
STEP3: 記事一覧の見た目を調整する
最後に見た目を調整します。
study-list-show-post.scssというsassファイルを作成しました。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.11.19.png)
VScodeのlive sass compilerコンパイルしたstudy-list-show-post.cssを、functions.phpで読み込ませました。
wp_enqueue_style('study-list-show-post', get_template_directory_uri() . '/assets/css/study-list-show-post.css', [], date("YmdHi"));
例として、こちらのサンプルサイトを用意しました。
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-10.59.51-1024x559.png)
![](https://ki-hi-ro.com/ki-hi-ro.com-2022/wp-content/uploads/2022/11/スクリーンショット-2022-11-04-11.43.04-299x1024.png)
まとめ
本記事の内容をまとめると以下のようになります。
- 「wp show posts」は、記事一覧を作成するためのプラグイン
- 記事一覧を表示させる手順1: どんな記事を出力させるのかを設定する
- 手順2: どのページに出力させるのかを設定する
- 手順3: 見た目を整える
関連書籍
本記事の内容に関連する参考書を紹介します。
WordPress 仕事の現場でサッと使える! デザイン教科書
私が、WordPressで自作テーマ作成が出来るようになったきっかけとなった本です(当サイトも自作テーマを使用しています)。
「bistro calme」という架空サイトの作成を通して、WordPressのテーマ作成が学べました。
その他の知識も網羅的に学べるのでおすすめです。
ざっくりつかむ CSS設計
こちらの本では、先ほどの「study-list-show-post.scss」に書いてあるように、ページ単位で範囲を限定してCSSを当てる方法も紹介されていました。
私が一度読んでみて、CSS設計を実践することで、
コーディング速度が2倍以上になった本です。
Web制作者のためのSassの教科書
こちらは、私が読んでみたいと思っている本です。
コメントを残す