teratail header banner
teratail header banner
質問するログイン新規登録

質問編集履歴

1

記載しているファイル名などを追記

2021/06/21 14:00

投稿

ringoringogogo
ringoringogogo

スコア15

title CHANGED
File without changes
body CHANGED
@@ -31,4 +31,85 @@
31
31
 
32
32
  ```
33
33
 
34
- 大変恐れ入りますが、以上よろしくお願いいたします。
34
+ 大変恐れ入りますが、以上よろしくお願いいたします。
35
+
36
+ 以下、追記いたします。
37
+
38
+
39
+ 以下のようにWP_Widgetを継承したクラスのform ファンクションに記載しています。
40
+ やりたいこととしては、指定した数だけテキストフィールドを増やしたいと思っています。
41
+ (ギャラリーウィジェットのようなものが理想なのですがframeの使い方がわからないのでこの方法で試しています・・・。)
42
+
43
+ 以下、function.phpに記載しているコードです。
44
+
45
+
46
+ <?php
47
+
48
+ class Images_Slider extends WP_Widget
49
+ {
50
+ function Images_Slider()
51
+ {
52
+ $widget_option = array('description' => '複数の画像とリンクを設定');
53
+ parent::__construct(false, $name = '画像スライダー', $widget_option);
54
+ }
55
+
56
+ function form($instance)
57
+ {
58
+ ?>
59
+ <div class="okikae">
60
+ <p>もとの内容です
61
+ </p>
62
+ </div>
63
+
64
+ <form method="post" action="confirm">
65
+ <div class="form-setting-number" id="form-setting-number">
66
+ <p>設定する画像の数</p>
67
+ <select id="form-setting-number">
68
+ <option value="1">1</option>
69
+ <option value="2">2</option>
70
+ <option value="3">3</option>
71
+ </select>
72
+ </div>
73
+ </form>
74
+
75
+
76
+ <form method="post" action="confirm">
77
+ <div class="form-block" id="form_block[0]">
78
+ <!-- Closeボタン -->
79
+ <span class="close" title="Close" style="display: none;">-</span>
80
+
81
+ <p>Name:<input type="text" name="name[0]" id="name[0]" /></p>
82
+ <p>
83
+ <label for="<?php echo $this->get_field_id('imageurl'); ?>">画像URL:</label>
84
+ <input type="url" name="imageurl" class="widefat" id="<?php echo $this->get_field_id('imageurl'); ?>" name="<?php echo $this->get_field_name('imageurl'); ?>" value="<?php echo esc_attr(@$instance['imageurl']); ?>">
85
+ </p>
86
+ <p><label for="<?php echo $this->get_field_id('targeturl'); ?>">リンク先:</label>
87
+ <input type="url" name="targeturl" class="widefat" id="<?php echo $this->get_field_id('targeturl'); ?>" name="<?php echo $this->get_field_name('targeturl'); ?>" value="<?php echo esc_attr(@$instance['targeturl']); ?>">
88
+ </p>
89
+ </div>
90
+
91
+ </form>
92
+
93
+ <script>
94
+ //セレクトボックスが切り替わったら発動
95
+ jQuery(function() {
96
+
97
+ jQuery('select').change(function() {
98
+ console.log("値変更されました");
99
+ //選択したvalue値を変数に格納
100
+ var settingnumber = jQuery(this).val();
101
+ var okikaetext = "";
102
+ for (var i=0; i<settingnumber; i++) {
103
+ var idname="imageurl"+(i+1);
104
+ console.log("id name:"+idname);
105
+ okikaetext = okikaetext +   ' <p><label for="<?php echo $this->get_field_id(idname); ?>">画像URL:</label><input type="url" name="imageurl" class="widefat" id="<?php echo $this->get_field_id('imageurl'); ?>" name="<?php echo $this->get_field_name('imageurl'); ?>" value="<?php echo esc_attr(@$instance['imageurl']); ?>"></p>'
106
+ }
107
+
108
+ jQuery('.okikae').html(okikaetext);
109
+
110
+ });
111
+ });
112
+
113
+ </script>
114
+
115
+ 大変恐れ入りますが、お気づきの点ございましたらなんでもご指摘いただけると幸いです・・・。