طراحی تم وردپرس با Underscores و Bootstrap | آموزش گام به گام


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

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

معرفی Underscores و Bootstrap

Underscores یک فریم ورک رایگان و متن باز برای وردپرس است که به شما کمک می کند تا به سرعت و به آسانی تم های وردپرس را طراحی و توسعه دهید. Underscores شامل مجموعه ای از فایل های HTML، CSS و JavaScript است که به عنوان پایه ای برای تم شما عمل می کنند. این فریم ورک با استفاده از بهترین شیوه های توسعه وردپرس نوشته شده است و به شما کمک می کند تا کدهای تمیز، قابل نگهداری و بهینه شده برای موتورهای جستجو بنویسید.

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

مزایای استفاده از Underscores و Bootstrap برای طراحی تم وردپرس

استفاده از Underscores و Bootstrap برای طراحی تم وردپرس مزایای متعددی دارد، از جمله:

  • سرعت: با استفاده از Underscores و Bootstrap می توانید به سرعت و به آسانی تم های وردپرس را طراحی و توسعه دهید. این فریم ورک ها شامل مجموعه ای از فایل ها و اجزای آماده هستند که می توانید از آنها در تم خود استفاده کنید.
  • سادگی: Underscores و Bootstrap فریم ورک هایی ساده و آسان برای استفاده هستند. حتی اگر تجربه برنامه نویسی کمی داشته باشید، می توانید به راحتی از آنها برای طراحی تم وردپرس خود استفاده کنید.
  • قابلیت نگهداری: کدهای نوشته شده با Underscores و Bootstrap تمیز، قابل نگهداری و بهینه شده برای موتورهای جستجو هستند. این امر به شما کمک می کند تا تم های وردپرس را به راحتی به روز رسانی و نگهداری کنید.
  • ریسپانسیو: Bootstrap یک فریم ورک ریسپانسیو است که به شما کمک می کند تا وب سایت هایی را طراحی کنید که در تمام دستگاه ها (دسکتاپ، تبلت و موبایل) به خوبی نمایش داده شوند.
  • سازگاری با مرورگر: Bootstrap با تمام مرورگرهای محبوب وب مانند Chrome، Firefox، Safari و Edge سازگار است.

در مجموع، Underscores و Bootstrap ابزارهای قدرتمندی هستند که می توانند به شما در طراحی و توسعه تم های وردپرس زیبا، کاربردی و حرفه ای کمک کنند.


گام اول: نصب و راه اندازی Underscores

دانلود و نصب Underscores

  1. به وب سایت Underscores بروید.
  2. بر روی دکمه "Download" کلیک کنید.
  3. فایل فشرده Underscores را در کامپیوتر خود دانلود کنید.
  4. فایل فشرده را استخراج کنید.
  5. پوشه استخراج شده را به پوشه wp-content/themes در هاست وردپرس خود آپلود کنید.

ایجاد ساختار اولیه تم

  1. به داشبورد وردپرس خود بروید.
  2. به منوی "نمایش" > "پوسته‌ها" بروید.
  3. بر روی تم "Underscores" کلیک کنید.
  4. بر روی دکمه "افزایش فایل‌های تم" کلیک کنید.
  5. فایل های style.css و functions.php را از پوشه استخراج شده Underscores آپلود کنید.

با انجام این مراحل، Underscores در وردپرس شما نصب و راه اندازی شده است.

نکته:

  • برای آپلود فایل ها به هاست وردپرس خود می توانید از FTP یا فایل منیجر هاست خود استفاده کنید.

ساختار اولیه تم Underscores

ساختار اولیه تم Underscores شامل فایل های زیر است:

  • style.css: این فایل شامل کدهای CSS برای تم شما است.
  • functions.php: این فایل شامل کدهای PHP برای تم شما است.
  • header.php: این فایل شامل کدهای HTML برای هدر تم شما است.
  • footer.php: این فایل شامل کدهای HTML برای فوتر تم شما است.
  • index.php: این فایل شامل کدهای HTML برای صفحه اصلی تم شما است.
  • single.php: این فایل شامل کدهای HTML برای صفحات نوشته های تم شما است.
  • page.php: این فایل شامل کدهای HTML برای صفحات استاتیک تم شما است.

نکات:

  • شما می توانید با توجه به نیاز خود، فایل های جدیدی را به این ساختار اضافه کنید.
  • برای ویرایش فایل های تم، می توانید از ویرایشگر متن مورد علاقه خود استفاده کنید.


گام دوم: پیاده سازی Bootstrap

با نصب و راه اندازی Underscores، یک پوسته اولیه برای تم وردپرس خود ایجاد کردید. حالا نوبت به ادغام Bootstrap برای بهبود ظاهر و قابلیت های رابط کاربری می رسد.

دانلود و نصب Bootstrap

  1. به وب سایت Bootstrap بروید.
  2. بر روی دکمه "Download" کلیک کنید.
  3. از گزینه های دانلود، "Compiled CSS and JS" را انتخاب کنید.
  4. فایل فشرده Bootstrap را در کامپیوتر خود دانلود کنید.
  5. فایل فشرده را استخراج کنید.


ادغام Bootstrap با Underscores

  1. پوشه استخراج شده Bootstrap را باز کنید.
  2. دو پوشه css و js را از این پوشه کپی کنید.
  3. به پوشه تم خود در هاست وردپرس بروید.
  4. پوشه های css و js را که از Bootstrap کپی کردید، در پوشه تم خود ایجاد کنید.
  5. فایل bootstrap.min.css را از پوشه css در Bootstrap به پوشه css در تم خود کپی کنید.
  6. فایل bootstrap.bundle.min.js را از پوشه js در Bootstrap به پوشه js در تم خود کپی کنید.

با انجام این مراحل، Bootstrap با تم Underscores شما ادغام شده است.

استفاده از اجزای Bootstrap در تم

اکنون می توانید از اجزای مختلف Bootstrap مانند دکمه ها، فرم ها، منوهای کشویی و ... در طراحی تم وردپرس خود استفاده کنید. Bootstrap کلاس های CSS مختلفی را برای این اجزا ارائه می دهد که می توانید آنها را به عناصر HTML در فایل های تم خود اضافه کنید.

برای مثال:

HTML

<button class=&quotbtn btn-primary&quot>دکمه ای با رنگ آبی</button>

کد بالا یک دکمه آبی رنگ با استفاده از کلاس های Bootstrap ایجاد می کند.


گام سوم: طراحی قالب اصلی تم

قالب اصلی تم (Template) اسکلت کلی ساختار صفحات مختلف تم شما را تشکیل می دهد. با استفاده از Underscores و Bootstrap، می توانید به راحتی یک قالب اصلی زیبا و کارآمد برای تم خود طراحی کنید.

طراحی هدر و فوتر

  1. فایل های header.php و footer.php در پوشه تم خود را ویرایش کنید.
  2. در فایل header.php کدهای HTML برای هدر تم خود را قرار دهید. این کدها می توانند شامل لوگو، منوی ناوبری، دکمه های جستجو و ... باشند.
  3. در فایل footer.php کدهای HTML برای فوتر تم خود را قرار دهید. این کدها می توانند شامل اطلاعات تماس، کپی رایت و ... باشند.

Bootstrap کلاس های آماده ای برای طراحی هدر و فوتر ارائه می دهد که می توانید از آنها استفاده کنید.

برای مثال:

HTML

<header class=&quotcontainer-fluid bg-dark text-white py-3&quot>
  <div class=&quotcontainer&quot>
    <a href=&quot<?php echo get_home_url(); ?>&quot class=&quotnavbar-brand text-white&quot>لوگوی وب سایت</a>
    <?php wp_nav_menu( array( 'theme_location' => 'primary_menu' ) ); ?>
  </div>
</header>

<footer class=&quotcontainer-fluid bg-light text-dark py-3&quot>
  <div class=&quotcontainer&quot>
    <p class=&quottext-center&quot>© <?php echo date('Y'); ?> تمامی حقوق محفوظ است.</p>
  </div>
</footer>

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

طراحی صفحات مختلف تم

Underscores فایل های پیش فرض مختلفی را برای صفحات مختلف تم مانند صفحه اصلی، صفحه نوشته، صفحه دسته بندی و ... ارائه می دهد. شما می توانید این فایل ها را ویرایش کنید و کدهای HTML و PHP را برای نمایش محتوای صفحه خود اضافه کنید.

برای مثال:

فایل index.php مربوط به صفحه اصلی است. شما می توانید در این فایل کدهای HTML برای نمایش اسلایدر، بخش وبلاگ، بخش محصولات و ... قرار دهید. برای فراخوانی محتویات پویا مانند نوشته های اخیر، از توابع وردپرس مانند the_loop() و the_post() استفاده کنید.

به طور مشابه، فایل های single.php و page.php را برای نمایش محتویات نوشته ها و صفحات استاتیک ویرایش کنید. Bootstrap کلاس های مفیدی را برای نمایش محتوا و چینش عناصر در صفحه ارائه می دهد که می توانید از آنها استفاده کنید.


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

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

ایجاد منوهای وردپرس

وردپرس به شما امکان می دهد تا منوهایی را برای ناوبری وب سایت خود ایجاد کنید. با استفاده از Underscores می توانید این منو ها را در تم خود نمایش دهید.

  1. در پنل مدیریت وردپرس خود، به منوی "نمایش" > "فهرست‌ها" بروید.
  2. منوهای مورد نظر خود را ایجاد کنید و برای هر منو، برچسب و آدرس های دلخواه را تنظیم کنید.
  3. برای نمایش منو در تم خود، از تابع wp_nav_menu() در فایل های header.php یا سایر فایل های قالب خود استفاده کنید.

به عنوان مثال، برای نمایش منوی اصلی با نام "primary_menu" در هدر تم خود، می توانید از کد زیر استفاده کنید:

PHP

<?php wp_nav_menu( array( 'theme_location' => 'primary_menu' ) ); ?>

اضافه کردن ویجت ها

ویجت ها، ابزارک های کوچکی هستند که می توانید در بخش های مختلف تم خود قرار دهید. وردپرس به صورت پیش فرض، ویجت های مختلفی مانند "جستجو"، "دسته بندی ها" و "آخرین نوشته ها" را ارائه می دهد.

Underscores به طور پیش فرض، بخش های ویجت را در تم شما تعریف نکرده است. شما می توانید با ویرایش فایل های قالب خود، بخش های ویجت را اضافه کنید و از تابع dynamic_sidebar() برای نمایش ویجت ها در آن بخش ها استفاده کنید.


گام پنجم: سفارشی سازی تم

تا به اینجا، با مراحل اولیه طراحی تم وردپرس با استفاده از Underscores و Bootstrap آشنا شدید. در این مرحله، به سفارشی سازی ظاهری و عملکردی تم خود می پردازیم.

سفارشی سازی با استایل (Style)

فایل style.css در پوشه تم شما، مسئول استایل و ظاهر کلی تم است. در این فایل می توانید کدهای CSS برای

  • تغییر رنگ ها
  • تغییر فونت ها
  • تنظیم حاشیه و فاصله (padding و margin)
  • طراحی چیدمان (layout)
  • و ...

را بنویسید.

Bootstrap کلاس های CSS زیادی را برای سبک دهی به عناصر مختلف صفحه ارائه می دهد که می توانید از آنها در فایل style.css خود استفاده کنید. همچنین می توانید استایل های دلخواه خود را برای عناصر خاص در تم خود تعریف کنید.

برای مثال:

CSS

body {
  font-family: Arial, sans-serif;
  background-color: #f5f5f5;
}

.h1 {
  color: #333;
  margin-bottom: 20px;
}

.btn-primary {
  background-color: #007bff;
  border-color: #007bff;
}

کدهای بالا نمونه هایی از استایل های سفارشی برای بدنه صفحه، تگ عنوان h1 و دکمه های آبی رنگ هستند.

سفارشی سازی با توابع وردپرس

Underscores برخی از توابع وردپرس را برای سفارشی سازی تم در فایل functions.php قرار داده است. شما می توانید این توابع را ویرایش کنید و یا توابع جدیدی را برای موارد زیر اضافه کنید:

  • افزودن لوگو به تم
  • نمایش فوتر (کپی رایت) با اطلاعات سال جاری
  • غیرفعال کردن برخی از قابلیت های پیش فرض وردپرس
  • و ...

همچنین می توانید از هوک های وردپرس (WordPress Hooks) برای اجرای کدهای دلخواه خود در نقاط مختلف فرایند بارگذاری و نمایش صفحات استفاده کنید.


پیش نمایش و تست تم

پس از انجام تغییرات در فایل های style.css و functions.php، می توانید با استفاده از قابلیت "نمایش زنده" (Live Preview) در شخصی سازی کننده وردپرس (Theme Customizer)، تغییرات را به صورت زنده مشاهده کرده و آنها را ویرایش کنید.

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


گام ششم: انتشار تم

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

دو روش برای انتشار تم وجود دارد:

  1. انتشار از داشبورد وردپرس: در پنل مدیریت وردپرس خود، به منوی "نمایش" > "پوسته‌ها" بروید. بر روی تم خود کلیک کنید و سپس بر روی دکمه "فعال کردن" کلیک کنید.
  2. انتشار به عنوان افزونه: تم خود را به صورت یک پوشه zip درآورده و آن را در پنل مدیریت وردپرس خود، در بخش "افزونه‌ها" > "افزودن" آپلود کنید.

توجه:

قبل از انتشار تم در یک وب سایت زنده، توصیه می شود آن را در یک وب سایت آزمایشی تست کنید تا از بروز هر گونه مشکل جلوگیری شود.


منابع: