7graphics.studio

WordPressでポートフォリオサイトを作った話

個人ホームページ訪問 Advent Calendar 2024 の17日目を担当させていただきます、七城ナナと申します。
漫画家兼エンジニアとして活動しています（と言いつつ最近はほぼ無職）。

20年以上前にホームページビルダーで最初の個人サイトを作成してからというもの、HTMLを手打ちしてみたり、テンプレートをお借りしてみたり、レンタルサーバーを借りてみたりと、いろんな形で個人サイトを作り続けてきました。

WordPressとの付き合いはVer. 3.4あたりからになります。
知らない間にブロックエディタが導入されたりとだいぶ様変わりはしましたが、メンテナンスのしやすさと豊富なドキュメント類、カスタマイズ性の高さなどから、ポートフォリオサイトを作るにあたってもWordPressを採用することになりました。

そうして完成したのがこの 7graphics.studio なのですが、実は大したカスタマイズはしていません。
昔はテーマを改造するにも直接phpファイルを編集しなければならずだいぶ面倒でしたね。最近は管理画面からブロック形式で自由にカスタマイズができるテーマも多く、個性が出しやすくなりいい時代になったなあと感じます。

phpはほぼ触らず、ブロックエディタのみで変更しています

スウェーデンのデザイナー Anders Norén さんのテーマが個人的にすごく好きで、今回は Björk を使用しています。デモページをご覧いただくと、ほとんどいじってないことがおわかりいただけると思います（笑）。
とはいえ一部必要なカスタマイズがあり、子テーマを作成してfunction.phpに下記を設定しました。

//特定のカテゴリの除外
function exclude_category( $query ) {
  if ( $query->is_home() && $query->is_main_query() ) {
    $query->set( 'cat', '-1' ); //blogのみ除外
  }
}
add_action( 'pre_get_posts', 'exclude_category' );

画面の下部に最新の記事が表示されるようになっているのですが、ここには作品だけを表示しておきたいので、ブログ用のカテゴリをクエリループから除外しています。
ブログカテゴリの一覧はサイドバーから一覧が表示できるようにしており、そちらから見ていただくことを想定しています。

ただ、テーマによってはこのような形で最新の記事の中からカテゴリで絞り込んで表示、ということもできるようですね。上のカスタマイズいらんかったやん。

今は使っていないのですが、かつてR18系の作品を展示していたときは、WordPressのパスワード保護機能を使って年齢確認を実施していました。

まず、パスワード保護された記事にはタイトルの先頭に「保護中：」が表示されるので、文字列を【R18】に変更しておきます。（参考リンク）

// パスワード保護中の記事タイトルを変更
add_filter( 'protected_title_format', function( $prepend, $post ){
  return '【R18】：%s';
});

次に、パスワード入力ページの文言も変更しておきます。
ここでは単純な年齢確認の同意のみを行うような文言にしています。（参考リンク）

// 保護ページの説明文を変更
add_filter( 'the_password_form', function( $output, $post ){

  $description = 'この先は18歳以上の方のみご覧いただけます。18歳以上の方は以下の入力欄に yes と入力してください。';
  $placeholder = '私は18歳以上です';
  $button_label = '送信';

  return
    '<p>' . esc_html( $description ) . '</p>'.
    '<form action="' . esc_url( site_url( 'wp-login.php?action=postpass', 'login_post' ) ) . '" class="post-password-form" method="post">' .
      '<input name="post_password" type="password" spellcheck="false" size="20" placeholder="' . esc_attr( $placeholder ) . '" />' .
      '<input type="submit" name="Submit" value="' . esc_attr( $button_label ) . '" />' .
    '</form>';
});

あとは、対象のページのみパスワードをすべて「yes」に設定すればOKということになります。同人系のサイトで使えるフックだと思いますのでぜひご活用ください。

In