WordPressとDIVIによるCMSウェブ開発、プラグインプログラミング

WordPressの紹介

コンテンツ管理システム（CMS）は、ウェブサイトの作成と管理を大幅に簡素化します。プログラミングの知識がなくても、企業や個人はコンテンツを管理し、デザインを調整し、ウェブサイトをインタラクティブにすることができます。最もよく知られているCMSは、WordPress、Joomla、Drupal、Contao、TYPO3ですが、WordPressは現在、世界の全ウェブサイトの約43%を動かしており、圧倒的に最も利用されているシステムです。

私自身はJoomlaから始め、その後Contaoを使用し、正当な理由からWordPressに移行しました。私の顧客のプロフェッショナルな分野では、今でもTYPO3サイトをよく見かけますが、TypoScriptのためにより多くの習熟が必要であり、すべてのユーザー、特にウェブ開発者にとって迅速な導入を提供するものではありません。そのため、拡張機能やメンテナンスを担当する人を見つけるのもより困難です。

システムが安定して稼働し、すべての技術的要件（最新のPHPバージョン、セキュリティアップデート、GDPR、パフォーマンス）を満たしている限り、完全な再開発の必要はありません。一般的に、ウェブサイトは根本的に再設計されるまでに4〜6年ほど稼働します。

all-inkl.comなどでのホスティング

WordPressは基本的に多くのものを必要としません。PHPとMySQL/MariaDBがあれば十分であり、WordPressサイトは事実上すべてのプロバイダーで動作可能です。しかし、最近ではもう少し多くのものが期待されています。例えば：

• 開発/ステージングドメイン
• 便利なメール管理
• 自動更新を含むHTTPS用Let's Encrypt証明書
• FTP/SFTPアクセスまたはウェブファイルマネージャー
• 自動バックアップと簡単な復元
• 迅速で無料のサポート
• 十分なメモリと最新のPHPバージョン（例：8.1/8.2+）
• 独自のDNS設定を行う機能
• 迅速な移行とボタン一つでの認証コード提供
• WordPressなどの簡単なインストールアシスタント

長年にわたり推奨されているプロバイダーは、非常に公正なパッケージ価格と優れたサポートで定評のあるall-inkl.com（アフィリエイトリンク）です。CMSシステムのみをホストしたい方には最適です。

MongoDB、Node.js、またはExpressが追加で必要な場合は、独自のサーバー/VPSをレンタルするか、これらの機能を提供するプロバイダーを利用する必要があります。ただし、従来のウェブサイトの99%は依然としてこれらを必要としません。しかし、AIを活用したツールにより、ウェブアプリ、API、自動化などの個別アプリケーションがますます増えています。nuonu.comも、WordPressに独自のプラグインを追加し、非常に個別な機能を提供するそのようなアプリケーションの一つです。

なぜWordPressとDIVIなのか？

WordPressは、ユーザーフレンドリーなインターフェース、膨大な数の拡張機能（プラグイン）とテーマ、そして非常に強力なコミュニティを提供します。ブログ、企業サイト、ランディングページ、オンラインショップなど、WordPressを使えばほぼすべての種類のウェブサイトを実装できます。インストールと基本設定は迅速に完了し、DIVIのようなページビルダーのおかげで、初心者でもプロフェッショナルなレイアウトを作成できます。

ページビルダーとしてのDIVIの利点

DIVIは、完全なテーマとビルダーとして使用でき、追加のテーマが不要であるという点で、他の多くのページビルダーとは一線を画します。これは次のことを意味します。

• ワンストップの完全なデザイン – 追加のテーマ依存性なし。
• 視覚的なドラッグ＆ドロップエディターによる柔軟なデザインオプション。
• ページ上で直接クライアントサイド編集が可能（フロントエンド編集）。
• デスクトップ、タブレット、モバイルデバイス向けの優れたレスポンシブ対応。
• 新しいページの作成を大幅に加速する、事前定義されたレイアウトとモジュール。

新機能：DIVI 5 – パフォーマンスと将来性

DIVI 5は単なる通常のアップデートではありません。ビルダーは内部的に完全に再構築され、モダンで大幅にスリムな基盤の上に構築されました。これにより、読み込み速度が著しく向上し、コードの肥大化が減り、将来の機能のためのより良い基盤が提供されます。

• 新しい、スリムなコアシステム – ビルダーはゼロから再開発され、よりリソース効率的に動作します。
• 高速な読み込み時間と応答性の高いエディター – 特に多くのモジュールを持つ複雑なページは、新しいアーキテクチャの恩恵を受けます。
• ショートコードの削減、よりクリーンなコード – これにより、長期的なメンテナンス、移行が容易になり、SEOにも良い影響を与えます。
• デザイン変数、拡張された単位、ネストされた行、個別に調整可能なブレークポイントなどの新しいデザイン機能により、さらに正確なレスポンシブレイアウトが可能になります。
• 大規模プロジェクトのより良い処理 – DIVI 5は、多くのテンプレート、グローバル要素、ライブラリレイアウトを持つ大規模なウェブサイト向けに設計されています。

当社の現状：nuonu.comのサイトはすでにDIVI 5ベータ版で稼働しています。現在DIVI 4で実装されているすべての顧客プロジェクトは、DIVI 5の最終リリース後、段階的かつ制御された方法で移行できます。理想的には、まずステージング環境で行うべきです。これにより、既存のサイトは安定したまま、適切かつ安全になり次第、新バージョンのパフォーマンスと利便性のメリットを享受できます。

現代のウェブサイトの一般的な構造

今日のウェブサイトは、明確に構造化され、視覚的に魅力的であり、何よりもレスポンシブである必要があります。以下の側面が重要です。

• 色とフォントは、コーポレートデザインと一貫している必要があります。
• ロゴと余白は、レイアウトに調和して統合される必要があります。
• 直感的なナビゲーションのための個別ヘッダーとメニュー。
• 法的リンク、ソーシャルメディアプロフィール、連絡先情報を含む構造化されたフッター。
• ホームページの定義：「設定 > 表示設定」でメインページを設定します。

法的要件：インプリント、データ保護、Cookie同意

すべてのウェブサイトには、インプリントとプライバシーポリシーが必要です。さらに、GDPRとTTDSGに準拠するためには、機能するCookie同意ツールが必要です。その一例が Reel Cookie Consentで、これはテストされ、例えばMatomoをGDPRに準拠して統合するために独自のスクリプトで拡張することができます。

サブドメインでのMatomo利用

Matomoは、メインドメインまたはサブドメインのいずれかで運用できます。サブドメイン利用の利点は次のとおりです。

• より良いデータ管理とセキュリティ – データは完全に自社サーバーに残ります。
• データが第三者に送信されないため、プライバシーに配慮した設定。
• GDPR要件を満たすための、ユーザー自身のオプトアウトオプション。

WordPress-ウェブサイトの必須プラグイン

プロフェッショナルで機能的なWordPressサイトには、特定のプラグインが私たちの見解ではほぼ不可欠です（プロジェクトによってリストは当然異なります）：

• RankMath – スキーマサポート、リダイレクト、多くのオンページヘルプを備えたSEOプラグイン
• Happy Files – メディア、投稿、ページなどのフォルダによるファイル管理
• Reel Cookie Consent – Cookie管理（またはReal Cookie Banner、Borlabs Cookie、Complianzなどの代替品）
• DIVI Supreme – DIVI用の拡張モジュールとエフェクト
• WP Armour – フォームスパムからの保護
• AIOS (All in One Security) – ログイン、ファイルシステム、ファイアウォールの強化のための包括的なセキュリティプラグイン

WordPressのセキュリティ設定

インストール後、セキュリティ設定は直ちに最適化されるべきです。

• AIOSとWP Armourを有効化し、ブルートフォース攻撃、スパム、単純なボット攻撃から保護します。
• 標準の管理者ユーザー名を変更し、標的型攻撃を困難にします。
• 二要素認証でセキュリティを強化（オプションですが推奨）。
• 定期的なバックアップを設定し（例：Duplicator、UpdraftPlus、BackWPupを使用）、復元をテストします。

WordPressメディア設定の調整

デフォルトでは、WordPressはメディアを月ごとに分割されたフォルダに保存します。これはブログには便利ですが、企業ウェブサイトにはしばしば不便です。そのため、「設定 > メディア」で自動フォルダ構造を無効にし、代わりにHappy Filesのようなツールでメディアライブラリを整理することをお勧めします。

基本インストール後のデザインフェーズ

基本インストール後、実際のデザインが始まります。

• 色、フォント、余白を設定 – DIVIではデザインの基本としてグローバルに（DIVI 5ではさらにデザイン変数を通じて）。
• 直感的なナビゲーションのために、個別のヘッダーとメニューを作成します。
• インプリント、プライバシーポリシー、ソーシャルメディアリンク、連絡先情報を含むフッターを調整します。
• 電話番号をtel:、メールアドレスをmailto:でクリック可能にします。
• ホームページを作成し、その後「設定 > 表示設定」でメインページとして設定します。

この構造により、お客様はウェブサイトをモダンで、法的に安全で、機能的に構築するための明確なガイドラインを得ることができます。さらに調整が必要な場合は、上記のプラグインとツールを個別に設定できます。

共同開発プロセス

私たちは、お客様が希望される場合、開発にできるだけ早期に参加していただくことを重視しています。これは、視覚的な外観の決定と承認だけでなく、ページの作成、メニュー、SEOデータの管理、メディアのアップロードなどにも及びます。お客様自身ができることが多ければ多いほど、後で独立してメンテナンスを行うのが容易になります。

ロゴとファビコン

多くの場合、古いデザインやまだ独自のデザインがないことがあります。この場合、私たちはロゴとファビコンをベクターファイルと透明なPNGとして作成します。MidjourneyとIllustratorのおかげで、ご要望に応じて2Dおよび3Dロゴの選択肢を提供できます。また、ドメインの命名、空きドメインの確認と登録、またはその移行も担当します。

ソーシャルメディアリンク

DIVIには、多くのソーシャルメディアプロバイダーの既製の法的にも安全なロゴを含む独自のモジュールが付属しています。ダッシュボードのDIVI > テーマオプションでもグローバルリンクを設定できます。ロゴ、メニュー、カスタムフッターを含むヘッダーは、このページでもご覧いただけます。

SEOコンテンツ作成

ここから、ページごとに作成を開始します。その際、RankMathをすぐに考慮する必要があります。タイトル、説明、og:image、h1、h2、h3… SEOに優しく、読みやすい見出しと、意味のある強調表示がされたテキスト、そして表現力豊かで最適化された画像素材。SEOファーストとは、コンテンツが訪問者だけでなく、検索エンジンやソーシャルメディアのためにもカスタマイズされることを意味します。考慮すべき点と必要なツールについては、当社のSEO戦略のガイドで確認できます。

すべてのコンテンツとSEOデータの最終化

作成はページごとに異なる時間がかかります。一部のページでは、フォームとそのSSL経由での安全な送信、または特別なトラッキング/同意設定など、追加の設定が必要です。平均して、1ページあたり約1時間以上かかると予想されます。すべてのページが完成し、最後のリンクがテストされて初めて、サイトはライブテストの準備が整います。

パフォーマンス最適化を伴うテストフェーズ

完成したページは常に素晴らしいものですが、今度は徹底的にテストする必要があります。私たちは以下をチェックします。

• すべての内部および外部リンク、
• すべてのRankMathの推奨事項、
• ソーシャルネットワークでの表示（例：Facebookデバッガー/URLデバッガーを使用）、
• スピードテストによる読み込み時間（例：PageSpeed Insights、GTmetrix、WebPageTest）。

すべてのエラーが修正され、パフォーマンステストでサイトが納得のいく結果を出して初めて、最終的にライブ公開されます。

サイトマップ生成とGoogle Search Consoleへの登録

作成の最終段階は、Google Search Consoleへの登録です。RankMathまたはWordPressによって生成されたサイトマップが登録され、Googleがすべての関連コンテンツを構造的に把握できるようにします。

短期および長期的な監視

数日後には、サイトが検索結果に表示されるはずです。site:domain.deまたはGoogle Search Consoleで直接、すべての重要なコンテンツが本当にリストされているかを確認します。遅くともこの時点で、潜在的なエラーが発見され、修正されるべきです。

これからは、定期的にMatomoのサブドメインを訪問し、サイトの成功をリアルタイムで評価することもできます。訪問者の関心に応じて、コンテンツを拡張したり、検索キーワードを洗練させたり、新しいランディングページを作成したりできます。このようにして、ウェブサイトは静的なものではなく、企業の目標とともに進化し続けます。

Googleビジネスプロフィール登録

ウェブサイトの作成と最適化を担当する者は、Googleビジネスプロフィール、マップ、画像、動画、ニュースなどにも目を向けるべきです。私たちはサービスプロバイダーであり、訪問者が見るデータについても責任を負っています。多くの場合、訪問者がウェブサイトに気づいたり、電話をかけたりするきっかけとなるのは、まさにこれらのデータです。