syntaro
フォーラムへの返信
-
フォーラム: プラグイン
返信が含まれるトピック: 自作ウィジェットのJSでフォームに触りたいありがとうございました。
あと、関数名の、TESTを変更したり、TEXTAREAのなかのスペースを書き換えたりすれば、
0.9から、1.0にできそうです。ありがとうございました。
フォーラム: プラグイン
返信が含まれるトピック: 自作ウィジェットのJSでフォームに触りたいこんにちは、長らくかかりましたが、
JAVSCRIPTで、ボタンおされたら、TEXTAREA更新、
完成しました。jQueryにはなりませんでした。<?php /* Plugin Name: WhiteCat SimpleMenu Widget Plugin URI: Description: Menuを表示するウィジェットを追加する Author: SynthTAROU Version: 0.9 Author URI: */ /* Copyright 2022 SynTAROU This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */ ?> <?php add_action('widgets_init', 'whitecat_simplemenu_widget_register' ); function whitecat_simplemenu_widget_register() { register_widget( 'whitecat_simplemenu_widget' ); } function whitecat_simplemenu_widget_script() { ?> <script type="text/javascript"> function test_button(color_css, background_css, text_css) { var color = document.getElementById(color_css).value var back = document.getElementById(background_css).value var text = "#whitecat_simplemenu {\n"; text = text + " width: 240px;\n"; text = text + " color: " + color + ";\n"; text = text + " background-color: " + back + ";\n"; text = text + "}\n"; text = text + "#whitecat_simplemenu a { color: " + color + "; }\n"; text = text + "#whitecat_simplemenu a:link { color: " + color + "; }\n"; text = text + "#whitecat_simplemenu a:visited { color: " + color + "; }\n"; text = text + "#whitecat_simplemenu a:hover { color: " + color + "; }\n"; text = text + "#whitecat_simplemenu a:active { color: " + color + "; }\n"; document.getElementById(text_css).value = text; } </script> <?php } add_action('admin_print_scripts', 'whitecat_simplemenu_widget_script'); // // // テスト実装マイウィジェット class whitecat_simplemenu_widget extends WP_Widget { /** * ウィジェット名などを設定 */ function __construct() { $widget_ops = array( 'classname' => 'WhiteCatSimpleMenu_class', 'description' => 'ウィジェットのサンプル' ); parent::__construct( 'WhiteCatSimpleMenu', 'WhiteCat SimpleMenu', $widget_ops ); } function whitecate_before_footer() { echo '<div id="whitecat_simplemenu_child">' . $this->footer_text . '</div>'; } /** * ウィジェットの内容を出力 * * @param array $args * @param array $instance */ public function widget( $args, $instance ) { echo '<style type="text/css">' . $instance['text_css'] . '</style>'; // outputs the content of the widget echo $before_widget; //ウィジェットで表示する内容 echo '<div id="whitecat_simplemenu">'; echo '<h3>' . $instance['title'] . '</h3>'; $footer_text = wp_nav_menu(array('menu' => $instance['menu'], 'echo' => 'false')); echo $footer_text; echo '</div>'; echo $after_widget; } /** * ウィジェットオプションの保存処理 * * @param array $new_instance 新しいオプション * @param array $old_instance 以前のオプション */ public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = sanitize_text_field( $new_instance['title'] ); $instance['menu'] = sanitize_text_field( $new_instance['menu'] ); $instance['color'] = sanitize_text_field( $new_instance['color'] ); $instance['background'] = sanitize_text_field( $new_instance['background'] ); $instance['text_css'] = sanitize_text_field( $new_instance['text_css'] ); return $instance; } function form( $instance ) { $defaults = array( 'title' => 'タイトルを入力', 'menu' => 'メニューを選択', 'color' => '文字色', 'background' => '背景色', 'text_css' => '追加CSS', 'button_css' => 'ボタン', ); $instance = wp_parse_args( (array) $instance, $defaults ); $title = $instance['title']; $menu = $instance['menu']; $color = $instance['color']; $background_css = $instance['background']; $text_css = $instance['text_css']; $button_css = $instance['button_css']; $name_title = $this->get_field_name ('title'); $name_menu = $this->get_field_name ('menu'); $name_color_css = $this->get_field_name ('color'); $name_background_css = $this->get_field_name ('background'); $name_text_css = $this->get_field_name ('text_css'); $name_button_css = $this->get_field_name ('button_css'); $esc_title = esc_attr($title); $esc_menu = esc_attr($menu); $esc_color_css = esc_attr($color); $esc_background_css = esc_attr($background_css); $esc_text_css = esc_attr($text_css); $esc_button_css = esc_attr($button_css); $func_name = "javascript:test_button"; $func_name .= "('" . $name_color_css. "', '". $name_background_css . "', '". $name_text_css . "');"; echo "<p>タイトル: <input class='widefat'"; echo " name='" . $name_title . "'"; echo " type='text' value='" . $esc_title . "'>"; echo "</p>"; echo "<p>メニュー:"; $nav_menus = wp_get_nav_menus(); if ( count( $nav_menus ) > 0 ) : echo "<select name='" . $name_menu . "'>"; foreach ( (array) $nav_menus as $menu_elem ) { echo "<option value=\"" . esc_attr( $menu_elem->name ) . "\""; if ($menu == $menu_elem->name) { echo " selected"; } $esc_name = esc_attr($menu_elem->name); echo '>' .$esc_name . '</option>'; } echo '</select>'; endif ; ?> </p> <p>文字カラー: <input name="<?php echo $name_color_css; ?>" id="<?php echo $name_color_css;?>" type="color" value="<?php echo $esc_color_css; ?>"> </p> <p>背景カラー: <input name="<?php echo $name_background_css; ?>" id="<?php echo $name_background_css;?>" type="color" value="<?php echo $esc_background_css; ?>"> </p> <p> <button name="<?php echo $name_button_css; ?>" onclick="<?php echo $func_name?>"> CSS RESET</button> <textarea name="<?php echo $name_text_css; ?>" id="<?php echo $name_text_css; ?>"> <?php echo $esc_text_css; ?> </textarea> </p> <?php } } ?>
フォーラム: プラグイン
返信が含まれるトピック: 自作ウィジェットのJSでフォームに触りたいjQueryでフォームにアクセスする。引き続きお願いします。どうしても対応したいので教えてください。
サンプルコードがよくなかったので、はりなおしてみます。ウィジェットを配置するタイミングでん、JAVASCRIPTについて質問です。
二通りの方法を試しています。
echo '<button name="' . $name_button_css . '" id="' . $name_button_css . ' onclick="javascript: alert();">CSSリセット</button>';
こちらはうまくいくようです。
以下でどうにもアクセスすることができません。
上記の場合、複数回ウィジェットが使われた場合に、うまくアクセスできないのでできる限りjQueryを使いたいです。echo '<button name="' . $name_button_css . '" id="' . $name_button_css . '">CSSリセット</button>'; ?> <script type="text/javascript"> $('#<?php echo $name_button_css; ?>').on('click', function() { alert("クリックされました"); }); $("@"<?php echo $name_button_css; ?>").on('click', function () { alert("ボタン1がクリックされました。"); }); $(document).ready(function () { $("@"<?php echo $name_button_css; ?>").on('click', function () { alert("ボタン1がクリックされました。"); }) }); </script> <?php
コード全部は以下になります。
<?php /* Plugin Name: WhiteCat SimpleMenu Widget Plugin URI: Description: Menuを表示するウィジェットを追加する Author: SynthTAROU Version: 0.1 Author URI: */ /* Copyright 2022 SynthTAROU (email : yamanaka.kinoko@gmail.com) This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */ ?> <?php add_action('widgets_init', 'whitecat_simplemenu_widget_register' ); function whitecat_simplemenu_widget_register() { register_widget( 'whitecat_simplemenu_widget' ); } // // // テスト実装マイウィジェット class whitecat_simplemenu_widget extends WP_Widget { /** * ウィジェット名などを設定 */ function __construct() { $widget_ops = array( 'classname' => 'WhiteCatSimpleMenu_class', 'description' => 'ウィジェットのサンプル' ); parent::__construct( 'WhiteCatSimpleMenu', 'WhiteCat SimpleMenu', $widget_ops ); } function whitecate_before_footer() { echo '<div id="whitecat_simplemenu_child">' . $this->footer_text . '</div>'; } /** * ウィジェットの内容を出力 * * @param array $args * @param array $instance */ public function widget( $args, $instance ) { echo '<style type="text/css">' . $instance['addcss'] . '</style>'; // outputs the content of the widget echo $before_widget; echo '<style>'; ?> #whitecat_simplemenu { width: 240px; background-color: <?php echo $instance['background']; ?>; color: <?php echo $instance['color']; ?> } #whitecat_simplemenu a { color: <?php echo $instance['color']; ?>} <?php echo '</style>'; //ウィジェットで表示する内容 echo '<div id="whitecat_simplemenu">'; echo '<h3>' . $instance['title'] . '</h3>'; $footer_text = wp_nav_menu(array('menu' => $instance['menu'], 'echo' => 'false')); echo $footer_text; echo '</div>'; echo $after_widget; } /** * ウィジェットオプションの保存処理 * * @param array $new_instance 新しいオプション * @param array $old_instance 以前のオプション */ public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = sanitize_text_field( $new_instance['title'] ); $instance['menu'] = sanitize_text_field( $new_instance['menu'] ); $instance['color'] = sanitize_text_field( $new_instance['color'] ); $instance['background'] = sanitize_text_field( $new_instance['background'] ); $instance['text_css'] = sanitize_text_field( $new_instance['text_css'] ); return $instance; } function form( $instance ) { $defaults = array( 'title' => 'タイトルを入力', 'menu' => 'メニューを選択', 'color' => '文字色', 'background' => '背景色', 'text_css' => '追加CSS', 'button_css' => 'ボタン', ); $instance = wp_parse_args( (array) $instance, $defaults ); $title = $instance['title']; $menu = $instance['menu']; $color = $instance['color']; $background = $instance['background']; $text_css = $instance['text_css']; $button_css = $instance['button_css']; $name_title = $this->get_field_name ('title'); $name_menu = $this->get_field_name ('menu'); $name_color = $this->get_field_name ('color'); $name_background = $this->get_field_name ('background'); $name_text_css = $this->get_field_name ('text_css'); $name_button_css = $this->get_field_name ('button_css'); $esc_title = esc_attr($title); $esc_menu = esc_attr($menu); $esc_color = esc_attr($color); $esc_background = esc_attr($background); $esc_text_css = esc_attr($text_css); $esc_button_css = esc_attr($button_css); echo "<p>タイトル: <input class='widefat'"; echo " name='" . $name_title . "'"; echo " type='text' value='" . $esc_title . "'>"; echo "</p>"; echo "<p>メニュー:"; $nav_menus = wp_get_nav_menus(); if ( count( $nav_menus ) > 0 ) : echo "<select name='" . $name_menu . "'>"; foreach ( (array) $nav_menus as $menu_elem ) { echo "<option value=\"" . esc_attr( $menu_elem->name ) . "\""; if ($menu == $menu_elem->name) { echo " selected"; } $esc_name = esc_attr($menu_elem->name); echo '>' .$esc_name . '</option>'; } echo '</select>'; endif ; echo '</p>'; echo '<p>文字カラー:' . PHP_EOL; echo '<input name="' . $name_color . '" '; echo 'type="color" value="' . $esc_color . '">'; echo '</p>'; echo '<p>背景カラー:' . PHP_EOL; echo '<input name="' . $name_background . '" '; echo 'type="color" value="' . $esc_background . '">'; echo '</p>'; echo '<button name="' . $name_button_css . '" id="' . $name_button_css . '">CSSリセット</button>'; echo '<textarea name="' . $name_text_css . '">'; echo $esc_text_css; echo '</textarea>'; ?> <script type="text/javascript"> $('#<?php echo $name_button_css; ?>').on('click', function() { alert("クリックされました"); }); $("@"<?php echo $name_button_css; ?>").on('click', function () { alert("ボタン1がクリックされました。"); }); $(document).ready(function () { $("@"<?php echo $name_button_css; ?>").on('click', function () { alert("ボタン1がクリックされました。"); }) }); </script> <?php /* #whitecat_simplemenu a:link { color: <?php echo $instance['color']; ?>} #whitecat_simplemenu a:visited { color: <?php echo $instance['color']; ?>} #whitecat_simplemenu a:hover { color: <?php echo $instance['color']; ?>} #whitecat_simplemenu a:active { color: <?php echo $instance['color']; ?>} */ } } ?>
フォーラム: プラグイン
返信が含まれるトピック: 自作ウィジェットのJSでフォームに触りたい具体的に問題のありかを追いかけていたのですが、
「ウィジットを、管理画面のウィジェットメニューで呼び出し、
Javascriptを呼び出すまではうまくいったのですが、
ウィジェットの設定をformタグで囲んでも、
Document.formsプロパティの長さが0になってしまい、困っています。」といった内容になります。また、FORMの名前に、ウィジェットを、複数回つかっている
場合などでも、ユニークな呼称がつかわれることを保証する方法が、
もしかしたらあるのかな?と考えいるのですが、
みつかりませんでした。こちらも情報がもしあれば、教えていただけないでしょうか。掲載させていただいたコードは、エスケープされてない部分などいくつか問題が残っていますね。
フォーラム: プラグイン
返信が含まれるトピック: 自作ウィジェットのJSでフォームに触りたい大変失礼いたしました。
また失敗する可能性もあるのでこちらの方法でコードを掲載させていただきます。
よろしくおねがいします。
<?php /* Plugin Name: WhiteCat SimpleMenu Widget Plugin URI: Description: Menuを表示するウィジェットを追加する Author: SynthTAROU Version: 0.1 Author URI: */ ?> <?php /* Copyright 2022 SynthTAROU This program is free software; you can redistribute it and/or modify it under the terms of the GNU General Public License, version 2, as published by the Free Software Foundation. This program is distributed in the hope that it will be useful, but WITHOUT ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the GNU General Public License for more details. You should have received a copy of the GNU General Public License along with this program; if not, write to the Free Software Foundation, Inc., 51 Franklin St, Fifth Floor, Boston, MA 02110-1301 USA */ ?> <?php add_action('widgets_init', 'whitecat_simplemenu_widget_register' ); function whitecat_simplemenu_widget_register() { register_widget( 'whitecat_simplemenu_widget' ); } // // // テスト実装マイウィジェット class whitecat_simplemenu_widget extends WP_Widget { /** * ウィジェット名などを設定 */ function __construct() { $widget_ops = array( 'classname' => 'WhiteCatSimpleMenu_class', 'description' => 'ウィジェットのサンプル' ); parent::__construct( 'WhiteCatSimpleMenu', 'WhiteCat SimpleMenu', $widget_ops ); } function whitecate_before_footer() { echo '<div id="whitecat_simplemenu_child">' . $this->footer_text . '</div>'; } /** * ウィジェットの内容を出力 * * @param array $args * @param array $instance */ public function widget( $args, $instance ) { echo '<style type="text/css">' . $instance['addcss'] . '</style>'; // outputs the content of the widget echo $before_widget; echo '<style>'; ?> #whitecat_simplemenu { width: 240px; background-color: <?php echo $instance['background']; ?>; color: <?php echo $instance['color']; ?> } #whitecat_simplemenu a { color: <?php echo $instance['color']; ?>} <?php echo '</style>'; //ウィジェットで表示する内容 echo '<div id="whitecat_simplemenu">'; echo '<h3>' . $instance['title'] . '</h3>'; $footer_text = wp_nav_menu(array('menu' => $instance['menu'], 'echo' => 'false')); echo $footer_text; echo '</div>'; echo $after_widget; } /** * ウィジェットオプションの保存処理 * * @param array $new_instance 新しいオプション * @param array $old_instance 以前のオプション */ public function update( $new_instance, $old_instance ) { $instance = $old_instance; $instance['title'] = sanitize_text_field( $new_instance['title'] ); $instance['menu'] = sanitize_text_field( $new_instance['menu'] ); $instance['color'] = sanitize_text_field( $new_instance['color'] ); $instance['background'] = sanitize_text_field( $new_instance['background'] ); return $instance; } function form( $instance ) { $defaults = array( 'title' => 'タイトルを入力', 'menu' => 'メニューを選択', 'color' => '文字色', 'background' => '背景色' ); $instance = wp_parse_args( (array) $instance, $defaults ); $title = $instance['title']; $menu = $instance['menu']; $color = $instance['color']; $background = $instance['background']; $addcss = $instance['addcss']; $name_title = $this->get_field_name ('title'); $name_menu = $this->get_field_name ('menu'); $name_color = $this->get_field_name ('color'); $name_background = $this->get_field_name ('background'); $name_addcss = $this->get_field_name ('addcss'); $esc_title = esc_attr($title); $esc_menu = esc_attr($menu); $esc_color = esc_attr($color); $esc_background = esc_attr($background); $esc_addcss = esc_attr($addcss); $whitecat_make_css = "whitecat_make_css"; echo "<p>タイトル: <input class='widefat'"; echo " name='" . $name_title . "'"; echo " type='text' value='" . $esc_title . "'>"; echo "</p>"; echo "<p>メニュー:"; $nav_menus = wp_get_nav_menus(); if ( count( $nav_menus ) > 0 ) : echo "<select name='" . $name_menu . "'>"; foreach ( (array) $nav_menus as $menu_elem ) { echo "<option value=\"" . esc_attr( $menu_elem->name ) . "\""; if ($menu == $menu_elem->name) { echo " selected"; } $esc_name = esc_attr($menu_elem->name); echo '>' .$esc_name . '</option>'; } echo '</select>'; endif ; echo '</p>'; echo '<p>文字カラー:' . PHP_EOL; echo '<input name="' . $name_color . '" '; echo 'type="color" value="' . $esc_color . '">'; echo '</p>'; echo '<p>背景カラー:' . PHP_EOL; echo '<input name="' . $name_background . '" '; echo 'type="color" value="' . $esc_background . '">'; echo '</p>'; echo '<p>追加CSSは、#whitecat_simplemenu a:link { color: ???; }として設定できます</p>'; /* #whitecat_simplemenu a:link { color: <?php echo $instance['color']; ?>} #whitecat_simplemenu a:visited { color: <?php echo $instance['color']; ?>} #whitecat_simplemenu a:hover { color: <?php echo $instance['color']; ?>} #whitecat_simplemenu a:active { color: <?php echo $instance['color']; ?>} */ } } ?>
フォーラム: テーマ
返信が含まれるトピック: ヘッダーナビのレイアウトありがとうございます!
ここで質問してよかったです。.site-header-container {
overflow: visible;
}上記にて対応できました。
またお願いします。- この返信は2年、 8ヶ月前にsyntaroが編集しました。
フォーラム: テーマ
返信が含まれるトピック: ヘッダーナビのレイアウトハック的な手段ですが、おそらく、メニューのプルダウン領域を、抹消してあげることで、Bには対処できました。
Cについては、できないといわれていますね、CSSでこの領域を指定する手段がないみたいですね。
Aについて、引き続きよろしくお願いします。サブメニューのプルダウンを、領域外でも行いたいという、要望になります。
z-indexなど試しましたが、できませんでした。
Bの対処は以下のように行いました。
/* モバイルのプルダウン領域を消す */
.global-nav-list a {
padding-left: 12px !important;
padding-right: 12px !important;
}@media (max-width: 991.9px) {
.global-nav-list li .global-nav-name {
margin: 12px 0 12px 0 !important; /* 上右下左 */
padding: 0 !important;
}
}
@media (min-width: 992px) {
.global-nav-list li .global-nav-name {
margin: 0px !important;
padding: 0 !important;
}
}フォーラム: テーマ
返信が含まれるトピック: ウィジェットの追加が出来ません。【WordPress】ウィジェットにカスタムHTMLでHTMLタグを入れる方法
https://pokomichi.com/wordpress-2
日本語なのですが、「ましたが、~ですが、~で、~で、」といったつなげ方では伝わりにくいと思います。
つたわるように、思いついた言葉を、外向けに翻訳しましょう。読むほうも困ってしまいます。<例>
ディスプレイ広告等の設置をしようと思っていました。
そこで、先日googleアドセンスの審査をうけました。審査が通ったので利用しようとしましたが、その際、
ウィジェットでカスタムHTMLを使う方法がわかりませんでした。カスタムHTMLの使い方を教えてください。
</例>
そして>どぅしてこぅなのか?その原因を教えて下さい。
キチンと整理して、わからないところを文章としてはっきりさせれば、
検索方法など思いついた案件じゃないかなと思います。ちなみに、「カスタムHTMLでウィジェットの追加」をコピーしてGoogleで検索をかけたところ、
一番最初に上記URLがでてきたので、たぶんこれが答えかもしれません。
(質問がはっきりしなかったので、「たぶん」となります。)長文失礼しました。この返信がハラスメントに該当しないことを祈っています。
フォーラム: テーマ
返信が含まれるトピック: Lightning グローバルナビのメニューの文字の位置大変ありがたいヒントでした。
function.phpの以下のコードをコメントアウトしたところ、だいたいうまくいきました。
ただ、必要以上に小さい高さだとずれてしまいますが、これは、仕方ないですね、、いらなくなったコードはどんどん消したほうがいいですね。
/*
add_filter(‘walker_nav_menu_start_el’, ‘description_in_nav_menu’, 10, 4);
function description_in_nav_menu($item_output, $item){
return preg_replace(‘/(<a.*?>[^<]*?)</’, ‘$1’ . “<br /><span>{$item->description}</span><“, $item_output);
}*/お騒がせしました。またよろしくお願いします。
フォーラム: テーマ
返信が含まれるトピック: Lightning グローバルナビのメニューの文字の位置すいません。補足させていただきます。
Lightning無償版を使用しています。
複数のサイトを元にしました。まだまだ素人です。
PCでこのURLをひらいて、横幅を変化させると、グローバルナビの構成も
あわせてフィットするために、移動すると思います。そのさい、一番幅がひろいときに、文字の縦の位置を修正できずに困っています。
よろしくお願いします。
フォーラム: テーマ
返信が含まれるトピック: 横幅の最大を決め外側をカラー付けしたい(Lightning無償版)スライドショーは対応できませんでしたが、
カバーの設定(画面のプルダウンメニュ-)の全幅をなしに設定したところうまくいきました。お邪魔しました。
フォーラム: テーマ
返信が含まれるトピック: テーマカスタマイズができません他社様のサイトですが、
子テーマのカスタマイズという手順について書かれています。https://tcd-theme.com/2018/06/how-to-make-child-theme.html
つまるところ、他人のつくられたテーマの直接編集はよろしくないという1意見になります。
フォーラム: 使い方全般
返信が含まれるトピック: javascripファイルへのアクセス制限についてすいません。答えにはなっていないコメントですが、
不正・悪意・正常の定義を教えていただけないでしょうか。WEBとはそもそも全世界からアクセスできるものだと思っておりますので。
フォーラム: 使い方全般
返信が含まれるトピック: ドロップダウンメニューの幅を文字幅にwidth: 100%を消してみてはどうだろう。
試してはいないので、的外れでしたらすいません。left: -999em;
も気になります。
サイトのURLはございますか?
フォーラム: 使い方全般
返信が含まれるトピック: カテゴリー記事のURLについて