السلام عليكم ورحمة الله وبركاته

بسم الله الرحمن الرحيم

https://i.suar.me/jY7w/l

[ للمهتمين بالتقديم فى ثيم فورست ]

فى البوست ده جمعت معظم الاخطاء اللى وقعت فيها انا وبعض اصدقاء عند تقديم الـ themes فى الماركت

علشان الناس متواجهش المشاكل دى

البوست هيكون متجدد ان شاء الله كل فترة هنزل بعض المشاكل اللى بتقابل الناس

واي حد حابب يضيف او يطور , يتفضل المجال متاح

واتمني ان شاء الله الجميع يستفاد

https://i.suar.me/ry29/l

1. CODE VALIDATION

Some of your files contain validation errors that will need to be fixed.

Please be sure that all files validate before resubmitting.

You can validate HTML at The W3C Markup Validation Service

[ المشكلة ]

ان الكود يكون html valid

[ سببها ]

منظمة w3school عاملين rules معينة لازم تلتزم بيها وانت بتكتب كود الـ HTML

طيب الـ RULES دى اوصلها ازاي ؟

من خلال المقال ده هما منزلين الـ RULES اللي مفروض تمشي عليها

https://validator.w3.org/docs/errors.html

[ حلها ]

بعد ما بتنهي الكود الخاص بيك بتبدأ تعمل Test للكود تشوف هو انت فعلاً التزمت بالمعايير اللى اتكلموا عنها ولالا ؟

من خلال اللينك ده بتكتب لينك الثيم الخاص بيك اونلاين وبتبدا تعمل تست عليه بيظهرلك الاخطاء والمشاكل وازاي تحلها

وتقدر كمان انك ترفع ملفـ كود الـ HTML LOCAL

The W3C Markup Validation Service

[ ليه ؟ =D ]

ايه الفكرة فى اني اهتم بان الكود بتاعي يكون Valid

الموضوع ده هيأثر مع مستخدم الثيم الخاص بيك بشكل كبير جداً من ناحية الـ SEO

وخاصة وان GOOGLE بقي من ال RULES المهمه جداً علشان تحسن الارشفة بتقولك ان لازم الصفحة بتاعتك تكون VALID مفيش مشاكل فيها فى الكود

كمان ده بيأثر فى اداء الموقع من حيث السرعة بيختلف وبيعطيك PERFORMANCE اعلي طبعاً .

https://i.suar.me/3lme/l

2. RESPONSIVE ISSUES

Your files are either inaccurately represented as responsive or have responsive layout issues.

Please take a moment to make sure that your design layout looks correct at different breakpoints

and that all text is scaled appropriately for smaller devices.

[ المشكلة ]

ان التصميم غير متوافق مع الـ SMART Devcies like phone

[ سببها ]

انك بعد ما خلصت التصميم اهتميت فقط بالمقاسات الكبيرة اللى هى زي مقاس اللاب فيما فوق ومهتمش

بالمقاسات الصغيرة زى الموبايل او التاب وغيره

[ حلها ]

بتبدا انك تقرأ فى ال media query وهنا منظمة w3 اتكلموا عن الموضوع

https://goo.gl/3HvseH

وده شرح للمهندس علي حمدي شارح فيه الموضوع بشكل كبير بانك تطلع الصفحة كاملة responsive " متجاوبة "

https://goo.gl/vrVAqH

[ ليه ؟ =D ]

لو بصيت علي آخر الاحصائيات للمستخدمين هتلاقي ان النسبة الاكبر للموبايل

معظمنا بقي بيخلص معظم شغله من على الموبايل

فـ الطبيعي وانت شغال ان يكون من اولويات شغلك الاهتمام بالموبايل والتابلت وغيره ..

https://i.suar.me/7OXo/l

3. TYPOGRAPHIC HIERARCHY

The typographic hierarchy of this item requires additional work.

For more information, please read:

https://goo.gl/jJf2Br

[ المشكلة ]

ان الـ Template بتاعك مكنتش مهتم بيه بمعاير التسلسل او كما يطلق الهرم الطبقي

[ سببها ]

انك مهتمش وانت شغال بالتسلسل فى التصميم بمعني ؟

انك على سبيل المثال فى بتصمم صفحة لمقالة معينة

الطبيعي اني اول ما افتح المقالة اول حاجه مفروض عيني تروح عليها هي عنوان المقالة

فـ انا لو فتحت المقالة وملاحظتش العنوان من اول نظره كده التصميم فيه مشكلة !

فـ وانا شغال بنظام التسلسل الطبيعي ان وليكن العنوان هيكون ليه حجم معين خط معين بحيث يكون مميز

عن الوصف الخاص بالمقالة عن المحتوي عن غيره ..

التسلسل انى ببدا من الاكبر للاصغر للاصغر الحالة الوحيدة اللى تقدر تكسر فيها القاعدة دى انك محتاج حاجه معينة تكون ظاهرة بشكل مميز ومختلف

زى سعر منتج او خلافه

[ حلها ]

اقرا فى المقالة دى هتستفاد بشكل كبير

https://goo.gl/jJf2Br

[ ليه ؟ =D ]

من اهم العوامل اللى بتريح العين لما العميل يتفرج على الشغل او الزائر عموماً يكون مرتاح وهو بيشوف المقالة او بيقرا شئ معين

ان تكون عينه مرتاحة لانه شايفك مقسم الشغل بشكل منظم مراعي مسافاتك خطوطك احجامك الوانك وهكذا

https://i.suar.me/o0Wm/l

4. SPACING AND ALIGNMENT

There are spacing and alignment issues in this item.

Please make sure that all elements are aligned properly and spacing is consistent from section to section.

Here are some articles with more information regarding negative space and proper spacing:

https://goo.gl/xPfI96

https://goo.gl/V7D41k

[ المشكلة ]

المسافات والمحاذاة لعناصر التصميم غير متساوية

[ سببها ]

نبدأ اولاً بالمسافات

الطبيعي ان تكون المسافات بين كل سكاشن الموقع متساية بمعني ان وليكن

سكشن الخدمات لازم يكون قبله وبعده 100 بكسل

على سبيل المثال وهكذا فى باقي السكاشن

مينفعش انك فى كل سكشن تعمل مقاس مختلف قبله ومقاس مختلف بعده

لان هو مقاس واحد بتمشي عليه

  • كمان المسافات بين العناصر داخل التصميم لازم تكون متساية

بمعني ان عنصر زى ايقونات السوشيال ميديا

المسافات على جوانب ايقونة الاولي لازم تساوي الثانية لازم تساوي الثالثه وهكذا ..

  • كمان موضوع المسافات الايجابية والمسافات السلبية بمعني ؟

فى اماكن معينة محتاج انك تظهرها بشكل يلفت الزائر هنا بتحتاج تسيب ممكن حوالة مسافة اكبر من باقي العناصر وى اسمها مسافة ايجابية

على النقيض لما بتستخدم مسافات اكبر من اللازم دى اسمها مسافة سلبية

ثانياُ الـ alignment

المحاذاة لعناصر التصميم ودي طبعاً بتعتمد على الgrid المستخدم

لازم وانت شغال تكون بتستخدم grid يكون مقسملك شغلك بشكل متساوي

فى حالة الكود طبعاً تقدر تستخدم bootstrap grid وتقدر تقرأ عنه من هنا

https://goo.gl/XDHLjq

فى حالة انك بتصمم على الفوتشوب تقدر تستخدم ده

https://goo.gl/GdSwP4

بحيث انك فى النهاية لما تيجي تاخد صورة كاملة للموقع تبقي السكاشن كلها فى محاذاة لبعضها البداية من اليمين كلها على خط واحد وكذلك الشمال على خط واحد

مفيش عنصر يكون بره الجريد

[ حلها ]

اقرا فى المقالة دى هتستفاد بشكل كبير

https://goo.gl/xPfI96

ودى كمان

https://goo.gl/V7D41k

[ ليه ؟ =D ]

عشان شغلك يكون شكله منظم ومريح للعين

https://i.suar.me/xvNQ/l

5. TRADEMARK VIOLATION

Your submission contains apparently trademarked names or assets (logos, etc) not adhering

to our content policy.

[ المشكلة ]

استخدامك لعلامة تجارية بشكل غير مصرح به

[ سببها ]

وليكن انك بتشتغل فى template شركة استضافة

لان ده مثال حصل معايا كنت مستخدم صورة سيرفر وكان عليها لوجو hp

جالي ان التصميم اترفض بسبب ان اللوجو موجود على الصورة بشكل غير مصرح به او غير مصرح تداوله تجارياً

[ حلها ]

وانت بتختار الصور اللى هتستخدمها فى التصميم دايماً راعي انك تكون بعيد عن استخدام اي علامات تجارية

حابب تستخدم علامات تجارية envato بتوفر ليك الحل ده ف انك تستخدم العلامات التجارية الخاصة بيهم وتقدر تحملها من هنا

https://goo.gl/Rhxks6

ودى بعض المواقع اللى بستخدمها لما بجمع صور التصميم واللى مصرح باستخدامها بشكل مجاني

https://goo.gl/DHrNbZ

https://goo.gl/qM7z4J

https://goo.gl/SCSR15

https://i.suar.me/8dmO/l

6. Make sure the CSS file is well documented with proper table of contents.

[ المشكلة ]

ملفات ال css الخاصه بالثيم غير منظمه

[ سببها ]

انك لما عملت ملف css مهتمتش انك تعمل كومنتات على كل سكشن رئيسي او العناصر المهمة

انك معملتش جدول فى بداية الملف وضحتله ايه العناصر اللى موجودة فى الملف ده

[ حلها ]

فى بداية الملف بتبدا تكتب معلومات عن الثيم زي

author , author website , date , tags , updates , ...

وتقدر تستخدم حاجه زى كده

/*

Theme Name: Twenty Thirteen

Theme URI: http://wordpress.org/themes/twentythirteen

Author: the WordPress team

Author URI: http://wordpress.org/

Description: The 2013 theme for WordPress takes us back to the blog, featuring a full range of post formats, each displayed beautifully in their own unique way. Design details abound, starting with a vibrant color scheme and matching header images, beautiful typography and icons, and a flexible layout that looks great on any device, big or small.

Version: 1.0

License: GNU General Public License v2 or later

License URI: GNU General Public License v2.0 - GNU Project - Free Software Foundation

Tags: black, brown, orange, tan, white, yellow, light, one-column, two-columns, right-sidebar, flexible-width, custom-header, custom-menu, editor-style, featured-images, microformats, post-formats, rtl-language-support, sticky-post, translation-ready

Text Domain: twentythirteen

This theme, like WordPress, is licensed under the GPL.

Use it to make something cool, have fun, and share what you've learned with others.

*/

الخطوة اللى بعدها بتبدا تعمل جدول توضح فيه العناصر الموجودة فى التصميم

like header , services , about , footer , ..

و تقدر تستخدم حاجه زى كده

/* ************************************************** ***

  • Sections :

  • Fonts

  • Header

  • Slider

  • Domain

  • Host Planes

  • services

  • Works

  • Widgets

  • Footer

************************************************** *** */

طبعاً كل المعلومات دى بتكون داخل comments /* .. */

وتقدر تعدل فى شكل الكومنت زى ما تحب لكن اهم حاجه انك تكتب التفاصيل دي

  • كمان فى ملحوظة خاصة بالـ css

حاول استخدامك ل

rule > !important

يكون بشكل قليل جداً لانك لو استخدمتها كتير هيبدا المراجع يقولك انت ليه مستخدمها كثير ولازم تقل عن كده وهكذا

وطبعاً فى معظم الاحيان استخدامك لل rule دى ناتج انك بتجبر عنصر معين على تنفيذ حاجه معينه ودى تقدر تحلها ب nestin elements

وتتفادي المشكلة دى

https://i.suar.me/w6ea/l

7. LOCAL COPY OF LIBRARIES

please make sure you include and use a local copy of all the files need it for the template to run correctly.

[ المشكلة ]

ان ملفات الجافا او ال css بتحمل من مصدر خارجي مش من ملفات الثيم نفسه

[ سببها ]

انك لما بتيجي تربط ملف زى ملف ال jquery على سبيل المثال ممكن انك تستخدم لينك اونلاين ليه من CDN زي ده

ف الملف طبعاً بيعمل load online

ف بيبدا ان العميل لو بيعمل تست للثيم وفى مشكلة فى النت طبعاً الجى كويري مبيشتغلش لانه بيلود اونلاين وطبعاً هتقف كل ال plugins

[ حلها ]

انك تكون مأمن نفسك من الموضوع ده وتخلي الملفات تحمل من الثيم نفسه فيكون الملف بالشكل ده

وان الملفات كلها تكون بتحمل بشكل local