
作æ¥ã™ã‚‹å ´åˆ ワードプレス 開発を行ㄠプラグイン o トピック ã“ã®ãƒ—ラットフォーム㮠CMS, 通常知ã£ã¦ã„ã¾ã™ã€‚, ユーザーã¯ã€ã‚¦ã‚§ãƒ–サイトを訪å•ã™ã‚‹ã¨ã見ã¦ã„るビジュアルè¦ç´ ã«åŠ ãˆã¦, ä»»æ„ã®ãƒ—ラグインやテーマã®ä¸€éƒ¨ã§ã‚りã¾ã™ã€‚ æ§‹æˆ o 管ç†, 管ç†éƒ¨ã§å‡ºæ¥ã¦ã„ã¾ã™ã€‚ ワードプレス.
é€šå¸¸ã€æˆ‘々 ã¯ãれを呼ã³å‡ºã™ ãƒãƒƒã‚¯ã‚¨ãƒ³ãƒ‰, 部分, ãれもユーザーãŒè¡¨ç¤ºã•れã¦ã„ã¾ã›ã‚“。, 我々 ã¯ã€ãƒ†ãƒ¼ãƒžã‚„プラグインã®ä¸€éƒ¨ã§ã™ã€‚ 開発, 自分ã®ç®¡ç†ã¨æ§‹æˆãŒè¡Œã‚れるã¨.
åŒæ§˜, 部分を開発ã™ã‚‹éš› ç®¡ç† ç§ãŸã¡ã®ãƒ—ラグインやテーマ, ã„ãã¤ã‹ã®æ™‚点ã§ã‚ãªãŸãŒå¯èƒ½ã§ã™ãŒãªã„〠カラー ピッカー, 呼ã°ã‚Œã¾ã™ã‹ WP 色ピッカー. ã“れã¯ãªã„ã€ä»¥ä¸Š web オブジェクト 何, ãれをクリックã™ã‚‹ã¨, 示ã—ã¦ã„ã¾ã™ã€ 色ã®ç¯„囲, 方法ã§ãれら㮠1 ã¤ã‚’é¸æŠžã™ã‚‹ã“ã¨ãŒå¯èƒ½ã¨ãªã£ã¦ãã ã•ã„。 直接 ã‚ャンãƒã‚¹ã«, ã¾ãŸã¯çµŒç”±ã§ã‚‚ãã® RGB コード.
ã“れ 容易㫠多ãã®ã‚‚ã®, ãれ以æ¥ãれã¯åŒã˜ã“ã¨ã§ã¯ã‚りã¾ã›ã‚“。 直接入力ã—ã¾ã™ã€‚ 〠16 進数㮠RGB コード テã‚スト フィールドã«, é¸æŠžã™ã‚‹ã€ 色ã®ãƒ‘レット 我々 ã®ã‚ˆã†ãªè‰². ã“ã®ãŸã‚ã‚‚ã®ã§, 用ã„ã¦ã€ カラー ピッカー.
å½¢ è¿½åŠ ã€ ã‚«ãƒ©ãƒ¼ ピッカー ページ ç®¡ç† ã‚ãªãŸ プラグイン o テーマ 㮠ワードプレス å分ã§ã™ã€‚ å˜ç´”ã§ã™. 最åˆã§ã™, è¿½åŠ ã™ã‚‹ã ã‘〠テール スタイルã¨ã‚¹ã‚¯ãƒªãƒ—ト スタイルã¨ã‚¹ã‚¯ãƒªãƒ—ト ‘WP カラーピッカー‘, æ¬¡ã®æ–¹æ³•ã§:
1 2 | wp_enqueue_style( 'wp-color-picker' ); wp_enqueue_script( 'wp-color-picker' ); |
ãã®å¾Œ, 使用ã™ã‚‹å ´æ‰€ã€ カラー ピッカー, ã‚¿ã‚°ã‚’è¿½åŠ ã—ã¾ã™ã€‚ 入力 タイプ テã‚スト åŒæ§˜ã«ãれ:
1 | <input type="text" class="colorPicker" name="mi_color" value="" data-default-color="#e5e5e5" /> |
ã‚ãªãŸãŒè¦‹ã‚‹ã“ã¨ãŒã§ãã¾ã™ã€‚, 我々 㯠1 ã¤ã‚’割り当ã¦ã‚‹ クラス ã“ã®è¦ç´ ã«, ç§ãŒæ±‚ã‚ã¦ã„ã¾ã™ã€‚ ‘カラーピッカー‘. ã‚ã‹ã‚Šã‚„ã™ãã™ã‚‹ãŸã‚ã“ã®åå‰ã‚’使用ã—ã¦ã„ã¾ã™ã€‚, 使用ã™ã‚‹ã“ã¨ãŒã§ãã¾ã™ãŒã€ ã‚ãªãŸã®åå‰, æ¬¡ã®æ‰‹é †ã§ä½¿ç”¨ã™ã‚‹å ´åˆ åŒã˜.
考慮ã™ã¹ããã®ä»–ã®ãƒ•ィールドã¯ã€ã—ã¾ã™ã€‚ ‘データ-デフォルトã®è‰²‘ 色を示ã™ã“ã¨, 既定ã§ã¯, ã‹ã‹ã‚Šã¾ã™ã€ WP 色ピッカー.
終了ã™ã‚‹ã«ã¯, ã—ãªã‘れã°ãªã‚‰ãªã„ãŒã€ 呼ã³å‡ºã—, ã«ã‚ˆã£ã¦ jQuery, ã‚¿ã‚°ã®ä¸ スクリプト, æ¬¡ã®æ–¹æ³•ã§:
1 2 3 4 5 | <script type="text/javascript"> jQuery(document).ready(function() { jQuery('.colorPicker').wpColorPicker(); }); </script> |
ã©ã“ カラーピッカー 示ã—ã¾ã™ã€ クラス 我々 ã«å‰²ã‚Šå½“ã¦ã€ è¦ç´ ã®å…¥åŠ› è¨å®šæ¸ˆã¿.
一度行ã£ã¦, 開発ã—ã¦ã„るページを開ã„ãŸå ´åˆ, 以å‰ã«ä½œæˆã—ãŸå…¥åŠ›è¦ç´ ãŒã™ã‚‹å¿…è¦ãŒã‚りã¾ã™ãŒè¡¨ç¤ºã•れã¾ã™ã€‚, 示ã—ã¦ã„ã¾ã™ã€ カラー ピッカー o WP 色ピッカー. å ´åˆ ãƒ”ãƒ³ã‚«ã‚¹ ・ ãれ以上, 㯠表示ã—ã¾ã™ã€‚ 〠色ã®ãƒ‘レット è‰²ã‚’é¸æŠžã™ã‚‹ã“ã¨ãŒã§ãã¾ã™, ã‚りã€ã㮠値 属性ã«ä¿å˜ã•れã¾ã™ã€‚ 値 è¦ç´ 入力 以å‰ã«ä½œæˆ.
ã“ã®æ–¹æ³•ã§è¡Œã†ã“ã¨ãŒã§ãã¾ã™ã€‚ è¿½åŠ ç®¡ç†éƒ¨ã¾ãŸã¯ ç®¡ç† ã„ãšã‚Œã‹ã® テーマやプラグイン 作æˆã—ã¦ã„ã‚‹ã“ã¨, 〠カラー ピッカー, 回é¿ã—ã¾ã™ã€‚ ã“ã®ã‚ˆã†ã«ä½œæ¥ã™ã‚‹ã“㨠16 進数㮠RGB コード ãã®æœ€åˆã®ä¸€ç›®ã§ä¸Žãˆã‚‹ã“ã¨ãŒã§ããªã„アイデアã¯ä½•色ã®.

2 上ã®è€ƒãˆ"カラー ピッカーを使用ã™ã‚‹æ–¹æ³•, ã¾ãŸã¯ WP カラーピッカー, ワードプレスã®ç®¡ç†”
ã“ã‚“ã«ã¡ã¯, ç§ã®ãƒ¯ãƒ¼ãƒ‰ãƒ—レスを更新ã•れã€ç”»åƒæ•°ã®æ›¸ãè¾¼ã¿ãŒ 16 進数ã¯ç§ã«å¤šãã®å•é¡Œã‚’ã‚³ã‚¹ãƒˆãŒæ¶ˆãˆã¦ã—ã¾ã£ãŸ, 彼らã¯ã“ã®æƒ…å ±ã‚りãŒã¨ã†ã”ã–ã„ã¾ã™ç§ã‚’助ã‘ã‚‹ã“ã¨ãŒã§ãã‚‹å ´åˆã€ã‚‚ã†ä¸€åº¦ã“ã®å†™çœŸã‚’表示ã™ã‚‹æ–¹æ³•を知ã£ã¦ã„ã¾ã™ã€‚, よã‚ã—ããŠé¡˜ã„ã„ãŸã—ã¾ã™
ã“ã‚“ã«ã¡ã¯ã‚»ã‚¶ãƒ¼ãƒ«. インストールã—ãŸãƒ—ラグインã®ã„ãã¤ã‹ã®ã„ãã¤ã‹ã®éžäº’æ›æ€§ãŒã‚りã¾ã™ã€‚. コメントã™ã‚‹ã‚«ãƒ©ãƒ¼ ピッカー, プラグインã‹ä½•ã‹ã§ã™ã€‚? ãŠãらãã“ã®ãƒ†ãƒ¼ãƒžã‚„プラグインãŒãƒ¯ãƒ¼ãƒ‰ãƒ—レスをã—ã¦ãƒã‚°ãŒã‚ã‚‹ã“ã¨ãŒã§ãã‚‹ãƒãƒ¼ã‚¸ãƒ§ãƒ³ã«æ›´æ–°ã•れã¾ã›ã‚“。.