ازاى أعمل تمبليت وارفعه على ثيم فورست

ازاى أعمل تمبليت وارفعه على ثيم فورست

هتكلم بالتفصيل فى البوست دة عن ازاى تجهز وترفع شغلك على متجر ثيم فورست.

اولاً:

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

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

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

وبرضه نراعى فى التصميم الصور لازم تاخد راحتها فى التحجيم يعنى التمبلت هيبقى متجاوب فكل حجم شاشة هيعيد تحجيم الصورة للى يناسبه فنخلى الصور تاخد خاصية Max-width 100% دة بيخلى الصورة تتحجم على حسب المساحة اللى هى فيها مهما تكبر او تصغر هتتمدد او ممكن لو انت شغال بوتستراب تديها كلاس img-responsive .
------------------------------------------------------------------------------------------ 

ثانياً:

----
فى ال html الكود بتاعك لازم يكون كل حاجة معمولها كومنت بحيث ان اللى هيشترى التمبلت بتاعك يعرف راسه من رجليه سواء هو او اللى هيستلم منه التمبلت يعدل عليه ولازم يكون الترتيب شجرى ميكونش كل الاكواد على عمود واحد لا لو عندك مثلا ديف جواه ديفات الديفات اللى جواه ديه تكون واخدة ازاحة بعيد عن العمود بتاعه بحيث يعرف ان المحتوى دة جوة الديف دة وهكذا طبعا كل حاجة فى الصور هتبان.
-----------------------------------------------------------------------------------------

فى ال css الملف يكون فيه فوق وصف للتمبلت بتاعك يعنى بيانات خفيفة كدة عنه ويبقى تحت البيانات ديه زى عمود كدة فى محتوى الملف يعنى انت مثلا فى الملف منسق ال Body وال header وهكذا تكتب فى العمود دة انك ماشى بالترتيب نفسه يعنى اكنه خريطة للملف وكمان فى التنسيق لو انت فى الاتش تى ام ال عامل مثلا سيكشن وجواه هيدنج و ديف و براجراف يبقى لما تيجى تنسقه تمشى بنفس الترتيب تنسق السيكشن وبعدين الهيدنج وبعدين الديف وبعدين البراجراف وهكذا...
-----------------------------------------------------------------------------------------

فى الجافاسكريبت بقى نراعى الاتى اول حاجة اى حاجة هتستخدمها كتير تعملها cash بمعنى تخنزهم فى متغيرات وتستخدم انت المتغيرات ديه براحتك لان دة بيحسن الاداء وبيخفف اللود على الصفحة وكمان ديما تستخدم طريقة ال on بمعنى لو زرار هتدوس عليه متكتبش button.click لا تستخدم 
button.on('click')
وطبعا انك تعمل كومنت لكل حاجة دة شئ مفروغ منه متسبش حاجة غير بكومنت
------------------------------------------------------------------------------------------

ثالثا:

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

رابعاً:

------
تجهيز الملفات بقى سهل جدا :
1- التمبلت ملفاته تكون فى فولدر باسمه ويكون التمبلت منظم فى ملفاته يعنى تعمل فولدر لملفات ال css وفولدر لملفات الفونت وفولدر لملفات ال javascript المهم كدة فولدر التمبلت تمام نعلم عليه هو وفولدر ال documentation ونختار add to archive هيطلع نافذة نختار منها zip وندوس اوك هيطلع ملف مضغوط ادى كدة ملف. وطبعا اهم حاجة فى الملفات بتاعة التمبلت اى صور تشيلها خالص وتحط مكانها صور من موقع placehold it

2- نصمم صورة للعرض اللى هى هتبقى البريفيو للتمبلت اللى هى اول حاجة المشترى هيشوفها تكون بالابعاد ديه 590 عرض و 300 طول وطبعا تكون حلوة وبسيطة متعملش فيها فرح عشان متوجعش العين خلى بالك الصورة لوحدها ممكن تكون عامل ان التمبلت يجيب مشترى لانها عامل جذب ولما نعملها نعمل نفس اللى عملناه ندوس كليك يمين عليها ونختار add to archive ونختار zip وندوس اوك.

3- الايقونة ديه بقى مش هنعمل فيها حاجة غير اننا هنصممها بس صورة بحجم 80 فى 80 مربعة يعنى يكون فيها اسم التمبلت مثلا ومش هنضغطها هنسيبها زى ما هى وكدة الملفات جهزت للرفع .
----------------------------------------------------------------------------------------

خامساً:

-------
رفع الملفات :
سهل جدا هنروح الاكونت بتاعنا على ثيم فورست ونجيب ال dashboard وعند خانة Upload an item نختار القسم اللى هنرفع فيه وندوس next 
بعد كدة هتلاقى خانة الاسم وبعدين خانة الوصف هتحط اسم التمبلت فى اول خانة 
تانى خانة بقى فى ملف صغير هرفعه برضه اسمه description >ة ملف Html اهبل خالص مش محتاج حاجة بتعدل عليه عادى وتنسخ الاكواد والمحتوى بتاعه زى ما هو بعد ما تكتب طبعا تعديلك انت فى المعلومات بتاعة التمب وتحطه فى خانة الوصف فى الموقع لان خانة الوصف بتقبل تنسيق ال html والوصف دة اللى بيظهر تحت صورة التمبلت اللى هى صورة العرض 
ومن ضمن الحجات فى الوصف انك تحط برضه اى مصدر انت استخدمته زى البوتستراب والجى كويرى وخطوط جوجل وفى حاجة اضافية اى صور هتستخدمها فى التمبلت فى اللينك اللى هيعمل Live preview يعنى اللينك بتاع المعاينة تبقى صور free من غير حقوق نشر وطبعا فى مواقع كتير بتديك صور ببلاش ومفهاش حقوق نشر زى مثلا pixabay واوعى تجيب صور من جوجل لا خش على الموقع دة ونقى صور واستخدمها براحتك وهو فى صور جميلة وطبعا فى الوصف هتحط لينك الموقع اللى جبت منه الصور.

بعد كدة هتلاقى خانة choose files to upload
هتختار الملفات اللى عملناها اللى هى الملفين المضغوطين وملف الايقونة
وتستنى لما يرفع ويجبلك على كله صح هتلاقى تحت فى خانات فاضية للبريفيو والملفات والايقونة هتفتح كل واحة وتختار الملف اللى يناسبها وهتلاقى كل حقل بيقولك تحط ايه متقلقش.

بعد كدة هتلاقى التصنيف وشوية بيانات كدة انا موضحها فى الصور سهلة جدا يعنى الجزء الصعب خلص فى الاخر هتدوس upload ومبروك عليك التمبلت راحلهم وهيتراجع وهيبعتو ليك اميل بالتفاصيل بعد المراجعة.
------------------------------------------------------------------------------------------

لو فى اى حاجة كلمونى.