CSS และ JavaScript ของคุณเอง
อยู่ถูกที่ ใช้ได้กับทุกธีม
StyleScript คือที่เดียวสำหรับโค้ดที่คุณใส่ให้เว็บเอง ทั้ง CSS, JavaScript และโค้ดที่ต้องอยู่ใน <head> หลัง <body> หรือก่อน </body> เขียนในตัวแก้ไขโค้ดที่ใช้งานได้จริง ดูตัวอย่างได้ก่อนใครเห็น ทุกครั้งที่บันทึกเก็บเป็นประวัติที่กู้คืนได้ และโค้ดยังอยู่ครบแม้เปลี่ยนธีม
ทำไมโค้ดที่ใส่เองถึงหายบ่อย
เว็บส่วนใหญ่เก็บ CSS และสคริปต์ของตัวเองไว้ในที่ที่ไม่ได้ออกแบบมาให้เก็บนาน ๆ แล้วปัญหาก็โผล่มาในวันที่เปลี่ยนธีม
ธีมเป็นคนเก็บ
Additional CSS ของ Customizer และช่องในตัวเลือกของธีม เช่น Custom CSS และ Header/Footer Scripts ของ Flatsome เป็นของธีม พอเปลี่ยนหรือทำธีมใหม่ โค้ดก็ค้างอยู่กับธีมเดิม
ใส่แล้วไม่ติด
rule ที่แพ้สไตล์ชีตของธีมเอง page cache ที่ยังส่งเวอร์ชันเมื่อวาน หรือโค้ดที่วางมาทั้งแท็ก <script> ผิดช่อง
ได้มาเกินกว่าที่ต้องการ
ปลั๊กอิน snippet ที่รัน PHP โหลดไฟล์ของตัวเองทุกหน้า และชวนให้อัปเกรดอยู่เรื่อย ๆ ทั้งที่คุณแค่อยากได้ที่ใส่ CSS กับสคริปต์สักตัว
ห้ากล่อง แต่ละกล่องไปอยู่ในที่ของมัน
StyleScript เก็บโค้ดของคุณแยกจากธีม และใส่แต่ละกล่องลงในตำแหน่งที่ควรอยู่ ผ่านระบบโหลดสคริปต์และสไตล์ของ WordPress เอง ปิดกล่องไหนก็ได้โดยโค้ดไม่หาย
CSS อยู่ท้ายสุดของ <head>
ต่อจากสไตล์ชีตของธีมและต่อจาก Additional CSS ของ Customizer rule ที่ใช้ selector เดียวกับของธีมจึงชนะ
JavaScript ในตำแหน่งที่โหลดดีที่สุด
ใส่ใน footer หรือใน <head> เลือกให้รอจนหน้าเว็บพร้อม หรือให้โหลด jQuery ก่อนก็ได้ ปลั๊กอินจะสังเกตเองเมื่อโค้ดของคุณใช้ $( แล้วเสนอให้เปิดตัวเลือกนี้
โค้ด HTML สามตำแหน่ง
ใน <head> หลัง <body> และก่อน </body> สำหรับแท็กยืนยันเว็บ โค้ด analytics และ tag manager, pixel, แชตวิดเจ็ต และ structured data เลือกลำดับได้ว่าจะมาก่อน ปกติ หรือหลังโค้ดอื่นในตำแหน่งเดียวกัน
สามขั้นถึง rule แรกของคุณ
ไม่มีอะไรเปลี่ยนบนเว็บจนกว่าคุณจะบันทึก และทุกครั้งที่บันทึกย้อนกลับได้เสมอ
ติดตั้ง
ติดตั้งปลั๊กอินตัวฟรี แล้วเปิด หน้าตา → StyleScript โค้ดที่เคยใส่ไว้ใน Customizer หรือใน Flatsome ย้ายเข้ามาได้ในคลิกเดียวจากแท็บเครื่องมือ
เขียนและดูตัวอย่าง
เขียนในแท็บ CSS, JavaScript หรือส่วนหัวและส่วนท้าย ปุ่มดูตัวอย่างแสดงผลบนเว็บจริงให้คุณเห็นคนเดียว CSS เปลี่ยนตามที่พิมพ์ทันที
บันทึก
กดบันทึก หรือ Ctrl/Cmd+S โค้ดขึ้นเว็บทันที page cache ถูกล้างให้ และประวัติเก็บเวอร์ชันก่อนหน้าไว้
ทำไมต้อง StyleScript
ตัวแก้ไขโค้ดที่ใช้ได้จริง
CodeMirror ของ WordPress เองที่ตั้งค่ามาอย่างดี ไฮไลต์โค้ด เติมคำอัตโนมัติขณะพิมพ์ ค้นหาและแทนที่ หลายเคอร์เซอร์ พับโค้ด เต็มจอ และธีมสีเข้ม กด Ctrl/Cmd+S เพื่อบันทึก
ตัวตรวจที่รู้จัก CSS สมัยใหม่
วงเล็บที่ขาด คอมเมนต์ที่ไม่ได้ปิด หรือ JavaScript ที่ผิดไวยากรณ์ จะถูกทักขณะพิมพ์โดยไม่เคยขวางการบันทึก ส่วน nesting, :has(), @layer และ color-mix() ไม่ถูกทักผิด ๆ
เห็นก่อนผู้เข้าชมเห็น
การดูตัวอย่างแสดงเว็บจริงพร้อมโค้ดที่ยังไม่ได้บันทึกให้คุณเห็นคนเดียว ทั้งขนาดเดสก์ท็อป แท็บเล็ต และมือถือ บนหน้า โพสต์ หรือสินค้าใดก็ได้
เก็บทุกเวอร์ชัน
บันทึกแต่ละครั้งคือหนึ่งเวอร์ชัน เทียบกับโค้ดในตัวแก้ไขทีละบรรทัดแล้วกู้คืนได้ ถ้ามีคนอื่นบันทึกกล่องเดียวกันไว้ใหม่กว่า ระบบจะถามก่อนเขียนทับ
โหมดปลอดภัยสามทาง
ลิงก์ที่เปิดเว็บให้คุณเห็นโดยไม่มีโค้ดที่ใส่เอง สวิตช์ที่ปิดโค้ดทั้งหมดสำหรับทุกคน และ constant หรือ WP-CLI สำหรับวันที่เข้าหน้าผู้ดูแลไม่ได้
breakpoint ของเว็บคุณเอง
เมนูแทรกเพิ่ม media query ตาม breakpoint ของ Flatsome, Elementor และ WooCommerce เมื่อมีใช้อยู่ ควบคู่กับขนาดที่ใช้กันทั่วไป และปุ่มจัดรูปแบบช่วยจัด CSS ให้เรียบร้อย
ดูการทำงานจริง
เบาสำหรับผู้เข้าชม
สิ่งที่ผู้เข้าชมได้รับคือโค้ดที่คุณใส่เท่านั้น ตัวปลั๊กอินเองไม่เพิ่มอะไรให้หน้าเว็บเลย
ไม่มีไฟล์ของตัวเอง
ผู้เข้าชมไม่ต้องโหลดสไตล์ชีตหรือสคริปต์ของตัวปลั๊กอินเลย และหน้าเว็บไม่มี query ฐานข้อมูลเพิ่มเพราะปลั๊กอิน
กล่องว่างไม่เพิ่มอะไร
กล่องที่เว้นว่างหรือปิดไว้ไม่ผูกอะไรเข้ากับหน้าเว็บ โค้ดเล็ก ๆ ใส่ไว้ในหน้า ส่วนโค้ดที่ใหญ่กว่ากลายเป็นไฟล์ที่เบราว์เซอร์เก็บแคชไว้ได้
ไม่มีหน้าที่ค้างของเก่า
ไฟล์ตั้งชื่อตามเนื้อหา และ page cache ของ WP Rocket, LiteSpeed Cache, W3 Total Cache ปลั๊กอินแคชอื่น ๆ และโฮสต์ ถูกล้างทุกครั้งที่บันทึก
กำลังมาใน Pro: โค้ดเฉพาะหน้า และเอฟเฟกต์สำเร็จรูป
Pro เป็น add-on แยกต่างหากที่กำลังพัฒนาอยู่ เพิ่มสิ่งที่ตัวฟรีปล่อยไว้ให้เป็นระดับทั้งเว็บ โดยตัวฟรียังครบในตัวเองแม้ไม่มี Pro
โค้ดสำหรับหน้าเดียว
CSS, JavaScript และโค้ดส่วนหัว/ส่วนท้ายสำหรับโพสต์ หน้า หรือสินค้า WooCommerce ชิ้นเดียว ในกล่อง StyleScript ของหน้าแก้ไขโพสต์ ด้วยตัวแก้ไขตัวเดียวกัน พร้อมการดูตัวอย่าง
ปิดโค้ดระดับทั้งเว็บในหน้าที่ไม่ต้องการ
ปิดกล่องระดับทั้งเว็บกล่องไหนก็ได้ในหน้าที่คุณเลือก เช่น landing page ที่ไม่ต้องใช้สคริปต์ของทั้งเว็บเลย
เอฟเฟกต์สำเร็จรูป
Skeleton loading, image sequence animation ตามการเลื่อน และ video scrubbing ตามการเลื่อน ตั้งค่าผ่านฟอร์มพร้อมดูตัวอย่าง แทนที่จะต้องต่อไลบรารีเอง
ฟรีและ Pro
ตัวฟรีครบในตัวเอง ทั้งทุกกล่องระดับทั้งเว็บ ตัวแก้ไข ประวัติ การดูตัวอย่าง และโหมดปลอดภัย ไม่มีอะไรถูกล็อกหรือนับจำนวน ส่วน Pro เป็น add-on แยกที่กำลังพัฒนา เพิ่มโค้ดเฉพาะหน้าและเอฟเฟกต์สำเร็จรูป
| Free | Pro | |
|---|---|---|
| CSS, JavaScript และโค้ดส่วนหัว/ส่วนท้ายสำหรับทั้งเว็บไซต์ | ✓ | ✓ |
| ตัวแก้ไขโค้ด: ตรวจไวยากรณ์ เติมคำอัตโนมัติ ค้นหาและแทนที่ เต็มจอ ธีมสีเข้ม | ✓ | ✓ |
| ประวัติและการกู้คืน ดูตัวอย่าง โหมดปลอดภัย | ✓ | ✓ |
| ส่งออก นำเข้า และนำโค้ดเข้ามาจาก Customizer และ Flatsome | ✓ | ✓ |
| CSS, JavaScript และโค้ดส่วนหัว/ส่วนท้ายสำหรับโพสต์ หน้า และสินค้าแต่ละชิ้น | — | ✓ |
| เอฟเฟกต์สำเร็จรูป: skeleton loading, image sequence และ video scrubbing ตามการเลื่อน และอื่นๆ | — | ✓ |
| ซัพพอร์ต | ✓ ฟอรัมของ WordPress.org | ✓ ทางอีเมล |
พูดกันตรง ๆ ตัวฟรีพอสำหรับเว็บส่วนใหญ่แล้ว Pro เหมาะกับหน้าที่ต้องมีโค้ดของตัวเอง และเอฟเฟกต์ที่ปกติต้องเขียนเองทั้งหมด
แถวเดียวกับที่ตัวฟรีแสดงในแท็บ "อัปเกรดเป็น Pro" ตอนนี้ Pro กำลังพัฒนา ราคากำหนดไว้แล้ว และปุ่มซื้อจะมาพร้อมวันที่ออก
เหมาะกับใคร
ร้านค้าบน Flatsome และ WooCommerce
Custom CSS ที่อยู่รอดทั้งตอนอัปเดตและเปลี่ยนธีม breakpoint ของ Flatsome อยู่ห่างแค่คลิกเดียว และโค้ดในตัวเลือกของธีมย้ายมาได้ในครั้งเดียว
เว็บที่สร้างด้วย Elementor
CSS และสคริปต์ระดับทั้งเว็บโดยไม่ต้องใช้ custom code ของ Elementor Pro และ CSS ยังแสดงในหน้าแก้ไขของ builder ด้วย คุณจึงเห็นผลขณะออกแบบ
เอเจนซีที่ดูแลหลายเว็บ
เครื่องมือเดียวกันในทุกเว็บของลูกค้า ส่งออกจากเว็บหนึ่ง นำเข้าอีกเว็บ ใช้ WP-CLI ในสคริปต์ได้ และมีโหมดปลอดภัยไว้รับมือวันที่โค้ดที่ลูกค้าวางทำหน้าเว็บพัง
ราคา
Pro
- CSS, JavaScript และโค้ดส่วนหัว/ส่วนท้ายรายโพสต์ หน้า และสินค้า
- ปิดโค้ดระดับทั้งเว็บในหน้าที่คุณเลือก
- เอฟเฟกต์สำเร็จรูป: skeleton loading, image sequence และ video scrubbing ตามการเลื่อน
- ดูตัวอย่างได้จากหน้าแก้ไขโพสต์
- ซัพพอร์ตทางอีเมลและอัปเดตอัตโนมัติ
- อัปเดตและซัพพอร์ตตลอดที่ยังใช้งาน
- หมดอายุแล้วไม่มีอะไรพัง
เร็ว ๆ นี้
คำถามที่พบบ่อย
ใครเพิ่มหรือแก้โค้ดได้บ้าง
ผู้ดูแลที่มีสิทธิ์ "unfiltered HTML" ของ WordPress คือผู้ดูแลของเว็บเดี่ยว และผู้ดูแลเครือข่ายของ multisite ซึ่งเป็นสิทธิ์เดียวกับที่ WordPress เองต้องการก่อนให้ใครเพิ่มสคริปต์ได้ เพราะโค้ดนี้ทำงานในเบราว์เซอร์ของผู้เข้าชมทุกคน ผู้ดูแลคนอื่นจะเห็นโค้ดแบบอ่านอย่างเดียว พร้อมคำอธิบายว่าทำไม
จะทำให้เว็บช้าลงไหม
ไม่ ปลั๊กอินไม่โหลดไฟล์ของตัวเองให้ผู้เข้าชม และไม่เพิ่ม query ฐานข้อมูล ตัดสินใจครั้งเดียวต่อ request ว่ามีอะไรต้องใส่หรือไม่ และไม่ทำอะไรเลยเมื่อทุกกล่องว่าง
เปลี่ยนธีมแล้วโค้ดจะเป็นอย่างไร
ไม่เป็นอะไร เพราะปลั๊กอินเป็นคนเก็บโค้ด ไม่ใช่ธีม นี่คือความต่างจาก Additional CSS ของ Customizer และตัวเลือกของธีม
CSS ของฉันไปอยู่ตรงไหนกันแน่
เป็นสไตล์ชีตตัวสุดท้ายใน <head> ต่อจากสไตล์ชีตของธีมและต่อจาก Additional CSS ของ Customizer rule ที่ใช้ selector เดียวกับของธีมจึงชนะ ถ้าต้องการ ตั้งให้ไปอยู่พร้อมสไตล์ชีตของธีมได้ในหน้าการตั้งค่า
บันทึกโค้ดแล้วเว็บพัง จะย้อนกลับอย่างไร
เปิดกล่องนั้น กดประวัติ แล้วกู้คืนเวอร์ชันก่อนหน้า ถ้าอยากดูเว็บโดยไม่มีโค้ดที่ใส่เองก่อน ใช้ลิงก์โหมดปลอดภัยในแท็บเครื่องมือ ซึ่งมีผลกับคุณคนเดียว ถ้าเข้าหน้าผู้ดูแลไม่ได้เลย ให้เพิ่ม WMSS_SAFE_MODE ใน wp-config.php หรือรัน wp stylescript safe-mode on ทั้งสองทางไม่มีอะไรถูกลบ
ใช้กับ Elementor, Flatsome และ page builder อื่น ๆ ได้ไหม
ได้ โค้ดของคุณถูกใส่ในทุกหน้าที่ builder สร้าง ส่วนในหน้าแก้ไขของ builder CSS ยังมีผล คุณจึงเห็นขณะออกแบบ ขณะที่ JavaScript และโค้ด HTML จะไม่เข้าไปรบกวนการทำงานของ builder
ใช้กับปลั๊กอินแคชได้ไหม
ได้ การบันทึกจะล้าง page cache ของ WP Rocket, LiteSpeed Cache, W3 Total Cache, WP Super Cache และอื่น ๆ รวมถึงโฮสต์อย่าง WP Engine ไฟล์ตั้งชื่อตามเนื้อหา หน้าที่ถูกแคชไว้จึงไม่ชี้ไปที่ไฟล์เก่าหรือไฟล์ที่หายไป
ใส่โค้ด PHP ได้ไหม
ไม่ได้ และตั้งใจให้เป็นแบบนั้น ปลั๊กอินไม่รัน PHP เลย ถ้าต้องการใส่ PHP ให้ใช้ child theme หรือปลั๊กอิน code snippets
ตัวฟรีอยู่บน WordPress.org หรือยัง
กำลังอยู่ระหว่างรีวิว ระหว่างนี้ดาวน์โหลดได้จากคู่มือการติดตั้ง เว็บที่ติดตั้งตอนนี้จะได้อัปเดตจาก WordPress.org เองเมื่อขึ้นแล้ว เพราะเป็นปลั๊กอินตัวเดียวกัน ชื่อเดียวกัน
ซื้อ Pro ได้เมื่อไร
เมื่อออกแล้ว ตอนนี้ add-on กำลังพัฒนาต่อจากตัวฟรี ราคาอยู่ในหน้าราคา และปุ่มซื้อจะขึ้นที่นั่นในวันที่เริ่มขาย
ถ้าถอนการติดตั้งปลั๊กอินจะเกิดอะไรขึ้น
การปิดใช้งานไม่ลบอะไรเลย การถอนการติดตั้งจะลบโค้ด ประวัติ และการตั้งค่าเฉพาะเมื่อคุณเลือกไว้ในหน้าการตั้งค่า ไม่อย่างนั้นทุกอย่างยังอยู่ รอติดตั้งใหม่ได้