【サンプルサイトあり】wp show postsを使ってみた

はじめに

先ほどクラウドワークスでこのようなお仕事がありました。

私は「wp show posts」というプラグインを使ったことがなかったので、
使ってみたいと思います。

wp show postsはどんなプラグイン?

記事一覧を作成できるプラグインです(プラグインのページはこちら)。

プラグインを有効化してみた

wp show postsを有効化したら、サイドバーに表示されました。

WP管理画面 サイドバー

記事一覧を作成するための流れ

wp show postsで記事一覧を作成する大まかな流れはこちらです。

  1. どんな記事を表示させるのかを設定する
  2. どのページに表示させるのかを設定する
  3. 記事一覧の見た目を調整する

STEP1: どんな記事を表示させるのかを設定する

wp show postsの「リストを編集」で、出力したい記事のカテゴリーなどを設定します。

wp show posts > リストを編集

例として、こちらのサンプルサイトを用意しました(STEP3までの内容が反映されています)。

https://ki-hi-ro.com/study-list-show-post/
https://ki-hi-ro.com/study-list-show-post/

STEP2: どのページに表示させるのかを設定する

記事一覧を表示させたいページの編集画面に、ショートコードを貼り付けます。

WP Show Posts > リストを編集 > 右の方にある
固定ページ編集画面
固定ページ編集画面

今回の例では、新規の固定ページを作成しました。

study-list-show-postというスラッグを設定しました。

固定ページ編集画面 > 右サイドバー

page-study-list-show-post.phpというテンプレートファイルを新規作成しました。

テンプレートファイル

例として、こちらのサンプルサイトを用意しました(STEP3までの内容が反映されています)。

https://ki-hi-ro.com/study-list-show-post/
https://ki-hi-ro.com/study-list-show-post/

STEP3: 記事一覧の見た目を調整する

最後に見た目を調整します。

study-list-show-post.scssというsassファイルを作成しました。

study-list-show-post.scss

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/study-list-show-post/
https://ki-hi-ro.com/study-list-show-post/

まとめ

本記事の内容をまとめると以下のようになります。

  • 「wp show posts」は、記事一覧を作成するためのプラグイン
  • 記事一覧を表示させる手順1: どんな記事を出力させるのかを設定する
  • 手順2: どのページに出力させるのかを設定する
  • 手順3: 見た目を整える

関連書籍

本記事の内容に関連する参考書を紹介します。

WordPress 仕事の現場でサッと使える! デザイン教科書

私が、WordPressで自作テーマ作成が出来るようになったきっかけとなった本です(当サイトも自作テーマを使用しています)。

「bistro calme」という架空サイトの作成を通して、WordPressのテーマ作成が学べました。

その他の知識も網羅的に学べるのでおすすめです。

ざっくりつかむ CSS設計

こちらの本では、先ほどの「study-list-show-post.scss」に書いてあるように、ページ単位で範囲を限定してCSSを当てる方法も紹介されていました。

私が一度読んでみて、CSS設計を実践することで、
コーディング速度が2倍以上になった本です。

Web制作者のためのSassの教科書

こちらは、私が読んでみたいと思っている本です。

コメントを残す

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

投稿ID : 5256