manifest / media / jplugin-sliderimg

jsliderIMG

Multiple image sliders with per-slide destination links for Thaipediatrics.

by JIRATH BURAPARATH · github.com/jbrathz/jplugin-sliderimg · website

★ 0stars

0forks

Install

No release zip yet. The repository archive installs, but the folder name will carry the branch suffix and updates will not flow:

wp plugin install https://github.com/jbrathz/jplugin-sliderimg/archive/refs/heads/main.zip

Readme github.com/jbrathz/jplugin-sliderimg ↗

ปลั๊กอิน WordPress สำหรับสร้าง image slider หลายชุด โดยแต่ละสไลด์กำหนดรูปภาพ ลิงก์ ชื่อเรื่อง และการเปิดลิงก์แท็บใหม่ได้

ความสามารถ

สร้าง slider ได้หลายชุดด้วย Slider ID
เลือกรูปจาก WordPress Media Library หรือใส่ URL รูปภาพเอง
กำหนดลิงก์และ title แยกต่อสไลด์
ตั้งค่า autoplay, ลูกศรนำทาง และจุดบอกตำแหน่งผ่าน shortcode
ใช้รูปจาก Media Library แบบ responsive พร้อม srcset และ sizes
รองรับคีย์บอร์ด การหยุด autoplay เมื่อเลื่อนเมาส์หรือโฟกัส และ prefers-reduced-motion
รองรับข้อมูลรูปแบบเก่าแบบ flat slide array โดยจะแปลงเป็น slider ชื่อ default อัตโนมัติ

ข้อกำหนด

WordPress 5.2 ขึ้นไป
PHP 7.2 ขึ้นไป
ไม่ต้องมีขั้นตอน build หรือ dependency เพิ่มเติม

การติดตั้ง

คัดลอกโฟลเดอร์ jsliderIMG ไปไว้ที่ wp-content/plugins/
เปิดใช้งานปลั๊กอินจากเมนู Plugins
เข้าเมนู jsliderIMG ในหน้าแอดมิน
เพิ่ม slider ตั้งชื่อ และกด Save Changes

การตั้งค่า slider

กำหนด Slider ID เช่น home, news หรือ homepage-main
Slider ID ใช้ตัวพิมพ์เล็ก ตัวเลข ขีดกลาง และ underscore เป็นหลัก
กด Add Slide แล้วเลือกรูปจาก Media Library หรือใส่ Image URL
ใส่ลิงก์ ชื่อเรื่อง และเลือก Open link in new tab ได้ตามต้องการ
กด Save Changes

ถ้าเลือกรูปจาก Media Library แล้ว รูปนั้นจะเป็นแหล่งหลัก ส่วน Image URL จะทำหน้าที่เป็น fallback เมื่อ attachment ใช้งานไม่ได้ หากแก้ Image URL ด้วยตัวเอง ช่อง attachment เดิมจะถูกล้างให้โดยหน้าแอดมิน

การใช้งาน shortcode

ใช้ Slider ID ที่ตั้งไว้ในหน้าแอดมิน:

[jSliderIMG id="home"]

ตัวอย่างพร้อมตัวเลือกเพิ่มเติม:

[jSliderIMG id="news" interval="5000" show_dots="false" show_arrows="true"]

Attribute	ค่าเริ่มต้น	รายละเอียด
`id`	`default`	Slider ID ที่ต้องการแสดง
`interval`	`3000`	ระยะ autoplay หน่วยมิลลิวินาที ค่าต่ำสุด 1000
`show_dots`	`true`	แสดงหรือซ่อนจุดบอกตำแหน่ง
`show_arrows`	`true`	แสดงหรือซ่อนปุ่มลูกศร

ค่าบูลีนยอมรับ true, false, 1 และ 0

ถ้าไม่ระบุ id หรือหา ID ที่ระบุไม่พบ ปลั๊กอินจะเลือก slider ชื่อ default ก่อน และถ้าไม่มีจะใช้ slider ชุดแรกที่มีอยู่

โครงสร้างข้อมูลที่จัดเก็บ

ค่าจะถูกเก็บใน WordPress option ชื่อ jsliderimg_slides โดยมีโครงสร้างปัจจุบันลักษณะนี้:

[
    'home' => [
        'key'    => 'home',
        'label'  => 'หน้าแรก',
        'slides' => [
            [
                'image_id' => 123,
                'image_url' => 'https://example.com/image.jpg',
                'link_url'  => 'https://example.com/page',
                'title'     => 'ตัวอย่างสไลด์',
                'new_tab'   => 1,
            ],
        ],
    ],
]

ไม่ควรแก้ option นี้โดยตรง ถ้าไม่จำเป็น ให้ใช้หน้า Settings ของปลั๊กอินเพื่อให้การตรวจสอบและการ sanitize ข้อมูลทำงานครบถ้วน

ความปลอดภัยและการแสดงผล

หน้า Settings ใช้ WordPress Settings API พร้อม capability manage_options และ nonce
URL รูปภาพและลิงก์ถูก sanitize ก่อนบันทึกและ escape ก่อนแสดงผล
HTML ของรูปภาพจาก Media Library ใช้ allowlist ของ attribute ที่จำเป็น เช่น srcset, sizes, loading และ decoding
Image URL ภายนอกที่ใช้ในหน้าเว็บรองรับเฉพาะ http และ https

การตรวจโค้ด

คำสั่งตรวจพื้นฐานจากโฟลเดอร์ปลั๊กอิน:

php -l jsliderIMG.php
node --check assets/admin.js
git diff --check

คำสั่งเหล่านี้เป็น static checks เท่านั้น การทดสอบหน้าแอดมินและหน้าเว็บจริงควรทำใน WordPress environment ที่เปิดใช้งานปลั๊กอินแล้ว

Changelog

1.1.1

จัดการกรณี attachment ถูกลบหรือ URL รูปภาพใช้ไม่ได้ให้ปลอดภัยขึ้น
เพิ่ม responsive image attributes สำหรับรูปจาก Media Library
ปรับการ sanitize ค่า input ที่ malformed และการ fallback ของข้อมูลเก่า
ปรับ accessibility และพฤติกรรม autoplay บนหน้าเว็บ
ปรับ admin JavaScript ให้เข้ากับ browser รุ่นเก่าได้ดีขึ้น