RYO.dev

最終更新日:

WordPressサイトのトップページに、3つのカテゴリーの記事を最新のものから5つ表示させました

  1. 依頼内容
  2. 制作物
  3. 料金と納期、その他
  4. 制作過程
  5. 最後に

依頼内容

WordPressで作られた着物屋さんのサイトを一部修正しました。

このサイトのトップページのヘッダー下には元々「イベント」カテゴリーの記事が投稿順に5つ並んで表示されていました。今回の依頼は、「イベント」と「お知らせ」と「新商品情報」の3つのカテゴリの記事を投稿順に5つ表示させてほしいというものでした。下の画像のようなデザインで制作するよう依頼されました。なお、依頼主さんの要望により、記事タイトルにはぼかしをいれています。
依頼主さんから貰ったデザイン案画像

また、記事タイトルは1行で表示させ、枠外に出てしまう場合は末尾を「・・・」と表示する仕様にしてほしいとも依頼されました。

作ったもの

下の画像は僕が実際に作ったもののスクショです。依頼主さんの要望により、記事タイトルにはぼかしをいれています。

僕が実際に作ったもののスクショ

サンプルはこちらから確認できます。上の画像のものとはコードが一部違うので、フォントや色や文字の大きさなどは全く同じではありません。記事タイトルはNIMSさんのサイトから拝借しました。ありがとうございますm(__)m

料金と納期、その他

制作過程

このセクションは、Webサイト制作に携わっている方向けの内容になりますので、専門的な話になります。

  1. 修正対象のサイトをローカル環境で再現するためにLocal by Flywheelで新しいサイトを制作しました。
  2. 依頼主さんに教えていただいたFTP情報をもとにFTPサーバーへ接続しました。/wp-content/themesの中から現在使用しているテーマファイル一式を、Local by Flywheelのサイトのテーマファイル保存場所へダウンロードしました。
  3. 依頼主さんに教えていただいたWordPressログイン情報をもとに管理画面に入り、記事をエクスポートしました。また、ローカル環境へインポートしました。なお、ここまでの手順は本番のWordPress環境を自分のローカル環境にトレース(再現)する時の手順 | HPcodeで解説している手順とほぼ同じです。
  4. front-page.phpファイルを編集しました。「3つのカテゴリーの記事を投稿日順に5つ取得する」というプログラムには以下のコードを使いました。

    $args = array(
      'posts_per_page' => 5,
      'category__in' => array("8", "952", "947")
    );
    $the_query = new WP_Query($args);
    while($the_query->have_posts()): $the_query->the_post();

    あとは配列をまわして、カテゴリーIDごとに背景色を変えたり、the_time('Y.m.d');で投稿日時を取得したり、the_permalink();で投稿のURLを取得したりしながら、値をセットしていきました。

今回作ったものは汎用性がありそうなので、スニペットとして保存しておこうと思います。コードはCodePenに投稿しています。

See the Pen News by RYO (@Mryoo) on CodePen.

最後に

もし誤った情報を見つけたりお聞きしたいことがあったりした場合は、TwitterのDMメールにご連絡ください。