🚀 Sticky Contact Banner Pro
Version 2.0.0Smart Scroll | Top Padding 30px | Session Memory
📦 วิธีที่ 1: Download ไฟล์ ZIP สำเร็จรูป
คลิกปุ่มด้านล่างเพื่อดาวน์โหลด (ใช้ได้กับ Browser ที่รองรับ)
📝 วิธีที่ 2: Copy Code แล้วสร้างไฟล์เอง (แนะนำ)
วิธีนี้รับประกันว่าจะได้ไฟล์แน่นอน
สร้างโฟลเดอร์
สร้างโฟลเดอร์ชื่อ sticky-contact-banner-pro บนเครื่องคุณ
สร้างไฟล์ PHP
สร้างไฟล์ sticky-contact-banner-pro.php แล้ว copy โค้ดด้านล่างไปใส่
Zip โฟลเดอร์
คลิกขวาที่โฟลเดอร์ > Compress/Zip เพื่อสร้างไฟล์ .zip
Upload ใน WordPress
นำไฟล์ .zip ไป upload ใน WordPress > Plugins > Add New > Upload
<?php /** * Plugin Name: Sticky Contact Banner Pro * Plugin URI: https://your-website.com/ * Description: Smart sticky banner with scroll detection and 30px top padding * Version: 2.0.0 * Author: Your Name * License: GPL v2 or later * Text Domain: sticky-contact-banner-pro */ // Prevent direct access if (!defined('ABSPATH')) { exit; } // Define constants define('SCBP_PLUGIN_URL', plugin_dir_url(__FILE__)); define('SCBP_PLUGIN_PATH', plugin_dir_path(__FILE__)); class StickyContactBannerPro { private $options; public function __construct() { add_action('init', array($this, 'init')); add_action('admin_menu', array($this, 'add_admin_menu')); add_action('admin_init', array($this, 'register_settings')); add_action('wp_footer', array($this, 'display_banner')); add_action('wp_head', array($this, 'add_custom_css')); } public function init() { $this->options = get_option('scbp_settings', $this->get_default_options()); } private function get_default_options() { return array( 'enabled' => '1', 'text' => 'คลิกตรงนี้ ไลน์สอบถามสินค้าได้เลย', 'line_id' => '@Tumtook', 'bg_color' => '#00c300', 'text_color' => '#ffffff', 'button_bg' => '#ff0000', 'button_text_color' => '#ffffff', 'button_text' => 'ฟ.สั่ง Email', 'button_link' => '#', 'catalog_text' => 'กลุ่มงานรถ Email เพื่อขึ้น Catalog', 'catalog_link' => '#', 'position' => 'top', 'scroll_trigger' => '300', 'mobile_height' => '60', 'desktop_height' => '80', 'z_index' => '9999', 'always_show' => '0' ); } public function add_custom_css() { if ($this->options['enabled'] !== '1') return; // Add padding to body when banner is at top if ($this->options['position'] === 'top' && $this->options['always_show'] === '1') { $desktop_padding = intval($this->options['desktop_height']) + 30; $mobile_padding = intval($this->options['mobile_height']) + 30; ?> <style> body { padding-top: <?php echo $desktop_padding; ?>px !important; } @media (max-width: 768px) { body { padding-top: <?php echo $mobile_padding; ?>px !important; } } </style> <?php } } public function add_admin_menu() { add_menu_page( 'Sticky Banner Pro', 'Sticky Banner Pro', 'manage_options', 'sticky-contact-banner-pro', array($this, 'admin_page'), 'dashicons-megaphone', 100 ); } public function register_settings() { register_setting('scbp_settings_group', 'scbp_settings', array($this, 'sanitize_settings')); } public function sanitize_settings($input) { $sanitized = array(); $sanitized['enabled'] = isset($input['enabled']) ? '1' : '0'; $sanitized['text'] = sanitize_text_field($input['text']); $sanitized['line_id'] = sanitize_text_field($input['line_id']); $sanitized['bg_color'] = sanitize_hex_color($input['bg_color']); $sanitized['text_color'] = sanitize_hex_color($input['text_color']); $sanitized['button_bg'] = sanitize_hex_color($input['button_bg']); $sanitized['button_text_color'] = sanitize_hex_color($input['button_text_color']); $sanitized['button_text'] = sanitize_text_field($input['button_text']); $sanitized['button_link'] = esc_url_raw($input['button_link']); $sanitized['catalog_text'] = sanitize_text_field($input['catalog_text']); $sanitized['catalog_link'] = esc_url_raw($input['catalog_link']); $sanitized['position'] = in_array($input['position'], array('top', 'bottom')) ? $input['position'] : 'top'; $sanitized['scroll_trigger'] = absint($input['scroll_trigger']); $sanitized['mobile_height'] = absint($input['mobile_height']); $sanitized['desktop_height'] = absint($input['desktop_height']); $sanitized['z_index'] = absint($input['z_index']); $sanitized['always_show'] = isset($input['always_show']) ? '1' : '0'; return $sanitized; } public function admin_page() { ?> <div class="wrap"> <h1><?php echo esc_html(get_admin_page_title()); ?></h1> <form method="post" action="options.php"> <?php settings_fields('scbp_settings_group'); $options = $this->options; ?> <table class="form-table"> <tr> <th scope="row">Enable Banner</th> <td> <input type="checkbox" name="scbp_settings[enabled]" value="1" <?php checked($options['enabled'], '1'); ?> /> </td> </tr> <tr> <th scope="row">Position</th> <td> <select name="scbp_settings[position]"> <option value="top" <?php selected($options['position'], 'top'); ?>>Top (30px padding)</option> <option value="bottom" <?php selected($options['position'], 'bottom'); ?>>Bottom</option> </select> </td> </tr> <tr> <th scope="row">Always Show</th> <td> <input type="checkbox" name="scbp_settings[always_show]" value="1" <?php checked($options['always_show'], '1'); ?> /> <p class="description">ถ้าไม่เลือก Banner จะแสดงเมื่อ scroll</p> </td> </tr> <tr> <th scope="row">Scroll Trigger (px)</th> <td> <input type="number" name="scbp_settings[scroll_trigger]" value="<?php echo esc_attr($options['scroll_trigger']); ?>" /> </td> </tr> <tr> <th scope="row">Main Text</th> <td> <input type="text" name="scbp_settings[text]" value="<?php echo esc_attr($options['text']); ?>" class="regular-text" /> </td> </tr> <tr> <th scope="row">Line ID</th> <td> <input type="text" name="scbp_settings[line_id]" value="<?php echo esc_attr($options['line_id']); ?>" /> </td> </tr> <tr> <th scope="row">Background Color</th> <td> <input type="text" name="scbp_settings[bg_color]" value="<?php echo esc_attr($options['bg_color']); ?>" /> </td> </tr> <tr> <th scope="row">Text Color</th> <td> <input type="text" name="scbp_settings[text_color]" value="<?php echo esc_attr($options['text_color']); ?>" /> </td> </tr> <tr> <th scope="row">Button Background</th> <td> <input type="text" name="scbp_settings[button_bg]" value="<?php echo esc_attr($options['button_bg']); ?>" /> </td> </tr> <tr> <th scope="row">Button Text</th> <td> <input type="text" name="scbp_settings[button_text]" value="<?php echo esc_attr($options['button_text']); ?>" /> </td> </tr> <tr> <th scope="row">Desktop Height (px)</th> <td> <input type="number" name="scbp_settings[desktop_height]" value="<?php echo esc_attr($options['desktop_height']); ?>" /> </td> </tr> <tr> <th scope="row">Mobile Height (px)</th> <td> <input type="number" name="scbp_settings[mobile_height]" value="<?php echo esc_attr($options['mobile_height']); ?>" /> </td> </tr> </table> <?php submit_button(); ?> </form> </div> <?php } public function display_banner() { if ($this->options['enabled'] !== '1') return; $position = $this->options['position'] === 'top' ? 'top:30px' : 'bottom:0'; $initial = $this->options['always_show'] === '1' ? '' : 'transform:translateY(' . ($this->options['position'] === 'top' ? '-120%' : '120%') . ');opacity:0'; ?> <div id="scbp-banner" style="position:fixed;left:0;right:0;<?php echo $position; ?>;background:<?php echo esc_attr($this->options['bg_color']); ?>;color:<?php echo esc_attr($this->options['text_color']); ?>;z-index:<?php echo esc_attr($this->options['z_index']); ?>;height:<?php echo esc_attr($this->options['desktop_height']); ?>px;display:flex;align-items:center;transition:all 0.4s;<?php echo $initial; ?>" data-trigger="<?php echo esc_attr($this->options['scroll_trigger']); ?>" data-position="<?php echo esc_attr($this->options['position']); ?>"> <div style="width:100%;max-width:1200px;margin:0 auto;padding:0 20px;display:flex;justify-content:space-between;align-items:center;"> <a href="<?php echo esc_url($this->options['catalog_link']); ?>" style="background:rgba(255,255,255,0.2);color:<?php echo esc_attr($this->options['text_color']); ?>;padding:8px 16px;border-radius:20px;text-decoration:none;"><?php echo esc_html($this->options['catalog_text']); ?></a> <div style="flex:1;text-align:center;"> <span><?php echo esc_html($this->options['text']); ?></span> <span style="font-size:24px;">👆</span> <span>(Line ID <?php echo esc_html($this->options['line_id']); ?>)</span> </div> <a href="<?php echo esc_url($this->options['button_link']); ?>" style="background:<?php echo esc_attr($this->options['button_bg']); ?>;color:<?php echo esc_attr($this->options['button_text_color']); ?>;padding:10px 24px;border-radius:25px;text-decoration:none;"><?php echo esc_html($this->options['button_text']); ?></a> </div> </div> <style> @media(max-width:768px){ #scbp-banner{height:<?php echo esc_attr($this->options['mobile_height']); ?>px!important} #scbp-banner a:first-child{display:none} } </style> <script> (function(){ var b=document.getElementById('scbp-banner'); if(!b)return; var t=parseInt(b.getAttribute('data-trigger'))||300; var p=b.getAttribute('data-position'); var v=false; var a=<?php echo $this->options['always_show'] === '1' ? 'true' : 'false'; ?>; if(a){b.style.transform='translateY(0)';b.style.opacity='1';v=true;} function h(){ if(a)return; var s=window.pageYOffset||document.documentElement.scrollTop; if(s>t&&!v){ b.style.transform='translateY(0)'; b.style.opacity='1'; v=true; }else if(s<=t&&v){ b.style.transform='translateY('+(p==='top'?'-120%':'120%')+')'; b.style.opacity='0'; v=false; } } if(!a){window.addEventListener('scroll',h);h();} })(); </script> <?php } } // Initialize plugin new StickyContactBannerPro(); // Activation hook register_activation_hook(__FILE__, function() { $defaults = array( 'enabled' => '1', 'text' => 'คลิกตรงนี้ ไลน์สอบถามสินค้าได้เลย', 'line_id' => '@Tumtook', 'bg_color' => '#00c300', 'text_color' => '#ffffff', 'button_bg' => '#ff0000', 'button_text_color' => '#ffffff', 'button_text' => 'ฟ.สั่ง Email', 'button_link' => '#', 'catalog_text' => 'กลุ่มงานรถ Email เพื่อขึ้น Catalog', 'catalog_link' => '#', 'position' => 'top', 'scroll_trigger' => '300', 'mobile_height' => '60', 'desktop_height' => '80', 'z_index' => '9999', 'always_show' => '0' ); if (!get_option('scbp_settings')) { add_option('scbp_settings', $defaults); } });
Smart Scroll
แสดงเมื่อ scroll ลงมา
30px Padding
ไม่ชิดขอบบน
Responsive
รองรับทุกหน้าจอ
Secure
ปลอดภัย 100%