آموزش تبدیل قالب HTML به قالب وردپرس

132

آموزش تبدیل قالب HTML به قالب وردپرس

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

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

منابع و ابزارهای مورد نیاز

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

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

ابزار دیگری که مورد نیاز شماست، یک ویرایشگر متنی مناسب است. ما برای انجام این کار، استفاده از نرم افزار بسیار قدرتمند NotePad++ را توصیه میکنیم. نوت پد پلاس پلاس را میتوانید با کلیک بر روی اینجا از سایت رسمی اش دریافت نمایید.
طبعا در ادامه برای مشاهده فایل های HTML به یک مرورگر نیاز خواهید داشت و در نهایت هم برای تست نتیجه ی کار، به یک نصب وردپرس. (توصیه میکنیم برای تست از وردپرس لوکال یا یک نصب خالی استفاده نمایید)
همین … اگر آماده اید میتوانیم دست به کار شویم.

شروع به کار

برای شروع کار، قالب HTML ساده ای مانند شکل زیر در اختیار داریم که کلیه ی بخش های آن کاملا ثابت یا استاتیک است :

نمونه قالب HTML در شروع کار

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

ایجاد فولدر قالب و ساختن فایل های اولیه

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

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

بدیهی است که الزامی نیست یک قالب وردپرس تنها محدود به فایل های بالا باشد. در میان فایل های ذکر شده نیز این امکان وجود دارد که از فایل loop.php و sidebar.php هم صرف نظر کنید ولی جهت مرتب بودن و مشخص بودن بخش های مختلف قالب، ما تصمیم گرفتیم این دو فایل را نیز در ساختار اصلی فایل های قالب خود داشته باشیم.
همچنین جهت سادگی بیشتر میتوانید بجای ایجاد فایل style.css این فایل را از درون فولدر قالب HTML ای که در ابتدا دانلود کرده بودید کپی کرده و در فولدر قالب وردپرس خود پیست کنید.

توجه : حتما همه ی فایل های خود را با اینکودینگ UTF-8 ایجاد کنید. برای انجام این کار در NotePad++ میتوانید از منوی Encoding گزینه ی Encode in UTF-8 یا در نسخه های قدیمی تر، نسخه ی Encode in UTF-8 Without BOM را انتخاب نمایید. اگر در قالبتان علامت های عجیب و غریب مشاهده کردید و یا اگر نوشته های فارسی شما تبدیل به علامت سوال میشد، این مسئله به این مفهوم است که اینکودینگ شما روی UTF-8 تنظیم نشده.

افزودن اطلاعات قالب به فایل Style.css

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

واضح است که در کد بالا باید اطلاعات مورد نظرتان را جایگزین نوشته های نمونه کنید.

در اینجا لازم میبینم به این نکته هم اشاره کنم که برای استایل های راست به چپ، در قالب های وردپرس از فایل rtl.css استفاده میشود. در این حالت قالب به صورت چند زبانه نیز قابل استفاده خواهد بود. اما در اینجا چون هدف ما تنها ایجاد یک قالب ساده ی وردپرس بوده است، از همان فایل استایل پیشفرض یعنی style.css استفاده کرده ایم.

افزودن اسکرین شات قالب

حتما مشاهده کرده اید که وقتی در وردپرس از منوی نمایش به زیر منوی پوسته ها مراجعه میکنید، قالب هایی که در این بخش به شما نمایش داده میشوند، هر یک دارای یک تصویر پیش نمایش هستند. در این مرحله میخواهیم این تصویر پیش نمایش را در قالب خود قرار دهیم. تصویر مورد نظر باید تصویری با فرمت png و اندازه ی 880 در 660 پیکسل باشد. به سادگی با نرم افزاری مانند Paint یا Photoshop یا هر نرم افزار دیگری که با آن راحت هستید، میتوانید تصویری با این مشخصات و با نمای دلخواه خود ایجاد کرده و در فولدر قالب قرار دهید تا نماینده ی قالب جدیدتان باشد.

جدا کردن کد های HTML و قرار دادن آنها در فایل های مرتبط

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

برای فایل header.php :
از ابتدای فایل index.html تا انتهای خط 38 که کد <div class=”content_resize”> در آن درج شده را انتخاب کنید. کد را کپی کرده و در فایل header.php قرار دهید.

برای فایل footer.php :
در فایل index.html از ابتدای خط 61 که کد <div class=”clr”></div> در آن درج شده تا انتهای فایل را کپی کرده و در فایل footer.php قرار دهید.

برای فایل sidebar.php :
از ابتدای خط 48 تا انتهای خط 60 که در یک div با کلاس sidebar درج شده را کپی کرده و در فایل sidebar.php قرار دهید.

برای فایل loop.php :
فایل loop.php در واقع همان حلقه ی نوشته های وردپرس یا محلی است که محتوای یک نوشته یا برگه و … به نمایش در می آید. بنابراین در این فایل باید ناحیه اصلی محتوا را قرار دهیم. برای این کار از ابتدا خط 39 تا انتهای خط 47 که در یک div با کلاس mainbar قرار گرفته را کپی کرده و در این فایل قرار دهید.

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

خط اول کد، فایل سربرگ یا header.php را فراخوانی میکند.
خط دوم فایل حلقه یا loop.php را فراخوانی میکند.
و خطوط سوم و چهارم نیز به ترتیب فایل های sidebar.php و footer.php را فراخوانی خواهند کرد.
اگر دقت کرده باشید برای فراخوانی loop.php از کد متفاوتی نسب به سربرگ، سایدبار و فوتر استفاده کرده ایم. این مسئله به این دلیل است که loop.php جزو فایل های ساختار اصلی قالب نیست و تابعی که مستقیما قادر به فراخوانی این فایل باشد، در وردپرس تعریف نشده. بنابراین ما با استفاده از تابع get_template_part به وردپرس گفته ایم بخشی از قالب را که نامش loop است برای ما فراخوانی کن.

کپی کردن منابع مورد نیاز از قالب HTML

اگر توجه کرده باشید قالب HTML ما دارای یک سری منابع مخصوص به خودش، مانند تصاویر، فونت ها و … است. بنابراین در این مرحله باید فولدر هایی که این منابع را در بر گرفته اند، کپی کرده و در فولدر قالب وردپرس خود قرار دهیم. بدیهی است که اگر این فولدر ها را به محل مناسب در قالب وردپرسمان کپی نکنیم، قالب ما فاقد تصاویر و منابع مورد نیاز بوده و نمای آن مشابه نمای قالب HTML نخواهد شد. بنابراین در این مرحله فولدر های images و fonts را از قالب اچ تی ام ال به قالب وردپرستان انتقال دهید.

تکمیل فایل loop.php و قرار دادن متغیر های حلقه ی وردپرس

فایل loop.php ما در حال حاضر شامل کد های استاتیک اچ تی ام ال است. حالا نوبت به آن میرسد که این کد های استاتیک را از این فایل حذف کرده و متغیر های مناسب را در آن جایگزین کنیم. بنابراین محتوای این فایل را مطابق کد های درج شده در زیر تغییر دهید :

در کد بالا در خط دوم ابتدا بررسی میکنیم که آیا مطلبی جهت نمایش موجود است یا خیر. اگر مطلب موجود نباشد که یک راست به سراغ خط 26 میرویم و پیام مطلبی پیدا نشد به کاربر نشان داده میشود. در غیر این صورت مادامی که نوشته ای جهت نمایش موجود باشد، اجرای حلقه ی خط 3 ادامه پیدا خواهد کرد. همانطور که در کد بالا نیز مشخص است، عنوان مطلب، نام نویسنده، دسته بندی ها و محتوای پست، هر یک با توابع مربوطه جایگزین شده اند. در خط 9 با استفاده از تابع wp_link_pages در صورتی که مطلب دارای چند صفحه باشد، صفحات مختلف آن به صورت لیست در اختیار کاربر قرار خواهند گرفت. (مثل همین آموزش که چند صفحه ایست.)

سپس در خطوط 14 تا 20 بررسی کرده ایم که اگر در نوشته ها یا برگه ها یا پیوست ها هستیم و اگر نظردهی فعال است، نظرات و فرم نظردهی در سایت نشان داده شود.

فراخوانی صحیح استایل در قالب وردپرس و فراخوانی توابع در سربرگ

اینکه مانند قالب های HTML، استایل خود را در سربرگ قالب فراخوانی کنید، در وردپرس کار صحیحی نیست. روش صحیح فراخوانی استایل ها در وردپرس، افزودن آنها به صف از طریق تابع wp_enqueue_style است. بنابراین فایل functions.php خود را باز کنید. در ابتدای فایل حتما تگ php را باز کنید و سپس کد زیر را در آن قرار دهید :

گفتیم تگ php را باز کنید ولی نگفتیم تگ php را ببندید! جدی هم گفتیم و تصمیم هم نداریم این تگ را ببندیم. (وای از مشکلات Whitespace … )

حالا به فایل header.php بروید. از ابتدای فایل تا جایی که تگ head به پایان میرسد یعنی </head> انتخاب کرده وکد زیر را به جای آن قرار دهید :

خوب، حالا به شرح کد بالا میپردازیم، در خط دوم با تابع language_attributes زبان و جهت زبان را مشخص کرده ایم.
در خط 4، عنوان ثابت درج شده را حذف کرده ایم و کاری کرده ایم که عناوین سایت به صورت داینامیک بر اساس آنچه وردپرس تعیین میکند به نمایش در بیاید.
در خطوط 6 تا 10 امکان پاسخ دهی به نظرات را به شکل استاندارد وردپرس فراهم کرده ایم. یعنی در این حالت وقتی روی لینک پاسخ کلیک کنید، فرم نظردهی دقیقا در زیر نظری که میخواهید به آن پاسخ بدهید به نمایش در خواهد آمد.
در خط 11 تابع بسیار مهم wp_head را قرار داده ایم. کلیه ی استایل ها و هر آنچه وردپرس قرار است در سربرگ سایت شما قرار دهد، از طریق این تابع در این بخش قرار خواهند گرفت. در واقع بدون این تابع، حتی استایلی که به صف اضافه کرده بودید را نیز در قالب مشاهده نخواهید کرد.

رجیستر کردن سایدبار ها و فهرست ها

در وردپرس برای اینکه بتوانیم از سایدبار های و فهرست ها (منوها) استفاده کنیم، ابتدای باید آنها را در قالب خود تعریف یا رجیستر کرده باشیم و محل نمایش آنها را نیز مشخص کرده باشیم. برای انجام این کار کد زیر را به فایل functions.php خود اضافه کنید :

توجه داشته باشید که تابع special_nav_class در این فایل ارتباطی به رجیستر کردن منو ها یا سایدبار ها ندارد و کار آن مشخص کردن آیتم فعال منو و افزودن کلاس active به آن است تا بعدا بتوانیم از این امکان برای تعریف استایل های خاص برای آیتم های فعال استفاده کنیم.

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

حالا به فایل header.php مراجعه کرده و محتوای درج شده بین تگ <div class=”menu_nav”> را حذف کرده و بجای آن کد زیر را قرار دهید :

محتوای موجود در فایل footer.php را نیز به طور کامل با محتوای زیر جایگزین کنید تا منو ها و سایدبار ها در محل صحیح خود به نمایش در بیایند :

اگر توجه کرده باشید در فایل footer.php در خط 28 تابع wp_footer را درج کرده ایم. این تابع اسکریپت ها و استایل های مربوط به فوتر وردپرس را در قالب شما به نمایش در می آورد. مثلا یکی از کارهای بسیار مهم این تابع نمایش نوار مدیریت وردپرس در سایت شماست. بنابراین توجه کنید که این تابع حتما در محل صحیح خود فراخوانی شده باشد.

در آخر هم فایل sidebar.php را باز کنید، کد های موجود در آن را حذف کرده و جهت نمایش سایدبار مربوط به این ناحیه، کد زیر را در آن قرار دهید :

اصلاح جستجو و تنظیم آن برای استفاده در وردپرس

اگر توجه کرده باشید، در سربرگ قالبمان یک باکس برای جستجو داشتیم. این باکس برای اینکه به درستی در وردپرس کار کند، نیاز به اندکی تغییر دارد. بنابراین فایل header.php خود را باز کنید و فرم جستجو را به شکل زیر تغییر دهید (حوالی خط های 21 تا 28)

در واقع اصل کاری که در کد بالا انجام داده ایم، تعیین آدرس action و تغییر method به get در خط دوم و همچنین تغییر مقدار name به s در خط پنجم کد است. همچنین برای اینکه تصویر ذره بین نیز به درستی بارگذاری شود، با استفاده از تابع get_template_directory_uri آدرس کامل آن را در بخش src قرار داده ایم.

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

قالب تبدیل شده از html به وردپرس

تغییر عنوان و توضیحات نمایش داده شده در سربرگ سایت

حالا میخواهیم کاری کنیم که عنوان و توضیحی که در بخش سورمه ای رنگ سربرگ به نمایش در می آید نیز به صورت داینامیک بر اساس اطلاعات درج شده در تنظیمات وردپرس شما تغییر کند. برای انجام این کار کافی است فایل header.php را باز کرده بخش مربوط به لوگو را که از حوالی خط 30 شروع میشود به شکل زیر اصلاح کنید :

سخنان پایانی

به طور کلی ممکن است از ذکر کردن برخی تغییرات جزئی مانند درج کلاس های پست یا درج کلاس های بدنه در این آموزش صرف نظر کرده باشیم ولی کلیه ی این موارد را میتوانید در قالب وردپرس نهایی که در زیر جهت دانلود در دسترس شماست، به طور کامل مشاهده و بررسی کنید :

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

اگر در جایی از این آموزش سوالی برایتان پیش آمد یا به مشکلی برخورد کردید، در بخش دیدگاه ها در خدمت شما هستیم.
مطمئنا از آموزش امروز لذت برده اید …. !

در پایان خواندن مطالب زیر را نیز به شما توصیه میکنیم :

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

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

راهنمای جامع استفاده از Child Theme در وردپرس

دسترسی آسان به این مطلب لینک کوتاه :
شاید از اینها هم خوشتان بیاید!
132 دیدگاه
  1. h.trnz می گوید

    با سلام خیلی ممنون از راهنماییتون

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

    خیلی ممنون میشم دانلود قالب در لینک زیر

    #

    1. MrCode می گوید

      با عرض شرمندگی امکانش نیست.

  2. حسین می گوید

    سلام و خسته نباشید خدمت شما .
    می خواستم قالب یک وبلاگ را به وردپرس تبدیل کنید برام .
    ایا امکان داره ؟
    اگه میشه هزینه را بفرمایید تا کد های وبلاگ رزبلاگ را براتون ارسال کنم . منتظر پاسخ هستم لطفا ایمیل کنید

  3. مهری علیزاده می گوید

    با سلام .لطفا هزینه تبدیل قالب html به وردپرس رو بفرمایید.
    ممنون

  4. GamerZD می گوید

    کارت عالیه عالیه عالیه عالیهههههههههههههههههههههههههههههههه ایولللللللللللللللللللللللللللللللل

  5. حسن می گوید

    واقعا لذت بردم
    خییییییییلی ممنونم
    عالی بود
    عالی

  6. خرّم می گوید

    سلام. سایتتون خیلی بد اسکرول میشه! ادم کلافه میشه 😐

    1. MrCode می گوید

      چی بگم. من که مشکلی نمیبینم! 😐

      1. یونس می گوید

        معذرت می خوام اما راست میگه منم چشم درد شدم

      2. MrCode می گوید

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

  7. نیما می گوید

    استاد ممنون بیشتر درباره این موضوع مطلب بذارید

  8. مهدی می گوید

    ممنون مطلب مفیدی بود برام.

  9. تارا می گوید

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

  10. عباس دلاوری می گوید

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

  11. سینا می گوید

    سلام. من با زبان HTML و CSS آشنایی دارم. آیا می توانم با استفاده از این دو زبان و این آموزش یک قالب وردپرس طراحی کنم؟

  12. داود می گوید

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

  13. سارا می گوید

    سلام خداقوت
    ممنون از اموزش عالی و کاربردی تون. من آموزش های زیادی دیدم ولی هیچ کدوم مثل شما فایل ها را قرار نداده بودن. من ی فایل html پیشرفته تری را میخواستم تبدیل به وردپرس کنم یعنی شبیه به این آموزش باید پیش ببرم ؟ یعنی تبدیل هر html به وردپرس به همین روشه؟؟

ارسال پاسخ

آدرس ایمیل شما منتشر نخواهد شد.