🛠️

WordPress で個人サイトを作った記録

に公開
WordPress
tech

はじめまして。なんか新しいサイトを作りたいなって気分になって、その勢いのまま新しくサイトを構築したので、その備忘録としてまとめます。
今回作ったサイトは エーテリア という名前で、主にプログラミング関連の記事を投稿していく予定です。

使用した技術

  • レンタルサーバー：エックスサーバー
  • CMS：WordPress (PHP)
  • テーマ：XWRITE
  • プラグイン：多数導入（後述）
  • SSL：クラウドSSL（Let’s Encrypt を使うつもりでしたが、1,100円/年の有料SSLを選択。月額92円。コスト的にも悪くない）

ssl証明書

※SSLは発行元の表記が CloudSecure で「なんかかっこいい」ってだけで採用

サイトが形になるまではだいたい 2 週間ほど。構想段階では ChatGPT（Plus プラン）で相談しつつ、実際のプラグイン開発は Google Gemini を利用しました。
Gemini は GitHub リポジトリを直接扱えるので、小規模な WordPress プラグインなら対話だけでかなりの部分を形にできるのが便利でした。

インストールしたプラグインと用途

記事作成・表示関連

  • ACF QuickEdit Fields：カスタムフィールドをクイック編集
  • Advanced Custom Fields：記事に独自フィールドを追加
  • Rich Table of Contents：目次生成（個人的には最も安定感がある TOC）
  • Shiki Highlighter：自作。Shiki を使ったシンタックスハイライト（対応言語すべて利用可）
  • Pochipp / Pochipp Pro：商品リンク生成（Pro版も念のため導入）
  • Tagged-Series：シリーズ記事をまとめる機能。大幅に改造してブロック対応済み

SEO・集客関連

  • CrawlWP SEO - Instant Indexing & SEO Insights：SEO 最適化＋即時インデックス
  • CrawlWP SEO Premium：上位版。試験的に導入
  • XML Sitemap Generator for Google：サイトマップ生成（sitemap.html は無効化）
  • Redirection：リダイレクト管理
  • WP Robots Txt：robots.txt を編集可能に
  • No Category Base (WPML)：URL の /category/ を除去

広告・解析関連

  • Ad Inserter：広告コードを柔軟に配置
  • Site Kit by Google：Google Analytics / Search Console 連携
  • Microsoft Clarity：ヒートマップ解析
  • WP Clicky：自作。Clicky の解析を導入

投稿・SNS関連

  • Autopost for X：記事公開時に X へ自動投稿
  • Missed Schedule Post Publisher：スケジュール投稿失敗時に補正

メディア管理関連

  • Converter for Media：画像を WebP / AVIF 形式に変換
  • Force Regenerate Thumbnails：サムネイルを再生成
  • Media Cleaner：未使用メディアを削除

管理・カスタマイズ関連

  • Customizer Export/Import：テーマ設定のエクスポート/インポート
  • Category Order and Taxonomy Terms Order：カテゴリー並び替え
  • Disable Author Archives：著者アーカイブ無効化
  • Disable Comments：コメント機能を停止
  • Remember Me Controls：ログイン時の「Remember Me」を調整
  • WPS Hide Login：ログイン URL を変更してセキュリティ強化
  • SVG Support：SVG アップロード対応

運用・保守関連

  • Broken Link Checker：リンク切れチェック（ローカル版）
  • UpdraftPlus：バックアップ（無料版で運用中）
  • WP-Optimize：データベース最適化とキャッシュ管理（キャッシュ機能は未使用）
  • WP Fastest Cache：ページキャッシュとHTML/CSS圧縮に利用

自作プラグイン：Shiki Highlighter

今回一番の目玉は、Shiki を利用したシンタックスハイライトプラグインを自作したことです。

既存の WordPress 用ハイライトプラグインは Prism.js や highlight.js が多いですが、Shiki の発色や構文解析の精度が好みで「自分で作ろう」となりました。

Shiki はページ内で使用している言語だけを動的に読み込む仕様なので、余計なスクリプトが走らず軽量なのも良い点です。

Shikiハイライト例

↑ 使用テーマは VSCode に近い dark-plus を選択。好みの色合いです。

今後の予定

  • Obsidian で下書き環境を整えたので、記事を継続的に追加していく
  • まだ入門レベルの記事が中心なので、徐々に深い内容にも広げたい

おわりに

ちょっとした気まぐれから始まったサイト構築でしたが、思った以上に形になりました。
今後は記事を充実させつつ、運営しながら改善を重ねていければと思っています。

👉 サイトはこちら：https://aetheria.jp/

Discussion