คุณเคยต้องการที่จะเพิ่มแถบความคืบหน้าใน .ของคุณ บล็อก WordPress ?

คุณสามารถใช้มันเพื่อแสดงความคืบหน้าของแคมเปญการระดมทุนหรือสำหรับโครงการเฉพาะที่คุณกำลังดำเนินการอยู่

เมื่อเร็ว ๆ นี้ สมาชิกกำลังมองหาวิธีการที่เขาสามารถใช้เพื่อเพิ่มแถบความคืบหน้าได้อย่างรวดเร็ว บล็อก WordPress.

ในบทช่วยสอนนี้ ฉันจะแสดงวิธีเพิ่มแถบความคืบหน้าให้กับคุณ บล็อก WordPress ด้วยความเรียบง่ายที่สมบูรณ์

สิ่งแรกที่ต้องทำคือติดตั้งและเปิดใช้งานปลั๊กอิน« ความคืบหน้าบาร์ »มีอยู่ใน WordPress.org ปลั๊กอินนี้ใช้งานได้โดยไม่มีการกำหนดค่า

ปลั๊กอินความคืบหน้าบาร์

สิ่งที่คุณต้องทำคือเพิ่มรหัสย่อให้กับหน้าหรือบทความ (และแม้แต่ในแถบด้านข้าง) เพื่อดูว่ามันทำงานอย่างไร รหัสย่อที่ต้องเพิ่มมีดังนี้:

« [ความคืบหน้า Wppb = 50] »

นี้จะแสดงแถบความคืบหน้า

วิธีการเพิ่ม-a-บาร์ในความคืบหน้า

สวยง่ายใช่มั้ย

คุณสามารถปรับแต่งรหัสนี้ได้ด้วยการเพิ่มสีข้อความบนแถบความคืบหน้าการแสดงสกุลเงินแทนเปอร์เซ็นต์และอื่น ๆ ลองมาร่วมกันค้นหาความเป็นไปได้ที่แตกต่างกัน

วิธีการเพิ่มข้อความบนแถบความคืบหน้า

ในรหัสย่อก่อนหน้านี้เราโพสต์แถบความคืบหน้าโดยไม่พูดถึง ในการแก้ไขด้วยข้อความที่อาจบ่งบอกถึงผู้ใช้เราจะเพิ่มพารามิเตอร์ "text" ลงใน shortcode ด้วยวิธีนี้:

"[Wppb progress = 76 text =" ความคืบหน้าของงาน "]"

สำหรับผลลัพธ์นี้

วิวัฒนาการของการทำงาน

วิธีการเพิ่มคำขวัญบนแถบความคืบหน้า

ตามค่าเริ่มต้นแถบความคืบหน้าจะแสดงการเปลี่ยนแปลงเป็นเปอร์เซ็นต์ แต่คุณสามารถเปลี่ยนแปลงสิ่งนี้ได้ด้วยสกุลเงินที่คุณเลือกซึ่งมีประโยชน์มากหากคุณต้องการแสดงวิวัฒนาการของผู้ระดมทุน

"[ความคืบหน้า Wppb =" 50 € / 400 'text = '50 € / 400 แบบสำรวจ "]"

สำหรับผลลัพธ์ที่คล้ายกับอันนี้

เขื่อน-de-Fonds

วิธีการเปลี่ยนสีและรูปลักษณ์ของแถบวิวัฒนาการ

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

นี่คือวิธีที่คุณสามารถใช้รหัสสำหรับแต่ละตัวเลือก:

แถบความคืบหน้าสีส้ม

[ความคืบหน้า 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 €

บริจาค »

สำหรับผลลัพธ์ที่คล้ายกับสิ่งนี้:

เมตาวิดเจ็ต

นั่นคือทั้งหมดสำหรับการกวดวิชานี้ฉันหวังว่ามันจะมีประโยชน์อย่างมากอย่าลังเลที่จะแบ่งปันกับเพื่อนของคุณหรือบนเครือข่ายโซเชียลที่คุณชื่นชอบ