【WordPress】実践Webツール10選を自作・ポータル化！functions.phpの整理術とショートコード一括管理の裏側

自宅サーバーやLinuxインフラを運用していると、「UFWのコマンド構文どうだっけ？」「.htpasswdのハッシュを今すぐ作りたい」「IPv6のプレフィックスを展開したい」といったちょっとした計算・設定ジェネレーターが欲しくなる場面が多々あります。
一般的なWebツールサイトを使うのも手ですが、機密情報（パスワードや内部IPなど）を入力することに不安があったり、広告まみれで使いにくかったりすることも少なくありません。
そこで当ブログ（テック別館）では、「完全クライアントサイド実行・安全・爆速」を掲げた実践Webツール群を自作し、現在全10ツールをポータル化して常設・運用しています。

今回は、WordPressでツールを量産してもfunctions.phpを一切散らかさないショートコード一括管理アーキテクチャと、開発・運用の裏側を全コード付きで公開します。

1. 今回構築・ポータル化した「実践Webツール10選」

現在ブログ内で稼働している10種類のツールは、主にインフラ運用・セキュリティ・ネットワークに特化しています。

• セキュリティ・認証系
  • [nginx_sec_tool] Nginx セキュリティヘッダー＆高速化 (A+判定対応)
  • [f2b_tool] fail2ban 自動BANルール生成
  • [ufw_tool] UFW ファイアウォール設定コマンド生成
  • [htpasswd_tool] Htpasswd / Basic認証パスワード生成 (SHA-1)
• ネットワーク・CDN系
  • [cf_tool] Cloudflare × Nginx IP復元＆アクセス制御
  • [cidr_tool] CIDR・サブネットマスク計算機
  • [ipv6_calc_tool] IPv6 プレフィックス・サブネット計算機
• 運用・自動化・コンテナ系
  • [cron_tool] Cron式＆安全シェル実行コマンド生成
  • [docker_tool] Docker Compose 設定一発生成
  • [systemd_tool] Systemd サービス常駐化 (.service) 生成

すべてのツールが外部サーバーへ通信しない完全クライアントサイド（JavaScript / Web Crypto API）で動作するため、サーバー負荷は実質ゼロです。

2. 【最重要】functions.php を汚さない一括登録アーキテクチャ

WordPressでショートコードを増やす際、愚直に add_shortcode() を10個も20個も並べると、functions.php はあっという間にスパゲッティ化し、メンテナンス性が崩壊します。
そこで、「連想配列 ＋ クロージャ（無名関数） ＋ get_template_part()」 を組み合わせたスリムな設計を採用しました。

functions.php の実装コード

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * 実践Webツール用 テンプレート読み込みショートコード一括登録
 */
add_action( 'init', function() {
    // [ショートコード名 => テンプレートファイルパス] のマッピング定義
    $tools = [
        'nginx_sec_tool' => 'inc/nginx-security-tool-template',
        'f2b_tool'       => 'inc/fail2ban-tool-template',
        'ufw_tool'       => 'inc/ufw-tool-template',
        'htpasswd_tool'  => 'inc/htpasswd-tool-template',
        'cf_tool'        => 'inc/cf-tool-template',
        'cidr_tool'      => 'inc/cidr-tool-template',
        'ipv6_calc_tool' => 'inc/ipv6-calc-tool-template',
        'cron_tool'      => 'inc/cron-tool-template',
        'docker_tool'    => 'inc/docker-tool-template',
        'systemd_tool'   => 'inc/systemd-tool-template',
    ];

    // ループで一括登録（クロージャの use で変数をバインド）
    foreach ( $tools as $tag => $template ) {
        add_shortcode( $tag, function () use ( $template ) {
            ob_start();
            get_template_part( $template );
            return ob_get_clean();
        });
    }
});

<?php
if ( ! defined( 'ABSPATH' ) ) exit;

/**
 * 実践Webツール用 テンプレート読み込みショートコード一括登録
 */
add_action( 'init', function() {
    // [ショートコード名 => テンプレートファイルパス] のマッピング定義
    $tools = [
        'nginx_sec_tool' => 'inc/nginx-security-tool-template',
        'f2b_tool'       => 'inc/fail2ban-tool-template',
        'ufw_tool'       => 'inc/ufw-tool-template',
        'htpasswd_tool'  => 'inc/htpasswd-tool-template',
        'cf_tool'        => 'inc/cf-tool-template',
        'cidr_tool'      => 'inc/cidr-tool-template',
        'ipv6_calc_tool' => 'inc/ipv6-calc-tool-template',
        'cron_tool'      => 'inc/cron-tool-template',
        'docker_tool'    => 'inc/docker-tool-template',
        'systemd_tool'   => 'inc/systemd-tool-template',
    ];

    // ループで一括登録（クロージャの use で変数をバインド）
    foreach ( $tools as $tag => $template ) {
        add_shortcode( $tag, function () use ( $template ) {
            ob_start();
            get_template_part( $template );
            return ob_get_clean();
        });
    }
});

この設計の3大メリット

1. 追加・削除がわずか1行： 新しいツールを作ったら、$tools 配列にペアを1行追加するだけで即座にショートコードとして機能します。
2. テンプレートの完全分離： ツールのHTML/CSS/JSはすべて inc/xxx-template.php に隔離されているため、デザイン修正やJSの改修時にメインプログラムを壊すリスクがありません。
3. バッファリング出力（Output Buffering）： ob_start() と ob_get_clean() を噛ませることで、ショートコードが記事のヘッダーや変な位置にすっ飛んで出力されるバグを防止しています。

3. UI/UX設計でこだわった3つのポイント

① サーバーサイド処理を廃止し「完全クライアントサイド」へ

Basic認証（Htpasswd）のパスワードハッシュ化やIPv6計算など、通常バックエンドでやりがちな処理もすべてブラウザ標準の crypto.subtle API や Vanilla JS で完結させました。 ユーザーの機密情報をサーバーのアクセスログに残さない「完全プライベート設計」です。

② ダークモード＆ワンクリックコピーの実装

エンジニア向けメディアとして、コードやコマンドの視認性を高めるダークカラーパレットを採用。生成された設定値はすべて 「コピー」ボタンひとつでクリップボードに格納 される導線を徹底しました。

③ サイドバー＆ポータル導線による回遊率最大化

個別ツールの固定ページだけでなく、全ツールを俯瞰できる ポータル一覧ページ（/tools/） と、全記事からアクセスできる サイドバー専用ウィジェット を設置。ブログ全体の滞在時間とPV向上に大きく寄与しています。

4. まとめ：技術ブログは「読む場所」から「使う場所」へ

技術ブログにWebツールを導入することで、検索流入してきた読者が「ブックマークして何度も使うリピーター」へと変化します。
WordPressの子テーマと今回紹介した連想配列による一括登録パターンを活用すれば、わずか数時間で安全かつ拡張性の高いツールポータルを構築できます。
ぜひ皆さんのブログや個人開発でも試してみてください！