ウィジェット

【サイドバーの表示例】
┌─────────────────┐
│  検索ボックス   │ ← 検索ウィジェット
├─────────────────┤
│  最近の投稿     │ ← 最近の投稿ウィジェット
│  ・記事タイトル1│
│  ・記事タイトル2│
│  ・記事タイトル3│
├─────────────────┤
│  カテゴリー     │ ← カテゴリーウィジェット
│  ・WordPress    │
│  ・HTML/CSS     │
│  ・SEO          │
└─────────────────┘

// ウィジェット設定のバックアップ
// 設定を保持したままウィジェットを非表示にしたい場合：
1. ウィジェットを「使用停止中のウィジェット」エリアにドラッグ
2. 設定はそのまま保存される
3. 再度使用する際は、元のエリアに戻すだけ

// functions.phpにウィジェットエリアを登録

function my_custom_widget_areas() {
    // サイドバーウィジェットエリア
    register_sidebar(array(
        'name' => 'カスタムサイドバー',
        'id' => 'custom-sidebar',
        'description' => 'カスタムサイドバー用のウィジェットエリア',
        'before_widget' => '<div class="widget %2$s">',
        'after_widget' => '</div>',
        'before_title' => '<h3 class="widget-title">',
        'after_title' => '</h3>'
    ));
    
    // フッターウィジェットエリア（3カラム）
    for ($i = 1; $i <= 3; $i++) {
        register_sidebar(array(
            'name' => 'フッター ' . $i,
            'id' => 'footer-' . $i,
            'description' => 'フッターエリア' . $i,
            'before_widget' => '<div class="footer-widget">',
            'after_widget' => '</div>',
            'before_title' => '<h4>',
            'after_title' => '</h4>'
        ));
    }
}
add_action('widgets_init', 'my_custom_widget_areas');

// sidebar.phpやfooter.phpで呼び出し

<?php if (is_active_sidebar('custom-sidebar')) : ?>
    <aside class="sidebar">
        <?php dynamic_sidebar('custom-sidebar'); ?>
    </aside>
<?php endif; ?>

// フッターで複数のウィジェットエリアを表示
<footer class="site-footer">
    <div class="footer-widgets">
        <?php for ($i = 1; $i <= 3; $i++) : ?>
            <?php if (is_active_sidebar('footer-' . $i)) : ?>
                <div class="footer-column">
                    <?php dynamic_sidebar('footer-' . $i); ?>
                </div>
            <?php endif; ?>
        <?php endfor; ?>
    </div>
</footer>

// functions.phpにカスタムウィジェットを作成

class My_Custom_Widget extends WP_Widget {
    
    // コンストラクタ
    public function __construct() {
        parent::__construct(
            'my_custom_widget',
            'カスタムウィジェット',
            array('description' => '独自のカスタムウィジェット')
        );
    }
    
    // フロントエンドでの表示
    public function widget($args, $instance) {
        echo $args['before_widget'];
        
        if (!empty($instance['title'])) {
            echo $args['before_title'] . apply_filters('widget_title', $instance['title']) . $args['after_title'];
        }
        
        echo '<p>' . $instance['text'] . '</p>';
        
        echo $args['after_widget'];
    }
    
    // バックエンドのフォーム
    public function form($instance) {
        $title = !empty($instance['title']) ? $instance['title'] : '';
        $text = !empty($instance['text']) ? $instance['text'] : '';
        ?>
        <p>
            <label for="<?php echo $this->get_field_id('title'); ?>">タイトル:</label>
            <input class="widefat" id="<?php echo $this->get_field_id('title'); ?>" 
                   name="<?php echo $this->get_field_name('title'); ?>" 
                   type="text" value="<?php echo esc_attr($title); ?>">
        </p>
        <p>
            <label for="<?php echo $this->get_field_id('text'); ?>">テキスト:</label>
            <textarea class="widefat" id="<?php echo $this->get_field_id('text'); ?>" 
                      name="<?php echo $this->get_field_name('text'); ?>"><?php echo esc_attr($text); ?></textarea>
        </p>
        <?php
    }
    
    // 設定の保存
    public function update($new_instance, $old_instance) {
        $instance = array();
        $instance['title'] = (!empty($new_instance['title'])) ? strip_tags($new_instance['title']) : '';
        $instance['text'] = (!empty($new_instance['text'])) ? $new_instance['text'] : '';
        return $instance;
    }
}

// ウィジェットを登録
function register_my_custom_widget() {
    register_widget('My_Custom_Widget');
}
add_action('widgets_init', 'register_my_custom_widget');

/* ウィジェットの基本スタイル */
.widget {
    background: #fff;
    padding: 20px;
    margin-bottom: 30px;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}

.widget-title {
    font-size: 1.3rem;
    color: #1976D2;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #FF6B35;
}

/* 検索ウィジェットのスタイル */
.widget_search input[type="search"] {
    width: 100%;
    padding: 10px;
    border: 2px solid #1976D2;
    border-radius: 5px;
    font-size: 1rem;
}

.widget_search input[type="submit"] {
    width: 100%;
    padding: 10px;
    margin-top: 10px;
    background: #1976D2;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background 0.3s;
}

.widget_search input[type="submit"]:hover {
    background: #1565C0;
}

/* カテゴリーウィジェットのスタイル */
.widget_categories ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_categories li {
    padding: 8px 0;
    border-bottom: 1px solid #eee;
}

.widget_categories li:last-child {
    border-bottom: none;
}

.widget_categories a {
    text-decoration: none;
    color: #333;
    transition: color 0.3s;
}

.widget_categories a:hover {
    color: #FF6B35;
}

/* 最近の投稿ウィジェットのスタイル */
.widget_recent_entries ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.widget_recent_entries li {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

.widget_recent_entries li:last-child {
    border-bottom: none;
}

.widget_recent_entries a {
    text-decoration: none;
    color: #1976D2;
    font-weight: 500;
}

.widget_recent_entries .post-date {
    display: block;
    font-size: 0.85rem;
    color: #999;
    margin-top: 5px;
}

/* レスポンシブデザイン */
@media (max-width: 768px) {
    /* スマホではサイドバーを下部に移動 */
    .sidebar {
        width: 100%;
        margin-top: 30px;
    }
    
    /* ウィジェットの余白を調整 */
    .widget {
        padding: 15px;
        margin-bottom: 20px;
    }
    
    /* フッターウィジェットを1カラムに */
    .footer-widgets {
        grid-template-columns: 1fr;
    }
}