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

آموزش تبدیل قالب HTML به پوسته وردپرسReviewed by همیار پروژه on Nov 10Rating: 4.5آموزش تبدیل قالب HTML به پوسته وردپرسآموزش تبدیل قالب HTML به پوسته وردپرس

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

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

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

سلام خدمت تمامی شما عزیزان ; با یک آموزش وردپرسی دیگه در خدمتتون هستیم.آموزش تبدیل قالب HTML به پوسته وردپرس که میتونید در ادامه از همیار پروژه به این مبحث بپردازید.شاید گاهی نتوانید قالب مورد نظر خود را در بین قالب های آماده وردپرسی پیدا کنید , یا قالب html ساده ای پیدا کرده اید که ازش خوشتون اومده و مناسب برای سایتتون هستش پس با همراه شوید تا بتونید یک قالب HTML رو به یک قالب وردپرسی تبدیل کنید.

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

 

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

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

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

انتقال پوسته قالب HTML :
اولین بخش انتقال پوسته HTML به پوشه themes هست که در wp-content قرار داره کل فایل های HTML رو در یک پوشه بریزید و پوشه رو منتقل کنید و یک اسم بذارید که هیچ فاصله ای داخلش نباشه و ترجیحا فواصل رو با دش “-” جدا کنید مثل Hamyar-Projects

ایجاد فایل های پوسته وردپرس :
در فولدری که در مسیر wp-content/themes ساختید فایل های زیر رو ایجاد کنید

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

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

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

 

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

دقت کنید این خطوط را در ابتدای فایل CSS قرار دهید.

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

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

 

ساخت تصویر برای قالب (Screen Shot):

اضافه کردن اسکرین شات به قالب وردپرس

در ساخت Screen Shot برای قالب وردپرسی خود به نکات زیر توجه فرمایید:

نسبت عکس به صورت ۳*۴ توصیه میشود یا سایز ۲۲۵*۳۰۰
بیشترین اندازه برای اسکرین شات سایز ۲۴۰*۳۲۰ می باشد

حالا با توجه به نکات بالا زمان اضافه کردن تصویر به قالب رسیده است، تصویری که ساخته اید حتما باید پسوند png داشته باشد. ابزار زیادی برای تبدیل عکس به فرمت png وجود دارد ولی فتوشاپ یکی از بهترین ابزاری هست که من به شما پیشنهاد میکنم، نام عکس خود را به screenshot.png تغییر نام دهید و عکس را داخل پوشه قالب خود قرار دهید

نکته: نام عکس باید به صورت حروف کوچک نوشته شود.

 

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

 

در نظر بگیرید کد های زیر در فایل html اصلی شما میباشد و شما میخواهید آن را در فایلهای اصلی وردپرس قرار دهید :

پس کد ها بصورت زیر تقسیم میشود

 

برای فایل header.php :

برای اینکه شلوغ نشه کدها رو از دوباره تکرار نکردم

 

برای فایل index.php :

کدهای بین section میشه همون کدهای index

 

برای فایل sidebar.php :

کدهای ساید بار رو بین Div های بالا قرار بدید

پیشنهاد ویژه :   دانلود کتاب برنامه نویسی اندروید با Basic4Android

 

برای فایل footer.php :

خوب حالا کار تقسیم کدها تموم شد میمونه کدهای فایل functions.php و جایگذاری توابع و تگ های وردپرس به جای کدهای HTML که در ادامه میتونید این کار رو انجام بدید.

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

این کار رو میشه با تابع include که خود php ارائه داده انجام بدیم یا این که از تابع get_header و get_footer که وردپرس در اختیار ما گذاشته انجام بدیم.
بهتون پیشنهاد میکنم از توابع وردپرس استفاده کنید.

خب حالا وارد index.php بشید :

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

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

خب حالا اخرین خط فایل index.php رو نگاه کنید باید کد زیر باشه

درست بعدش کد زیر رو بذارید

فایل ساید بار مون (sidebar.php) باقی موند

اینجا باید دقیقا قبل از کد <?php get_footer();?> کد زیر رو قرار بدید

خب ذخیره کنیدش و الان صفحه اصلی سایت رو ببنید فایل های هدر و فوتر سایت اینکلود شدن اما هنوز css در کاری نیست
برای لینک فایل سی اس اس وردپرس یه تابعی داره با اسم bloginfo که آرگومان دریافتیش به صورت رشته هست و مقادیر مختلفی داره
یکی از این مقادیر stylesheet_url هست که آدرس فایل style.css رو بر میگردونه

وارد header.php بشید و کد زیر رو پیدا کنید :

حالا به جای style.css کد زیر رو قرار بدید

خب اینم از این ، سایت رو رفرش بدید و میبینید که قالب سی اس اس داره الان، اما هنوز مونده ، عکس ها / لینک ها / فایل های جاوا اسکریپت / و سایر فایل های CSS بارگذاری نمیشن
دقیقا از تابع bloginfo استفاده میکنیم اما این بار با رشته template_url این آرگومان خروجی آدرس پوسته ما رو داره

شما باید هر جا که دیدید یک فایل عکس/ فایل جاوا اسکریپت / فایل های CSS قرار دارید قبل از ادرس فایل این کد رو قرار بدید

مثلا به کدهای زیر دقت کنید

بعد از اینکه شما اون تابع رو قبل از ادرس فایل قرار دادید باید کدها اینطوری بشن

شما باید هر جا فایلی لینک شده بود اینکار رو انجام بدید

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

 

در ادامه آموزش تبدیل قالب HTML به پوسته وردپرس داینامیک سازی header که از بخش head (اطلاعات سایت) و ناوبار تشکیل میشه ، و همچنین داینامیک سازی ساید بار رو توضیح خواهیم داد.
head از meta tags و title تشکیل میشه که باید با سایت هماهنگ بشه.ناوبار با فهرست دلخواه ، ساید بار هم با ابزارک ها هماهنگ میشه.

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

 

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

در مرحله بعد فایل footer.php رو باز کنید و درست قبل از </body> قرار بدید

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

 

اصلاح اطلاعات head سایت :
حالا برمیگردیم به header.php و میخوایم تایتل و توضیحات رو اضافه کنیم.خب اول کد زیر رو پیدا میکنیم

و کد زیر رو جایگزین کدهای بالا میکنیم

متاتگ اول شرط داره و میگه اگر پست بود توضیحات سایت ما ، عنوان پست – عنوان اصلی سایت باشه، در غیر این صورت فقط عنوان اصلی سایت باشه.ما میتونستیم برای دسته بندی و صفحات و ارشیو و … هم این کارو انجام بدیم اما ضروری نیست.

به تایتل میرسیم، تایتل کاملا شرطی تعریف شده.اگر پست بود عنوان پست – عنوان سایت ، اگر صفحات بود ، عنوان صفحه : عنوان سایت ، اگر دسته ها بودن ، عنوان دسته – عنوان سایت و اگر هم هیچی نبود که تابع wp-title که خودش اوتوماتیک تایتل میذاره فراخوانی میشه.

خب این head ما که کامل شد.

 

فایل توابع پوسته (function.php) :
نوبت میره به فایل توابع در این فایل هر تابعی که قرار بگیره به صورتی عمومی قابل فراخوانی هست.
و اما توابعی که در این آموزش باهاشون کار داریم یکی register_sidebar برای پشتیبانی از ابزارک ها و دیگری register_my_menus برای پشتیبانی از فهرست دلخواه هست.

ابتدا کد های زیر رو اضافه میکنیم به فایل فانکشنمون

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

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

 

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

و به جاشون کد زیر رو میذاریم

خب این کد رو اگر بهش دقت کنید متوجه میشید که داخلش main-menu قرار داره و اگر به فانکشن هامون بخش کد ناوبار نگاه کنید دقیقا main-menu رو اونجا هم خواهید دید.

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

 

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

میبینید که قبل از بلوک ما <section class=”block”> و بعدش هم </section> هست
و قبل از تایتلش هم <div class=”title”> و بعدش هم </div> هست.

 

برمیگردیم به فایل function.php و کد ساید بار رو میبینیم قبل از ابزارک دقیقا کدی که بالا گفتیم و بعدش هم دقیقا همون قبل از تایتل هم البته به h5 تغییر داده شده ولی کلاسش همونه دقیقا
پس هر چیزی که توی طرحتون بود دقیقا باید توی فانکشن باشه. خوب حالا که نکته رو متوجه شدید در بین کدهای زیر

کد زیر رو قرار میدیم

این کد میاد اول فانکشن dynamic_sidebar رو اگر false بود نقیض میکنه (میشه true) اگر هم نه که میره سراغ بدی تا ببینه با پاس شدن مقدار sidebar به dynamic_sidebar جوابی میگیره یا نه.

حالا باز بر میگردیم به function.php این sidebar که اینجا در sidebar.php پاس شده دقیقا همون sidebar هست که در تابع مورد نظر به عنوان id قرار گرفته.

یعنی اگر چند ابزارک مختلف دارید در function.php هر سری یک بار کد ابزارک مورد نظر رو با یک ای دی متفاوت قرار میدید و برای فراخوانیش کدی که گفته شد رو با همون ای دی مینویسید.

 

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

حلقه های وردپرس :
وردپرس حلقه های مختلفی برای نمایش مطالب داره که میتونیم از حلقه عادی ، wp_query و post_query استفاده کنیم ، هر یک قابلیت هایی دارن که توضیح میدیم.
حلقه عادی حلقه ای هست که مطالب رو بدون نیاز به هیچ تنظیمات خاصی نشون میده، این حلقه امکان تنظیم روی یک دسته رو از طریق function ها و توسط add_filter داره که از توابع خود وردپرس هست ، و باید تابعی نوشته بشه که دسته ها رو در صفحه اصلی ممنوع کنه (در این آموزش به این نکته هم اشاره میکنیم)

مورد دوم wp_query که خیلی شبیه post_query هست، این حلقه میتونه یک آرایه رو در خودش به عنوان تنظیمات جا بده که عبارتند از :
صفحه بندی
تعداد
نوع مرتب سازی
و …

آخری هم post_query هست که نسبت به wp_query بهتره ، امکانات تقریبا همونا هستن ، ساختار و نوع نوشتنش متفاوق هست و راحت تر میشه صفحه بندی و کار باهاش کرد.

 

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

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

خوب بالا برای توابع مطالب وردپرس رو با کدهای html جایگذاری کردیم که در ادامه براتون توضیح میدمش

تابع <?php the_title_attribute();?> عنوان مطلب رو برمیگردونه

تابع <?php the_permalink();?> ادرس مطب یا همون ادرس ادامه مطلب هستش

و همچنین تابع

تصویر شاخص مطلب رو نشون میده

خب اما همینجا تموم نمیشه کار ما، درست قبل از

کد زیر رو قرار میدیم

و درست بعد از </article> کد زیر رو

خب این کد اون article ما رو داخل حلقه میذاره که به تعداد مطالبی که در تنظیمات -> خواندن تنظیم کردیم برای مطالب صفحه ی اصلی تکرار میشه مثلا اگر اونجا نوشته باشیم 5 اینجا 5 تا از اخرین مطالب میاد.

 

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

دوستان عزیز اگر مشکلی یا خطایی در دستورات و کدهای ما مشاهده کردید اولا مار رو ببخشید و دوما لطفا اون رو برای ما ارسال کنید تا این اموزش کامل و بدون نقص تر بشه

امیدوارم که لذت برده باشید.موفق باشید

همیار پروژه وردپرس آموزش وردپرس

دیدگاه خود را بیان کنید