Kuraya ShoheiのロゴKuraya Shohei

090-9724-7280
お問い合わせ

「制作実績CMS」を作った話

ブログ 学習ログ

はじめに

これまで自分のポートフォリオサイトは、HTML/CSS/JavaScriptで制作した静的サイトとして運用していました。

ただ、制作実績が増えてくると毎回HTMLを書き換える必要があり、管理が少し大変になってきました。

そこで今回は、既存のポートフォリオサイトをWordPress化し、「制作実績をCMSで管理できる構成」に移行してみました。

実際に行った内容や、つまずいたポイント、学んだことをまとめていきます。

WordPress化しようと思った理由

今回WordPress化しようと思った理由は、主に以下の3つです。

  • 制作実績を簡単に追加できるようにしたい
  • ブログ機能を使いたい
  • WordPressの自作テーマ制作を学びたかった

特に「制作実績を管理しやすくしたい」というのが大きな理由でした。

静的サイトの場合、制作実績を追加するたびにHTMLを編集する必要があります。

しかしWordPress化することで、管理画面から投稿するだけで実績を追加できるようになります。

制作実績を「カスタム投稿」で管理

今回一番やりたかったのがここです。

通常の「投稿」とは別に、「制作実績」専用の投稿機能を作成しました。
functions.php にカスタム投稿を追加。

register_post_type('works', array(
  'label' => '制作実績',
  'public' => true,
));

archive-works.php を作成

制作実績一覧ページも作成しました。
archive-works.php
このファイルを作ることで、
/works/
に一覧ページが自動生成されます。
最初は404エラーが出ましたが、パーマリンク設定を保存し直すことで解決しました。
WordPressではかなりあるあるなポイントらしいです。

Swiperを使って2段スライダー化

制作実績一覧は、Swiperを使って2段スライダーにしました。

最終的には以下のような構成です。

[カード][カード][カード]
[カード][カード][カード]

Swiperの grid 機能を使用しています。

grid: {
  rows: 2,
}

ただ、この実装はかなり苦戦しました。

苦戦したポイント

overflow: hidden 問題

Swiperはデフォルトで overflow: hidden が効いているため、矢印を外側に出そうとすると切れてしまいました。

かなり試行錯誤しましたが、最終的には「矢印なし + ドットのみ」のシンプル構成に落ち着きました。

結果的に今のサイトデザインにはかなり合っていると思います。

ページネーションの位置問題

最初はページネーションをSwiper内部に置いていました。

しかしカードと被ってしまったため、最終的にはSwiperの外に移動。

<div class="swiper works_swiper">
</div>

<div class="swiper-pagination"></div>

この形にすることで、かなり綺麗にまとまりました。

制作実績をカテゴリ管理

制作実績はカテゴリで分類できるようにしました。
現在は以下のカテゴリを作成しています。

  • Web制作
  • 画像制作
  • ロゴ制作

将来的にはカテゴリごとにSwiperを分ける予定です。

例えば以下のような構成を考えています。

Web制作
→ Webサイト実績Swiper

画像制作
→ バナー・SNS画像Swiper

ロゴ制作
→ ロゴ一覧

CMSとしてかなり拡張しやすい構成になりました。

ACFを使って外部リンク化

制作実績の画像をクリックすると、そのサイトへ直接飛べるようにもしました。

そこで使用したのが Advanced Custom Fields（ACF）です。

「サイトURL」というカスタムフィールドを追加し、投稿ごとにURLを設定。

<?php the_field('site_url'); ?>

これによって、制作実績一覧から直接サイトへ遷移できるようになりました。

かなりポートフォリオ感が強くなったと思います。

今回学べたこと

今回のWordPress化で、かなり多くのことを学べました。

  • WordPressテーマ構造
  • header / footer 分割
  • functions.php の役割
  • カスタム投稿
  • archiveページ
  • Swiper連携
  • CMS設計
  • ACF
  • WordPressループ

特に「CMSとしてどう設計するか」を考える機会になったのが大きかったです。

単純にデザインするだけでなく、「どう管理しやすくするか」を考えるのはかなり実務的な経験になりました。

まとめ

静的HTMLサイトをWordPress化したことで、制作実績の追加や管理がかなり楽になりました。
また、自作テーマ制作やカスタム投稿など、WordPressの仕組みもかなり理解できるようになってきました。

今後は以下も進めていきたいと思っています。

  • カテゴリ別Swiper化
  • single-works.php の作り込み
  • 画像制作・ロゴ制作の追加
  • ブログ強化

これからWordPressの自作テーマに挑戦したい方の参考になれば嬉しいです。