استفاده از بوت استرپ در وردپرس

استفاده از بوت استرپ در وردپرس‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌

استفاده از بوت استرپ در وردپرس‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌‌

استفاده از بوت استرپ در وردپرس چگونه صورت می پذیرد؟

با کامل ترین مرجع وردپرس در ایران همراه شوید تا به معرفی این آموزش کاربردی برای کد نویسان وب سایت وردپرسی بپردازیم.

اضافه کردن بوت استرپ به وردپرس با Easy Bootstrap Shortcode

فهرست محتوای این مقاله

اضافه کردن بوت استرپ به وردپرس

با بوت استرپ میتوان استایل زیبا و جذابی به صفحات و نوشته سایت وردپرسی خود داد.

اگر می‌خواهید بوت استرپ را به وبسایت وردپرسی خودتان اضافه کنید بهتر است با این افزونه این کار را انجام دهید.

Easy Bootstrap Shortcode است افزونه سازگار با بوت استرپ 3.2.0 که اضافه کردن آیکون به ویرایشگر وردپرس (tinyMCE دکمه های کوتاه) و می تونید استایل بوت استرپ به وب سایت خود را فقط با کلیک بر روی آیکون ویرایشگر tinyMCE اضافه کنید.

ویژگی های افزونه  Easy Bootstrap Shortcode

  • افزودن آیکون در ویرایشگر وردپرس
  • افزودن شورتکد به ویرایشگر وردپرس
  • امکان تنظیم صفحه در سایز کوچک و معمولی
  • نمایش در سایدبار
  • سازگار با Bootstrap 3.0.3
نحوه کار با افزونه Easy Bootstrap Shortcode

در ابتدای کار افزونه را دریاقت و نصب کنید، پس از فعال کردن افزونه منو جدیدی تحت عنوان EBS settings در پیشخوان وردپرس ظاهر می شود. وارد صفحه تنظیمات افزونه شوید و تنظیمات را پیکربندی کنید.

نحوه کار با افزونه Easy Bootstrap Shortcode
نحوه کار با افزونه Easy Bootstrap Shortcode

دراین قسمت چهار متاباکس وجود دارد، در اولین بخش، تنظیمات js و css را تنظیم کنید.

گزینه Use from EBS Plugin را فعال کنید.

بیشتر بخوان بیشتر بدان  تغییر آدرس عکسها وردپرس

در بخش font، میتوانید آیکون های Font Awesome را فعال و غیرفعال کنید.

در بخش User Interface، رابط کاربری در بخش ویرایشگر را انتخاب کنید.( تعیین استایل دکمه های ویرایشگر).

در ادامه تنظیمات را به روز رسانی کنید.

سپس، یک صفحه یا نوشته دلخواه در پیشخوان وردپرس ایجاد کنید.

در نوار ابزار یک قسمت به نام EBS shortcode اضافه شده است.

روی آن ابزار کلیک کنید. تعدادی گزینه های متفاوتی وجود دارد بر روی هر یک بر اساس دلخواه  و سلیقه خود کلیک کنید و تنظیمات را تغییر دهید و صقحه خود را به شکل جذاب تری طراحی کنید.

پس از اتمام کار یک شورتکد را مشاهده میکنید، حال صفحه و یا نوشته خود را منتشر کنید.

بیشتر بدانید:

افزودن بوت استرپ به وردپرس با شورت کد

افزودن عناصر css مانند نکات راهنمای ابزار,دکمه های رنگارنگ به برجسته کردن محتوا کمک میکنند.

مشکل موجود ندانستن افراد در مورد نحوه ی استفاده css برای جداول و برچسب ها و درگیر موارد میباشد.

در این مقاله ما به شما روش اضافه کردن توییتر بوت استرپ css توسط کد کوتاه را آموزش میدهیم.

توییتر بوت استرپ یک بدنه جاوا اسکریپت و css است که به افزایش کیفیت طراحی سایت و عملکرد آن کمک میکند.

بوت استرپ توسط Mark Otto و Jacob Thornton در توییتر بعنوان یک بدنه برای تشویق ثبات در سراسر ابزار داخلی توسعه یافت و بعد از آن بعنوان یک ابزار منبع باز منتشر شد.

اولین کاری که باید انجام دهید نصب و فعال سازی افزونه  WordPress Twitter Bootstrap CSS میباشد,

بیشتر بخوان بیشتر بدان  افزونه ادامه مطلب در وردپرس

پس از فعال سازی افزونه آیتم منوی توییتر بوت استرپ را به بخش مدیریت اضافه میکند.

برای رفتن به داشبورد افزونه روی آن کلیک کنید.

منوی بوت استرپ
منوی بوت استرپ

در داشبورد تبلیغات زیادی که توسط نویسنده افزونه اضافه شده را خواهید دید.

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

هر کد به صفحه حمایت افزونه جاییکه میتوانید مثالهای قابل استفاده برای کد را ببینید لینک شده است.

مثال کو کوتاه
مثال کو کوتاه

در زیر آیتم منوی توییتر بوت استرپ در بخش مدیریت لینک برای پیکر بندی تنظیمات بوت استرپ وجود دارد. با کلیک روی آن به صفحه پیکربندی جاییکه میتوانید تنظیمات را متناسب با نیازهای خود کنید خواهید رفت.

همچنین گزینه هایی برای انتخاب نسخه بوت استرپی که میخواهید استفاده کنید وجود دارد. در زیر تمام این بخش ها گزینه های مناسب زیادی برای کاربران سطح مبتدی وجود دارد.

اکنون نگاهی به پیکر بندی انداحته و برخی عناصر بوت استرپ css را به وبلاگ پست اضافه میکنیم.

بسادگی کد کوتاهی مانند زیر را به صفحه محتوا یا پست خود اضافه کنید:

<!--Shortcodes->
[TBS_BUTTON id="mySpecialButton" color="primary" class="btn-large" link="https://example.com"]Download[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="danger" link="https://example.com"]Cancel[/TBS_BUTTON]
[TBS_BUTTON id="mySpecialButton" color="success" link="https://example.com"]Learn more[/TBS_BUTTON]
Icons:
[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="icon-wrench"]
[TBS_LABEL class="warning"]Warning: Label[/TBS_LABEL] 
[TBS_LABEL class="danger"]Danger: Label[/TBS_LABEL] 
[TBS_LABEL class="success"]Green: Label[/TBS_LABEL] 
[TBS_ALERT class="success"]Settings saved[/TBS_ALERT]

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

نمایش گزینه ها
نمایش گزینه ها

عناصر css زیادی مانند راهنمای ابزار,منوهای آکاردئونی,جعبه پنجره,نوار پیشرفت و عناصر دیگری وجود دارد که میتوانید به پست خود اضافه کنید.

موفق باشید 🙂

برای امتیاز دهی روی ستاره ها کلیک کنید.باتشکر
[Total: 1 Average: 5]
نوشته ایجاد شد 590

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

نوشته های مرتبط

متنی که میخواهید برای جستجو وارد کرده و دکمه جستجو را فشار دهید. برای لغو دکمه ESC را فشار دهید.

بازگشت به بالا