คุณเคยต้องการที่จะเพิ่มแถบความคืบหน้าใน .ของคุณ บล็อก WordPress ?
คุณสามารถใช้มันเพื่อแสดงความคืบหน้าของแคมเปญการระดมทุนหรือสำหรับโครงการเฉพาะที่คุณกำลังดำเนินการอยู่
เมื่อเร็ว ๆ นี้ สมาชิกกำลังมองหาวิธีการที่เขาสามารถใช้เพื่อเพิ่มแถบความคืบหน้าได้อย่างรวดเร็ว บล็อก WordPress.
ในบทช่วยสอนนี้ ฉันจะแสดงวิธีเพิ่มแถบความคืบหน้าให้กับคุณ บล็อก WordPress ด้วยความเรียบง่ายที่สมบูรณ์
สิ่งแรกที่ต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน« ความคืบหน้าบาร์ »มีอยู่ใน WordPress.org ปลั๊กอินนี้ใช้งานได้โดยไม่มีการกำหนดค่า
สิ่งที่คุณต้องทำคือเพิ่มรหัสย่อให้กับหน้าหรือบทความ (และแม้แต่ในแถบด้านข้าง) เพื่อดูว่ามันทำงานอย่างไร รหัสย่อที่ต้องเพิ่มมีดังนี้:
« [ความคืบหน้า Wppb = 50] »
นี้จะแสดงแถบความคืบหน้า
สวยง่ายใช่มั้ย
คุณสามารถปรับแต่งรหัสนี้ได้ด้วยการเพิ่มสีข้อความบนแถบความคืบหน้าการแสดงสกุลเงินแทนเปอร์เซ็นต์และอื่น ๆ ลองมาร่วมกันค้นหาความเป็นไปได้ที่แตกต่างกัน
วิธีการเพิ่มข้อความบนแถบความคืบหน้า
ในรหัสย่อก่อนหน้านี้เราโพสต์แถบความคืบหน้าโดยไม่พูดถึง ในการแก้ไขด้วยข้อความที่อาจบ่งบอกถึงผู้ใช้เราจะเพิ่มพารามิเตอร์ "text" ลงใน shortcode ด้วยวิธีนี้:
"[Wppb progress = 76 text =" ความคืบหน้าของงาน "]"
สำหรับผลลัพธ์นี้
วิธีการเพิ่มคำขวัญบนแถบความคืบหน้า
ตามค่าเริ่มต้นแถบความคืบหน้าจะแสดงการเปลี่ยนแปลงเป็นเปอร์เซ็นต์ แต่คุณสามารถเปลี่ยนแปลงสิ่งนี้ได้ด้วยสกุลเงินที่คุณเลือกซึ่งมีประโยชน์มากหากคุณต้องการแสดงวิวัฒนาการของผู้ระดมทุน
"[ความคืบหน้า Wppb =" 50 € / 400 'text = '50 € / 400 แบบสำรวจ "]"
สำหรับผลลัพธ์ที่คล้ายกับอันนี้
วิธีการเปลี่ยนสีและรูปลักษณ์ของแถบวิวัฒนาการ
ปลั๊กอินนี้มีบางสีที่คุณสามารถใช้เพื่อปรับแต่งแถบความคืบหน้า สีเริ่มต้นคือ "สีแดง", "สีน้ำเงิน", "สีส้ม" และ "สีเขียว" อย่างไรก็ตามคุณสามารถใช้สีที่คุณต้องการ นอกจากนี้ยังเป็นไปได้ที่จะเพิ่มแถบความคืบหน้าแบบเคลื่อนไหว
นี่คือวิธีที่คุณสามารถใช้รหัสสำหรับแต่ละตัวเลือก:
แถบความคืบหน้าสีส้ม
[ความคืบหน้า Wppb = 50 option = สีส้ม]
แถบความคืบหน้าสีแดงเคลื่อนไหวด้วยลายเส้น
[wppb progress = 50 option = "animated-candystrip red"]
แถบความคืบหน้าสีเขียวมีลายเส้น
[wppb progress = 50 option = "candystrip green"]
แถบความคืบหน้ามีลายเส้นแบน
[wppb progress = 50 option = "flat candystrip" color = brown]
วิธีการเพิ่มแถบความคืบหน้าในแถบด้านข้าง
เราจะใช้วิดเจ็ต " ตำรา เพื่อไปที่นั่น สิ่งที่คุณต้องทำคือใช้ตัวกรองต่อไปนี้ "widget_text" ด้วยวิธีนี้:
"Add_filter (" widget_text "," do_shortcode "); "
เพิ่มบรรทัดนี้ในไฟล์“ functions.php” ของธีมของคุณ จากนั้นไปที่ตำแหน่ง "ลักษณะ> วิดเจ็ต" และเพิ่มวิดเจ็ต "ข้อความ" ในพื้นที่วิดเจ็ตส่วนใดส่วนหนึ่งของธีมของคุณ คุณสามารถปรับแต่งตามความต้องการของคุณได้ด้วยวิธีนี้:
"[Wppb progress =" 2500 € / 4500 € "option =" animated-candystripe red "fullwidth = true]"
ระดับ: 2500 €
เป้าหมาย: 4500 €บริจาค »
สำหรับผลลัพธ์ที่คล้ายกับสิ่งนี้:
นั่นคือทั้งหมดสำหรับการกวดวิชานี้ฉันหวังว่ามันจะมีประโยชน์อย่างมากอย่าลังเลที่จะแบ่งปันกับเพื่อนของคุณหรือบนเครือข่ายโซเชียลที่คุณชื่นชอบ