یہ مضمون درج ذیل خاکہ کا استعمال کرتے ہوئے ورڈپریس میں پروگریس بار شامل کرنے کا طریقہ کار فراہم کرے گا۔
- WP میں پروگریس بار کیا ہے؟
- کوڈ کا استعمال کرتے ہوئے ورڈپریس ویب سائٹس میں پروگریس بارز کیسے شامل کریں؟
- پلگ انز کا استعمال کرتے ہوئے ورڈپریس ویب سائٹس میں پروگریس بارز کیسے شامل کریں؟
ورڈپریس میں پروگریس بار کیا ہے؟
ایک پروگریس بار افقی بار کا استعمال کرتے ہوئے فیصد میں کسی چیز کی ترقی کو ظاہر کرتا ہے۔ یہ کچھ ڈیٹا کی تصویری نمائندگی ہے جو صارف کو صرف ایک نظر میں معلومات فراہم کر سکتی ہے۔ ڈیٹا یا اعدادوشمار کی نمائندگی کرنے کے لیے اپنی ورڈپریس پوسٹس میں پروگریس بارز کا استعمال ویب سائٹ کی اپیل اور صارفین کی مصروفیت کو بہتر بنانے میں مدد کر سکتا ہے۔
کوڈ کا استعمال کرتے ہوئے ورڈپریس ویب سائٹس میں پروگریس بارز کیسے شامل کریں؟
بغیر پلگ ان کے ورڈپریس میں پروگریس بار شامل کرنے کے لیے، صارف کو پوسٹ میں حسب ضرورت HTML اور CSS استعمال کرنا ہوگا۔ ایسا کرنے کے لیے، ذیل میں فراہم کردہ اقدامات پر عمل کریں:
مرحلہ 1: ڈیش بورڈ میں لاگ ان کریں۔
براؤزر کھولیں اور ' http://localhost/<Website-Name>/wp-login.php ' لنک. ایڈمن کی اسناد فراہم کریں اور 'دبائیں۔ لاگ ان کریں بٹن:
مرحلہ 2: ایک نئی پوسٹ بنائیں
کے پاس جاؤ ' پوسٹس > نیا شامل کریں۔ ایڈمن ڈیش بورڈ کے سائیڈ مینو سے:
مرحلہ 3: حسب ضرورت HTML کوڈ شامل کریں۔
پوسٹ میں، عنوان اور اضافی مواد فراہم کریں۔ پھر، پر کلک کریں ' + 'آئیکن، اور تلاش کریں' حسب ضرورت HTML بلاک:
شامل کردہ HTML بلاک میں، ذیل میں فراہم کردہ کوڈ کو چسپاں کریں۔ تبدیل کریں ' چوڑائی ' کے اندر ' ' پروگریس بار کے مطلوبہ فیصد کے لیے ٹیگز۔ اسی طرح تبدیل کریں ' ترقی کا متن 'اس کے مطابق:
< div کلاس = 'کسٹم پروگریس بار' >< مدت انداز = 'چوڑائی: 80%' >< / مدت >
< div کلاس = 'ترقی کا متن' > 80% < / div >
< / div >
اس کے بعد، 'دبائیں۔ شائع کریں۔ ویب سائٹ پر پوسٹ اپ لوڈ کرنے کے لیے بٹن:
مرحلہ 4: حسب ضرورت CSS شامل کریں۔
پوسٹ شائع ہونے کے بعد، 'پر کلک کریں پوسٹ دیکھیں بٹن:
پیش نظارہ میں، 'پر کلک کریں حسب ضرورت بنائیں پروگریس بار کے لیے اسٹائل شامل کرنے کے لیے ” بٹن:
اسکرین کے بائیں جانب ایک ایڈیٹر مینو ظاہر ہوگا۔ یہاں، نیچے سکرول کریں اور 'پر کلک کریں۔ اضافی سی ایس ایس سیکشن:
پروگریس بار کو اسٹائل کرنے کے لیے درج ذیل سی ایس ایس کوڈ کو باکس میں چسپاں کریں:
.custom-progress-bar {پس منظر- رنگ : #1a1a1a;
اونچائی : 30px;
پیڈنگ: 5px؛
چوڑائی : 500px;
مارجن: 5px 0 ;
سرحدی رداس: 5px؛
باکس شیڈو: 0 1px 5px #000 انسیٹ، 0 1px 0 # 444 ;
}
.custom-progress-bar مدت {
پس منظر- رنگ : #0000FF؛
ڈسپلے: ان لائن بلاک؛
float: بائیں؛
اونچائی : 100 %;
سرحدی رداس: 3px؛
باکس شیڈو: 0 1px 0 آر جی بی اے ( 255 ، 255 ، 255 ، .5 ) inset
منتقلی: چوڑائی .4s آسانی سے باہر
}
ترقی - متن {
متن- سیدھ میں لانا : حق
رنگ : سفید؛
مارجن: 0px؛
}
مرحلہ 5: پوسٹ شائع کریں۔
آخر میں، 'پر کلک کریں شائع کریں۔ ان تبدیلیوں کو محفوظ کرنے کے لیے پوسٹ:
صفحہ کو دوبارہ لوڈ کرنے پر، صارف دیکھ سکتا ہے کہ پوسٹ میں پروگریس بار دیکھا جا سکتا ہے:
پلگ انز کا استعمال کرتے ہوئے ورڈپریس ویب سائٹس میں پروگریس بارز کیسے شامل کریں؟
یہ مظاہرہ ایک ورڈپریس ویب سائٹ میں پروگریس بار شامل کرنے کے لیے 'الٹیمیٹ بلاکس' پلگ ان کا استعمال کرے گا۔ ایسا کرنے کے لیے، ذیل میں فراہم کردہ اقدامات پر عمل کریں۔
مرحلہ 1: ایک نیا پلگ ان شامل کریں۔
ایک بار جب صارف ڈیش بورڈ میں لاگ ان ہوجاتا ہے، 'پر جائیں۔ پلگ انز> نیا شامل کریں۔ سائیڈ مینو بار سے آپشن:
مرحلہ 2: الٹیمیٹ بلاکس پلگ ان انسٹال کریں۔
الٹیمیٹ بلاکس تلاش کریں اور ' داخل کریں۔ ' چابی. پھر، نیچے دیے گئے نشان پر کلک کریں ' اب انسٹال بٹن:
مرحلہ 3: الٹیمیٹ بلاکس کو چالو کریں۔
پلگ ان انسٹال ہونے کے بعد، 'پر کلک کریں محرک کریں ورڈپریس میں پروگریس بار استعمال کرنے کے لیے بٹن:
مرحلہ 4: ایک نئی پوسٹ بنائیں
ورڈپریس پوسٹ میں پروگریس بار شامل کرنے کے لیے، ' پوسٹس > نیا شامل کریں۔ سائیڈ مینو سے آپشن:
مرحلہ 5: پروگریس بار بلاک شامل کریں۔
پوسٹ کو عنوان اور مواد فراہم کریں۔ اگلا، دبائیں ' + ایک نیا بلاک شامل کرنے کے لیے آئیکن۔ مینو میں، تلاش کریں ' ترقی بار اور بلاک کو منتخب کریں:
مرحلہ 6: بار کے لیے فیصد مقرر کریں۔
پروگریس بار کے لیے فیصد سیٹ کرنے کے لیے، نیلے رنگ کا سلائیڈر استعمال کریں یا نیچے نمایاں باکس میں فیصد درج کریں:
مرحلہ 7: پوسٹ شائع کریں۔
پوسٹ مکمل ہونے کے بعد، 'پر کلک کریں شائع کریں۔ ویب سائٹ پر پوسٹ اپ لوڈ کرنے کے لیے بٹن:
مرحلہ 8: پوسٹ دیکھیں
پوسٹ شائع کرنے کے بعد، ویب سائٹ پر پوسٹ کا پیش نظارہ دیکھنے کے لیے 'پوسٹ دیکھیں' کے بٹن پر کلک کریں:
یہ نیچے دیے گئے آؤٹ پٹ میں دیکھا جا سکتا ہے کہ پوسٹ میں پروگریس بار شامل کیا گیا ہے۔
یہ سب کچھ ورڈپریس میں پروگریس بار شامل کرنے کے بارے میں ہے۔
نتیجہ
ورڈپریس ویب سائٹ میں پروگریس بار شامل کرنے کے لیے، ' پلگ انز> نیا شامل کریں۔ 'سائیڈ مینو سے آپشن۔ تلاش کریں اور انسٹال کریں ' الٹیمیٹ بلاکس ' رابطہ بحال کرو. انسٹالیشن کے بعد اسے چالو کریں۔ پھر، جائیں ' پوسٹس > نیا شامل کریں۔ اور پوسٹ کا عنوان اور مواد فراہم کریں۔ اگلا، 'پر کلک کریں + 'آئیکن اور تلاش کریں' ترقی بار 'بلاک. سلائیڈر کا استعمال کرتے ہوئے یا نمبر درج کرکے ترقی کا فیصد سیٹ کریں۔ اس مضمون نے ورڈپریس میں پلگ ان کے ساتھ اور اس کے بغیر پروگریس بار شامل کرنے کے طریقہ کار کی وضاحت کی ہے۔