🚀 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%