چگونه یک قالب وردپرس ریسپانسیو با Bootstrap درست کنیم بخش اول

چگونه یک قالب وردپرس ریسپانسیو با Bootstrap درست کنیم بخش اول

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

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

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

  • طراحی صفحه اصلی به صورت سفارشی
  • درباره
  • صفحه تماس
  • بخش نمونه کار ها
  • نوار کناری با ویجت ها

شروع

قبل از اینکه شروع کنیم، چند چیز نیاز به انجام آن دارید:

  • دانلود و نصب وردپرس به صورت localhost یــــا در هاست
  • دانلود کردن Bootstrap، و از حالت فشرده خارج کردن
  • نصب پلاگین Theme Test Drive

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

 

حال که موارد خواسته شده ی بالا را انجام دادید، به آدرس wp-content \ themes در وردپرس خود رفته. مثال، آدرس وردپرس در سیستم من به صورت زیر می باشد:

\C:\xampp\htdocs\wp\wp-content\themes

حال در آدرس  \ wp-content \ themes پوشه ای به نام test ایجاد می کنید. و در داخل آن bootstrap دانلود شده خود را قرار می دهیم.

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

فرض می کنم که شما بوت استراپ را از این آدرس دانلود کرده اید، فقط مطمئن شوید نسخه کامپایل از بوت استراپ شده را دانلود می کنید! حال پوشه ی bootstrap را داخل دایرکتوری test قرار می دهیم.

داخل دایرکتوری test فایلی به نام index.php درست می کنیم:

sublime-directory

حال می خواهیم از سورس ‘اچ تی ام الی’ که در سایت بوت استراپ موجود است استفاده کنیم. اول به این آدرس رفته Getting started ، بعد در پایین صفحه در قسمت ‘Examples‘ نمونه هایی آماده وجود دارد که می توان استفاده کرد. بر روی نمونه ی ‘jumbotron‘ کلیک می کنیم:

bootstrap-examples

وقتی وارد مثال ‘jumbotron‘ شدیم، حال باید کد ‘html‘ را با کلیک راست کردن در صفحه و انتخاب گزینه ‘View page source‘ به دست آوریم

source-code-bootstrap

 

در مرحله بعد تمام کد ‘اچ تی ام ال’ را انتخاب می کنیم و در فایل ‘index.php‘ قرار می دهیم.

حال که صفحه استاتیک html را ایجاد کردیم، نوبت به ساخت فایل ‘CSS‘ می رسد. وردپرس از یک سبک commnet نویسی خاص در بالای فایل style.css استفاده می کند، که اطلاعاتی درباره قالب سایت را نمایش می دهد.

در همان دایرکتوری که فایل index.php را ایجاد کردیم، حال فایلی به نام style.css درست می کنیم. وردپرس نیاز به فایل style.css دارد، پس نمی توانیم نام دیگری برای این فایل انتخاب کنیم.

قالب وردپرس برای اجرا شدن، حداقل به فایل های index.php ، و style.css نیازمند است

وقتی فایل CSS را ایجاد کردیم باید comment هــای زیر را در بالای فایلمان وارد کنیم.

 

آخرین چیزی که قبل از شروع نصب و ساخت قالب خود داریم، نمایش یک عکس کوچک در قسمت مدیریت وردپرس می باشد. این عکس باید با نام screenshot.png در دایرکتوری test ذخیره شود.

ساختار پوشه های شما به این صورت باید باشد:

structure

 

حالا ما آماده رفتن به قسمت مدیریت وردپرس هستیم. وارد وردپرس خود شوید و به منوی نمایش و آنگاه پوسته ها مراجعه کنید. اگر از نسخه ی انگلیسی وردپرس استفاده می کنید به صورت می باشد Apperances > Theme 

اگر تمام مراحل قبل را به درستی انجام داده باشید، پس باید قالب خود را به صورت زیر مشاهد کنید:

wp-admin

 

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

اگر از هاست استفاده می کنید، و نمی خواهید هنگام توسعه دادن قالب، بازدیدکنندگان متوجه شوند از پلاگین Theme Test Drive استفاده کنید.

حال وقتی سایت خود را مشاهده کنید، چیزی شبیه به زیر دیده می شود. می دونم هنوز خیلی شبیه سایت واقعی نشده است!

 

site

بعد از این آموزش می توانید بهترین راه برای بارگزاری سی اس اس را مشاهده کنید

تبدیل فایل های بوت استراپ به قالب وردپرس

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

  • index.php
  • style.css
  • header.php
  • sidebar.php
  • footer.php

شما فایل های بیشتر هم خواهید دید، ولی برای حالا با این فایلها سر و کار داریم. فایلهای header.php sidebar.php footer.php را ایجاد کنید.

 

کاری که الان می خواهیم انجام بدیم، این است که html خود را به بخش های کوچکی تقسیم کنیم، یعنی آن دسته از html هــایی که در در تمام صفحات بارگزاری می شوند را در فایل های header.php یا sidebar.php یا footer.php قرار دهیم.

ابتدا فایل index.php را باز کرده، و خط های زیر را در آن پیدا کرده و انتخاب می کنیم:

 

حال با دکمه های ترکیبی Ctrl + X آنها را Cut می کنیم و آنگاه در فایل header.php با کلید های ترکیبی Ctrl + V پست می کنیم.

حال همین مراحل را برای html هــای مربوط به footer را انجام می دهیم، ابتدا در فایل index.php خط های زیر را پیدا کرده:

حال با دکمه های ترکیبی Ctrl + X آنها را Cut می کنیم و آنگاه در فایل footer.php با کلید های ترکیبی Ctrl + V پست می کنیم. در حال حاظر فایل sidebar.php را خالی می ماند.

حالا می خواهیم  برای اولین بار از تگهای مخصوص به وردپرس استفاده کنیم، تا فایل های header.php و footer.php را در فایل index.php وارد کنیم.

دو تگ وردپرس به نام های ()get_header و ()get_footer وجود دارد که در هسته وردپرس گنجانده شده است برای پیدا کردن فایل های header.php و footer.php ، تا آنها  را در بالا و پایین صفحه قرار دهیم. وردپرس این کار را به صورت خودکار انجام می دهد چون ما فایل های header.php و footer.php ایجاد کرده ایم. ولی اگر این فایل ها را غیر از نام ها نام گزاری کنیم با مشکل مواجه می شویم.

در زیر از این تگ ها استفاده شده است و باید فایل index.php به صورت زیر باشد:

 

شاید شما تعجب کرده باشید که برای چه این کار را انجام می دهیم؟ دلیل این است که ما می خواهیم صفحات چندگانه درست کنیم و احتیاج به header و footer داریم. اگر لازم باشد تغییراتی در فایل های header و footer ایجاد شود و در تمام صفحات قابل مشاهده باشد باید از روش بالا که گفته شد استفاده کنیم.

وقتی مراحل بالا را انجام دادید، حالا می خواهیم لینک های ناقصی که به CSS و JavaScript شده است را تعمیر کنیم.

اول از header شروع می کنیم

ابتدا لینک های زیر را در فایل header.php جستجو کنید:

حالا با دستورات زیر آنها را اصلاح کنید:

و در فایل style.css دستورات زیر را وارد کنید:

کاری که ما انجام دادیم این بود که از تگ وردپرس ()get_template_directory_uri بری لینک کردن CSS به قالب استفاده کردیم، آنگاه از تگ @import برای وارد کردن CSS های بوت استراپ استفده کردیم. حال سایت شما باید شبیه عکس زیر باشد. حال سایت ما به یک سایت واقعی شباهت دارد

real-site

 

حال به بخش های هیجان انگیز آموزش می رسیم! پویا کرد نوار ناوبر (navigation)، ولی قبل از اینکه شروع کنیم تگی وجود دارد که باید به فایل header.php اضافه کرد. تابع ()wp_head یک تابع مهمی است که به توسعه دهندگان افزونه این اجازه را می دهد که به صورت پویا CSS و JavaScript هــا به سایت اضافه کنند. ()wp_head را به فایل header.php ، قبل از بسته شدن تگ <head> اضافه می کنیم.

حال می خواهیم عنوان هر صفحه را به صورت پویا مقدار دهی کنیم، تگ <title> خود را پیدا کرده و با خط زیر جایگزین کنید:

 

 چگونه favicon را نمایش دهیم

favicon آیکون کوچکی است که به دلخواه می توانید بسازید، ولی در این مثال از آیکون سایت بوت استراپ استفاده می کنیم. ابتدا به این آدرس رفته favicon ، و عکس را در دایرکتوری /test ذخیره کنید. حال کد html زیر را پیدا کرده:

و با دستور زیر جایگزین کنید:

پویا کردن منوی سایت (Navigation)

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

در دایرکتوری /test جایی که فایل های index.php ، style.css ، header.php و غیره وجود دارند، یک فایل خالی به نام functions.php ایجاد می کنیم تا توابع خود را به آن اضافه کنیم. حال برای فعال کردن منو، تابع زیر را در functions.php وارد می کنیم:

این کار باعث می شود گزینه ی ‘فهرست ها’ در منوی ‘نمایش’ در بخش مدیریت وردپرس (admin) قرار اضافه شود. حال کد زیر را به فایل functions.php اضافه کنید:

توجه کنید چون در این آموزش به فرم ها، در نوار ناوبری نیازی نیست، پس آن را حذف می کنیم، و در آخر تابعی که برای نمایش منو ها استفاده قرار می گیرد را اضافه می کنیم. فایل header.php خود را با توجه به دستورات زیر تکمیل کنید:

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

 

 

منوی ما آمـــاده است. قبل از اینکه خروجی کار را ببینیم، می خواهم یک تگ وردپرس ساده را اضافه کنم. در فایل header.php خط زیر را پیدا کرده:

و با خط زیر آن را اصلاح کنید:

با این کار شما نام خود، یا شرکت را به صورت پویا درmenus قالب نمایش می دهید. حال منوی قالب شما باید شبیه قالب من شده باشد:

nav

بارگزاری جاواسکریپت های Bootstrap

شما با فعال کردن جاواسکریپت های بوت استراپ انعطاف پذیری بیشتر به سایت خود می دهید، برای این کار به فایل footer.php مراجعه کنید و خط های زیر را پیدا و پاک کرده:

و به جای آنها تگ زیر را به footer.php اضافه کنید، یعنی جایی که قبل از بسته شدن تگ <body>:

برای این کار ابتدا فایل functions.php را باز کرده و دستورات زیر را به آن اضافه کنید:

در لیست زیر پارامترهای تابه بالا توضیح داده شده است:

  • wp_enqueue_script این تابع با نوبت قرار دادن سکریپت ها آنها را اجرا می کند
  • bootstrap_js این نام اسکریپت می باشد، و به دلخواه می تواند برای فیل اسکریپت نام تعریف کرد
  • پارامتر دوم: آدرس اسکریپت را پیدا می کند
  • پارامتر سوم: یک آرایه از نیازمندی های فایل اسکریپتمان است، یعنی قبل از اینکه اسکریپت ما اجرا شود، نیاز می باشد که jquery یا دیگر اسکریپت ها را اجرا کند
  • پارامتر چهارم: برای شماره نسخه اسکریپت می باشد، که در اینجا لازم به مقدار دهی نیست
  • true: یعنی اسکریپت می باید در پایین صفحه footer قرار گیرد، نــــه در تگ head
  • add_action برای اجرای تابع ما استفاده می شود

 

Bootstrap برای اجرای اسکرپت های خود نیازمند jQuery در صفحه می باشد

برای اطلاعات بیشتر می توانید به لینک های زیر مراجعه کنید:

برای اینکه مطمئن شوید اسکریت های شما درست کار می کند یا نه می توانید سایت را موبایل یا تبلت یا کوچک کردن عرض مرورگر خود آزمایش کنید

test-js

 

در آخر برای پویا کردن نوشته ی در footer کد زیر را در فایل footer.php اصلاح می کنیم:

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

در قسمت بعدی بیشتر با WordPress و Bootstrap آشنا خواهید شد.

این آموزش از مستندات Codex و Bootstrap الهام گرفته شده است.