WordPressでカスタムウィジェットを作成する方法 

ウィジェットこれは、ウェブサイトの指定されたエリア（例．サイドバー) 以下のような機能モジュールを追加します。テキスト、ページリンクソーシャルボタンなどの要素があります。例えば、ニュース購読フォームをサイドバーに設置することができます。

これらのウィジェットは、メインコンテンツを変更することなくサイトの機能を強化し、バナー広告やナビゲーションツールなどのモジュールを柔軟に追加することができます。

WordPressには、アーカイブ、カレンダー、カテゴリー、タグクラウド、ページ、メタ情報などのウィジェットがデフォルトで用意されています。さらに、ウィジェットは、ソーシャルメディアの更新、最近の投稿、HTMLタグの埋め込みなど、パーソナライズされたコンテンツを含むようにカスタマイズすることができます。

この記事では 3つのアプローチ WordPressのカスタムウィジェットを作成し、特定の投稿やページからウィジェットを追加または削除する方法を説明します。

WordPressのウィジェットとは何ですか？

WordPressのウィジェットは、サイドバーやフッターなど、ウェブサイトの特定の領域に追加できるコンテンツモジュールです。これらのウィジェットは、基本的にHTMLを出力するPHPオブジェクトであり、最新の投稿の表示、ソーシャルメディアの更新の埋め込み、カテゴリの表示、カスタムメニューの追加など、さまざまな機能を実行できます。

ウィジェットは同じウィジェットエリア内で再利用することができ、ウェブサイトデザインに柔軟性をもたらします。テーマによって、ガジェットエリアの数は異なります。

さらに、WordPressのウィジェットはデータベースに設定を保存するので、動作や外観の管理が簡単になります。

WordPressウィジェットの用途と追加場所

ウィジェットは様々な方法でウェブサイトの機能性を高めることができます。例えば

• 検索ボックスを追加して、ユーザーが簡単にコンテンツを見つけられるようにしましょう。
• ユーザーの登録情報を収集するために、Eメール購読フォームを追加します。
• 最新記事や人気コンテンツを表示し、訪問者の注目を集めます。
• ソーシャルメディアのフォローボタンや、近況を伝えるライブコンテンツストリームを追加しましょう。
• 作家の略歴を展示し、読者とのつながりを演出。
• ウェブサイトのカテゴリーを一覧表示し、ナビゲーションを簡単にします。
• イベントを行うサイトであれば、カレンダーウィジェットを使って今後の日程を表示することができます。
• Eコマースサイトでは、ウィジェットで商品のフィルタリングやその他の機能を利用できます。

ウィジェットの追加場所

ウィジェットはサイトのどの「ウィジェット・エリア」にも設置できます。ほとんどのテーマで一般的なウィジェットエリアは次のとおりです。サイドバー歌で応えるフッターただし、テーマによっては、さらにスペースを追加できるものもあります。これらのエリアはすべてWordPressのウィジェットインターフェイスで管理でき、サイトレイアウトの使いやすいカスタマイズオプションを提供します。

なぜWordPressのページや投稿にウィジェットを追加するのですか？

WordPressのページや投稿にウィジェットを追加すると、関連するコンテンツでウェブサイトの機能を強化できます。例

• ユーザーの注目を集めるために、特別オファーを宣伝してください。
• Eメール購読フォームを追加して、購読者ベースを拡大しましょう。
• メニューや検索ボックスを追加して、サイトナビゲーション体験を最適化します。

さらにウィジェットを使って広告を掲載することもできます。ユーザーの通常のブラウジングを妨げることなく、新しいコンテンツをハイライト表示します。

WordPressのカスタムウィジェットの仕組み

WordPressのカスタムウィジェットはWP Widgetクラスを使用して機能します。各ウィジェットは、特定の関数を定義することで、出力と設定を決定します。

機能的なガジェットを作るには、通常、以下の4つの主要機能が必要です：

1. __construct() 関数
ガジェットを初期化し、パラメータを定義します。

2. ウィジェット 関数
ウィジェットがユーザーに何を表示するかを決定します。

3. フォーム() 関数
ウィジェットのオプションを設定するために、WordPress管理画面のバックエンドに設定画面を作成します。

4. 更新 関数
ユーザーによる設定の変更を保存し、ガジェットが最新の情報を表示するようにします。

WP Widgetクラスで利用可能な関数は約20ありますが、4つのコア関数に集中することで、機能的なカスタムウィジェットになります。高度な機能のためにWordPress 開発者向けドキュメントを参照してください。をご覧ください。

WordPressカスタムウィジェットを作成するには？

テーマによっては、ウィジェットを追加するオプションがデフォルトで提供されていない場合があります。この機能が必要な場合、カスタムコードを手動で追加することで実現できます。これは SSH またはSFTPのどちらかお好きな方をご利用ください。以下はデフォルトのWordPressテーマ不足しているガジェットオプションのスクリーンショット（スクリーンショットを挿入することができます）。

ステップ 1: ウィジェットサポートの有効化

1. テーマフォルダを開きます。
SSHまたはSFTPを使用してサーバーに接続し、トピックがあるフォルダパスに移動します：
wp-content/themes/your-theme-folder/

2. functions.phpファイルを編集します。
でテーマを見つけて開きます。 functions.php ドキュメンテーション

3. ウィジェットをサポートするコードの追加
ある functions.php ファイルに以下のコードを追加し、ガジェットのサポートを有効にします：

関数 theme_widgets_init() {
    register_sidebar(array(
        
        'id' => 'sidebar-1'、
        
        'before_widget' =&gt; '<div class="widget">',
        'after_widget' =&gt; '.</div>',
        'before_title' =&gt; '<h2 class="widget-title">',
        'after_title' =&gt; '</h2>',
    ));
}
add_action('widgets_init', 'theme_widgets_init')；

4. ファイルの保存とアップロード
変更したファイルを保存し、SSHまたはSFTPでサーバーにアップロードします。

ステップ2: カスタムウィジェットの作成

次に、新しいサイドバーに表示できるカスタムウィジェットを作成しましょう。サイドバーにコードを登録したら、次のコードををfunctions.phpファイルに追加します。

クラス My_Custom_Widget extends WP_Widget {
    function __construct() {
        parent::__construct(
            'my_custom_widget', // ベースID
            __('My Custom Widget', 'text_domain'), // 名前
            array('description' => __('A Custom Widget for Homepage', 'text_domain')) // 引数
        );
    }

    public function widget($args, $instance) { 以下のようにします。
        echo $args['before_widget']；
        $title = apply_filters('widget_title', $instance['title'])；
        if (!empty($title)) { { { $args['title']; if (!empty($title))
            echo $args['before_title'] . $title . $args['after_title']；
        }
        echo '<p>こんにちは、これは私のカスタムウィジェットです！</p>'; // この内容をカスタマイズ
        echo $args['after_widget']; }.
    }

    public function form($instance) { $title = !empty($instance['title']])
        $title = !empty($instance['title']) ? $instance['title'] : __('New title', 'text_domain'); ?
        ?&gt;
        <p>
            <label for="<?php echo esc_attr($this->get_field_id('title')); ?>"><?php _e('Title:'); ?></label>
            <input class="widefat" id="<?php echo esc_attr($this->get_field_id('title')); ?>" name="<?php echo esc_attr($this->get_field_name('title')); ?>" type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <?php
    }

    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? sanitize_text_field($new_instance['title']) : '';
        return $instance;
    }
}

function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

指示このコードは新しいウィジェットクラスを定義します。マイカスタムウィジェットなどなど：

• ウィジェットサイドバーに何を表示するか。このセクションをカスタマイズして好きなものを表示してください。
• フォーム()ウィジェットのタイトルを設定するフォームです。
• 更新更新時にフォームデータを保存します。

関数register_my_custom_widget()このウィジェットを登録すると外装状態>ウィジェットでご利用いただけます。

ステップ 3: テーマテンプレートにサイドバーを追加します。

ここで、テンプレート・ファイルを修正する必要があります。インデックス.htmlもしかしたらホーム) を使って新しいサイドバーを表示します。これらのファイルは通常テーマのメインフォルダにあります。

1. テーマフォルダ内のindex.htmlまたはhome.htmlを開きます。

2.ダイナミック・サイドバー・プレースホルダーが表示させたい場所に追加されるように、ファイルの内容を以下のコードに置き換えます：

<!-- wp:template-part {"slug":"header","area":"header","tagName":"header"} /-->

<!-- wp:group {"tagName":"main","align":"full","layout":{"type":"constrained"}} -->
<main class="wp-block-group alignfull">
    <!-- wp:heading {"level":1,"align":"wide","style":{"spacing":{"padding":{"top":"var:preset|spacing|50"}}}} -->
    <h1 class="wp-block-heading alignwide" style="padding-top:var(--wp--preset--spacing--50)">投稿</h1>
    <!-- /wp:heading -->
    
    <!-- wp:pattern {"slug":"twentytwentyfour/posts-3-col"} /-->

    <!-- Dynamic Sidebar -->
    <!-- wp:dynamic-sidebar {"id":"custom-sidebar"} /-->
</main>
<!-- /wp:group -->

<!-- wp:template-part {"slug":"footer","area":"footer","tagName":"footer"} /-->

指示このコードは、ヘッダー、メイン・コンテンツ・エリア、フッターを追加します。ここで追加される重要なコンテンツは動的サイドバーです。
()登録したサイドバーやカスタムウィジェットを表示します。

ステップ 4: wp-admin で変更を確認します。

上記の手順が完了したら

1.WordPressの管理画面の外観 > ウィジェット。

2.見るべきサイドバーのカスタマイズその中には「マイカスタムウィジェットオプションが利用できます。

3.ウィジェットをカスタムサイドバーに追加し、タイトルをカスタマイズして、ウィジェットを保存します。

保存後、サイトのフロントエンドに移動して更新し、ウィジェットが期待通りに表示されていることを確認します。

WordPressでウィジェットを挿入するには？

WordPressにウィジェットを追加するには、以下の手順に従ってください：

1.ウィジェットインターフェースへのアクセス
WordPressインフォメーションセンターから、次のページに移動します。外観 → ウィジェット.ウィジェットマネージャ画面が開きます。

2.ウィジェットの位置の選択
ウィジェット画面に入ると、ウィジェットを追加できるさまざまなエリアが表示されます。これらのエリアはWordPressテーマによって異なります。編集したいエリアの横にある矢印をクリックして、エリアを拡張します。

3.ブロックを使ったコンテンツの追加
ウィジェットエリアを選択した後、おなじみのゾーンブロックエディタコンテンツを追加します。をクリックするだけです。プラス記号アイコンWordPress内蔵のブロックまたはプラグインのカスタムブロックから選択して、ブロックを即座に挿入します。ブロックを追加したら、表示する記事の数や画像のオプションなど、ブロックの設定を調整できます。

4.変更の保存
すべてのコンテンツの外観に満足したら「リニューアルボタンをクリックして変更を保存します。ウィジェットはすぐにウェブサイトに反映されます。

もしウィジェットメニューからアクセスできるWordPressブロックテーマを使用している可能性があります。サイトエディター加工デザイン。

WordPressからウィジェットを削除するには？

この例では、前に追加したウィジェットを削除できます。ブロックウィジェットを選択し、ツールバーの3つのドットメニューをクリックし、"下ろし「で十分です。

WordPressのカスタマイザーを使ってウィジェットを管理するには？

ウィジェットはWordPressのカスタマイザーで管理することもでき、変更内容をサイト上でリアルタイムにプレビューすることができます。その方法は以下の通りです：

• WordPressダッシュボードへの移動外装状態→カスタマイズ.

• カスタマイザーのサイドバーで「ウィジェット.

• 利用可能なオプションのリストからウィジェットの場所を選択します（プレビューしている現在のページに表示されている場所のみが表示されます）。

• 提供されているインターフェイスを使用してウィジェットを追加または編集します。

• のライブプレビューをクリックしてください。ペンシルアイコンは、特定のウィジェットを直接カスタマイズします。

WordPressのウィジェットを特定の投稿やページに表示するには？

デフォルトでは、サイトに追加されたウィジェットは、ウィジェット用のスペースがあるすべての領域に表示されます。例えば、ウィジェットがメインサイドバーに配置された場合、サイドバーを持つすべてのページに表示されます。

しかし、特定の投稿、ページ、あるいはカテゴリやタグなど、特定のコンテンツにのみウィジェットを表示したい場合。

ブロックウィジェットを使用する場合、表示条件を追加するプラグインを使用できます (たとえば「ブロックの可視性 )が表示される場所をコントロールします。

プラグインをインストールして有効にした後、ウィジェット画面に移動して、カスタマイズしたいウィジェットを見つけてください。

このウィジェットを編集すると、サイドバーの設定に新しいウィジェットが表示されます。視認性のセクション。

• このエリアでは、特定の投稿にのみウィジェットを表示するなど、ウィジェットの表示/非表示のルールを設定できます。

はんけつをくだす

WordPressのカスタムウィジェットを作成することで、パーソナライズされたコンテンツ表示、ナビゲーションの改善、ソーシャルメディアダイナミクスや検索バーなどのカスタムツールなど、特定の機能をウェブサイトに追加することができます。