แล้วการปรับแต่ง Live WordPress Theme แบบเรียลไทม์ล่ะ? CSSHero เป็นปลั๊กอินสำหรับทำการเปลี่ยนแปลงในวิธีที่ง่าย

เผยแพร่แล้ว: 2016-04-07

ปรับแต่ง WordPress Themes Live ได้อย่างง่ายดายโดย CCSHero

WordPress เป็นเฟรมเวิร์ก CMS ที่เต็มไปด้วยการปรับแต่ง และมี API และ hooks มากมายที่นักพัฒนาสามารถใช้เพื่อแก้ไขธีมและปลั๊กอิน นั่นเป็นเหตุผลที่เรามีตัวเลือกให้เลือกปลั๊กอินจากปลั๊กอินที่มีอยู่นับพันจากที่เก็บอย่างเป็นทางการของ WordPress

ในโพสต์นี้เราจะพูดถึงปลั๊กอิน CSSHero ใหม่พร้อมรายละเอียดทั้งหมด แต่ก่อนที่เราจะเริ่มต้น เรามาเน้นที่ these questions กันก่อน

  • จะ make live changes บนเว็บไซต์ WordPress ของคุณได้อย่างไร?
  • ธีมเปลี่ยนแบบเรียลไทม์?
  • มีวิธีง่าย ๆ ในการทราบจำนวนคุณสมบัติ CSS สำหรับธีม WordPress หรือไม่?
  • แก้ไขบล็อก WordPress ของคุณด้วยการแสดงตัวอย่างแบบเรียลไทม์
  • ปรับแต่งธีม WordPress ก่อนเผยแพร่

หากคุณมีคำถามใด ๆ ข้างต้นแสดงว่าคุณมาถูกที่แล้ว

หากคุณต้องการทำการเปลี่ยนแปลงแบบสดด้วยตัวเอง without any help จากปลั๊กอิน คุณจำเป็นต้องรู้ ~300 of CSS properties ก่อนถึงมือ เป็นไปไม่ได้ที่จะแก้ไขสิ่งเหล่านั้นเพื่อดูการเปลี่ยนแปลงที่แท้จริงในโหมดธีมสด เครื่องมือ customizer WordPress ช่วยให้คุณสามารถแก้ไขคุณสมบัติบางอย่างได้ แต่ไม่ใช่ทั้งหมด และนั่นคือปัญหาที่แท้จริงที่เรามี

ฉันจะบอกว่าเรามีสองตัวเลือก:

ตัวเลือกที่ 1) ทำการเปลี่ยนแปลง CSS ด้วยตนเอง

  • เปิดบล็อกของคุณใน Chrome / Mozilla
  • คลิกขวาที่องค์ประกอบ CSS เช่น ส่วนหัว โพสต์ รูปภาพ ฯลฯ
  • คลิกที่ Inspect เพื่อดูคุณสมบัติ CSS
  • ทำการเปลี่ยนแปลงเพื่อดูผล
  • เมื่อคุณสบายดี – ไปที่ style.css ของธีมแล้วบันทึกการเปลี่ยนแปลง
  • ทำซ้ำหลาย ๆ ครั้ง

ตัวเลือกที่ 2) ใช้ปลั๊กอินที่มีฟังก์ชันในตัว ในกรณีของเราคือ CSSHero

  • ทำการเปลี่ยนแปลงบน live site ด้วยตัวแก้ไข
  • ดูผลสด
  • คลิก Save button และคุณ done

CSSHero ร่วมกับ Crunchify มอบ 10 free Licenses ให้กับผู้อ่าน Crunchify กรอก google form นี้ เพื่อรับรายชื่อของคุณ – แจก ENDED

มาติดตั้ง CSSHero และทำการเปลี่ยนแปลงธีม WordPress แบบสดกันเถอะ

NOTE : ชำระเงินวิดีโอที่สมบูรณ์ที่ด้านล่างของโพสต์นี้

ขั้นตอนที่ 1

ทำไมต้อง CSSHero? CSSHero เป็นปลั๊กอิน WordPress premium สิทธิ์ใช้งานพื้นฐานเริ่มต้นที่ $29/site ฉันจะบอกว่า – หากคุณเป็นมือใหม่หรือมืออาชีพก็คุ้มค่าที่จะลอง มันมาพร้อมกับการรับประกันคืนเงิน 30 days

ใช้รหัส CRUNCHIFY เพื่อรับส่วนลด 34% off สำหรับ Starter, Personal Plans และ 40% off สำหรับแผน Pro

ลงทะเบียนใบอนุญาตของคุณและดาวน์โหลด CSSHero plugin เวอร์ชันล่าสุดจากแดชบอร์ดของคุณ: http://www.csshero.org/

ดาวน์โหลดปลั๊กอิน CSSHero สำหรับ WordPress

ขั้นตอนที่ 2

  • ติดตั้งจากแผงผู้ดูแลระบบ WordPress ของคุณและเปิดใช้งาน
  • เมื่อเปิดใช้งานจะขอ Key
  • เพียงคลิกที่ Get my Key Now! ปุ่มและจะเปิดหน้าด้วยรหัสใบอนุญาต
  • คลิกที่รับ Get License และคุณพร้อมแล้ว

รับหน้าสิทธิ์ใช้งาน CSS Hero

จุดที่-1) มาเริ่มใช้งานกันเลยดีกว่า

  • ไปที่ home page ของบล็อกแล้วคุณจะเห็นปุ่มเคลื่อนไหว CSSHero ที่มุม top right
  • คลิกที่นั้นและปลั๊กอินจะโหลด control panel ซึ่งใช้งานได้กับธีมของคุณ

ดู gif ด้านล่างพร้อม CSSHero options ทั้งหมด:

แผงตัวเลือก CSSHero

จุดที่ 2) ตัวเลือกตัวแก้ไขธีม CSSHero

แนวคิดสำหรับ theme editor คือการเปลี่ยน theme's style ทั้งหมดด้วยโปรแกรมแก้ไขภาพอย่างง่าย ด้วยความช่วยเหลือของตัวแก้ไขธีม CSSHero คุณสามารถเปลี่ยนแปลงได้

  • ข้อความส่วนหัว
  • แบบอักษร
  • ชายแดน
  • สไตล์ ฯลฯ

เช่นเดียวกับ

  • เนื้อหาในร่างกาย
  • โพสต์รายการ
  • ค่าเมตา
  • ค่าส่วนหัว
  • ส่วนท้าย
  • แถบด้านข้าง ฯลฯ ลองดูที่ด้านล่าง GIF

ชำระเงิน CSSHero คุณสมบัติ HTML เปลี่ยน UI

จุดที่ 3) ตัวเลือกการจัดวางอุปกรณ์ที่มีประโยชน์เพียงคลิกเดียว

ดังที่คุณเห็นในภาพด้านล่าง ตัวแก้ไขธีมทำให้เรามีตัวเลือกในการชำระเงินสำหรับรูปแบบต่างๆ บนมือถือ, iPhone, iPad ของ Layouts ของคุณด้วยการเลื่อนเมาส์และคลิกเพียงครั้งเดียว

ชำระเงินเค้าโครงมือถือที่แตกต่างกัน

จุดที่-4) จะเลิกทำการเปลี่ยนแปลงล่าสุดของคุณได้อย่างไร?

ผู้ใช้มีตัวเลือกในการเลิกทำการเปลี่ยนแปลงล่าสุดทั้งหมดโดยใช้โมดูล Change history อย่างง่าย ฉันพนันได้เลยว่าไม่มีผู้พัฒนาคนใดทำสำเร็จในครั้งแรก อย่างน้อยฉันก็ :) มันมีประโยชน์มากสำหรับฉัน

CSSHero ยังมีโมดูลที่มีประโยชน์มากซึ่งจะแสดง all of your save changes ทั้งหมด คุณสามารถย้อนกลับไปใน timeline และเปลี่ยนกลับเป็นเวอร์ชันก่อนหน้าได้ นั่นไม่ใช่เครื่องมือที่มีประโยชน์เหรอ? ฉันใช้เครื่องมือนี้มาแล้วหลายครั้งและชอบมันมาก

ประวัติการเปลี่ยนแปลงการชำระเงิน

จุดที่-5) ตัวเลือกการตั้งค่าและเครื่องมือ

Preset Settings และ Tools Options

โหลดการเปลี่ยนแปลงทั้งหมดของคุณจากบัญชีหรือการเปลี่ยนแปลงในเครื่อง

รีเซ็ตการตั้งค่าทั้งหมด ตัวเลือก

ดูวิดีโอโดยละเอียดที่เราได้รวบรวมไว้ซึ่งแสดงการทำงานทั้งหมดของ CSSHero WordPress Custom CSS Editor

วิดีโอ Youtube โดยละเอียด:

เมื่อคุณได้เห็นฟังก์ชันการทำงานทั้งหมดแล้ว ก็ถึงเวลาถามคำถามด้านล่าง :)

จุดที่-6) ปลั๊กอินนี้ใช้งานได้กับธีมของฉันหรือไม่?

ตามข้อมูลจากเว็บไซต์ CSSHero อย่างเป็นทางการ ปลั๊กอินใช้งานได้กับเฟรมเวิร์กธีม WordPress ด้านล่างทั้งหมด

  • กรอบปฐมกาล
  • GeneratePress
  • LayersWP
  • ธีมสุดท้าย
  • รวม
  • ล่วงหน้า
  • WP Bootstrap
  • ใจความ
  • จำเป็น+รองพื้น
  • โอเมก้า
  • เพจไลน์ DMS

หากธีมของคุณ isn't compatible CSSHero ก็ no worries มันจะแสดงตัวเลือกให้คุณเปิดใช้งาน Rocket mode

Message : ไม่มีการสนับสนุนดั้งเดิมสำหรับธีมนี้ ต้องการลองการตรวจจับอัตโนมัติของ Rocket Mode หรือไม่? เพียง enable it งานและลองแก้ไข CSS again และคุณจะเห็นตัวเลือกเดียวกันกับที่คุณเห็นในวิดีโอด้านบน

CSSHero เปิดใช้งาน RocketMode

จุดที่-7) การสนับสนุนปลั๊กอินและเอกสารประกอบเป็นอย่างไร?

ปลั๊กอิน WordPress ยอดนิยมบางตัว เช่น Gravity Forms, WooCommerce, Contact Form7, WP Pools และอื่นๆ เข้ากันได้กับเฟรมเวิร์ก CSSHero

นั่นหมายความว่า CSSHero ไม่เพียงแต่ทำงานร่วมกับ theme customization เท่านั้น แต่ยังทำงานร่วมกับ plugin layout customization อีกด้วย

สุดท้ายแต่ไม่ท้ายสุด ในเว็บไซต์อย่างเป็นทางการ มีบทความ tips and tricks โดยละเอียดมากมายให้คุณอ่าน

เอกสารที่ดีมากและรองรับ CSSHero

Only Cons ที่ฉันคิดได้คือทำความคุ้นเคยกับฟังก์ชันทั้งหมด อาจต้องใช้เวลาสักระยะในการเริ่มต้นและเป็นมืออาชีพ เมื่อคุณคุ้นเคยกับ CSSHero แล้ว ฉันแน่ใจว่ามันจะเป็น very handy solution สำหรับบล็อกเกอร์ WordPress ทั้งหมด

ติดต่อเรา หากคุณมีผลิตภัณฑ์ ปลั๊กอิน ธีม ฯลฯ ที่คุณคิดว่าต้องการโปรโมต

นี่คือข้อเสนอสุดพิเศษสำหรับ CSSHero Crunchify:

รหัสคูปอง CSSHero 40% - CRUNCHIFY

สวัสดีผู้อ่าน Crunchify -

เรายินดีที่จะประกาศ up-to 40% off สำหรับปลั๊กอินปรับแต่งธีม CSSHero WordPress

โปรดดูขั้นตอนด้านล่าง

ขั้นตอนที่ 1

  • ไปที่ไซต์ CSSHero: https://www.csshero.org/
  • คลิกที่ลิงค์ Pricing Plans

ขั้นตอนที่ 2

  • คลิกที่ปุ่ม I have a coupon code

ขั้นตอนที่ 3

  • ใส่รหัสคูปอง: CRUNCHIFY

เพิ่มรหัส CRUNCHIFY เพื่อรับส่วนลดสูงสุดถึง 40% สำหรับ CSSHero

ขั้นตอนที่ 4

  • คลิกที่ปุ่มแลกรับส่วนลด 34% off สำหรับ Starter และ Personal Plan
  • รับส่วนลด 40% off สำหรับแผน Pro

ปลั๊กอิน CSSHero Theme Editor และ Crunchify Exclusive Deal code-CRUNCHIFY

รายการดีลทั้งหมด: https://crunchify.com/deals/