ポートフォリオサイト「masuda portfolio & blog」

概要

ポートフォリオサイトを1年生の前期で作成したブログと共同にしたサイトを作成しました。

サイトのワイヤーフレームは学校の先生に協力していただき、私は主にコーディング作業やCMS(WordPress)の導入を行いました。

制作時期2022年8月
制作期間約1カ月
担当箇所コーディング・WordPress実装
制作人数個人製作
公開URLhttps://kentalog.work/portfolio/

◆制作工程

  1. ローカル環境を使用しCMS(WordPress)の実装
  2. プラグインの導入やcssの修正
  3. 実際にサーバーにアップし旧ブログから記事の移行や修正

◆新しいポートフォリオサイトの作成

現在のポートフォリオサイトの前に就職活動で使用していたポートフォリオサイトがあったのですがこのままだと私のアピールしたいことが上手く伝わらないと感じたので先生に協力していただき新しいポートフォリオサイトを作成しました。

今回のポートフォリオサイトは一年生の後期に作成したブログと共同にしました。
理由としては今までブログの更新を頻繁に行っていたりしていたので良いアピールになるのではないかと感じたからです。

https://kentalog.work/portfolio/%e5%80%8b%e4%ba%ba%e3%83%96%e3%83%ad%e3%82%b0%e3%80%8c%e5%a4%9a%e8%b6%a3%e5%91%b3%e3%81%aa%e7%94%b7%e3%81%ae%e3%83%96%e3%83%ad%e3%82%b0%e3%80%8dwordpress/

このポートフォリオサイトは主に「works」「blog」「about」で構成されています。
旧ポートフォリオサイトでは使用可能ツールや技術が文字だけで分かりずらかったのですが画像を追加し分かりやすくしました。

◆ローカル環境を使用した作品制作

今回は、ローカル環境を使用し制作を行いました。

作品制作の際に度々使用しているのですが、DBを使用するのは久しぶりだったので昔の復習もかねて制作を行いました。
又、前回はMANPを使用したのですが今回はWindowsということもあり、XAMPPを使用して制作しました。

忘れていた知識も多く日頃の復習が大切だと改めて実感しました。

◆カスタム投稿の作成

作品ページとブログを別々にするためにカスタム投稿を行いました。

今回はfunction.phpにコードを記述する方法でカスタム投稿を作成しました。
最初調べる段階の時にはまずカスタム投稿というものができるということも知らず、一から情報収集を行いとても大変でしたが、成功した時はとても嬉しかったですし、これからまた別のWordPressを使用しての作品制作の際にとても有効だと感じました。

/* ---------- カスタム投稿タイプを追加 ---------- */
add_action( 'init', 'create_post_type' );

function create_post_type() {

  register_post_type(
    'blog',//カスタム投稿タイプの名前
    array(
      'label' => 'ブログ',//管理画面で表示される文字の設定
      'public' => true,
      'has_archive' => true,
      'show_in_rest' => true,
      'menu_position' => 5,
      'supports' => array(
        'title',
        'editor',
        'thumbnail',
        'revisions',
      ),
    )
  );
//カスタムタクソノミー(カテゴリー)追加の処理
  register_taxonomy(
    'blogcat',カテゴリーの名前の設定
    'blog',//カテゴリーを追加したいカスタム投稿タイプ名(今回の場合7行目のblog)
    array(
      'label' => '作品カテゴリー',//管理画面で表示される文字の設定
      'hierarchical' => true,
      'public' => true,
      'show_in_rest' => true,
    )
  );
//カスタムタクソノミー(タグ)追加の処理
  register_taxonomy(
    'blogtag',//タグの名前の設定
    'blog',//タグを追加したいカスタム投稿タイプ名(今回の場合)
    array(
      'label' => '作品タグ',//管理画面で表示される文字の設定
      'hierarchical' => false,
      'public' => true,
      'show_in_rest' => true,
      'update_count_callback' => '_update_post_term_count',
    )
  );

}

今回の場合はブログをカスタム投稿の方で作成する予定だったのでカテゴリーやタグの設定も同時に行いました。

カスタム投稿のカテゴリーを表示する方法として「List Custom Taxonomy Widget」というプラグインを使用し表示させました。
今回沢山のプライグインを導入・検証を行い様々な知識を学ぶことができました。


作品を通して

制作期間が夏休み中だったのもあり、集中して制作に取り組むことができました。
新しい知識を学ぶ機会が多く、的確な情報収集が必要であることをとても感じました。

今回の作品を通して実際に表示させるだけではなく、コードをどのように見せるのか、見やすくするためにはどうしたらいいのかを改めて考えるきっかけになりました。