طراحی قالب استاندارد وردپرس

طراحی قالب استاندارد وردپرس

با سلام به دوستان خوب وردپرس سیتی ، امروز میخوام درمورد طراحی قالب استاندارد وردپرس بحث کنیم و ببینیم با انجام چه چیز هایی میتوانیم طراحی قالب وردپرس را به درستی انجام بدیم. خب بریم سراغ مقاله طراحی قالب وردپرس 🙂 :

هر روز تعداد زیادی پوسته وردپرس به کاربران و طراحان وب عرضه میشه.

اما آیا همه ی این قالبها استاندارد های لازم رو دارند؟
آیا از نظر کدنویسی بدون نقص هستند؟

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

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

  • کدنویسی غیر صحیح و غیراستاندارد
  • هماهنگ نبودن با مرورگرهای جدید
  • عدم پشتیبانی از امکانات جدید وردپرس
  • سئوی خیلی ضعیف
  • و…

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

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

۱. رعایت کردن استانداردهای HTML/CSS در کدنویسی

همانطور که از تیتر معلوم است اولین قدم برای طراحی قالب وردپرس این که یک قالب را استاندارد و با کیفیت کنیم ، رعایت استانداردهای HTML/CSS در کدنویسی قالب این امر رو فراهم کرده است.

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

برای اینکه کدنویسی سایت خود را از نظر کدهای HTML5 ، HTML، XHTML  بررسی کنید میتوانید از سایت w3c استفاده کنید که ابزارهای خوبی برای آنالیز سایت شما دارد.

طراحی قالب وردپرس
طراحی قالب وردپرس

طراحی قالب استاندارد وردپرس

۲. رعایت استانداردهای برنامه نویسی کدهای وردپرس

همانطور که قبلا هم گفتیم وردپرس یک سیستم متن باز است که همین امر باعث میشه لیستی از کدها و استاندارد های پیاده سازی و توسعه را در خود داشته باشد که به این سبک کدنویسی  conventional گفته می شود. این یعنی قالب شما برای حفظ هماهنگی میان نسخه های مختلف ، بیشترین سازگاری را دارد و در نگاه اول قالب شما از نظر کدنویسی بی نقص است.

مثلا برنامه نویسی استاندارد وردپرس به شما اجازه استفاده کدهای کوتاه شده PHP را نخواهد داد٬ برای مثال :‌

[php] <? … ?> <?=$var?>
[/php]

و شما موظف هستید که از کدهای کامل php استفاده کنید. به مثال زیر توجه کنید:

[php] <?php $var; ?>
[/php]

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

طراحی قالب وردپرس

۳. هرگز تابع () wp_head وردپرس را فراموش نکنید

اگر به برنامه ی قالب های وردپرس دقت کرده باشید در واقع اصل کدها و کدهای مهم دربین تگ های <head>  و  </head> قرار میگیرند که میتوان به یکی از مهمترین توابع موجود بین این تگ یعنی تابع () wp-head  اشاره کرد. که شایدخیلی برای وردپرس کاران تازه کار تابع مهمی نباشد. اما نقش این تگ درمواقعی که پلاگین باید کدی را در هدر قالب شما قرار دهد پررنگ تر می‌شود . بدون این تگ خیلی از پلاگین ها ممکن است به دلیل کم بودن فایل های اجرا نشوند.

در فایل footer.php و تابع () wp-footer هم عملکردی مشابه بالا داریم. در واقع این تابع هم مثل تابعی که در بالا گفتیم عمل می کند. اما با یک تفاوت! و آن هم این که کدهای اجرایی این تابع در قسمت انتهایی سایت قرار میگیرند و اکثرا پلاگین های  محاسباتی  مانند Google analytics و بقیه از این تابع استفاده می‌کنند.

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

۴. عدم استفاده از کدهای موجود در قالب های دیگر

و اما یک اشتباه خیلی بزرگ و یک حرکت غیر حرفه ای در طراحی قالب وردپرس !!

اموزش طراحی قالب استاندارد وردپرس

بعضی از برنامه  نویسان برای اینکه در وقت خود صرفه جویی کنند از کدهایی که قبلا برای یک سایت دیگر نوشته اند استفاده می کنند و به اصطلاح خودمان عمل ناپسند  copy & paste  را انجام می دهند.که این کار واقعا اشتباه بزرگی است. برای هر قالب باید کد مخصوص خودش نوشته شود حتی اگر قسمتی از برنامه و کد با کد قالب دیگر یکی و یکسان باشد نباید هرگز کده قالب ها در هم کپی شود. چرا که خروجی به شما یک قالب با کیفیت بسیار پایین می دهد. این موضوع را در فارسی سازی قالب ها هم باید مد نظر قرار دهید. چون  فارسی سازی کردن قالب ها باعث تولید کدهای اضافی در قالب سایت می شود که نتیجه آن بهم ریختگی و آشفتگی کد های سایت است.

قالب استاندارد وردپرس
قالب استاندارد وردپرس

۵. مطمئن شوید که قالب با نسخه های جدید وردپرس همخوانی دارد

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

قبل از هر اقدامی به یک سوال پاسخ دهید؟!

آیا مطمئن هستید که قالب شما با نسخه ی جدید و آخرین ورژن وردپرس همخوانی دارد یا نه! اصلا می دانید که این قالبی که میخواهید استفاده کنید از نسخه ی چند وردپرس پشتیبانی میکند؟ اگر پاسختان منفی است من به شما افزونه ای را معرفی میکنم که با کمک آن بتوانید پاسخ پرسش های من را بدهید!

نام این افزونه هست: Theme-Check plugin

در واقع این افزونه به شما کمک می کند تا قالب خود را با آخرین تنظیمات موجود در  وردپرس هماهنگ کنید و به شما اعلام می کند که آیا قالب شما با نسخه های دیگر وردپرس به خوبی کار میکند یا نه!

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

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

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

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

شاد باشید.