Hello Elementor v3.4.1 × WordPress 6.8.1 対応 技術ハンドブックshocarchi

第1章 環境構成と依存関係

1.　ホームページ作成に必要な環境構成

WordPress＋Elementor（特に Hello Elementor テーマ）を使ってホームページを作成するために必要な環境構成は、以下のように整理できる。

2.　Wordpress

WordPressは、世界で最も広く利用されているオープンソースのCMS（コンテンツ管理システム）。専門的な知識がなくても、直感的な操作でホームページやブログの構築・更新が可能。テーマによってデザインを柔軟に変更でき、プラグインを用いる事で機能の拡張性も高い。投稿や固定ページなどの管理構造が明確、企業サイトやポートフォリオ、ECサイトなど多用途に対応できるのも特徴である。PHPとMySQL上で動作し、カスタマイズ性に優れ、世界的な開発者コミュニティによって常に進化している。日本語環境にも強く、国内での導入実績も非常に多い。

WordPressの標準機能とElementor /Hello Elementorの重複・競合

WordPressテーマを構成する主なファイル群

用語：
□　テンプレートファイル
テンプレートファイルとは、「この種類のページはこのように表示する」という表示レイアウトや構造を定義し、WordPressに伝えるためのPHPファイルである。
WordPressでは、投稿ページ、固定ページ、カテゴリ一覧、検索結果など、表示されるコンテンツの種類に応じて、使用するテンプレートファイルが自動的に選択される仕組みを採用している。

3.　Elementor

Elementorは、WordPress上で動作する最も人気のビジュアルページビルダー。
正確には、ページビルダープラグインと呼ばれるカテゴリに属し、コードを書かずにWebページを作成できるビジュアルエディタを提供する。ドラッグ＆ドロップで直感的に操作でき、HTMLやCSSの専門知識がなくても、プロ品質のWebページを構築可能である。無料版でも豊富なウィジェットやデザインテンプレートが提供されており、一般的なホームページ制作には十分対応できる。有料版（Elementor Pro）では、テーマビルダー、フォーム作成、WooCommerce対応、カスタムCSS、動的コンテンツ対応など、より高度な機能が追加される。価格は年間制で、1サイト利用でおよそ6,000円前後から。特にHello Elementorテーマと組み合わせた場合、無駄な装飾が一切なく、Elementorの表現力を最大限に活かせる。日本語環境でも安定しており、国内の中小企業やフリーランスに広く支持されている。

4.　ウィジェット

ウィジェットとはパーツ化された再利用可能な機能ブロックのこと。
WordPressの「ウィジェット」とElementorの「ウィジェット」は名前は同じでも仕組みが異なるため、並立して使用することは技術的には可能だが、設計上の注意点や相性の問題がいくつかある

並立が有効なケース
・ 固定サイドバーだけWordPress、ページ本体はElementorで構築する場合
・ 「条件付き出力」が必要な箇所にWordPressウィジェット
　（例えばログインしているかどうかで出力内容を切り替える）

class My_Login_Widget extends WP_Widget {

    
    public function __construct() {
        parent::__construct(
            'my_login_widget',      
            'ログイン状態ウィジェット'  
        );
    }

    
    public function widget( $args, $instance ) {
        
        echo $args['before_widget'];

        
        if ( is_user_logged_in() ) {
            
            echo '
こんにちは、' . esc_html( wp_get_current_user()->display_name ) . 'さん！';
        } else {
            
            echo '
'">ログインしてください
';
        }

        
        echo $args['after_widget'];
    }
}


add_action( 'widgets_init', function() {
    register_widget( 'My_Login_Widget' );  
});

5.　テーマ

WordPressにおいて、サイト全体のデザイン（見た目）や構造（テンプレート）を定義するファイル群のこと。HTML・PHP・CSSで構成されており、ユーザーに表示されるヘッダー、フッター、投稿ページ、固定ページなどのレイアウトやスタイルを管理する。WordPressでホームページを作成する際、テーマを完全に使わずに運用することは基本的にできない。ただし、Hello Elementorのような最小構成テーマやカスタムテーマを使うことで、実質的に「テーマに依存しない」設計を行うことは可能である。
テーマ依存性：テーマ内に記述したカスタム機能は、そのテーマに依存するため、別のテーマに切り替えると機能が無効化または消失する可能性がある。

6.　Hello Elementor

Elementorの開発元による、デザイン要素を極限まで削減したテーマ。

Hello Elementorの特徴：
□　白紙のキャンバス
テーマの機能には依存せず、Elementorによってページ全体を自由にデザイン・構築できる、最も柔軟性の高いテーマ。
□ 　カスタマイザー機能の簡素化
“サイト基本情報” “メニュー” “追加CSS” 以外は殆ど設定項目が存在しない。
□ 　フッターなどの要素を持たない
デフォルトで余計な出力を行わないため、Elementor側で作成が必要。
□ 　テンプレート階層の簡略化
index.php, header.php, footer.phpなど最小限。

用語：
□　カスタマイザー機能
テーマやサイトのデザイン・設定を リアルタイムにプレビューしながら変更できる公式機能
機能名：カスタマイザー（Customizer）
使い方：管理画面の「外観」→「カスタマイズ」からアクセス
目的：サイトの見た目や動作をコードなしで簡単に変更できる
変更対象：ロゴ、色、フォント、メニュー、ウィジェット、トップページの設定など
反映方法：右側のプレビューで確認しながら編集→「公開」で保存

7.　function.php

WordPressテーマにおける「機能追加専用ファイル」。プラグインのように動作する。但し、プラグインの様に万能ではない為、用途と影響範囲をよく考えて使うべき。

functions.php の構成
functions.php における基本構成と役割：
・ テーマの基本セットアップ
  テーマ機能の有効化（add_theme_support()）、
  ナビゲーションメニューの登録など
・ 投稿タイプサポートの追加
  固定ページで抜粋機能を有効にするなど、
  標準投稿以外の設定追加
・ WooCommerceの統合サポート（必要時のみ）
  ECサイト対応時に必要な woocommerce_support
  やテンプレート連携などの設定
・ スタイル・スクリプトの登録
  CSS（style.css、theme.css）や
  JavaScriptの読み込み（wp_enqueue_scripts）
  を適切に管理。
・ Elementor連携設定
  register_all_core_location やページタイトル制御など、
　Elementorとの互換・制御を記述。
・ グローバル変数 $content_width の設定
  コンテンツ最大幅を制限し、
  メディアの表示レイアウトを調整。
・ 補助ファイルの読み込み（admin-functions.php 等）
  require_once を使って機能別に
  外部ファイルを分割管理し、保守性を向上。

子テーマ
WordPressでは、テーマを更新すると functions.php やテンプレートファイルが上書きされ、 functions.phpに加えたカスタマイズが失われる。その為、編集は更新時に影響を受けない子テーマ上で行うことが推奨される。
作成手順：
・　/wp-content/themes/hello-child などの名称で新しいフォルダを作成する。
・　/hello-childディレクトリに必要なファイル（style.css,function.php）を準備する
□style.css

□functions.php

<?php 

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_style('hello-elementor-style', get_template_directory_uri() . '/style.css');
    wp_enqueue_style('hello-child-style', get_stylesheet_uri(), ['hello-elementor-style']);
});

・　WordPress管理画面 → 外観 > テーマ で「Hello Elementor Child」が表示されるので、有効化する。

第2章 ファイル構造・カスタムコードの配置

1.　functions.php の最適化

functions.php はテーマの機能追加を担う中心的なファイルであり、「安全・分かりやすく・保守しやすい」構成を意識して最適化する必要がある。以下のような観点で整理・構築するのが望ましい。
・ 役割の分離、セキュリティ対策、フックによる拡張登録
・ 外部ファイルの読み込みによる管理性向上（require_once）

2.　外部ファイルへの分割管理

重い処理をfunctions.phpに書くとサイト全体のパフォーマンスに悪影響を及ぼす。
・ /inc/ ディレクトリなどで処理単位にファイルを整理
  enqueue.php：CSS/JSの読み込み処理
  elementor-hooks.php：Elementor連携用のフック
  shortcodes.php：ショートコードの登録
  ajax.php：Ajax処理のコールバック関数群
  security.php：WPバージョン非表示、XML-RPC無効化など

require_once get_stylesheet_directory() . '/inc/enqueue.php';     　  
require_once get_stylesheet_directory() . '/inc/elementor-hooks.php'; 
require_once get_stylesheet_directory() . '/inc/shortcodes.php';      
require_once get_stylesheet_directory() . '/inc/ajax.php';            
require_once get_stylesheet_directory() . '/inc/security.php';        

3.　カスタムコードの配置戦略

・ カスタム投稿タイプ（CPT）は post-types/ ディレクトリ
・ タクソノミーは taxonomies/
・ ウィジェットやブロックは widgets/ や blocks/
・ 管理画面専用のコードは admin/
にまとめる

4.　プラグイン化 vs テーマ組込みの判断基準

・ サイト固有の機能（例：スライダー、カスタム投稿表示）
　 → テーマ組込み
・ サイトを変更しても使いたい汎用機能（例：SEO設定、通知メール）
　→ プラグイン化

5.　バックアップとバージョン管理（Git推奨）

・ functions.php 編集前に必ずバックアップする
・ Gitでバージョン管理し、変更履歴と差分を明確にする

第3章コーディングの基本と注意点

1.　出力はreturn を使い、echo は控える

なぜ echo を使わず、return を使うべきか？
・ 柔軟な再利用ができる
  return された内容は、呼び出し元で加工・連結・条件分岐に使える。
  echo はその場で即出力されてしまい、処理の制御が難しい。

function show_box() {
    echo '
Hello
';
}

function get_box() {
    return '
Hello
';
}
echo get_box(); 

・ ショートコードやテンプレートタグに適している
  WordPressの add_shortcode() に登録する関数は、
  出力すべきHTMLを return で返すのが原則。

add_shortcode('mycode', 'my_shortcode_function');
function my_shortcode_function($atts) {
    return '
出力内容
'; 
}

add_shortcode('mycode', 'my_shortcode_function');
function my_shortcode_function($atts) {
    echo '
出力内容
';   
}

2.　header()やsession_start()は出力前に

出力前（PHPがまだブラウザに何もHTMLやテキストを送信していない出力前（HTTPヘッダーをクライアントに送信する前）に行なわなければならない処理

echo "こんにちは！";
session_start(); 

ヘッダーは最初の出力が送信された時点で確定されるから。その後に「セッションを開始しよう」「別のページに飛ばそう」としても、既にヘッダーが送信済みのため実行できず、以下のようなエラーになる。

Warning: session_start(): Cannot send session cookie – headers already sent

3.　画面に出力する際のエスケープ処理

画面に出力する際は、esc_html() や wp_kses_post() などのエスケープ関数を適切に使用し、外部入力や動的データを直接表示しないことで、XSS（クロスサイトスクリプティング）などの脆弱性を防ぎ、安全性を確保する。テキストのみを表示する場合は esc_html() を使用し、一部のHTMLタグを許可したい場合は wp_kses_post() を用いることで、悪意あるコードの実行を防ぎつつ、必要な装飾表現を維持できる。

return $_GET['title']; 


return esc_html($_GET['title']); 

4.　入力値のサニタイズとバリデーション

ユーザー入力を安全に扱うには、以下の手順で入力チェックを行うことが重要
・ isset()：入力の有無を確認
・ サニタイズ：不要なタグや空白を除去（例：sanitize_text_field()）
・ バリデーション：形式が正しいか確認（例：is_email()、is_numeric()）

if ( isset( $_POST['email'] ) ) {
    $email_raw = $_POST['email'];

    
    $email_sanitized = sanitize_email( $email_raw );

    
    if ( is_email( $email_sanitized ) ) {
        
        echo '送信先：' . esc_html( $email_sanitized );
    } else {
        echo '無効なメールアドレスです。';
    }
}

5.　命名規則と関数設計

・ プレフィックスの付け方（例：customname_）
・ 再利用性・衝突防止を意識した設計(特にチーム設計時)

6.　HTMLの記述スタイル

HTML構造を見やすく記述（ヒアドキュメントや出力変数を活用）
メンテナンス性の高いコードを書くためのコーディングスタイル
・ ヒアドキュメント構文（Heredoc）
　PHPでHTMLを複数行で整形して書ける構文

function my_shortcode($atts) {
    $atts = shortcode_atts([
        'title' => '見出し',
        'text' => '本文です',
    ], $atts, 'my_shortcode');

    $html = 
    
{$atts['title']}
    
{$atts['text']}