نحوه افزودن Twitter Bootstrap CSS در وردپرس با استفاده از کد کوتاه

افزودن عناصر CSS مانند راهنمای ابزار ، دکمه های رنگارنگ و جلوه های رول می تواند به برجسته شدن مطالب شما کمک کند. مشکل این است که اکثر مردم نمی دانند چگونه از CSS برای افزودن دکمه های رنگارنگ ، جداول ، برچسب ها و غیره استفاده کنند. ما به شما نحوه افزودن ابزارک های رنگارنگ و جداول در وردپرس . در این مقاله ، ما به شما نحوه استفاده از Twitter Bootstrap CSS در وردپرس با استفاده از کد کوتاه را نشان خواهیم داد.

Twitter Bootstrap یک چارچوب CSS و JavaScript است که به شما کمک می کند طراحی سایت و عملکرد شما به سرعت افزایش یابد. توسط مارک اتو و جیکوب تورنتون در توییتر به عنوان چارچوبی برای تشویق به سازگاری در ابزارهای داخلی آنها توسعه داده شد. بعداً به عنوان ابزاری متن باز منتشر شد. در همه مرورگرها زیبا ، ساده و سازگار است.

اولین کاری که باید انجام دهید نصب و فعال سازی WordPress Twitter Bootstrap CSS plugin. پس از فعال شدن ، این پلاگین یک مورد منوی Twitter Bootstrap را در مدیر وردپرس شما اضافه می کند. با کلیک بر روی آن به داشبورد پلاگین خواهید رفت.

در داشبورد ، تبلیغات وحشتناکی را مشاهده می کنید که توسط نویسنده پلاگین اضافه شده است. از کنار آنها پایین بروید و کدهای کوتاهی را که می توانید در پست های خود اضافه کنید خواهید دید. هر کد کوتاه به صفحه پشتیبانی پلاگین پیوند داده شده است که در آن می توانید نمونه های کاربردی بیشتری از این کد کوتاه را مشاهده کنید.

در زیر قسمت منوی Twitter Bootstrap در سرپرست شما ، پیوندی برای پیکربندی تنظیمات CSS بوت استرپ وجود دارد. با کلیک بر روی آن ، به صفحه پیکربندی منتقل می شوید که می توانید تنظیمات را متناسب با نیازهای خود تغییر دهید. شما این گزینه را دارید که بخواهید از کدام نسخه Bootstrap CSS استفاده کنید. در زیر آن گزینه های مناسب تری برای کاربران سطح پیشرفته پیدا خواهید کرد.

حالا که پیکربندی را بررسی کردیم ، بیایید برخی از عناصر bootstrap css را به یک پست وبلاگ اضافه کنیم. به سادگی کد کوتاه را مانند این در پست یا محتوای صفحه خود جای گذاری کنید:

[TBS_BUTTON id = "mySpecialButton" color = "basic" class = "btn-large" link = "http://example.com"] بارگیری [/ TBS_BUTTON]
[TBS_BUTTON id = "mySpecialButton" color = "خطر" پیوند = "http://example.com"] لغو [/ TBS_BUTTON]
[TBS_BUTTON id = "mySpecialButton" color = "success" link = "http://example.com"] بیشتر بیاموزید [/ TBS_BUTTON]
نمادها:
[TBS_ICON class = "icon-globe"]
[TBS_ICON class = "icon-globe"]
[TBS_ICON class = "icon-chevron-right"]
[TBS_ICON class = "icon-music"]
[TBS_ICON class = "icon-film"]
[TBS_ICON class = "icon-user"]
[TBS_ICON class = "آیکن آچار"]
[TBS_LABEL class = "warning"] هشدار: برچسب [/ TBS_LABEL]
[TBS_LABEL class = "خطر"] خطر: برچسب [/ TBS_LABEL]
[TBS_LABEL class = "موفقیت"] سبز: برچسب [/ TBS_LABEL]
[TBS_ALERT class = "uccess "] تنظیمات ذخیره شد [/ TBS_ALERT]

شکل کوتاه در پست وبلاگ به این شکل است:

عناصر CSS بیشتری وجود دارد که می توانید به پست های خود اضافه کنید. نکات راهنما ، منوهای آکاردئان ، پنجره های بازشو ، نوارهای پیشرفت و غیره title = “استفاده از افزونه میانبرهای بوت استرپ وردپرس Twitter” target = “_ blank” rel = “nofollow”> مستندات در مورد نحوه استفاده از این ویژگی ها. اگر درباره نمادها کنجکاو هستید ، می توانید به سایت رسمی Twitter Bootstrap برای مجموعه کامل نمادها که می توانید استفاده کنید.

ما می دانیم که چارچوب های تم مانند Genesis و دیگران با گزینه های خاص خود ارائه می شوند. آیا از عناصر CSS در پست های خود استفاده می کنید؟ با ارسال نظر در زیر با ما در میان بگذارید.